mirrors/mStream
3
0
Fork 0
mirror of https://github.com/IrosTheBeggar/mStream.git synced 2025-10-27 07:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

No more paper player. Other file organization

Browse Source
This commit is contained in:
IrosTheBeggar 2017-01-24 01:42:21 -05:00
parent 284466b64d
commit cb84aa4657
431 changed files with 662 additions and 127992 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
SKININNG.md → docs/SKININNG.md
View File

0
exampleJSON/allOptions.json → docs/exampleJSON/allOptions.json
View File

0
exampleJSON/exampleNewJSON.json → docs/exampleJSON/exampleNewJSON.json
View File

0
exampleJSON/remote.json → docs/exampleJSON/remote.json
View File

0
exampleJSON/skeleton.json → docs/exampleJSON/skeleton.json
View File

5
modules/configure-json-file.js
View File

@ -15,6 +15,11 @@ exports.setup = function(args, rootDir){
return {error:"Failed to parse JSON file"};
}
console.log(loadJson);
console.log(loadJson);
console.log(loadJson);
if(!loadJson.port){
loadJson.port = 5050;

99
modules/jukebox.js Normal file
View File

@ -0,0 +1,99 @@
// TODO: Properly integrate this
//https://gist.github.com/martinsik/2031681
// Websocket Server
const WebSocketServer = require('ws').Server;
// list of currently connected clients (users)
var clients = { };
exports.setup = function(mstream, server, program){
const wss = new WebSocketServer({ server: server });
// This callback function is called every time someone
// tries to connect to the WebSocket server
wss.on('connection', function(connection) {
// accept connection - you should check 'request.origin' to make sure that
// client is connecting from your website
// var connection = request.accept(null, request.origin);
console.log((new Date()) + ' Connection accepted.');
// Generate code and assure it doesn't exist
var code;
var n = 0;
while (true) {
code = Math.floor(Math.random()*90000) + 10000;
if(!(code in clients)){
break;
}
if(n === 10){
console.log('Failed to create ID for jukebox.');
// FIXME: Close connection
return;
}
n++;
}
// Send Code
connection.send(JSON.stringify( { code: code} ));
// Add code to clients object
clients[code] = connection;
// user sent some message
connection.on('message', function(message) {
if (message.type === 'utf8') { // accept only text
// Send client code back
connection.send(JSON.stringify( { code: code} ));
// FIXME: Will need some work to add more commands
}
});
// user disconnected
connection.on('close', function(connection) {
// Remove client from array
delete clients[code];
});
});
// TODO: Get Album Art calls
mstream.post( '/push-to-client', function(req, res){
// Get client id
console.log(req.body.json);
const json = JSON.parse(req.body.json);
console.log(json);
console.log(json.code);
console.log(json.command);
// Check if client ID exists
const clientCode = json.code;
const command = json.command;
console.log(clientCode);
console.log(clientCode);
console.log(clientCode);
console.log(command);
if(!(clientCode in clients)){
res.status(500).json({ error: 'Client code not found' });
}
// TODO: Check if command logic makes sense
// Push commands to client
clients[clientCode].send(JSON.stringify({command:command}));
// Send confirmation back to user
res.json({ status: 'done' });
});
}

92
mstream.js
View File

@ -400,8 +400,8 @@ mstream.post('/download', function (req, res){
// ============================================================================
// // New Way
// // TODO: We need to pull this from the program var
// New Way
// We need to pull this from the program var
var dbSettings = program.database_plugin;
const mstreamDB = require('./modules/db-management/database-master.js');
mstreamDB.setup(mstream, program);
@ -426,92 +426,10 @@ mstream.post( '/get-album-art', function(req, res){
});
// TODO: Properly integrate this
//https://gist.github.com/martinsik/2031681
// Websocket Server
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ server: server });
// list of currently connected clients (users)
var clients = { };
// This callback function is called every time someone
// tries to connect to the WebSocket server
wss.on('connection', function(connection) {
// accept connection - you should check 'request.origin' to make sure that
// client is connecting from your website
// var connection = request.accept(null, request.origin);
console.log((new Date()) + ' Connection accepted.');
// Generate code and assure it doesn't exist
var code;
var n = 0;
while (true) {
code = Math.floor(Math.random()*90000) + 10000;
if(!(code in clients)){
break;
}
if(n === 10){
console.log('Failed to create ID for jukebox.');
// FIXME: Close connection
return;
}
n++;
}
// Send Code
connection.send(JSON.stringify( { code: code} ));
// Add code to clients object
clients[code] = connection;
// user sent some message
connection.on('message', function(message) {
if (message.type === 'utf8') { // accept only text
// Send client code back
connection.send(JSON.stringify( { code: code} ));
// FIXME: Will need some work to add more commands
}
});
// user disconnected
connection.on('close', function(connection) {
// Remove client from array
delete clients[code];
});
});
// TODO: Get Album Art calls
mstream.post( '/push-to-client', function(req, res){
// Get client id
console.log(req.body.json);
const json = JSON.parse(req.body.json);
console.log(json);
// Check if client ID exists
const clientCode = json.code;
const command = json.command;
if(!(clientCode in clients)){
res.status(500).json({ error: 'Client code not found' });
}
// TODO: Check if command logic makes sense
// Push commands to client
clients[clientCode].send(JSON.stringify({command:command}));
// Send confirmation back to user
res.json({ status: 'done' });
});
// JukeBox
const jukebox = require('./modules/jukebox.js');
jukebox.setup(mstream, server, program);

31
public-shared/css/shared.css
View File

@ -9,9 +9,23 @@ body{
.header{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height:20px;
height:25px;
}
.mstream-image{
height:100%;
background-color: white;
border-radius: 0 0 3px 3px;
box-shadow: 0 0 5px #8D8D8D;
}
.logo-box{
overflow-y: visible;
width: 1px;
height: 140%;
margin-left: 35px;
z-index: 99;
}
.playlist-header{
@ -34,6 +48,7 @@ body{
overflow-y: scroll;
height:calc(100% - 120px);
background-color: rgba(250,250,250, .50);
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
#playlist{
@ -42,8 +57,8 @@ body{
}
.playlist-item{
height:30px;
border-bottom: 1px solid black;
height:auto;
border-bottom:solid 1px #b4b4b4;
cursor: pointer;
width: 100%;
@ -144,10 +159,12 @@ body{
background-color: rgba(255,0,0, .85);
}
.song-area{
height: 100%;
display: block;
width: calc(100% - 29px);
width: calc(100% - 49px);
float: left;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 12px;
}
@ -183,7 +200,7 @@ body{
font-style: normal;
margin-top: 3px;
margin-left: 5px;
margin-left: 2px;
padding-bottom: 17px; /* This pushes the scr */
overflow-x: scroll;

34
public-shared/img/mstream-logo.svg Normal file
View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 153" style="enable-background:new 0 0 612 153;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#264679;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6684B2;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#26477B;}
</style>
<g>
<path class="st0" d="M179.9,45.5c-6.2,0-11.5,1.7-15.9,5c-4.4,3.3-6.5,8.1-6.5,14.4c0,4.9,1.3,9.1,3.8,12.4
c2.5,3.4,5.7,5.8,9.3,7.3c3.7,1.5,7.3,2.8,11,3.8c3.7,1,6.8,2.3,9.3,3.9c2.5,1.5,3.8,3.5,3.8,5.8c0,4.8-4.4,7.2-13.1,7.2h-24.1V118
h24.1c17.1,0,25.6-6.7,25.6-20.2c0-1.9-0.2-3.8-0.6-5.8c-0.4-2-1.2-4-2.6-6c-1.3-2.1-3.3-3.7-5.8-4.9c-2.5-1.2-6.4-2.7-11.5-4.5
l-8.8-3.1c-0.7-0.2-1.7-0.7-2.9-1.3c-1.3-0.7-2.2-1.3-2.8-1.9c-0.6-0.6-1.1-1.4-1.6-2.3c-0.5-0.9-0.7-2-0.7-3.2c0-2,1-3.5,2.9-4.6
c1.9-1.1,4.3-1.6,7-1.6h24.6V45.5H179.9z"/>
<path class="st0" d="M226.4,58.3v31c0,10.2,2.5,17.6,7.6,22c5.1,4.4,13,6.6,23.7,6.6v-12.8c-2.7,0-4.9-0.2-6.8-0.4
c-1.8-0.3-3.7-0.9-5.8-1.9c-2-0.9-3.6-2.6-4.7-4.9c-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214,58.3H226.4z"/>
<path class="st0" d="M281.1,118V76.8c0-7.2,0.9-12,2.6-14.5c1-1.3,2.2-2.2,3.6-2.8c1.4-0.6,2.6-1,3.6-1.1c1-0.1,2.5-0.1,4.3-0.1
H310V45.5h-12.2c-3.6,0-6.5,0.1-8.6,0.3c-2.1,0.2-4.5,0.9-7.3,2c-2.8,1.1-5.1,2.8-7.1,5c-4,4.4-6,12.4-6,24V118H281.1z"/>
<path class="st0" d="M326.2,53.8c-6.2,7.4-9.3,17-9.3,28.9c0,10.7,3.2,19.4,9.5,26.2s14.7,10.1,25.3,10.1c8.7,0,16.3-2.7,22.7-8.1
L366,102c-3.7,2.1-8.5,3.2-14.3,3.2c-6.5,0-11.8-2.3-15.8-6.9c-4-4.6-6-10.5-6-17.9c0-7,1.9-12.9,5.6-17.9c3.8-5,8.9-7.5,15.5-7.5
c3.3,0,6.1,0.8,8.2,2.4c2.1,1.6,3.2,4,3.2,7.2c0,5-1.2,8.5-3.6,10.6c-2.4,2.1-6.7,3.2-12.9,3.2h-6.7v11.7h5.7
c20.3,0,30.5-8.5,30.5-25.4c0-13.6-7.9-20.7-23.7-21.5C340.9,43,332.4,46.5,326.2,53.8z"/>
<path class="st0" d="M412.3,73.2c-7.4,0-13.6,1.9-18.5,5.7c-4.9,3.8-7.4,9.4-7.4,16.7c0,7.3,2.3,12.9,7,16.7
c4.6,3.8,10.9,5.7,18.8,5.7h31V73.6c0-9.1-2.4-16-7.2-20.8c-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9,0,16.4,6.1,16.4,18.2
v28.7h-18.4c-9.1,0-13.6-3.2-13.6-9.8c0-3.3,1.2-5.9,3.6-7.8c2.4-1.8,5.8-2.7,10.2-2.7c5.1,0,9.4,1.4,12.9,4.3V75.3
C420.9,73.9,416.5,73.2,412.3,73.2z"/>
<path class="st0" d="M458.8,118H471V58.3h24.4V118h12.2V58.3h5.7c6.8,0,11.3,0.7,13.5,2c4.3,2.5,6.5,7.7,6.5,15.5V118h12.2V75.7
c0-6-0.6-11.2-1.9-15.5c-1.2-4.3-3.9-7.8-7.9-10.6c-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/>
<polygon class="st1" points="75,118.5 75,35.5 96,48.5 96,118.5 "/>
<polygon class="st2" points="99,118.5 99,49.5 110.5,56.5 121,49.5 121,118.5 "/>
<polygon class="st1" points="124,118.5 124,48.5 145,35.5 145,118.5 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

5
public-shared/mstream.html
View File

@ -206,6 +206,7 @@
// Check the key
switch (event.keyCode) {
case 32: //SpaceBar
event.preventDefault();
MSTREAM.playPause();
break;
}
@ -219,7 +220,9 @@
<!-- Header -->
<div class="header">
<img class="mstream-image" src="/public-shared/img/mstream-logo.svgz">
<div class="logo-box">
<img class="mstream-image" src="/public-shared/img/mstream-logo.svg">
</div>
</div>
<!-- Playlist Header -->

151
public/css/master.css
View File

@ -45,7 +45,7 @@ background-color: #E6EBFA !important;
height: calc(100% - 95px);
}
.scrollBoxHeight2{
height: calc(100% - 140px);
height: calc(100% - 50px);
}
.playerControls{
height: 90px;
@ -449,3 +449,152 @@ h3 {
display: block;
margin: auto;
}
.mstream-player{
position:absolute;
bottom:0;
width:100%;
height: 50px;
overflow: hidden;
box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.75);
}
.previous-button{
position:relative;
height: 100%;
width:50px;
background-color: #333333;
float:left;
overflow:hidden;
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);
cursor:pointer;
}
.play-pause-button{
height: 100%;
width:50px;
background-color: rgb(102, 132, 178);
float:left;
overflow:hidden;
cursor:pointer;
}
.next-border{
height: 100%;
padding: 8px;
}
.previous-border{
height: 100%;
padding: 8px;
}
.play-pause-border{
border-left: 5px solid rgb(102, 132, 178);
border-top: 5px solid rgb(102, 132, 178);
height: 100%;
padding: 3px;
}
.next-button{
height: 100%;
width:50px;
background-color: #333333;
float:left;
position: relative;
overflow:hidden;
box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);
cursor:pointer;
}
.progress-bar{
height: 100%;
width: calc(100% - 152px);
background-color: rgba(51,51,51,.15);
float:left;
overflow-x: hidden;
border-right: 2px solid rgba(51,51,51,.15);
cursor: crosshair;
}
.removeSong{
width: 29px !important;
height: 33px;
background-color: rgba(255,0,0, .7);
float: right;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
text-align: center;
font-size: 28px;
text-shadow: 0 1px darkred;
padding-bottom: 5px;
font-family: "Arial Black", Gadget, sans-serif;
opacity: 0.9;
}
.removeSong:hover{
opacity: 1;
background-color: rgba(255,0,0, .85);
}
.song-area{
display: block;
width: calc(100% - 49px);
float: left;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 12px;
}
.titlebar{
height: 50%;
width:calc(100% - 190px);
background-color: rgba(255, 255, 255,0.7);
position: absolute;
margin-top: 10px;
border-radius: 5px;
box-shadow: 3px 3px 3px #888888;
margin-left: 20px;
overflow-y: hidden;
white-space: nowrap; /* This is the secret to make text scroll left-to-right*/
}
.pbar{
background-color: rgb(102, 132, 178);
height: 100%;
}
.playing{
background-color: #E6EBFA !important;
}
.title-text{
width: calc(100% - 100px);
float:left;
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
margin-top: 3px;
margin-left: 2px;
padding-bottom: 17px; /* This pushes the scr */
overflow-x: scroll;
overflow-y: hidden;
}
.duration-text{
float: right;
width: 90px;
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
margin-top: 3px;
text-align: right;
margin-right: 5px;
}

BIN
public/img/album-art.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 177 KiB

0
public/img/mstream.png → public/img/designs/mstream-concept.png Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 MiB

After

Width:  |  Height:  |  Size: 7.3 MiB

0
public/img/mstream-current.png → public/img/designs/mstreamV1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

0
public/img/mstream-paper.png → public/img/designs/mstreamV2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 192 KiB

201
public/js/foundation/foundation.abide.js vendored
View File

@ -1,201 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.abide = {
name : 'abide',
version : '5.0.0',
settings : {
focus_on_invalid : true,
timeout : 1000,
patterns : {
alpha: /[a-zA-Z]+/,
alpha_numeric : /[a-zA-Z0-9]+/,
integer: /-?\d+/,
number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
// generic password: upper-case, lower-case, number/special character, and min 8 characters
password : /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,
// amex, visa, diners
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
cvv : /^([0-9]){3,4}$/,
// http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
url: /(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
// abc.de
domain: /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/,
datetime: /([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))/,
// YYYY-MM-DD
date: /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/,
// HH:MM:SS
time : /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}/,
dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
// MM/DD/YYYY
month_day_year : /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
// #FFF or #FFFFFF
color: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
}
},
timer : null,
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function (scope) {
var self = this,
form = $(scope).attr('novalidate', 'novalidate'),
settings = form.data('abide-init');
form
.off('.abide')
.on('submit.fndtn.abide validate.fndtn.abide', function (e) {
var is_ajax = /ajax/i.test($(this).attr('data-abide'));
return self.validate($(this).find('input, textarea, select').get(), e, is_ajax);
})
.find('input, textarea, select')
.off('.abide')
.on('blur.fndtn.abide change.fndtn.abide', function (e) {
self.validate([this], e);
})
.on('keydown.fndtn.abide', function (e) {
var settings = $(this).closest('form').data('abide-init');
clearTimeout(self.timer);
self.timer = setTimeout(function () {
self.validate([this], e);
}.bind(this), settings.timeout);
});
},
validate : function (els, e, is_ajax) {
var validations = this.parse_patterns(els),
validation_count = validations.length,
form = $(els[0]).closest('form'),
submit_event = /submit/.test(e.type);
for (var i=0; i < validation_count; i++) {
if (!validations[i] && (submit_event || is_ajax)) {
if (this.settings.focus_on_invalid) els[i].focus();
form.trigger('invalid');
$(els[i]).closest('form').attr('data-invalid', '');
return false;
}
}
if (submit_event || is_ajax) {
form.trigger('valid');
}
form.removeAttr('data-invalid');
if (is_ajax) return false;
return true;
},
parse_patterns : function (els) {
var count = els.length,
el_patterns = [];
for (var i = count - 1; i >= 0; i--) {
el_patterns.push(this.pattern(els[i]));
}
return this.check_validation_and_apply_styles(el_patterns);
},
pattern : function (el) {
var type = el.getAttribute('type'),
required = typeof el.getAttribute('required') === 'string';
if (this.settings.patterns.hasOwnProperty(type)) {
return [el, this.settings.patterns[type], required];
}
var pattern = el.getAttribute('pattern') || '';
if (this.settings.patterns.hasOwnProperty(pattern) && pattern.length > 0) {
return [el, this.settings.patterns[pattern], required];
} else if (pattern.length > 0) {
return [el, new RegExp(pattern), required];
}
pattern = /.*/;
return [el, pattern, required];
},
check_validation_and_apply_styles : function (el_patterns) {
var count = el_patterns.length,
validations = [];
for (var i = count - 1; i >= 0; i--) {
var el = el_patterns[i][0],
required = el_patterns[i][2],
value = el.value,
is_equal = el.getAttribute('data-equalto'),
is_radio = el.type === "radio",
valid_length = (required) ? (el.value.length > 0) : true;
if (is_radio && required) {
validations.push(this.valid_radio(el, required));
} else if (is_equal && required) {
validations.push(this.valid_equal(el, required));
} else {
if (el_patterns[i][1].test(value) && valid_length ||
!required && el.value.length < 1) {
$(el).removeAttr('data-invalid').parent().removeClass('error');
validations.push(true);
} else {
$(el).attr('data-invalid', '').parent().addClass('error');
validations.push(false);
}
}
}
return validations;
},
valid_radio : function (el, required) {
var name = el.getAttribute('name'),
group = document.getElementsByName(name),
count = group.length,
valid = false;
for (var i=0; i < count; i++) {
if (group[i].checked) valid = true;
}
for (var i=0; i < count; i++) {
if (valid) {
$(group[i]).removeAttr('data-invalid').parent().removeClass('error');
} else {
$(group[i]).attr('data-invalid', '').parent().addClass('error');
}
}
return valid;
},
valid_equal: function(el, required) {
var from = document.getElementById(el.getAttribute('data-equalto')).value,
to = el.value,
valid = (from === to);
if (valid) {
$(el).removeAttr('data-invalid').parent().removeClass('error');
} else {
$(el).attr('data-invalid', '').parent().addClass('error');
}
return valid;
}
};
}(jQuery, this, this.document));

41
public/js/foundation/foundation.accordion.js vendored
View File

@ -1,41 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.accordion = {
name : 'accordion',
version : '5.0.1',
settings : {
active_class: 'active',
toggleable: true
},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
$(this.scope).off('.accordion').on('click.fndtn.accordion', '[data-accordion] > dd > a', function (e) {
var accordion = $(this).parent(),
target = $('#' + this.href.split('#')[1]),
siblings = $('> dd > .content', target.closest('[data-accordion]')),
settings = accordion.parent().data('accordion-init'),
active = $('> dd > .content.' + settings.active_class, accordion.parent());
e.preventDefault();
if (active[0] == target[0] && settings.toggleable) {
return target.toggleClass(settings.active_class);
}
siblings.removeClass(settings.active_class);
target.addClass(settings.active_class);
});
},
off : function () {},
reflow : function () {}
};
}(jQuery, this, this.document));

34
public/js/foundation/foundation.alert.js vendored
View File

@ -1,34 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.alert = {
name : 'alert',
version : '5.0.0',
settings : {
animation: 'fadeOut',
speed: 300, // fade out speed
callback: function (){}
},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
$(this.scope).off('.alert').on('click.fndtn.alert', '[data-alert] a.close', function (e) {
var alertBox = $(this).closest("[data-alert]"),
settings = alertBox.data('alert-init');
e.preventDefault();
alertBox[settings.animation](settings.speed, function () {
$(this).trigger('closed').remove();
settings.callback();
});
});
},
reflow : function () {}
};
}(jQuery, this, this.document));

450
public/js/foundation/foundation.clearing.js vendored
View File

@ -1,450 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.clearing = {
name : 'clearing',
version: '5.0.0',
settings : {
templates : {
viewing : '<a href="#" class="clearing-close">&times;</a>' +
'<div class="visible-img" style="display: none"><img src="//:0">' +
'<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
'<a href="#" class="clearing-main-next"><span></span></a></div>'
},
// comma delimited list of selectors that, on click, will close clearing,
// add 'div.clearing-blackout, div.visible-img' to close on background click
close_selectors : '.clearing-close',
// event initializers and locks
init : false,
locked : false
},
init : function (scope, method, options) {
var self = this;
Foundation.inherit(this, 'throttle loaded');
this.bindings(method, options);
if ($(this.scope).is('[data-clearing]')) {
this.assemble($('li', this.scope));
} else {
$('[data-clearing]', this.scope).each(function () {
self.assemble($('li', this));
});
}
},
events : function (scope) {
var self = this;
$(this.scope)
.off('.clearing')
.on('click.fndtn.clearing', 'ul[data-clearing] li',
function (e, current, target) {
var current = current || $(this),
target = target || current,
next = current.next('li'),
settings = current.closest('[data-clearing]').data('clearing-init'),
image = $(e.target);
e.preventDefault();
if (!settings) {
self.init();
settings = current.closest('[data-clearing]').data('clearing-init');
}
// if clearing is open and the current image is
// clicked, go to the next image in sequence
if (target.hasClass('visible') &&
current[0] === target[0] &&
next.length > 0 && self.is_open(current)) {
target = next;
image = $('img', target);
}
// set current and target to the clicked li if not otherwise defined.
self.open(image, current, target);
self.update_paddles(target);
})
.on('click.fndtn.clearing', '.clearing-main-next',
function (e) { self.nav(e, 'next') })
.on('click.fndtn.clearing', '.clearing-main-prev',
function (e) { self.nav(e, 'prev') })
.on('click.fndtn.clearing', this.settings.close_selectors,
function (e) { Foundation.libs.clearing.close(e, this) })
.on('keydown.fndtn.clearing',
function (e) { self.keydown(e) });
$(window).off('.clearing').on('resize.fndtn.clearing',
function () { self.resize() });
this.swipe_events(scope);
},
swipe_events : function (scope) {
var self = this;
$(this.scope)
.on('touchstart.fndtn.clearing', '.visible-img', function(e) {
if (!e.touches) { e = e.originalEvent; }
var data = {
start_page_x: e.touches[0].pageX,
start_page_y: e.touches[0].pageY,
start_time: (new Date()).getTime(),
delta_x: 0,
is_scrolling: undefined
};
$(this).data('swipe-transition', data);
e.stopPropagation();
})
.on('touchmove.fndtn.clearing', '.visible-img', function(e) {
if (!e.touches) { e = e.originalEvent; }
// Ignore pinch/zoom events
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
var data = $(this).data('swipe-transition');
if (typeof data === 'undefined') {
data = {};
}
data.delta_x = e.touches[0].pageX - data.start_page_x;
if ( typeof data.is_scrolling === 'undefined') {
data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
}
if (!data.is_scrolling && !data.active) {
e.preventDefault();
var direction = (data.delta_x < 0) ? 'next' : 'prev';
data.active = true;
self.nav(e, direction);
}
})
.on('touchend.fndtn.clearing', '.visible-img', function(e) {
$(this).data('swipe-transition', {});
e.stopPropagation();
});
},
assemble : function ($li) {
var $el = $li.parent();
if ($el.parent().hasClass('carousel')) return;
$el.after('<div id="foundationClearingHolder"></div>');
var holder = $('#foundationClearingHolder'),
settings = $el.data('clearing-init'),
grid = $el.detach(),
data = {
grid: '<div class="carousel">' + grid[0].outerHTML + '</div>',
viewing: settings.templates.viewing
},
wrapper = '<div class="clearing-assembled"><div>' + data.viewing +
data.grid + '</div></div>';
return holder.after(wrapper).remove();
},
open : function ($image, current, target) {
var root = target.closest('.clearing-assembled'),
container = $('div', root).first(),
visible_image = $('.visible-img', container),
image = $('img', visible_image).not($image);
if (!this.locked()) {
// set the image to the selected thumbnail
image
.attr('src', this.load($image))
.css('visibility', 'hidden');
this.loaded(image, function () {
image.css('visibility', 'visible');
// toggle the gallery
root.addClass('clearing-blackout');
container.addClass('clearing-container');
visible_image.show();
this.fix_height(target)
.caption($('.clearing-caption', visible_image), $image)
.center(image)
.shift(current, target, function () {
target.siblings().removeClass('visible');
target.addClass('visible');
});
}.bind(this));
}
},
close : function (e, el) {
e.preventDefault();
var root = (function (target) {
if (/blackout/.test(target.selector)) {
return target;
} else {
return target.closest('.clearing-blackout');
}
}($(el))), container, visible_image;
if (el === e.target && root) {
container = $('div', root).first();
visible_image = $('.visible-img', container);
this.settings.prev_index = 0;
$('ul[data-clearing]', root)
.attr('style', '').closest('.clearing-blackout')
.removeClass('clearing-blackout');
container.removeClass('clearing-container');
visible_image.hide();
}
return false;
},
is_open : function (current) {
return current.parent().prop('style').length > 0;
},
keydown : function (e) {
var clearing = $('ul[data-clearing]', '.clearing-blackout');
if (e.which === 39) this.go(clearing, 'next');
if (e.which === 37) this.go(clearing, 'prev');
if (e.which === 27) $('a.clearing-close').trigger('click');
},
nav : function (e, direction) {
var clearing = $('ul[data-clearing]', '.clearing-blackout');
e.preventDefault();
this.go(clearing, direction);
},
resize : function () {
var image = $('img', '.clearing-blackout .visible-img');
if (image.length) {
this.center(image);
}
},
// visual adjustments
fix_height : function (target) {
var lis = target.parent().children(),
self = this;
lis.each(function () {
var li = $(this),
image = li.find('img');
if (li.height() > image.outerHeight()) {
li.addClass('fix-height');
}
})
.closest('ul')
.width(lis.length * 100 + '%');
return this;
},
update_paddles : function (target) {
var visible_image = target
.closest('.carousel')
.siblings('.visible-img');
if (target.next().length > 0) {
$('.clearing-main-next', visible_image)
.removeClass('disabled');
} else {
$('.clearing-main-next', visible_image)
.addClass('disabled');
}
if (target.prev().length > 0) {
$('.clearing-main-prev', visible_image)
.removeClass('disabled');
} else {
$('.clearing-main-prev', visible_image)
.addClass('disabled');
}
},
center : function (target) {
if (!this.rtl) {
target.css({
marginLeft : -(target.outerWidth() / 2),
marginTop : -(target.outerHeight() / 2)
});
} else {
target.css({
marginRight : -(target.outerWidth() / 2),
marginTop : -(target.outerHeight() / 2)
});
}
return this;
},
// image loading and preloading
load : function ($image) {
if ($image[0].nodeName === "A") {
var href = $image.attr('href');
} else {
var href = $image.parent().attr('href');
}
this.preload($image);
if (href) return href;
return $image.attr('src');
},
preload : function ($image) {
this
.img($image.closest('li').next())
.img($image.closest('li').prev());
},
img : function (img) {
if (img.length) {
var new_img = new Image(),
new_a = $('a', img);
if (new_a.length) {
new_img.src = new_a.attr('href');
} else {
new_img.src = $('img', img).attr('src');
}
}
return this;
},
// image caption
caption : function (container, $image) {
var caption = $image.data('caption');
if (caption) {
container
.html(caption)
.show();
} else {
container
.text('')
.hide();
}
return this;
},
// directional methods
go : function ($ul, direction) {
var current = $('.visible', $ul),
target = current[direction]();
if (target.length) {
$('img', target)
.trigger('click', [current, target]);
}
},
shift : function (current, target, callback) {
var clearing = target.parent(),
old_index = this.settings.prev_index || target.index(),
direction = this.direction(clearing, current, target),
left = parseInt(clearing.css('left'), 10),
width = target.outerWidth(),
skip_shift;
// we use jQuery animate instead of CSS transitions because we
// need a callback to unlock the next animation
if (target.index() !== old_index && !/skip/.test(direction)){
if (/left/.test(direction)) {
this.lock();
clearing.animate({left : left + width}, 300, this.unlock());
} else if (/right/.test(direction)) {
this.lock();
clearing.animate({left : left - width}, 300, this.unlock());
}
} else if (/skip/.test(direction)) {
// the target image is not adjacent to the current image, so
// do we scroll right or not
skip_shift = target.index() - this.settings.up_count;
this.lock();
if (skip_shift > 0) {
clearing.animate({left : -(skip_shift * width)}, 300, this.unlock());
} else {
clearing.animate({left : 0}, 300, this.unlock());
}
}
callback();
},
direction : function ($el, current, target) {
var lis = $('li', $el),
li_width = lis.outerWidth() + (lis.outerWidth() / 4),
up_count = Math.floor($('.clearing-container').outerWidth() / li_width) - 1,
target_index = lis.index(target),
response;
this.settings.up_count = up_count;
if (this.adjacent(this.settings.prev_index, target_index)) {
if ((target_index > up_count)
&& target_index > this.settings.prev_index) {
response = 'right';
} else if ((target_index > up_count - 1)
&& target_index <= this.settings.prev_index) {
response = 'left';
} else {
response = false;
}
} else {
response = 'skip';
}
this.settings.prev_index = target_index;
return response;
},
adjacent : function (current_index, target_index) {
for (var i = target_index + 1; i >= target_index - 1; i--) {
if (i === current_index) return true;
}
return false;
},
// lock management
lock : function () {
this.settings.locked = true;
},
unlock : function () {
this.settings.locked = false;
},
locked : function () {
return this.settings.locked;
},
off : function () {
$(this.scope).off('.fndtn.clearing');
$(window).off('.fndtn.clearing');
},
reflow : function () {
this.init();
}
};
}(jQuery, this, this.document));

184
public/js/foundation/foundation.dropdown.js vendored
View File

@ -1,184 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.dropdown = {
name : 'dropdown',
version : '5.0.0',
settings : {
active_class: 'open',
is_hover: false,
opened: function(){},
closed: function(){}
},
init : function (scope, method, options) {
Foundation.inherit(this, 'throttle');
this.bindings(method, options);
},
events : function (scope) {
var self = this;
$(this.scope)
.off('.dropdown')
.on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
var settings = $(this).data('dropdown-init');
e.preventDefault();
if (!settings.is_hover || Modernizr.touch) self.toggle($(this));
})
.on('mouseenter.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
var $this = $(this);
clearTimeout(self.timeout);
if ($this.data('dropdown')) {
var dropdown = $('#' + $this.data('dropdown')),
target = $this;
} else {
var dropdown = $this;
target = $("[data-dropdown='" + dropdown.attr('id') + "']");
}
var settings = target.data('dropdown-init');
if (settings.is_hover) self.open.apply(self, [dropdown, target]);
})
.on('mouseleave.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
var $this = $(this);
self.timeout = setTimeout(function () {
if ($this.data('dropdown')) {
var settings = $this.data('dropdown-init');
if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
} else {
var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
settings = target.data('dropdown-init');
if (settings.is_hover) self.close.call(self, $this);
}
}.bind(this), 150);
})
.on('click.fndtn.dropdown', function (e) {
var parent = $(e.target).closest('[data-dropdown-content]');
if ($(e.target).data('dropdown') || $(e.target).parent().data('dropdown')) {
return;
}
if (!($(e.target).data('revealId')) &&
(parent.length > 0 && ($(e.target).is('[data-dropdown-content]') ||
$.contains(parent.first()[0], e.target)))) {
e.stopPropagation();
return;
}
self.close.call(self, $('[data-dropdown-content]'));
})
.on('opened.fndtn.dropdown', '[data-dropdown-content]', this.settings.opened)
.on('closed.fndtn.dropdown', '[data-dropdown-content]', this.settings.closed);
$(window)
.off('.dropdown')
.on('resize.fndtn.dropdown', self.throttle(function () {
self.resize.call(self);
}, 50)).trigger('resize');
},
close: function (dropdown) {
var self = this;
dropdown.each(function () {
if ($(this).hasClass(self.settings.active_class)) {
$(this)
.css(Foundation.rtl ? 'right':'left', '-99999px')
.removeClass(self.settings.active_class);
$(this).trigger('closed');
}
});
},
open: function (dropdown, target) {
this
.css(dropdown
.addClass(this.settings.active_class), target);
dropdown.trigger('opened');
},
toggle : function (target) {
var dropdown = $('#' + target.data('dropdown'));
if (dropdown.length === 0) {
// No dropdown found, not continuing
return;
}
this.close.call(this, $('[data-dropdown-content]').not(dropdown));
if (dropdown.hasClass(this.settings.active_class)) {
this.close.call(this, dropdown);
} else {
this.close.call(this, $('[data-dropdown-content]'))
this.open.call(this, dropdown, target);
}
},
resize : function () {
var dropdown = $('[data-dropdown-content].open'),
target = $("[data-dropdown='" + dropdown.attr('id') + "']");
if (dropdown.length && target.length) {
this.css(dropdown, target);
}
},
css : function (dropdown, target) {
var offset_parent = dropdown.offsetParent(),
position = target.offset();
position.top -= offset_parent.offset().top;
position.left -= offset_parent.offset().left;
if (this.small()) {
dropdown.css({
position : 'absolute',
width: '95%',
'max-width': 'none',
top: position.top + target.outerHeight()
});
dropdown.css(Foundation.rtl ? 'right':'left', '2.5%');
} else {
if (!Foundation.rtl && $(window).width() > dropdown.outerWidth() + target.offset().left) {
var left = position.left;
if (dropdown.hasClass('right')) {
dropdown.removeClass('right');
}
} else {
if (!dropdown.hasClass('right')) {
dropdown.addClass('right');
}
var left = position.left - (dropdown.outerWidth() - target.outerWidth());
}
dropdown.attr('style', '').css({
position : 'absolute',
top: position.top + target.outerHeight(),
left: left
});
}
return dropdown;
},
small : function () {
return matchMedia(Foundation.media_queries.small).matches &&
!matchMedia(Foundation.media_queries.medium).matches;
},
off: function () {
$(this.scope).off('.fndtn.dropdown');
$('html, body').off('.fndtn.dropdown');
$(window).off('.fndtn.dropdown');
$('[data-dropdown-content]').off('.fndtn.dropdown');
this.settings.init = false;
},
reflow : function () {}
};
}(jQuery, this, this.document));

304
public/js/foundation/foundation.interchange.js vendored
View File

@ -1,304 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.interchange = {
name : 'interchange',
version : '5.0.0',
cache : {},
images_loaded : false,
nodes_loaded : false,
settings : {
load_attr : 'interchange',
named_queries : {
'default' : Foundation.media_queries.small,
small : Foundation.media_queries.small,
medium : Foundation.media_queries.medium,
large : Foundation.media_queries.large,
xlarge : Foundation.media_queries.xlarge,
xxlarge: Foundation.media_queries.xxlarge,
landscape : 'only screen and (orientation: landscape)',
portrait : 'only screen and (orientation: portrait)',
retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
'only screen and (min--moz-device-pixel-ratio: 2),' +
'only screen and (-o-min-device-pixel-ratio: 2/1),' +
'only screen and (min-device-pixel-ratio: 2),' +
'only screen and (min-resolution: 192dpi),' +
'only screen and (min-resolution: 2dppx)'
},
directives : {
replace: function (el, path, trigger) {
// The trigger argument, if called within the directive, fires
// an event named after the directive on the element, passing
// any parameters along to the event that you pass to trigger.
//
// ex. trigger(), trigger([a, b, c]), or trigger(a, b, c)
//
// This allows you to bind a callback like so:
// $('#interchangeContainer').on('replace', function (e, a, b, c) {
// console.log($(this).html(), a, b, c);
// });
if (/IMG/.test(el[0].nodeName)) {
var orig_path = el[0].src;
if (new RegExp(path, 'i').test(orig_path)) return;
el[0].src = path;
return trigger(el[0].src);
}
var last_path = el.data('interchange-last-path');
if (last_path == path) return;
return $.get(path, function (response) {
el.html(response);
el.data('interchange-last-path', path);
trigger();
});
}
}
},
init : function (scope, method, options) {
Foundation.inherit(this, 'throttle');
this.data_attr = 'data-' + this.settings.load_attr;
this.bindings(method, options);
this.load('images');
this.load('nodes');
},
events : function () {
var self = this;
$(window)
.off('.interchange')
.on('resize.fndtn.interchange', self.throttle(function () {
self.resize.call(self);
}, 50));
return this;
},
resize : function () {
var cache = this.cache;
if(!this.images_loaded || !this.nodes_loaded) {
setTimeout($.proxy(this.resize, this), 50);
return;
}
for (var uuid in cache) {
if (cache.hasOwnProperty(uuid)) {
var passed = this.results(uuid, cache[uuid]);
if (passed) {
this.settings.directives[passed
.scenario[1]](passed.el, passed.scenario[0], function () {
if (arguments[0] instanceof Array) {
var args = arguments[0];
} else {
var args = Array.prototype.slice.call(arguments, 0);
}
passed.el.trigger(passed.scenario[1], args);
});
}
}
}
},
results : function (uuid, scenarios) {
var count = scenarios.length;
if (count > 0) {
var el = this.S('[data-uuid="' + uuid + '"]');
for (var i = count - 1; i >= 0; i--) {
var mq, rule = scenarios[i][2];
if (this.settings.named_queries.hasOwnProperty(rule)) {
mq = matchMedia(this.settings.named_queries[rule]);
} else {
mq = matchMedia(rule);
}
if (mq.matches) {
return {el: el, scenario: scenarios[i]};
}
}
}
return false;
},
load : function (type, force_update) {
if (typeof this['cached_' + type] === 'undefined' || force_update) {
this['update_' + type]();
}
return this['cached_' + type];
},
update_images : function () {
var images = this.S('img[' + this.data_attr + ']'),
count = images.length,
loaded_count = 0,
data_attr = this.data_attr;
this.cache = {};
this.cached_images = [];
this.images_loaded = (count === 0);
for (var i = count - 1; i >= 0; i--) {
loaded_count++;
if (images[i]) {
var str = images[i].getAttribute(data_attr) || '';
if (str.length > 0) {
this.cached_images.push(images[i]);
}
}
if(loaded_count === count) {
this.images_loaded = true;
this.enhance('images');
}
}
return this;
},
update_nodes : function () {
var nodes = this.S('[' + this.data_attr + ']:not(img)'),
count = nodes.length,
loaded_count = 0,
data_attr = this.data_attr;
this.cached_nodes = [];
// Set nodes_loaded to true if there are no nodes
// this.nodes_loaded = false;
this.nodes_loaded = (count === 0);
for (var i = count - 1; i >= 0; i--) {
loaded_count++;
var str = nodes[i].getAttribute(data_attr) || '';
if (str.length > 0) {
this.cached_nodes.push(nodes[i]);
}
if(loaded_count === count) {
this.nodes_loaded = true;
this.enhance('nodes');
}
}
return this;
},
enhance : function (type) {
var count = this['cached_' + type].length;
for (var i = count - 1; i >= 0; i--) {
this.object($(this['cached_' + type][i]));
}
return $(window).trigger('resize');
},
parse_params : function (path, directive, mq) {
return [this.trim(path), this.convert_directive(directive), this.trim(mq)];
},
convert_directive : function (directive) {
var trimmed = this.trim(directive);
if (trimmed.length > 0) {
return trimmed;
}
return 'replace';
},
object : function(el) {
var raw_arr = this.parse_data_attr(el),
scenarios = [], count = raw_arr.length;
if (count > 0) {
for (var i = count - 1; i >= 0; i--) {
var split = raw_arr[i].split(/\((.*?)(\))$/);
if (split.length > 1) {
var cached_split = split[0].split(','),
params = this.parse_params(cached_split[0],
cached_split[1], split[1]);
scenarios.push(params);
}
}
}
return this.store(el, scenarios);
},
uuid : function (separator) {
var delim = separator || "-";
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + delim + S4() + delim + S4()
+ delim + S4() + delim + S4() + S4() + S4());
},
store : function (el, scenarios) {
var uuid = this.uuid(),
current_uuid = el.data('uuid');
if (current_uuid) return this.cache[current_uuid];
el.attr('data-uuid', uuid);
return this.cache[uuid] = scenarios;
},
trim : function(str) {
if (typeof str === 'string') {
return $.trim(str);
}
return str;
},
parse_data_attr : function (el) {
var raw = el.data(this.settings.load_attr).split(/\[(.*?)\]/),
count = raw.length, output = [];
for (var i = count - 1; i >= 0; i--) {
if (raw[i].replace(/[\W\d]+/, '').length > 4) {
output.push(raw[i]);
}
}
return output;
},
reflow : function () {
this.load('images', true);
this.load('nodes', true);
}
};
}(jQuery, this, this.document));

416
public/js/foundation/foundation.js vendored
View File

File diff suppressed because one or more lines are too long

118
public/js/foundation/foundation.magellan.js vendored
View File

@ -1,118 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.magellan = {
name : 'magellan',
version : '5.0.0',
settings : {
active_class: 'active',
threshold: 0
},
init : function (scope, method, options) {
this.fixed_magellan = $("[data-magellan-expedition]");
this.set_threshold();
this.last_destination = $('[data-magellan-destination]').last();
this.events();
},
events : function () {
var self = this;
$(this.scope)
.off('.magellan')
.on('arrival.fndtn.magellan', '[data-magellan-arrival]', function (e) {
var $destination = $(this),
$expedition = $destination.closest('[data-magellan-expedition]'),
active_class = $expedition.attr('data-magellan-active-class')
|| self.settings.active_class;
$destination
.closest('[data-magellan-expedition]')
.find('[data-magellan-arrival]')
.not($destination)
.removeClass(active_class);
$destination.addClass(active_class);
});
this.fixed_magellan
.off('.magellan')
.on('update-position.fndtn.magellan', function() {
var $el = $(this);
})
.trigger('update-position');
$(window)
.off('.magellan')
.on('resize.fndtn.magellan', function() {
this.fixed_magellan.trigger('update-position');
}.bind(this))
.on('scroll.fndtn.magellan', function() {
var windowScrollTop = $(window).scrollTop();
self.fixed_magellan.each(function() {
var $expedition = $(this);
if (typeof $expedition.data('magellan-top-offset') === 'undefined') {
$expedition.data('magellan-top-offset', $expedition.offset().top);
}
if (typeof $expedition.data('magellan-fixed-position') === 'undefined') {
$expedition.data('magellan-fixed-position', false);
}
var fixed_position = (windowScrollTop + self.settings.threshold) > $expedition.data("magellan-top-offset");
var attr = $expedition.attr('data-magellan-top-offset');
if ($expedition.data("magellan-fixed-position") != fixed_position) {
$expedition.data("magellan-fixed-position", fixed_position);
if (fixed_position) {
$expedition.addClass('fixed');
$expedition.css({position:"fixed", top:0});
} else {
$expedition.removeClass('fixed');
$expedition.css({position:"", top:""});
}
if (fixed_position && typeof attr != 'undefined' && attr != false) {
$expedition.css({position:"fixed", top:attr + "px"});
}
}
});
});
if (this.last_destination.length > 0) {
$(window).on('scroll.fndtn.magellan', function (e) {
var windowScrollTop = $(window).scrollTop(),
scrolltopPlusHeight = windowScrollTop + $(window).height(),
lastDestinationTop = Math.ceil(self.last_destination.offset().top);
$('[data-magellan-destination]').each(function () {
var $destination = $(this),
destination_name = $destination.attr('data-magellan-destination'),
topOffset = $destination.offset().top - $destination.outerHeight(true) - windowScrollTop;
if (topOffset <= self.settings.threshold) {
$("[data-magellan-arrival='" + destination_name + "']").trigger('arrival');
}
// In large screens we may hit the bottom of the page and dont reach the top of the last magellan-destination, so lets force it
if (scrolltopPlusHeight >= $(self.scope).height() && lastDestinationTop > windowScrollTop && lastDestinationTop < scrolltopPlusHeight) {
$('[data-magellan-arrival]').last().trigger('arrival');
}
});
});
}
},
set_threshold : function () {
if (typeof this.settings.threshold !== 'number') {
this.settings.threshold = (this.fixed_magellan.length > 0) ?
this.fixed_magellan.outerHeight(true) : 0;
}
},
off : function () {
$(this.scope).off('.fndtn.magellan');
$(window).off('.fndtn.magellan');
},
reflow : function () {}
};
}(jQuery, this, this.document));

37
public/js/foundation/foundation.offcanvas.js vendored
View File

@ -1,37 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.offcanvas = {
name : 'offcanvas',
version : '5.0.0',
settings : {},
init : function (scope, method, options) {
this.events();
},
events : function () {
$(this.scope).off('.offcanvas')
.on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
e.preventDefault();
$(this).closest('.off-canvas-wrap').toggleClass('move-right');
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
e.preventDefault();
$(".off-canvas-wrap").removeClass("move-right");
})
.on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
e.preventDefault();
$(this).closest(".off-canvas-wrap").toggleClass("move-left");
})
.on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
e.preventDefault();
$(".off-canvas-wrap").removeClass("move-left");
});
},
reflow : function () {}
};
}(jQuery, this, this.document));

434
public/js/foundation/foundation.orbit.js vendored
View File

@ -1,434 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
var noop = function() {};
var Orbit = function(el, settings) {
// Don't reinitialize plugin
if (el.hasClass(settings.slides_container_class)) {
return this;
}
var self = this,
container,
slides_container = el,
number_container,
bullets_container,
timer_container,
idx = 0,
animate,
timer,
locked = false,
adjust_height_after = false;
slides_container.children().first().addClass(settings.active_slide_class);
self.update_slide_number = function(index) {
if (settings.slide_number) {
number_container.find('span:first').text(parseInt(index)+1);
number_container.find('span:last').text(slides_container.children().length);
}
if (settings.bullets) {
bullets_container.children().removeClass(settings.bullets_active_class);
$(bullets_container.children().get(index)).addClass(settings.bullets_active_class);
}
};
self.update_active_link = function(index) {
var link = $('a[data-orbit-link="'+slides_container.children().eq(index).attr('data-orbit-slide')+'"]');
link.parents('ul').find('[data-orbit-link]').removeClass(settings.bullets_active_class);
link.addClass(settings.bullets_active_class);
};
self.build_markup = function() {
slides_container.wrap('<div class="'+settings.container_class+'"></div>');
container = slides_container.parent();
slides_container.addClass(settings.slides_container_class);
if (settings.navigation_arrows) {
container.append($('<a href="#"><span></span></a>').addClass(settings.prev_class));
container.append($('<a href="#"><span></span></a>').addClass(settings.next_class));
}
if (settings.timer) {
timer_container = $('<div>').addClass(settings.timer_container_class);
timer_container.append('<span>');
timer_container.append($('<div>').addClass(settings.timer_progress_class));
timer_container.addClass(settings.timer_paused_class);
container.append(timer_container);
}
if (settings.slide_number) {
number_container = $('<div>').addClass(settings.slide_number_class);
number_container.append('<span></span> ' + settings.slide_number_text + ' <span></span>');
container.append(number_container);
}
if (settings.bullets) {
bullets_container = $('<ol>').addClass(settings.bullets_container_class);
container.append(bullets_container);
bullets_container.wrap('<div class="orbit-bullets-container"></div>');
slides_container.children().each(function(idx, el) {
var bullet = $('<li>').attr('data-orbit-slide', idx);
bullets_container.append(bullet);
});
}
if (settings.stack_on_small) {
container.addClass(settings.stack_on_small_class);
}
self.update_slide_number(0);
self.update_active_link(0);
};
self._goto = function(next_idx, start_timer) {
// if (locked) {return false;}
if (next_idx === idx) {return false;}
if (typeof timer === 'object') {timer.restart();}
var slides = slides_container.children();
var dir = 'next';
locked = true;
if (next_idx < idx) {dir = 'prev';}
if (next_idx >= slides.length) {next_idx = 0;}
else if (next_idx < 0) {next_idx = slides.length - 1;}
var current = $(slides.get(idx));
var next = $(slides.get(next_idx));
current.css('zIndex', 2);
current.removeClass(settings.active_slide_class);
next.css('zIndex', 4).addClass(settings.active_slide_class);
slides_container.trigger('before-slide-change.fndtn.orbit');
settings.before_slide_change();
self.update_active_link(next_idx);
var callback = function() {
var unlock = function() {
idx = next_idx;
locked = false;
if (start_timer === true) {timer = self.create_timer(); timer.start();}
self.update_slide_number(idx);
slides_container.trigger('after-slide-change.fndtn.orbit',[{slide_number: idx, total_slides: slides.length}]);
settings.after_slide_change(idx, slides.length);
};
if (slides_container.height() != next.height() && settings.variable_height) {
slides_container.animate({'height': next.height()}, 250, 'linear', unlock);
} else {
unlock();
}
};
if (slides.length === 1) {callback(); return false;}
var start_animation = function() {
if (dir === 'next') {animate.next(current, next, callback);}
if (dir === 'prev') {animate.prev(current, next, callback);}
};
if (next.height() > slides_container.height() && settings.variable_height) {
slides_container.animate({'height': next.height()}, 250, 'linear', start_animation);
} else {
start_animation();
}
};
self.next = function(e) {
e.stopImmediatePropagation();
e.preventDefault();
self._goto(idx + 1);
};
self.prev = function(e) {
e.stopImmediatePropagation();
e.preventDefault();
self._goto(idx - 1);
};
self.link_custom = function(e) {
e.preventDefault();
var link = $(this).attr('data-orbit-link');
if ((typeof link === 'string') && (link = $.trim(link)) != "") {
var slide = container.find('[data-orbit-slide='+link+']');
if (slide.index() != -1) {self._goto(slide.index());}
}
};
self.link_bullet = function(e) {
var index = $(this).attr('data-orbit-slide');
if ((typeof index === 'string') && (index = $.trim(index)) != "") {
self._goto(parseInt(index));
}
}
self.timer_callback = function() {
self._goto(idx + 1, true);
}
self.compute_dimensions = function() {
var current = $(slides_container.children().get(idx));
var h = current.height();
if (!settings.variable_height) {
slides_container.children().each(function(){
if ($(this).height() > h) { h = $(this).height(); }
});
}
slides_container.height(h);
};
self.create_timer = function() {
var t = new Timer(
container.find('.'+settings.timer_container_class),
settings,
self.timer_callback
);
return t;
};
self.stop_timer = function() {
if (typeof timer === 'object') timer.stop();
};
self.toggle_timer = function() {
var t = container.find('.'+settings.timer_container_class);
if (t.hasClass(settings.timer_paused_class)) {
if (typeof timer === 'undefined') {timer = self.create_timer();}
timer.start();
}
else {
if (typeof timer === 'object') {timer.stop();}
}
};
self.init = function() {
self.build_markup();
if (settings.timer) {timer = self.create_timer(); timer.start();}
animate = new FadeAnimation(settings, slides_container);
if (settings.animation === 'slide')
animate = new SlideAnimation(settings, slides_container);
container.on('click', '.'+settings.next_class, self.next);
container.on('click', '.'+settings.prev_class, self.prev);
container.on('click', '[data-orbit-slide]', self.link_bullet);
container.on('click', self.toggle_timer);
if (settings.swipe) {
container.on('touchstart.fndtn.orbit', function(e) {
if (!e.touches) {e = e.originalEvent;}
var data = {
start_page_x: e.touches[0].pageX,
start_page_y: e.touches[0].pageY,
start_time: (new Date()).getTime(),
delta_x: 0,
is_scrolling: undefined
};
container.data('swipe-transition', data);
e.stopPropagation();
})
.on('touchmove.fndtn.orbit', function(e) {
if (!e.touches) { e = e.originalEvent; }
// Ignore pinch/zoom events
if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
var data = container.data('swipe-transition');
if (typeof data === 'undefined') {data = {};}
data.delta_x = e.touches[0].pageX - data.start_page_x;
if ( typeof data.is_scrolling === 'undefined') {
data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
}
if (!data.is_scrolling && !data.active) {
e.preventDefault();
var direction = (data.delta_x < 0) ? (idx+1) : (idx-1);
data.active = true;
self._goto(direction);
}
})
.on('touchend.fndtn.orbit', function(e) {
container.data('swipe-transition', {});
e.stopPropagation();
})
}
container.on('mouseenter.fndtn.orbit', function(e) {
if (settings.timer && settings.pause_on_hover) {
self.stop_timer();
}
})
.on('mouseleave.fndtn.orbit', function(e) {
if (settings.timer && settings.resume_on_mouseout) {
timer.start();
}
});
$(document).on('click', '[data-orbit-link]', self.link_custom);
$(window).on('resize', self.compute_dimensions);
$(window).on('load', self.compute_dimensions);
$(window).on('load', function(){
container.prev('.preloader').css('display', 'none');
});
slides_container.trigger('ready.fndtn.orbit');
};
self.init();
};
var Timer = function(el, settings, callback) {
var self = this,
duration = settings.timer_speed,
progress = el.find('.'+settings.timer_progress_class),
start,
timeout,
left = -1;
this.update_progress = function(w) {
var new_progress = progress.clone();
new_progress.attr('style', '');
new_progress.css('width', w+'%');
progress.replaceWith(new_progress);
progress = new_progress;
};
this.restart = function() {
clearTimeout(timeout);
el.addClass(settings.timer_paused_class);
left = -1;
self.update_progress(0);
};
this.start = function() {
if (!el.hasClass(settings.timer_paused_class)) {return true;}
left = (left === -1) ? duration : left;
el.removeClass(settings.timer_paused_class);
start = new Date().getTime();
progress.animate({'width': '100%'}, left, 'linear');
timeout = setTimeout(function() {
self.restart();
callback();
}, left);
el.trigger('timer-started.fndtn.orbit')
};
this.stop = function() {
if (el.hasClass(settings.timer_paused_class)) {return true;}
clearTimeout(timeout);
el.addClass(settings.timer_paused_class);
var end = new Date().getTime();
left = left - (end - start);
var w = 100 - ((left / duration) * 100);
self.update_progress(w);
el.trigger('timer-stopped.fndtn.orbit');
};
};
var SlideAnimation = function(settings, container) {
var duration = settings.animation_speed;
var is_rtl = ($('html[dir=rtl]').length === 1);
var margin = is_rtl ? 'marginRight' : 'marginLeft';
var animMargin = {};
animMargin[margin] = '0%';
this.next = function(current, next, callback) {
current.animate({marginLeft:'-100%'}, duration);
next.animate(animMargin, duration, function() {
current.css(margin, '100%');
callback();
});
};
this.prev = function(current, prev, callback) {
current.animate({marginLeft:'100%'}, duration);
prev.css(margin, '-100%');
prev.animate(animMargin, duration, function() {
current.css(margin, '100%');
callback();
});
};
};
var FadeAnimation = function(settings, container) {
var duration = settings.animation_speed;
var is_rtl = ($('html[dir=rtl]').length === 1);
var margin = is_rtl ? 'marginRight' : 'marginLeft';
this.next = function(current, next, callback) {
next.css({'margin':'0%', 'opacity':'0.01'});
next.animate({'opacity':'1'}, duration, 'linear', function() {
current.css('margin', '100%');
callback();
});
};
this.prev = function(current, prev, callback) {
prev.css({'margin':'0%', 'opacity':'0.01'});
prev.animate({'opacity':'1'}, duration, 'linear', function() {
current.css('margin', '100%');
callback();
});
};
};
Foundation.libs = Foundation.libs || {};
Foundation.libs.orbit = {
name: 'orbit',
version: '5.0.0',
settings: {
animation: 'slide',
timer_speed: 10000,
pause_on_hover: true,
resume_on_mouseout: false,
animation_speed: 500,
stack_on_small: false,
navigation_arrows: true,
slide_number: true,
slide_number_text: 'of',
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next',
prev_class: 'orbit-prev',
timer_container_class: 'orbit-timer',
timer_paused_class: 'paused',
timer_progress_class: 'orbit-progress',
slides_container_class: 'orbit-slides-container',
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active',
slide_number_class: 'orbit-slide-number',
caption_class: 'orbit-caption',
active_slide_class: 'active',
orbit_transition_class: 'orbit-transitioning',
bullets: true,
timer: true,
variable_height: false,
swipe: true,
before_slide_change: noop,
after_slide_change: noop
},
init: function (scope, method, options) {
var self = this;
if (typeof method === 'object') {
$.extend(true, self.settings, method);
}
if ($(scope).is('[data-orbit]')) {
var $el = $(scope);
var opts = self.data_options($el);
new Orbit($el, $.extend({},self.settings, opts));
}
$('[data-orbit]', scope).each(function(idx, el) {
var $el = $(el);
var opts = self.data_options($el);
new Orbit($el, $.extend({},self.settings, opts));
});
}
};
}(jQuery, this, this.document));

347
public/js/foundation/foundation.reveal.js vendored
View File

@ -1,347 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.reveal = {
name : 'reveal',
version : '5.0.0',
locked : false,
settings : {
animation: 'fadeAndPop',
animation_speed: 250,
close_on_background_click: true,
close_on_esc: true,
dismiss_modal_class: 'close-reveal-modal',
bg_class: 'reveal-modal-bg',
open: function(){},
opened: function(){},
close: function(){},
closed: function(){},
bg : $('.reveal-modal-bg'),
css : {
open : {
'opacity': 0,
'visibility': 'visible',
'display' : 'block'
},
close : {
'opacity': 1,
'visibility': 'hidden',
'display': 'none'
}
}
},
init : function (scope, method, options) {
Foundation.inherit(this, 'delay');
this.bindings(method, options);
},
events : function (scope) {
var self = this;
$('[data-reveal-id]', this.scope)
.off('.reveal')
.on('click.fndtn.reveal', function (e) {
e.preventDefault();
if (!self.locked) {
var element = $(this),
ajax = element.data('reveal-ajax');
self.locked = true;
if (typeof ajax === 'undefined') {
self.open.call(self, element);
} else {
var url = ajax === true ? element.attr('href') : ajax;
self.open.call(self, element, {url: url});
}
}
});
$(this.scope)
.off('.reveal')
.on('click.fndtn.reveal', this.close_targets(), function (e) {
e.preventDefault();
if (!self.locked) {
var settings = $('[data-reveal].open').data('reveal-init'),
bg_clicked = $(e.target)[0] === $('.' + settings.bg_class)[0];
if (bg_clicked && !settings.close_on_background_click) {
return;
}
self.locked = true;
self.close.call(self, bg_clicked ? $('[data-reveal].open') : $(this).closest('[data-reveal]'));
}
});
if($('[data-reveal]', this.scope).length > 0) {
$(this.scope)
// .off('.reveal')
.on('open.fndtn.reveal', this.settings.open)
.on('opened.fndtn.reveal', this.settings.opened)
.on('opened.fndtn.reveal', this.open_video)
.on('close.fndtn.reveal', this.settings.close)
.on('closed.fndtn.reveal', this.settings.closed)
.on('closed.fndtn.reveal', this.close_video);
} else {
$(this.scope)
// .off('.reveal')
.on('open.fndtn.reveal', '[data-reveal]', this.settings.open)
.on('opened.fndtn.reveal', '[data-reveal]', this.settings.opened)
.on('opened.fndtn.reveal', '[data-reveal]', this.open_video)
.on('close.fndtn.reveal', '[data-reveal]', this.settings.close)
.on('closed.fndtn.reveal', '[data-reveal]', this.settings.closed)
.on('closed.fndtn.reveal', '[data-reveal]', this.close_video);
}
$('body').on('keyup.fndtn.reveal', function ( event ) {
var open_modal = $('[data-reveal].open'),
settings = open_modal.data('reveal-init');
if ( event.which === 27 && settings.close_on_esc) { // 27 is the keycode for the Escape key
open_modal.foundation('reveal', 'close');
}
});
return true;
},
open : function (target, ajax_settings) {
if (target) {
if (typeof target.selector !== 'undefined') {
var modal = $('#' + target.data('reveal-id'));
} else {
var modal = $(this.scope);
ajax_settings = target;
}
} else {
var modal = $(this.scope);
}
if (!modal.hasClass('open')) {
var open_modal = $('[data-reveal].open');
if (typeof modal.data('css-top') === 'undefined') {
modal.data('css-top', parseInt(modal.css('top'), 10))
.data('offset', this.cache_offset(modal));
}
modal.trigger('open');
if (open_modal.length < 1) {
this.toggle_bg();
}
if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
this.hide(open_modal, this.settings.css.close);
this.show(modal, this.settings.css.open);
} else {
var self = this,
old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
$.extend(ajax_settings, {
success: function (data, textStatus, jqXHR) {
if ( $.isFunction(old_success) ) {
old_success(data, textStatus, jqXHR);
}
modal.html(data);
$(modal).foundation('section', 'reflow');
self.hide(open_modal, self.settings.css.close);
self.show(modal, self.settings.css.open);
}
});
$.ajax(ajax_settings);
}
}
},
close : function (modal) {
var modal = modal && modal.length ? modal : $(this.scope),
open_modals = $('[data-reveal].open');
if (open_modals.length > 0) {
this.locked = true;
modal.trigger('close');
this.toggle_bg();
this.hide(open_modals, this.settings.css.close);
}
},
close_targets : function () {
var base = '.' + this.settings.dismiss_modal_class;
if (this.settings.close_on_background_click) {
return base + ', .' + this.settings.bg_class;
}
return base;
},
toggle_bg : function () {
if ($('.' + this.settings.bg_class).length === 0) {
this.settings.bg = $('<div />', {'class': this.settings.bg_class})
.appendTo('body');
}
if (this.settings.bg.filter(':visible').length > 0) {
this.hide(this.settings.bg);
} else {
this.show(this.settings.bg);
}
},
show : function (el, css) {
// is modal
if (css) {
if (el.parent('body').length === 0) {
var placeholder = el.wrap('<div style="display: none;" />').parent();
el.on('closed.fndtn.reveal.wrapped', function() {
el.detach().appendTo(placeholder);
el.unwrap().unbind('closed.fndtn.reveal.wrapped');
});
el.detach().appendTo('body');
}
if (/pop/i.test(this.settings.animation)) {
css.top = $(window).scrollTop() - el.data('offset') + 'px';
var end_css = {
top: $(window).scrollTop() + el.data('css-top') + 'px',
opacity: 1
};
return this.delay(function () {
return el
.css(css)
.animate(end_css, this.settings.animation_speed, 'linear', function () {
this.locked = false;
el.trigger('opened');
}.bind(this))
.addClass('open');
}.bind(this), this.settings.animation_speed / 2);
}
if (/fade/i.test(this.settings.animation)) {
var end_css = {opacity: 1};
return this.delay(function () {
return el
.css(css)
.animate(end_css, this.settings.animation_speed, 'linear', function () {
this.locked = false;
el.trigger('opened');
}.bind(this))
.addClass('open');
}.bind(this), this.settings.animation_speed / 2);
}
return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
}
// should we animate the background?
if (/fade/i.test(this.settings.animation)) {
return el.fadeIn(this.settings.animation_speed / 2);
}
return el.show();
},
hide : function (el, css) {
// is modal
if (css) {
if (/pop/i.test(this.settings.animation)) {
var end_css = {
top: - $(window).scrollTop() - el.data('offset') + 'px',
opacity: 0
};
return this.delay(function () {
return el
.animate(end_css, this.settings.animation_speed, 'linear', function () {
this.locked = false;
el.css(css).trigger('closed');
}.bind(this))
.removeClass('open');
}.bind(this), this.settings.animation_speed / 2);
}
if (/fade/i.test(this.settings.animation)) {
var end_css = {opacity: 0};
return this.delay(function () {
return el
.animate(end_css, this.settings.animation_speed, 'linear', function () {
this.locked = false;
el.css(css).trigger('closed');
}.bind(this))
.removeClass('open');
}.bind(this), this.settings.animation_speed / 2);
}
return el.hide().css(css).removeClass('open').trigger('closed');
}
// should we animate the background?
if (/fade/i.test(this.settings.animation)) {
return el.fadeOut(this.settings.animation_speed / 2);
}
return el.hide();
},
close_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('iframe');
if (iframe.length > 0) {
iframe.attr('data-src', iframe[0].src);
iframe.attr('src', 'about:blank');
video.hide();
}
},
open_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('iframe');
if (iframe.length > 0) {
var data_src = iframe.attr('data-src');
if (typeof data_src === 'string') {
iframe[0].src = iframe.attr('data-src');
} else {
var src = iframe[0].src;
iframe[0].src = undefined;
iframe[0].src = src;
}
video.show();
}
},
cache_offset : function (modal) {
var offset = modal.show().height() + parseInt(modal.css('top'), 10);
modal.hide();
return offset;
},
off : function () {
$(this.scope).off('.fndtn.reveal');
},
reflow : function () {}
};
}(jQuery, this, this.document));

37
public/js/foundation/foundation.tab.js vendored
View File

@ -1,37 +0,0 @@
/*jslint unparam: true, browser: true, indent: 2 */
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.tab = {
name : 'tab',
version : '5.0.1',
settings : {
active_class: 'active'
},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
$(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a', function (e) {
e.preventDefault();
var tab = $(this).parent(),
target = $('#' + this.href.split('#')[1]),
siblings = tab.siblings(),
settings = tab.closest('[data-tab]').data('tab-init');
tab.addClass(settings.active_class);
siblings.removeClass(settings.active_class);
target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
});
},
off : function () {},
reflow : function () {}
};
}(jQuery, this, this.document));

202
public/js/foundation/foundation.tooltip.js vendored
View File

@ -1,202 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.tooltip = {
name : 'tooltip',
version : '5.0.0',
settings : {
additional_inheritable_classes : [],
tooltip_class : '.tooltip',
append_to: 'body',
touch_close_text: 'Tap To Close',
disable_for_touch: false,
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltip.settings.tooltip_class.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
},
cache : {},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
var self = this;
if (Modernizr.touch) {
$(this.scope)
.off('.tooltip')
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
'[data-tooltip]', function (e) {
var settings = $.extend({}, self.settings, self.data_options($(this)));
if (!settings.disable_for_touch) {
e.preventDefault();
$(settings.tooltip_class).hide();
self.showOrCreateTip($(this));
}
})
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
this.settings.tooltip_class, function (e) {
e.preventDefault();
$(this).fadeOut(150);
});
} else {
$(this.scope)
.off('.tooltip')
.on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip',
'[data-tooltip]', function (e) {
var $this = $(this);
if (/enter|over/i.test(e.type)) {
self.showOrCreateTip($this);
} else if (e.type === 'mouseout' || e.type === 'mouseleave') {
self.hide($this);
}
});
}
},
showOrCreateTip : function ($target) {
var $tip = this.getTip($target);
if ($tip && $tip.length > 0) {
return this.show($target);
}
return this.create($target);
},
getTip : function ($target) {
var selector = this.selector($target),
tip = null;
if (selector) {
tip = $('span[data-selector="' + selector + '"]' + this.settings.tooltip_class);
}
return (typeof tip === 'object') ? tip : false;
},
selector : function ($target) {
var id = $target.attr('id'),
dataSelector = $target.attr('data-tooltip') || $target.attr('data-selector');
if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') {
dataSelector = 'tooltip' + Math.random().toString(36).substring(7);
$target.attr('data-selector', dataSelector);
}
return (id && id.length > 0) ? id : dataSelector;
},
create : function ($target) {
var $tip = $(this.settings.tip_template(this.selector($target), $('<div></div>').html($target.attr('title')).html())),
classes = this.inheritable_classes($target);
$tip.addClass(classes).appendTo(this.settings.append_to);
if (Modernizr.touch) {
$tip.append('<span class="tap-to-close">'+this.settings.touch_close_text+'</span>');
}
$target.removeAttr('title').attr('title','');
this.show($target);
},
reposition : function (target, tip, classes) {
var width, nub, nubHeight, nubWidth, column, objPos;
tip.css('visibility', 'hidden').show();
width = target.data('width');
nub = tip.children('.nub');
nubHeight = nub.outerHeight();
nubWidth = nub.outerHeight();
objPos = function (obj, top, right, bottom, left, width) {
return obj.css({
'top' : (top) ? top : 'auto',
'bottom' : (bottom) ? bottom : 'auto',
'left' : (left) ? left : 'auto',
'right' : (right) ? right : 'auto',
'width' : (width) ? width : 'auto'
}).end();
};
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left, width);
if (this.small()) {
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', 12.5, $(this.scope).width());
tip.addClass('tip-override');
objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
} else {
var left = target.offset().left;
if (Foundation.rtl) {
left = target.offset().left + target.offset().width - tip.outerWidth();
}
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', left, width);
tip.removeClass('tip-override');
if (classes && classes.indexOf('tip-top') > -1) {
objPos(tip, (target.offset().top - tip.outerHeight()), 'auto', 'auto', left, width)
.removeClass('tip-override');
} else if (classes && classes.indexOf('tip-left') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left - tip.outerWidth() - nubHeight), width)
.removeClass('tip-override');
} else if (classes && classes.indexOf('tip-right') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left + target.outerWidth() + nubHeight), width)
.removeClass('tip-override');
}
}
tip.css('visibility', 'visible').hide();
},
small : function () {
return matchMedia(Foundation.media_queries.small).matches;
},
inheritable_classes : function (target) {
var inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'noradius'].concat(this.settings.additional_inheritable_classes),
classes = target.attr('class'),
filtered = classes ? $.map(classes.split(' '), function (el, i) {
if ($.inArray(el, inheritables) !== -1) {
return el;
}
}).join(' ') : '';
return $.trim(filtered);
},
show : function ($target) {
var $tip = this.getTip($target);
this.reposition($target, $tip, $target.attr('class'));
$tip.fadeIn(150);
},
hide : function ($target) {
var $tip = this.getTip($target);
$tip.fadeOut(150);
},
// deprecate reload
reload : function () {
var $self = $(this);
return ($self.data('fndtn-tooltips')) ? $self.foundationTooltips('destroy').foundationTooltips('init') : $self.foundationTooltips('init');
},
off : function () {
$(this.scope).off('.fndtn.tooltip');
$(this.settings.tooltip_class).each(function (i) {
$('[data-tooltip]').get(i).attr('title', $(this).text());
}).remove();
},
reflow : function () {}
};
}(jQuery, this, this.document));

380
public/js/foundation/foundation.topbar.js vendored
View File

@ -1,380 +0,0 @@
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.topbar = {
name : 'topbar',
version: '5.0.1',
settings : {
index : 0,
sticky_class : 'sticky',
custom_back_text: true,
back_text: 'Back',
is_hover: true,
mobile_show_parent_link: false,
scrolltop : true // jump to top when sticky nav menu toggle is clicked
},
init : function (section, method, options) {
Foundation.inherit(this, 'addCustomRule register_media throttle');
var self = this;
self.register_media('topbar', 'foundation-mq-topbar');
this.bindings(method, options);
$('[data-topbar]', this.scope).each(function () {
var topbar = $(this),
settings = topbar.data('topbar-init'),
section = $('section', this),
titlebar = $('> ul', this).first();
topbar.data('index', 0);
var topbarContainer = topbar.parent();
if(topbarContainer.hasClass('fixed') || topbarContainer.hasClass(settings.sticky_class)) {
self.settings.sticky_class = settings.sticky_class;
self.settings.stick_topbar = topbar;
topbar.data('height', topbarContainer.outerHeight());
topbar.data('stickyoffset', topbarContainer.offset().top);
} else {
topbar.data('height', topbar.outerHeight());
}
if (!settings.assembled) self.assemble(topbar);
if (settings.is_hover) {
$('.has-dropdown', topbar).addClass('not-click');
} else {
$('.has-dropdown', topbar).removeClass('not-click');
}
// Pad body when sticky (scrolled) or fixed.
self.addCustomRule('.f-topbar-fixed { padding-top: ' + topbar.data('height') + 'px }');
if (topbarContainer.hasClass('fixed')) {
$('body').addClass('f-topbar-fixed');
}
});
},
toggle: function (toggleEl) {
var self = this;
if (toggleEl) {
var topbar = $(toggleEl).closest('[data-topbar]');
} else {
var topbar = $('[data-topbar]');
}
var settings = topbar.data('topbar-init');
var section = $('section, .section', topbar);
if (self.breakpoint()) {
if (!self.rtl) {
section.css({left: '0%'});
$('>.name', section).css({left: '100%'});
} else {
section.css({right: '0%'});
$('>.name', section).css({right: '100%'});
}
$('li.moved', section).removeClass('moved');
topbar.data('index', 0);
topbar
.toggleClass('expanded')
.css('height', '');
}
if (settings.scrolltop) {
if (!topbar.hasClass('expanded')) {
if (topbar.hasClass('fixed')) {
topbar.parent().addClass('fixed');
topbar.removeClass('fixed');
$('body').addClass('f-topbar-fixed');
}
} else if (topbar.parent().hasClass('fixed')) {
if (settings.scrolltop) {
topbar.parent().removeClass('fixed');
topbar.addClass('fixed');
$('body').removeClass('f-topbar-fixed');
window.scrollTo(0,0);
} else {
topbar.parent().removeClass('expanded');
}
}
} else {
if(topbar.parent().hasClass(self.settings.sticky_class)) {
topbar.parent().addClass('fixed');
}
if(topbar.parent().hasClass('fixed')) {
if (!topbar.hasClass('expanded')) {
topbar.removeClass('fixed');
topbar.parent().removeClass('expanded');
self.update_sticky_positioning();
} else {
topbar.addClass('fixed');
topbar.parent().addClass('expanded');
}
}
}
},
timer : null,
events : function (bar) {
var self = this;
$(this.scope)
.off('.topbar')
.on('click.fndtn.topbar', '[data-topbar] .toggle-topbar', function (e) {
e.preventDefault();
self.toggle(this);
})
.on('click.fndtn.topbar', '[data-topbar] li.has-dropdown', function (e) {
var li = $(this),
target = $(e.target),
topbar = li.closest('[data-topbar]'),
settings = topbar.data('topbar-init');
if(target.data('revealId')) {
self.toggle();
return;
}
if (self.breakpoint()) return;
if (settings.is_hover && !Modernizr.touch) return;
e.stopImmediatePropagation();
if (li.hasClass('hover')) {
li
.removeClass('hover')
.find('li')
.removeClass('hover');
li.parents('li.hover')
.removeClass('hover');
} else {
li.addClass('hover');
if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
e.preventDefault();
}
}
})
.on('click.fndtn.topbar', '[data-topbar] .has-dropdown>a', function (e) {
if (self.breakpoint()) {
e.preventDefault();
var $this = $(this),
topbar = $this.closest('[data-topbar]'),
section = topbar.find('section, .section'),
dropdownHeight = $this.next('.dropdown').outerHeight(),
$selectedLi = $this.closest('li');
topbar.data('index', topbar.data('index') + 1);
$selectedLi.addClass('moved');
if (!self.rtl) {
section.css({left: -(100 * topbar.data('index')) + '%'});
section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
} else {
section.css({right: -(100 * topbar.data('index')) + '%'});
section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
}
topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
}
});
$(window).off('.topbar').on('resize.fndtn.topbar', self.throttle(function () {
self.resize.call(self);
}, 50)).trigger('resize');
$('body').off('.topbar').on('click.fndtn.topbar touchstart.fndtn.topbar', function (e) {
var parent = $(e.target).closest('li').closest('li.hover');
if (parent.length > 0) {
return;
}
$('[data-topbar] li').removeClass('hover');
});
// Go up a level on Click
$(this.scope).on('click.fndtn.topbar', '[data-topbar] .has-dropdown .back', function (e) {
e.preventDefault();
var $this = $(this),
topbar = $this.closest('[data-topbar]'),
section = topbar.find('section, .section'),
settings = topbar.data('topbar-init'),
$movedLi = $this.closest('li.moved'),
$previousLevelUl = $movedLi.parent();
topbar.data('index', topbar.data('index') - 1);
if (!self.rtl) {
section.css({left: -(100 * topbar.data('index')) + '%'});
section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
} else {
section.css({right: -(100 * topbar.data('index')) + '%'});
section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
}
if (topbar.data('index') === 0) {
topbar.css('height', '');
} else {
topbar.css('height', $previousLevelUl.outerHeight(true) + topbar.data('height'));
}
setTimeout(function () {
$movedLi.removeClass('moved');
}, 300);
});
},
resize : function () {
var self = this;
$('[data-topbar]').each(function () {
var topbar = $(this),
settings = topbar.data('topbar-init');
var stickyContainer = topbar.parent('.' + self.settings.sticky_class);
var stickyOffset;
if (!self.breakpoint()) {
var doToggle = topbar.hasClass('expanded');
topbar
.css('height', '')
.removeClass('expanded')
.find('li')
.removeClass('hover');
if(doToggle) {
self.toggle(topbar);
}
}
if(stickyContainer.length > 0) {
if(stickyContainer.hasClass('fixed')) {
// Remove the fixed to allow for correct calculation of the offset.
stickyContainer.removeClass('fixed');
stickyOffset = stickyContainer.offset().top;
if($(document.body).hasClass('f-topbar-fixed')) {
stickyOffset -= topbar.data('height');
}
topbar.data('stickyoffset', stickyOffset);
stickyContainer.addClass('fixed');
} else {
stickyOffset = stickyContainer.offset().top;
topbar.data('stickyoffset', stickyOffset);
}
}
});
},
breakpoint : function () {
return !matchMedia(Foundation.media_queries['topbar']).matches;
},
assemble : function (topbar) {
var self = this,
settings = topbar.data('topbar-init'),
section = $('section', topbar),
titlebar = $('> ul', topbar).first();
// Pull element out of the DOM for manipulation
section.detach();
$('.has-dropdown>a', section).each(function () {
var $link = $(this),
$dropdown = $link.siblings('.dropdown'),
url = $link.attr('href');
if (settings.mobile_show_parent_link && url && url.length > 1) {
var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li><li><a class="parent-link js-generated" href="' + url + '">' + $link.text() +'</a></li>');
} else {
var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
}
// Copy link to subnav
if (settings.custom_back_text == true) {
$('h5>a', $titleLi).html(settings.back_text);
} else {
$('h5>a', $titleLi).html('&laquo; ' + $link.html());
}
$dropdown.prepend($titleLi);
});
// Put element back in the DOM
section.appendTo(topbar);
// check for sticky
this.sticky();
this.assembled(topbar);
},
assembled : function (topbar) {
topbar.data('topbar-init', $.extend({}, topbar.data('topbar-init'), {assembled: true}));
},
height : function (ul) {
var total = 0,
self = this;
$('> li', ul).each(function () { total += $(this).outerHeight(true); });
return total;
},
sticky : function () {
var $window = $(window),
self = this;
$(window).on('scroll', function() {
self.update_sticky_positioning();
});
},
update_sticky_positioning: function() {
var klass = '.' + this.settings.sticky_class;
var $window = $(window);
if ($(klass).length > 0) {
var distance = this.settings.sticky_topbar.data('stickyoffset');
if (!$(klass).hasClass('expanded')) {
if ($window.scrollTop() > (distance)) {
if (!$(klass).hasClass('fixed')) {
$(klass).addClass('fixed');
$('body').addClass('f-topbar-fixed');
}
} else if ($window.scrollTop() <= distance) {
if ($(klass).hasClass('fixed')) {
$(klass).removeClass('fixed');
$('body').removeClass('f-topbar-fixed');
}
}
}
}
},
off : function () {
$(this.scope).off('.fndtn.topbar');
$(window).off('.fndtn.topbar');
},
reflow : function () {}
};
}(jQuery, this, this.document));

8829
public/js/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

142
public/js/mstream.js
View File

@ -18,7 +18,7 @@ $(document).ready(function(){
}
// open connection
var connection = new WebSocket('ws://localhost:3088');
var connection = new WebSocket('ws://localhost:3031');
connection.onopen = function () {
console.log('CONNECTION OPENNED');
@ -41,6 +41,10 @@ $(document).ready(function(){
}
console.log(json);
if( json.command && json.command.action && json.command.action === 'next'){
console.log('NEXTTTTTTTTTTTTTTTTTTTTTT')
MSTREAM.nextSong();
}
};
@ -175,69 +179,14 @@ $(document).ready(function(){
///////////////////////////// The Now Playing Column
// Core playlist functionality. When a song ends, go to the next song
// TODO: This is the ideal way to do things. Doesn't work on firefox though
// document.getElementById("audio").addEventListener("ended", function(){
// Put this function in the global scope so it can be accessed by polymer
window.goToNextSong = function goToNextSong(){
// Should disable any features that can cause the playlist to change
// This will prevent some edge case logic errors
// Check for playlist item with label "current song"
if($('#playlist').find('li.current').length!=0){
// if there's no next item, return
if($('#playlist').find('li.current').next('li').length===0){
return;
}
var current = $('#playlist').find('li.current');
var next = $('#playlist').find('li.current').next('li');
// get the url in that item
var song = next.data('songurl');
var filetype = next.data('filetype');
// Add label of "current song" to this item
current.toggleClass('current');
next.toggleClass('current');
}
// If there is no current song but the playlist is not empty
else if($('#playlist').find('li.current').length == 0 && $('#playlist li').length != 0){
// Then select the first song and play that
var first_on_playlist = $('ul#playlist li:first');
first_on_playlist.toggleClass('current');
var song = first_on_playlist.data('songurl');
var filetype = next.data('filetype');
}
// Add that URL to jPlayer
jPlayerSetMedia(song, filetype);
// TODO
//$(this).jPlayer("play");
}
// When an item in the playlist is clicked, start playing that song
$('#playlist').on( 'click', 'li span', function() {
var songurl = $(this).parent().data('songurl');
var filetype = $(this).parent().data('filetype');
$('#playlist li').removeClass('current');
$(this).parent().addClass('current');
// Add that URL to jPlayer
jPlayerSetMedia(songurl, filetype);
});
// clear the playlist
$("#clear").click(function() {
$('#playlist').empty();
$('#playlist_name').val('');
});
@ -247,54 +196,53 @@ $(document).ready(function(){
});
function jPlayerSetMedia(fileLocation, filetype){
if(virtualDirectory){
fileLocation = virtualDirectory + '/' + fileLocation;
}
document.getElementById("mplayer").setAttribute("src", fileLocation);
document.getElementById("mplayer").setAttribute("title", fileLocation.split('/').pop());
}
// Adds file to the now playing playlist
// There is no longer addfile1
function addFile2(that){
var filename = $(that).attr("id");
var file_location = $(that).data("file_location");
if(accessKey){
file_location += '?token=' + accessKey;
}
var filetype = $(that).data("filetype");
// var filename = $(that).attr("id");
// var file_location = $(that).data("file_location");
// if(accessKey){
// file_location += '?token=' + accessKey;
// }
// var filetype = $(that).data("filetype");
//
// var title = $(that).find('span.title').html();
//
// // The current var gets added to the class of the new playlist item
// var current = '';
//
// // this checks if jplayer is playing something
// // console.log($("#jquery_jplayer_1").data().jPlayer.status.paused);
//
// // if the playlist is empty and no media is currently playing
// //if ($('#playlist li').length == 0 && $("#jquery_jplayer_1").data().jPlayer.status.paused == true){
// if ($('#playlist li').length == 0 ){ // TODO:
//
// // Set this playlist item as the current one and que it in jplayer
// current = ' current';
// jPlayerSetMedia(file_location, filetype);
// // $('#jquery_jplayer_1').jPlayer("play");
// }
//
// // Add html to the end of the playlist
// $('ul#playlist').append(
// $('<li/>', {
// 'data-filetype': filetype,
// 'data-songurl': file_location,
// 'class': 'dragable' + current,
// html: '<span class="play1">'+title+'</span><a href="javascript:void(0)" class="closeit">X</a>'
// })
// );
//
// $('#playlist').sortable();
var title = $(that).find('span.title').html();
var file_location = $(that).data("file_location");
// The current var gets added to the class of the new playlist item
var current = '';
console.log(file_location)
MSTREAM.addSong(file_location);
// this checks if jplayer is playing something
// console.log($("#jquery_jplayer_1").data().jPlayer.status.paused);
// if the playlist is empty and no media is currently playing
//if ($('#playlist li').length == 0 && $("#jquery_jplayer_1").data().jPlayer.status.paused == true){
if ($('#playlist li').length == 0 ){ // TODO:
// Set this playlist item as the current one and que it in jplayer
current = ' current';
jPlayerSetMedia(file_location, filetype);
// $('#jquery_jplayer_1').jPlayer("play");
}
// Add html to the end of the playlist
$('ul#playlist').append(
$('<li/>', {
'data-filetype': filetype,
'data-songurl': file_location,
'class': 'dragable' + current,
html: '<span class="play1">'+title+'</span><a href="javascript:void(0)" class="closeit">X</a>'
})
);
$('#playlist').sortable();
}

4
public/js/vendor/custom.modernizr.js vendored
View File

File diff suppressed because one or more lines are too long

107
public/js/vendor/jquery.cookie.js vendored
View File

@ -1,107 +0,0 @@
/*!
* jQuery Cookie Plugin v1.3.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2013 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as anonymous module.
define(['jquery'], factory);
} else {
// Browser globals.
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function decode(s) {
if (config.raw) {
return s;
}
try {
// If we can't decode the cookie, ignore it, it's unusable.
return decodeURIComponent(s.replace(pluses, ' '));
} catch(e) {}
}
function decodeAndParse(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
s = decode(s);
try {
// If we can't parse the cookie, ignore it, it's unusable.
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}
var config = $.cookie = function (key, value, options) {
// Write
if (value !== undefined) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = config.json ? JSON.stringify(value) : String(value);
return (document.cookie = [
config.raw ? key : encodeURIComponent(key),
'=',
config.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Read
var result = key ? undefined : {};
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
var cookies = document.cookie ? document.cookie.split('; ') : [];
for (var i = 0, l = cookies.length; i < l; i++) {
var parts = cookies[i].split('=');
var name = decode(parts.shift());
var cookie = parts.join('=');
if (key && key === name) {
result = decodeAndParse(cookie);
break;
}
// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = decodeAndParse(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
if ($.cookie(key) !== undefined) {
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return true;
}
return false;
};
}));

8829
public/js/vendor/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

331
public/mstream.html
View File

@ -27,42 +27,275 @@
<script src="js/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/sortable.js"></script>
<script type="text/javascript" src="js/mstream.js"></script>
<!-- <script type="text/javascript" src="js/sortable.js"></script> -->
<script type="text/javascript" src="js/cookie.js"></script>
<!-- Vue JS -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Sortable JS -->
<script src="https://unpkg.com/sortablejs@latest"></script>
<!-- https://github.com/SortableJS/Vue.Draggable - v2.6 -->
<script src="/public-shared/js/vue-sortable.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/8bit-wonder" type="text/css"/>
<!--
This is the mStream Player stack
DO NOT Change to order these are loaded in
You do not need to worry about how these work
-->
<script src="/public-shared/js/aurora.js"></script>
<script src="/public-shared/js/flac.js"></script>
<script src="/public-shared/js/howler.core.min.js"></script>
<script src="/public-shared/js/mstream.js"></script>
<script src="/public-shared/js/mstream.api.js"></script>
<!--
<script src="js/aurora.js"></script>
<script src="js/flac.js"></script>
<script src="paper-player/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-player/paper-audio-player/paper-audio-player.html">
<link rel="import" href="paper-player/paper-audio-player/paper-audio-player.html"> -->
<script type="text/javascript" src="js/mstream.js"></script>
<!-- Look at this for an example of how to use the mStream Player -->
<script>
window.onload = function() {
// MSTREAMAPI.getSharedPlaylist();
//
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
// MSTREAM.addSong('/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 06 We Are Not the Friends You Are Looking For.mp3');
// MSTREAM.addSong('/Darn Coyotes - See You in Hell- I Guess/Darn Coyotes - See You in Hell, I Guess - 02 We Oughtta Make Like Antelope and Split.mp3');
//
// MSTREAM.addSong('/TV Torso - Clear Lake Strangler (1)/TV Torso - Clear Lake Strangler - 02 Prismatic Ideation.flac');
// Template for playlist items
Vue.component('playlist-item', {
template: '\
<li class="playlist-item" v-bind:class="{ playing: (this.index == positionCache.val) }" >\
<span v-on:click="goToSong($event)" class="song-area">{{ text }}</span> <span v-on:click="removeSong($event)" class="removeSong">X</div>\
</li>\
',
props: ['text', 'index'],
// We need the positionCache to track the currently playing song
data: function(){
return {
positionCache: MSTREAM.positionCache,
}
},
// Methods used by playlist item events
methods: {
// Go to a song on item click
goToSong: function(event){
MSTREAM.goToSongAtPosition(this.index);
},
// Remove song
removeSong: function(event){
MSTREAM.removeSongAtPosition(this.index, false);
}
}
});
// Code to update playlist
var playlistElement = new Vue({
el: '#playlist',
data: {
playlist: MSTREAM.playlist,
},
methods: {
// checkMove is called when a drag-and-drop action happens
checkMove: function (event) {
MSTREAM.resetPositionCache();
}
}
});
// Code to handle Play/Pause images
var playPauseButton = new Vue({
el: '#play-pause-image',
data: {
status: MSTREAM.playerStats,
},
computed: {
imgsrc: function () {
return "/public-shared/img/"+(this.status.playing ? 'pause' : 'play')+"-white.svg";
}
}
});
var progressBar = new Vue({
el: '#progress-bar',
data: {
playerStats: MSTREAM.playerStats,
playlist: MSTREAM.playlist,
positionCache: MSTREAM.positionCache
},
computed: {
widthcss: function ( ) {
if(this.playerStats.duration === 0){
return "width:0";
}
var totalWidth = this.$el.getBoundingClientRect().width;
var percentage = 100 - (( this.playerStats.currentTime / this.playerStats.duration) * 100);
return "width:calc(100% - "+percentage+"%)";
},
showTime: function(){
if (this.playerStats.duration === 0) {
return '';
}
var curr = this.playerStats.duration - this.playerStats.currentTime;
var minutes = Math.floor(curr / 60);
var secondsToCalc = Math.floor(curr % 60) + '';
var currentText = minutes + ':' + (secondsToCalc.length < 2 ? '0' + secondsToCalc : secondsToCalc);
return currentText;
},
currentSongText: function(){
if(this.positionCache.val === -1){
return '\u00A0\u00A0\u00A0Welcome To mStream!\u00A0\u00A0\u00A0';
}
var filepathArray = this.playlist[this.positionCache.val].filepath.split("/");
return '\u00A0\u00A0\u00A0' + filepathArray[filepathArray.length-1] + '\u00A0\u00A0\u00A0';
}
},
methods: {
goToPosition: function(event){
var relativeClickPosition = event.clientX - this.$el.getBoundingClientRect().left;
var totalWidth = this.$el.getBoundingClientRect().width;
var percentage = (relativeClickPosition / totalWidth) * 100;
// Set Player time
MSTREAM.seekByPercentage(percentage);
}
}
});
// Button Events
document.getElementById( "next-button" ).addEventListener("click",function() {
MSTREAM.nextSong();
});
document.getElementById( "play-pause-button" ).addEventListener("click", function() {
MSTREAM.playPause();
});
document.getElementById("previous-button").addEventListener("click", function(){
MSTREAM.previousSong();
});
// This makes the title text scroll back and forth
var scrollTimer;
var scrollRight = true; //Track Scroll Direction
function startTime(interval = 100) {
if (scrollTimer) { clearInterval(scrollTimer); }
scrollTimer = setInterval( function(){
// Get the max scroll distance
var maxScrollLeft = document.getElementById('title-text').scrollWidth - document.getElementById('title-text').clientWidth;
// Change the scroll direction if necessary
// TODO: Pause for a second when these conditions are hit
if(document.getElementById('title-text').scrollLeft > (maxScrollLeft - 1)){
scrollRight = false;
}
if(document.getElementById('title-text').scrollLeft === 0){
scrollRight = true;
}
// Do the scroll
if(scrollRight === true){
document.getElementById('title-text').scrollLeft = document.getElementById('title-text').scrollLeft + 2;
}else{
document.getElementById('title-text').scrollLeft = document.getElementById('title-text').scrollLeft - 1;
}
}, interval);
}
startTime(40);
// Change spacebar behviour to Play/PauseListen to every key press user makes
// Useful for adding media functionality to certain keys
window.addEventListener("keydown", function(event){
// Use default behavior if user is in a form
var element = event.target.tagName.toLowerCase();
if(element == 'input' || element == 'textarea'){
return;
}
// Check the key
switch (event.keyCode) {
case 32: //SpaceBar
event.preventDefault();
MSTREAM.playPause();
break;
}
return false;
}, false);
};
</script>
<script>
function AVPlayerPlay(){
console.log('FLAC PLAY FUNCTION CALLED');
if(AVplayer.playing){
console.log('WTF');
return;
}
AVplayer.play();
var event = new CustomEvent("playing", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.getElementById("audio").dispatchEvent(event);
}
function AVPlayerPause(){
AVplayer.pause();
var event = new CustomEvent("pause", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.getElementById("audio").dispatchEvent(event);
}
// function AVPlayerPlay(){
// console.log('FLAC PLAY FUNCTION CALLED');
//
// if(AVplayer.playing){
// console.log('WTF');
// return;
// }
//
// AVplayer.play();
// var event = new CustomEvent("playing", { "detail": "Example of an event" });
// // Dispatch/Trigger/Fire the event
// document.getElementById("audio").dispatchEvent(event);
// }
//
// function AVPlayerPause(){
// AVplayer.pause();
// var event = new CustomEvent("pause", { "detail": "Example of an event" });
// // Dispatch/Trigger/Fire the event
// document.getElementById("audio").dispatchEvent(event);
// }
</script>
</head>
@ -225,18 +458,15 @@
<div class="clear flatline" ></div>
<div class="clear col scroll scrollBoxHeight2">
<ul class="clear" id="playlist"></ul>
<ul class="clear" >
<draggable :list="playlist" @end="checkMove" id="playlist">
<li v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :text="song.filepath" >
</li>
</draggable>
</ul>
</div>
<div class="playerControls">
<div class="albumArt"></div>
<div class="top"></div>
<div class="bottom">
<div class="previousButton"></div>
<div class="nextButton"></div>
</div>
</div>
</div><!--/6 cols-->
</div>
</div>
@ -252,7 +482,38 @@
<div class ="row">
<div id="jp_container_1" class="jp-audio">
<paper-audio-player id="mplayer" src="" color="#6684B2" title="Welcome To mStream"></paper-audio-player>
<!-- <paper-audio-player id="mplayer" src="" color="#6684B2" title="Welcome To mStream"></paper-audio-player> -->
<div class="mstream-player">
<div id="previous-button" class="previous-button">
<div class="previous-border">
<img class="previous-image" src="/public-shared/img/previous-white.svg">
</div>
</div>
<div id="play-pause-button" class="play-pause-button">
<div id="play-pause-border" class="play-pause-border">
<img id="play-pause-image" class="play-pause-image" :src="imgsrc" >
</div>
</div>
<div id="next-button" class="next-button">
<div class="next-border">
<img class="mext-image" src="/public-shared/img/next-white.svg">
</div>
</div>
<div v-on:click="goToPosition($event)" id="progress-bar" class="progress-bar">
<div class="titlebar" >
<div id="title-text" class="title-text">{{currentSongText}}</div>
<div class="duration-text">{{showTime}}</div>
</div>
<div class="pbar" :style="widthcss"></div>
</div>
</div>
</div>
</div>

BIN
public/paper-player.zip Normal file
View File

Binary file not shown.

31
public/paper-player/font-roboto/.bower.json
View File

@ -1,31 +0,0 @@
{
"name": "font-roboto",
"version": "1.0.1",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
],
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "21ce9b51a417fa9995cf6606e886aba0728f70a1"
},
"_source": "git://github.com/PolymerElements/font-roboto.git",
"_target": "^1.0.1",
"_originalSource": "PolymerElements/font-roboto"
}

1
public/paper-player/font-roboto/README.md
View File

@ -1 +0,0 @@
# font-roboto

22
public/paper-player/font-roboto/bower.json
View File

@ -1,22 +0,0 @@
{
"name": "font-roboto",
"version": "1.0.1",
"description": "An HTML import for Roboto",
"authors": [
"The Polymer Authors"
],
"keywords": [
"font",
"roboto"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/font-roboto.git"
},
"main": "roboto.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/font-roboto/",
"ignore": [
"/.*"
]
}

11
public/paper-player/font-roboto/roboto.html
View File

@ -1,11 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">

43
public/paper-player/iron-a11y-keys-behavior/.bower.json
View File

@ -1,43 +0,0 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.7",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.1.7",
"_resolution": {
"type": "version",
"tag": "v1.1.7",
"commit": "cde403dee704a1d3ea5f7cb49067f0eab31a8afa"
},
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.1.5",
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
}

33
public/paper-player/iron-a11y-keys-behavior/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/iron-a11y-keys-behavior/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

1
public/paper-player/iron-a11y-keys-behavior/.gitignore vendored
View File

@ -1 +0,0 @@
bower_components

25
public/paper-player/iron-a11y-keys-behavior/.travis.yml
View File

@ -1,25 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: >-
XJ31r/5USVGZRtziCLfr8qM1pJKKQMUN1AeYbCdDFEc6i293WxZneR8PwUVhvyptu+qdyd28uy24sH+Ob7kShFbZTUaif5P4gqHPekrYToI0aHyhmVX7C1LmT7nEL8IcT62NhUwh+83eHTAdodkXgnhfQhPn9FHV24Dkvwm8OKhhzEhtTgUGVuGX9j9FyNV6n1+gf4X3Zq63+NkEUh5vpolpue4W7ul2u0sf4l0fzg9pvKPCmywUwX2i7wwAEf3CJghMu2xup54OzXTEkjjSou/ebt1ZnxaUNV1+dblfUne0v9wTD0dPF8H3DwgewwzcZSbOZmj6lFVHRzmLzWcRJOEKdDrpJkjpg7HIhNPGCKDUcNylekafqi7ezhzrkzFwkh6JCdAj7He4mv/X/OUDNjNCClB7Ms/+WPZwtACvIcR2/pvgZ+1PHbIkbIInyAe6iVMMR0oUecei/X+d04DH7iW7rrODVEu6qdibsJki0R0lR2184rrDO9pGek4rLu9sUQBDNgEM6ZLEXXByO8lpG4xStRdkg0/uR5i1/Q8kux4gIJ9yV8WLANkS8NVlmuJgIi6kbh5n4VVKaihGhbBUuTt2aL7fLnH2I6YRwjyNI9TOIRxwk4afppFYUuq6Fv+nfPcdqDOi5Y2AOXLJ3Yvco0+H57nXe/Ny29gFVW4Kftg=
- secure: >-
huEi/Ja2qnLatb7EJ4Jdc/XAeKphhdH6G+px7/XZY33oDawjStxakx0N/MpT0LPE1BdEWOYTzc17CzKv9R2L3ybWksqXyv/Zs+1NMTmpEAS/54Sk4E61aE3nrV5cfS2R8dBGbJhFoH1W237BDsbw9A4XhsTvhxlIsluWsZgeurbleGg+DgAmg8KlHGRddsfBFgXEk+Khhj6KPsbgPUiWhXpdnXKBPJKF7fJEAbsGR4aFK2eFbYd1OAgJg2Aye0n93IHe+SsxcKRUYteg6UK9V8fk7q5PBlvaodly4F3gH82l+zbnhcTFVW+qN0s6xDBTQzsQ55eTlO3pEezIo3u/1Lq41Yoe6scEkLs63pSYqoB3kakbhLMDJAen080ggdNg9evqvgyznKFYM7sqEcPu+KxHd043DyLTTW11y9lZ/hV3xSTdG4W8mV7+ILbIi54wMaYAcWSGMTOVM0JC/KDoVjze3tzDmfcZwiutLPBFgfrkfJQf3fyqcgvhoLKtHaWHI+76XDsXwEOS2Q5OX9oDtjoZaZ7r8Gp4dqwaKYceOrlsLbaZOLh5nJ4WnDbf4AqZkeM22QWWIfUN6aK+yhsDpQ/d+xJ+/WFENDADrMEKp0Lf3CkzAAcpHp3u65B9qsqweD5/5Je9t0GsA/NvK2xCasnNz6inYy4tAx9i4NWPcOY=
node_js: stable
addons:
firefox: '46.0'
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
script:
- xvfb-run wct
- 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
dist: trusty

77
public/paper-player/iron-a11y-keys-behavior/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

58
public/paper-player/iron-a11y-keys-behavior/README.md
View File

@ -1,58 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
iron-a11y-keys-behavior.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/iron-a11y-keys-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-a11y-keys-behavior)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-a11y-keys-behavior)_
##Polymer.IronA11yKeysBehavior
`Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
The element takes care of browser differences with respect to Keyboard events
and uses an expressive syntax to filter key presses.
Use the `keyBindings` prototype property to express what combination of keys
will trigger the callback. A key binding has the format
`"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or
`"KEY:EVENT": "callback"` are valid as well). Some examples:
```javascript
keyBindings: {
'space': '_onKeydown', // same as 'space:keydown'
'shift+tab': '_onKeydown',
'enter:keypress': '_onKeypress',
'esc:keyup': '_onKeyup'
}
```
The callback will receive with an event containing the following information in `event.detail`:
```javascript
_onKeydown: function(event) {
console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab"
console.log(event.detail.key); // KEY only, e.g. "tab"
console.log(event.detail.event); // EVENT, e.g. "keydown"
console.log(event.detail.keyboardEvent); // the original KeyboardEvent
}
```
Use the `keyEventTarget` attribute to set up event handlers on a specific
node.
See the [demo source code](https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/master/demo/x-key-aware.html)
for an example.

33
public/paper-player/iron-a11y-keys-behavior/bower.json
View File

@ -1,33 +0,0 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.7",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
"web-component",
"polymer",
"a11y",
"input"
],
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git"
},
"main": "iron-a11y-keys-behavior.html",
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.2",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": []
}

24
public/paper-player/iron-a11y-keys-behavior/demo/index.html
View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>Iron A11y Keys Behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="x-key-aware.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<x-key-aware></x-key-aware>
</div>
</body>
</html>

105
public/paper-player/iron-a11y-keys-behavior/demo/x-key-aware.html
View File

@ -1,105 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
<dom-module id="x-key-aware">
<template>
<style>
:host {
display: block;
position: relative;
}
pre {
color: var(--google-blue-700);
}
.keys {
line-height: 25px;
}
.keys span {
cursor: default;
background-color: var(--google-grey-100);
border: 1px solid var(--google-grey-300);
padding: 1px 5px;
border-radius: 5px;
}
</style>
<h4>Press any of these keys</h4>
<input type="checkbox" checked="{{preventDefault::change}}"> prevent default = {{preventDefault}}
<p class="keys">
<template is="dom-repeat" items="[[boundKeys]]">
<span>{{item}}</span>
</template>
</p>
<pre>[[pressed]]</pre>
</template>
</dom-module>
<script>
Polymer({
is: 'x-key-aware',
behaviors: [
Polymer.IronA11yKeysBehavior
],
properties: {
pressed: {
type: String,
readOnly: true,
value: ''
},
boundKeys: {
type: Array,
value: function() {
return Object.keys(this.keyBindings).join(' ').split(' ');
}
},
preventDefault: {
type: Boolean,
value: true,
notify: true
},
keyEventTarget: {
type: Object,
value: function() {
return document.body;
}
}
},
keyBindings: {
'* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\ + : # backspace': '_updatePressed',
'a': '_updatePressed',
'shift+a alt+a': '_updatePressed',
'shift+tab shift+space': '_updatePressed'
},
_updatePressed: function(event) {
console.log(event.detail);
if (this.preventDefault) {
event.preventDefault();
}
this._setPressed(
this.pressed + event.detail.combo + ' pressed!\n'
);
}
});
</script>

24
public/paper-player/iron-a11y-keys-behavior/index.html
View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-a11y-keys-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

492
public/paper-player/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
View File

@ -1,492 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<script>
(function() {
'use strict';
/**
* Chrome uses an older version of DOM Level 3 Keyboard Events
*
* Most keys are labeled as text, but some are Unicode codepoints.
* Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
*/
var KEY_IDENTIFIER = {
'U+0008': 'backspace',
'U+0009': 'tab',
'U+001B': 'esc',
'U+0020': 'space',
'U+007F': 'del'
};
/**
* Special table for KeyboardEvent.keyCode.
* KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better
* than that.
*
* Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
*/
var KEY_CODE = {
8: 'backspace',
9: 'tab',
13: 'enter',
27: 'esc',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
32: 'space',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
46: 'del',
106: '*'
};
/**
* MODIFIER_KEYS maps the short name for modifier keys used in a key
* combo string to the property name that references those same keys
* in a KeyboardEvent instance.
*/
var MODIFIER_KEYS = {
'shift': 'shiftKey',
'ctrl': 'ctrlKey',
'alt': 'altKey',
'meta': 'metaKey'
};
/**
* KeyboardEvent.key is mostly represented by printable character made by
* the keyboard, with unprintable keys labeled nicely.
*
* However, on OS X, Alt+char can make a Unicode character that follows an
* Apple-specific mapping. In this case, we fall back to .keyCode.
*/
var KEY_CHAR = /[a-z0-9*]/;
/**
* Matches a keyIdentifier string.
*/
var IDENT_CHAR = /U\+/;
/**
* Matches arrow keys in Gecko 27.0+
*/
var ARROW_KEY = /^arrow/;
/**
* Matches space keys everywhere (notably including IE10's exceptional name
* `spacebar`).
*/
var SPACE_KEY = /^space(bar)?/;
/**
* Matches ESC key.
*
* Value from: http://w3c.github.io/uievents-key/#key-Escape
*/
var ESC_KEY = /^escape$/;
/**
* Transforms the key.
* @param {string} key The KeyBoardEvent.key
* @param {Boolean} [noSpecialChars] Limits the transformation to
* alpha-numeric characters.
*/
function transformKey(key, noSpecialChars) {
var validKey = '';
if (key) {
var lKey = key.toLowerCase();
if (lKey === ' ' || SPACE_KEY.test(lKey)) {
validKey = 'space';
} else if (ESC_KEY.test(lKey)) {
validKey = 'esc';
} else if (lKey.length == 1) {
if (!noSpecialChars || KEY_CHAR.test(lKey)) {
validKey = lKey;
}
} else if (ARROW_KEY.test(lKey)) {
validKey = lKey.replace('arrow', '');
} else if (lKey == 'multiply') {
// numpad '*' can map to Multiply on IE/Windows
validKey = '*';
} else {
validKey = lKey;
}
}
return validKey;
}
function transformKeyIdentifier(keyIdent) {
var validKey = '';
if (keyIdent) {
if (keyIdent in KEY_IDENTIFIER) {
validKey = KEY_IDENTIFIER[keyIdent];
} else if (IDENT_CHAR.test(keyIdent)) {
keyIdent = parseInt(keyIdent.replace('U+', '0x'), 16);
validKey = String.fromCharCode(keyIdent).toLowerCase();
} else {
validKey = keyIdent.toLowerCase();
}
}
return validKey;
}
function transformKeyCode(keyCode) {
var validKey = '';
if (Number(keyCode)) {
if (keyCode >= 65 && keyCode <= 90) {
// ascii a-z
// lowercase is 32 offset from uppercase
validKey = String.fromCharCode(32 + keyCode);
} else if (keyCode >= 112 && keyCode <= 123) {
// function keys f1-f12
validKey = 'f' + (keyCode - 112);
} else if (keyCode >= 48 && keyCode <= 57) {
// top 0-9 keys
validKey = String(keyCode - 48);
} else if (keyCode >= 96 && keyCode <= 105) {
// num pad 0-9
validKey = String(keyCode - 96);
} else {
validKey = KEY_CODE[keyCode];
}
}
return validKey;
}
/**
* Calculates the normalized key for a KeyboardEvent.
* @param {KeyboardEvent} keyEvent
* @param {Boolean} [noSpecialChars] Set to true to limit keyEvent.key
* transformation to alpha-numeric chars. This is useful with key
* combinations like shift + 2, which on FF for MacOS produces
* keyEvent.key = @
* To get 2 returned, set noSpecialChars = true
* To get @ returned, set noSpecialChars = false
*/
function normalizedKeyForEvent(keyEvent, noSpecialChars) {
// Fall back from .key, to .keyIdentifier, to .keyCode, and then to
// .detail.key to support artificial keyboard events.
return transformKey(keyEvent.key, noSpecialChars) ||
transformKeyIdentifier(keyEvent.keyIdentifier) ||
transformKeyCode(keyEvent.keyCode) ||
transformKey(keyEvent.detail ? keyEvent.detail.key : keyEvent.detail, noSpecialChars) || '';
}
function keyComboMatchesEvent(keyCombo, event) {
// For combos with modifiers we support only alpha-numeric keys
var keyEvent = normalizedKeyForEvent(event, keyCombo.hasModifiers);
return keyEvent === keyCombo.key &&
(!keyCombo.hasModifiers || (
!!event.shiftKey === !!keyCombo.shiftKey &&
!!event.ctrlKey === !!keyCombo.ctrlKey &&
!!event.altKey === !!keyCombo.altKey &&
!!event.metaKey === !!keyCombo.metaKey)
);
}
function parseKeyComboString(keyComboString) {
if (keyComboString.length === 1) {
return {
combo: keyComboString,
key: keyComboString,
event: 'keydown'
};
}
return keyComboString.split('+').reduce(function(parsedKeyCombo, keyComboPart) {
var eventParts = keyComboPart.split(':');
var keyName = eventParts[0];
var event = eventParts[1];
if (keyName in MODIFIER_KEYS) {
parsedKeyCombo[MODIFIER_KEYS[keyName]] = true;
parsedKeyCombo.hasModifiers = true;
} else {
parsedKeyCombo.key = keyName;
parsedKeyCombo.event = event || 'keydown';
}
return parsedKeyCombo;
}, {
combo: keyComboString.split(':').shift()
});
}
function parseEventString(eventString) {
return eventString.trim().split(' ').map(function(keyComboString) {
return parseKeyComboString(keyComboString);
});
}
/**
* `Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
* keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
* The element takes care of browser differences with respect to Keyboard events
* and uses an expressive syntax to filter key presses.
*
* Use the `keyBindings` prototype property to express what combination of keys
* will trigger the callback. A key binding has the format
* `"KEY+MODIFIER:EVENT": "callback"` (`"KEY": "callback"` or
* `"KEY:EVENT": "callback"` are valid as well). Some examples:
*
* keyBindings: {
* 'space': '_onKeydown', // same as 'space:keydown'
* 'shift+tab': '_onKeydown',
* 'enter:keypress': '_onKeypress',
* 'esc:keyup': '_onKeyup'
* }
*
* The callback will receive with an event containing the following information in `event.detail`:
*
* _onKeydown: function(event) {
* console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab"
* console.log(event.detail.key); // KEY only, e.g. "tab"
* console.log(event.detail.event); // EVENT, e.g. "keydown"
* console.log(event.detail.keyboardEvent); // the original KeyboardEvent
* }
*
* Use the `keyEventTarget` attribute to set up event handlers on a specific
* node.
*
* See the [demo source code](https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/master/demo/x-key-aware.html)
* for an example.
*
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronA11yKeysBehavior = {
properties: {
/**
* The EventTarget that will be firing relevant KeyboardEvents. Set it to
* `null` to disable the listeners.
* @type {?EventTarget}
*/
keyEventTarget: {
type: Object,
value: function() {
return this;
}
},
/**
* If true, this property will cause the implementing element to
* automatically stop propagation on any handled KeyboardEvents.
*/
stopKeyboardEventPropagation: {
type: Boolean,
value: false
},
_boundKeyHandlers: {
type: Array,
value: function() {
return [];
}
},
// We use this due to a limitation in IE10 where instances will have
// own properties of everything on the "prototype".
_imperativeKeyBindings: {
type: Object,
value: function() {
return {};
}
}
},
observers: [
'_resetKeyEventListeners(keyEventTarget, _boundKeyHandlers)'
],
/**
* To be used to express what combination of keys will trigger the relative
* callback. e.g. `keyBindings: { 'esc': '_onEscPressed'}`
* @type {Object}
*/
keyBindings: {},
registered: function() {
this._prepKeyBindings();
},
attached: function() {
this._listenKeyEventListeners();
},
detached: function() {
this._unlistenKeyEventListeners();
},
/**
* Can be used to imperatively add a key binding to the implementing
* element. This is the imperative equivalent of declaring a keybinding
* in the `keyBindings` prototype property.
*/
addOwnKeyBinding: function(eventString, handlerName) {
this._imperativeKeyBindings[eventString] = handlerName;
this._prepKeyBindings();
this._resetKeyEventListeners();
},
/**
* When called, will remove all imperatively-added key bindings.
*/
removeOwnKeyBindings: function() {
this._imperativeKeyBindings = {};
this._prepKeyBindings();
this._resetKeyEventListeners();
},
/**
* Returns true if a keyboard event matches `eventString`.
*
* @param {KeyboardEvent} event
* @param {string} eventString
* @return {boolean}
*/
keyboardEventMatchesKeys: function(event, eventString) {
var keyCombos = parseEventString(eventString);
for (var i = 0; i < keyCombos.length; ++i) {
if (keyComboMatchesEvent(keyCombos[i], event)) {
return true;
}
}
return false;
},
_collectKeyBindings: function() {
var keyBindings = this.behaviors.map(function(behavior) {
return behavior.keyBindings;
});
if (keyBindings.indexOf(this.keyBindings) === -1) {
keyBindings.push(this.keyBindings);
}
return keyBindings;
},
_prepKeyBindings: function() {
this._keyBindings = {};
this._collectKeyBindings().forEach(function(keyBindings) {
for (var eventString in keyBindings) {
this._addKeyBinding(eventString, keyBindings[eventString]);
}
}, this);
for (var eventString in this._imperativeKeyBindings) {
this._addKeyBinding(eventString, this._imperativeKeyBindings[eventString]);
}
// Give precedence to combos with modifiers to be checked first.
for (var eventName in this._keyBindings) {
this._keyBindings[eventName].sort(function (kb1, kb2) {
var b1 = kb1[0].hasModifiers;
var b2 = kb2[0].hasModifiers;
return (b1 === b2) ? 0 : b1 ? -1 : 1;
})
}
},
_addKeyBinding: function(eventString, handlerName) {
parseEventString(eventString).forEach(function(keyCombo) {
this._keyBindings[keyCombo.event] =
this._keyBindings[keyCombo.event] || [];
this._keyBindings[keyCombo.event].push([
keyCombo,
handlerName
]);
}, this);
},
_resetKeyEventListeners: function() {
this._unlistenKeyEventListeners();
if (this.isAttached) {
this._listenKeyEventListeners();
}
},
_listenKeyEventListeners: function() {
if (!this.keyEventTarget) {
return;
}
Object.keys(this._keyBindings).forEach(function(eventName) {
var keyBindings = this._keyBindings[eventName];
var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings);
this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyHandler]);
this.keyEventTarget.addEventListener(eventName, boundKeyHandler);
}, this);
},
_unlistenKeyEventListeners: function() {
var keyHandlerTuple;
var keyEventTarget;
var eventName;
var boundKeyHandler;
while (this._boundKeyHandlers.length) {
// My kingdom for block-scope binding and destructuring assignment..
keyHandlerTuple = this._boundKeyHandlers.pop();
keyEventTarget = keyHandlerTuple[0];
eventName = keyHandlerTuple[1];
boundKeyHandler = keyHandlerTuple[2];
keyEventTarget.removeEventListener(eventName, boundKeyHandler);
}
},
_onKeyBindingEvent: function(keyBindings, event) {
if (this.stopKeyboardEventPropagation) {
event.stopPropagation();
}
// if event has been already prevented, don't do anything
if (event.defaultPrevented) {
return;
}
for (var i = 0; i < keyBindings.length; i++) {
var keyCombo = keyBindings[i][0];
var handlerName = keyBindings[i][1];
if (keyComboMatchesEvent(keyCombo, event)) {
this._triggerKeyHandler(keyCombo, handlerName, event);
// exit the loop if eventDefault was prevented
if (event.defaultPrevented) {
return;
}
}
}
},
_triggerKeyHandler: function(keyCombo, handlerName, keyboardEvent) {
var detail = Object.create(keyCombo);
detail.keyboardEvent = keyboardEvent;
var event = new CustomEvent(keyCombo.event, {
detail: detail,
cancelable: true
});
this[handlerName].call(this, event);
if (event.defaultPrevented) {
keyboardEvent.preventDefault();
}
}
};
})();
</script>

446
public/paper-player/iron-a11y-keys-behavior/test/basic-test.html
View File

@ -1,446 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-a11y-keys</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys-behavior.html">
</head>
<body>
<test-fixture id="BasicKeys">
<template>
<x-a11y-basic-keys></x-a11y-basic-keys>
</template>
</test-fixture>
<test-fixture id="NonPropagatingKeys">
<template>
<x-a11y-basic-keys stop-keyboard-event-propagation></x-a11y-basic-keys>
</template>
</test-fixture>
<test-fixture id="ComboKeys">
<template>
<x-a11y-combo-keys></x-a11y-combo-keys>
</template>
</test-fixture>
<test-fixture id="AlternativeEventKeys">
<template>
<x-a11y-alternate-event-keys></x-a11y-alternate-event-keys>
</template>
</test-fixture>
<test-fixture id="BehaviorKeys">
<template>
<x-a11y-behavior-keys></x-a11y-behavior-keys>
</template>
</test-fixture>
<test-fixture id="PreventKeys">
<template>
<x-a11y-prevent-keys></x-a11y-prevent-keys>
</template>
</test-fixture>
<script>
suite('Polymer.IronA11yKeysBehavior', function() {
var keys;
suiteSetup(function() {
var KeysTestBehavior = [Polymer.IronA11yKeysBehavior, {
properties: {
keyCount: {
type: Number,
value: 0
}
},
_keyHandler: function(event) {
this.keyCount++;
this.lastEvent = event;
},
// Same as _keyHandler, used to distinguish who's called before who.
_keyHandler2: function(event) {
this.keyCount++;
this.lastEvent = event;
},
_preventDefaultHandler: function(event) {
event.preventDefault();
this.keyCount++;
this.lastEvent = event;
}
}];
Polymer({
is: 'x-a11y-basic-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space': '_keyHandler',
'@': '_keyHandler',
'esc': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-combo-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'enter': '_keyHandler2',
'ctrl+shift+a shift+enter': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-alternate-event-keys',
behaviors: [
KeysTestBehavior
],
keyBindings: {
'space:keyup': '_keyHandler'
}
});
var XA11yBehavior = {
keyBindings: {
'enter': '_keyHandler'
}
};
Polymer({
is: 'x-a11y-behavior-keys',
behaviors: [
KeysTestBehavior,
XA11yBehavior
],
keyBindings: {
'enter': '_keyHandler'
}
});
Polymer({
is: 'x-a11y-prevent-keys',
behaviors: [
KeysTestBehavior,
XA11yBehavior
],
keyBindings: {
'space a': '_keyHandler',
'enter shift+a': '_preventDefaultHandler'
}
});
});
suite('basic keys', function() {
setup(function() {
keys = fixture('BasicKeys');
});
test('trigger the handler when the specified key is pressed', function() {
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
test('keyEventTarget can be null, and disables listeners', function() {
keys.keyEventTarget = null;
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(0);
});
test('trigger the handler when the specified key is pressed together with a modifier', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.keyCode = event.code = 32;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
test('handles special character @', function() {
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], '@');
expect(keys.keyCount).to.be.equal(1);
});
test('handles variations of Esc key', function() {
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], 'Esc');
expect(keys.keyCount).to.be.equal(1);
MockInteractions.pressAndReleaseKeyOn(keys, undefined, [], 'Escape');
expect(keys.keyCount).to.be.equal(2);
MockInteractions.pressAndReleaseKeyOn(keys, 27, [], '');
expect(keys.keyCount).to.be.equal(3);
});
test('do not trigger the handler for non-specified keys', function() {
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
});
test('can have bindings added imperatively', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(1);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(2);
});
test('can remove imperatively added bindings', function() {
keys.addOwnKeyBinding('enter', '_keyHandler');
keys.removeOwnKeyBindings();
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(1);
});
test('allows propagation beyond the key combo handler', function() {
var keySpy = sinon.spy();
document.addEventListener('keydown', keySpy);
MockInteractions.pressEnter(keys);
expect(keySpy.callCount).to.be.equal(1);
});
suite('edge cases', function() {
test('knows that `spacebar` is the same as `space`', function() {
var event = new CustomEvent('keydown');
event.key = 'spacebar';
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
test('handles `+`', function() {
var event = new CustomEvent('keydown');
event.key = '+';
expect(keys.keyboardEventMatchesKeys(event, '+')).to.be.equal(true);
});
test('handles `:`', function() {
var event = new CustomEvent('keydown');
event.key = ':';
expect(keys.keyboardEventMatchesKeys(event, ':')).to.be.equal(true);
});
test('handles ` ` (space)', function() {
var event = new CustomEvent('keydown');
event.key = ' ';
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
});
suite('matching keyboard events to keys', function() {
test('can be done imperatively', function() {
var event = new CustomEvent('keydown');
event.keyCode = 65;
expect(keys.keyboardEventMatchesKeys(event, 'a')).to.be.equal(true);
});
test('can be done with a provided keyboardEvent', function() {
var event;
MockInteractions.pressSpace(keys);
event = keys.lastEvent;
expect(event.detail.keyboardEvent).to.be.okay;
expect(keys.keyboardEventMatchesKeys(event, 'space')).to.be.equal(true);
});
test('can handle variations in arrow key names', function() {
var event = new CustomEvent('keydown');
event.key = 'up';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
event.key = 'ArrowUp';
expect(keys.keyboardEventMatchesKeys(event, 'up')).to.be.equal(true);
});
});
suite('matching keyboard events to top row and number pad digit keys', function() {
test('top row can be done imperatively', function() {
var event = new CustomEvent('keydown');
event.keyCode = 49;
expect(keys.keyboardEventMatchesKeys(event, '1')).to.be.equal(true);
});
test('number pad digits can be done imperatively', function() {
var event = new CustomEvent('keydown');
event.keyCode = 97;
expect(keys.keyboardEventMatchesKeys(event, '1')).to.be.equal(true);
});
});
});
suite('combo keys', function() {
setup(function() {
keys = fixture('ComboKeys');
});
test('trigger the handler when the combo is pressed', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.shiftKey = true;
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
test('check if KeyBoardEvent.key is alpha-numberic', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;
event.shiftKey = true;
event.key = 'å';
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
});
test('trigger also bindings without modifiers', function() {
var event = new CustomEvent('keydown');
// Combo `shift+enter`.
event.shiftKey = true;
event.keyCode = event.code = 13;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(2);
});
test('give precendence to combos with modifiers', function() {
var enterSpy = sinon.spy(keys, '_keyHandler2');
var shiftEnterSpy = sinon.spy(keys, '_keyHandler');
var event = new CustomEvent('keydown');
// Combo `shift+enter`.
event.shiftKey = true;
event.keyCode = event.code = 13;
keys.dispatchEvent(event);
expect(enterSpy.called).to.be.true;
expect(shiftEnterSpy.called).to.be.true;
expect(enterSpy.calledAfter(shiftEnterSpy)).to.be.true;
});
});
suite('alternative event keys', function() {
setup(function() {
keys = fixture('AlternativeEventKeys');
});
test('trigger on the specified alternative keyboard event', function() {
MockInteractions.keyDownOn(keys, 32);
expect(keys.keyCount).to.be.equal(0);
MockInteractions.keyUpOn(keys, 32);
expect(keys.keyCount).to.be.equal(1);
});
});
suite('behavior keys', function() {
setup(function() {
keys = fixture('BehaviorKeys');
});
test('bindings in other behaviors are transitive', function() {
MockInteractions.pressEnter(keys);
expect(keys.keyCount).to.be.equal(2);
});
});
suite('stopping propagation automatically', function() {
setup(function() {
keys = fixture('NonPropagatingKeys');
});
test('does not propagate key events beyond the combo handler', function() {
var keySpy = sinon.spy();
document.addEventListener('keydown', keySpy);
MockInteractions.pressEnter(keys);
expect(keySpy.callCount).to.be.equal(0);
});
});
suite('prevent default behavior of event', function() {
setup(function() {
keys = fixture('PreventKeys');
});
test('`defaultPrevented` is correctly set', function() {
MockInteractions.pressEnter(keys);
expect(keys.lastEvent.defaultPrevented).to.be.equal(true);
});
test('only 1 handler is invoked', function() {
var aSpy = sinon.spy(keys, '_keyHandler');
var shiftASpy = sinon.spy(keys, '_preventDefaultHandler');
var event = new CustomEvent('keydown', {
cancelable: true
});
// Combo `shift+a`.
event.shiftKey = true;
event.keyCode = event.code = 65;
keys.dispatchEvent(event);
expect(keys.keyCount).to.be.equal(1);
expect(shiftASpy.called).to.be.true;
expect(aSpy.called).to.be.false;
});
});
suite('remove key behavior with null target', function () {
test('add and remove a iron-a11y-keys-behavior', function () {
var element = document.createElement('x-a11y-basic-keys');
element.keyEventTarget = null;
document.body.appendChild(element);
document.body.removeChild(element);
});
});
});
</script>
</body>
</html>

28
public/paper-player/iron-a11y-keys-behavior/test/index.html
View File

@ -1,28 +0,0 @@
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Tests</title>
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
// Load and run all tests (.html, .js) as one suite:
WCT.loadSuites([
'basic-test.html',
'basic-test.html?dom=shadow'
]);
</script>
</body></html>

42
public/paper-player/iron-behaviors/.bower.json
View File

@ -1,42 +0,0 @@
{
"name": "iron-behaviors",
"version": "1.0.17",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"paper-input": "polymerelements/paper-input#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.17",
"_resolution": {
"type": "version",
"tag": "v1.0.17",
"commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f"
},
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-behaviors"
}

33
public/paper-player/iron-behaviors/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/iron-behaviors/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

1
public/paper-player/iron-behaviors/.gitignore vendored
View File

@ -1 +0,0 @@
bower_components

23
public/paper-player/iron-behaviors/.travis.yml
View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: H49pcRc5C6G+ti/ehtT74GZdsUsM/xCvEVJBmKq8rpck7s18R6BbH37RkF2XgYfO4rVa1Bl4KU4Wf5S6aIDYzdaq/phGtFQ04NmDYGbmBhRjwfgxlW4dJ7mkXqXCvNZkxJtAJpgzgVG+xu/I6GsO1Lp4VjGENvVYSsrkGIlSA34=
- secure: Zq+hvOlL1RmTtMfAtO3bxqYnB7X6MY199cVCKo2J/EbsMvOHII1JvEU1+s2/UG9tgoiXkd7N2OfFOivlbQ75BDIwtvkq32KZNrUEC6vRGhbMBc8JCKkdFB/XHh1mNhQcn6Js656PhZIj2WteZYMSGYDUj7KcBBMacRZQKWuB0OU=
node_js: stable
addons:
firefox: '46.0'
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
script:
- xvfb-run wct
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
dist: trusty

77
public/paper-player/iron-behaviors/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

22
public/paper-player/iron-behaviors/README.md
View File

@ -1,22 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
iron-button-state.html iron-control-state.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/iron-behaviors.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-behaviors)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-behaviors)_
<!-- No docs for Polymer.IronButtonState found. -->
<!-- No docs for Polymer.IronControlState found. -->

32
public/paper-player/iron-behaviors/bower.json
View File

@ -1,32 +0,0 @@
{
"name": "iron-behaviors",
"version": "1.0.17",
"description": "Provides a set of behaviors for the iron elements",
"private": true,
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-behaviors.git"
},
"main": [
"iron-button-state.html",
"iron-control-state.html"
],
"license": "http://polymer.github.io/LICENSE.txt",
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.2",
"paper-input": "polymerelements/paper-input#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": []
}

48
public/paper-player/iron-behaviors/demo/index.html
View File

@ -1,48 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>simple-button</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link href="../../paper-styles/demo-pages.html" rel="import">
<link href="simple-button.html" rel="import">
<style>
.vertical-section {
text-align: center;
}
</style>
</head>
<body>
<div class="vertical-section vertical-section-container centered">
<h3>Normal</h3>
<simple-button tabindex="0">Hello World</simple-button>
<h3>Toggles</h3>
<simple-button toggles tabindex="0">Hello World</simple-button>
<h3>Disabled</h3>
<simple-button disabled tabindex="0">Hello World</simple-button>
</div>
</body>
</html>

66
public/paper-player/iron-behaviors/demo/simple-button.html
View File

@ -1,66 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-button-state.html">
<link rel="import" href="../iron-control-state.html">
<dom-module id="simple-button">
<template>
<style>
:host {
display: inline-block;
background-color: #4285F4;
color: #fff;
min-height: 8px;
min-width: 8px;
padding: 16px;
text-transform: uppercase;
border-radius: 3px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
:host([disabled]) {
opacity: 0.3;
pointer-events: none;
}
:host([active]),
:host([pressed]) {
background-color: #3367D6;
box-shadow: inset 0 3px 5px rgba(0,0,0,.2);
}
</style>
<content></content>
</template>
<script>
Polymer({
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
hostAttributes: {
role: 'button'
}
});
</script>
</dom-module>

27
public/paper-player/iron-behaviors/index.html
View File

@ -1,27 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>Iron Behaviors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="iron-button-state.html"></iron-component-page>
</body>
</html>

228
public/paper-player/iron-behaviors/iron-button-state.html
View File

@ -1,228 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="iron-control-state.html">
<script>
/**
* @demo demo/index.html
* @polymerBehavior Polymer.IronButtonState
*/
Polymer.IronButtonStateImpl = {
properties: {
/**
* If true, the user is currently holding down the button.
*/
pressed: {
type: Boolean,
readOnly: true,
value: false,
reflectToAttribute: true,
observer: '_pressedChanged'
},
/**
* If true, the button toggles the active state with each tap or press
* of the spacebar.
*/
toggles: {
type: Boolean,
value: false,
reflectToAttribute: true
},
/**
* If true, the button is a toggle and is currently in the active state.
*/
active: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
},
/**
* True if the element is currently being pressed by a "pointer," which
* is loosely defined as mouse or touch input (but specifically excluding
* keyboard input).
*/
pointerDown: {
type: Boolean,
readOnly: true,
value: false
},
/**
* True if the input device that caused the element to receive focus
* was a keyboard.
*/
receivedFocusFromKeyboard: {
type: Boolean,
readOnly: true
},
/**
* The aria attribute to be set if the button is a toggle and in the
* active state.
*/
ariaActiveAttribute: {
type: String,
value: 'aria-pressed',
observer: '_ariaActiveAttributeChanged'
}
},
listeners: {
down: '_downHandler',
up: '_upHandler',
tap: '_tapHandler'
},
observers: [
'_detectKeyboardFocus(focused)',
'_activeChanged(active, ariaActiveAttribute)'
],
keyBindings: {
'enter:keydown': '_asyncClick',
'space:keydown': '_spaceKeyDownHandler',
'space:keyup': '_spaceKeyUpHandler',
},
_mouseEventRe: /^mouse/,
_tapHandler: function() {
if (this.toggles) {
// a tap is needed to toggle the active state
this._userActivate(!this.active);
} else {
this.active = false;
}
},
_detectKeyboardFocus: function(focused) {
this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
},
// to emulate native checkbox, (de-)activations from a user interaction fire
// 'change' events
_userActivate: function(active) {
if (this.active !== active) {
this.active = active;
this.fire('change');
}
},
_downHandler: function(event) {
this._setPointerDown(true);
this._setPressed(true);
this._setReceivedFocusFromKeyboard(false);
},
_upHandler: function() {
this._setPointerDown(false);
this._setPressed(false);
},
/**
* @param {!KeyboardEvent} event .
*/
_spaceKeyDownHandler: function(event) {
var keyboardEvent = event.detail.keyboardEvent;
var target = Polymer.dom(keyboardEvent).localTarget;
// Ignore the event if this is coming from a focused light child, since that
// element will deal with it.
if (this.isLightDescendant(/** @type {Node} */(target)))
return;
keyboardEvent.preventDefault();
keyboardEvent.stopImmediatePropagation();
this._setPressed(true);
},
/**
* @param {!KeyboardEvent} event .
*/
_spaceKeyUpHandler: function(event) {
var keyboardEvent = event.detail.keyboardEvent;
var target = Polymer.dom(keyboardEvent).localTarget;
// Ignore the event if this is coming from a focused light child, since that
// element will deal with it.
if (this.isLightDescendant(/** @type {Node} */(target)))
return;
if (this.pressed) {
this._asyncClick();
}
this._setPressed(false);
},
// trigger click asynchronously, the asynchrony is useful to allow one
// event handler to unwind before triggering another event
_asyncClick: function() {
this.async(function() {
this.click();
}, 1);
},
// any of these changes are considered a change to button state
_pressedChanged: function(pressed) {
this._changedButtonState();
},
_ariaActiveAttributeChanged: function(value, oldValue) {
if (oldValue && oldValue != value && this.hasAttribute(oldValue)) {
this.removeAttribute(oldValue);
}
},
_activeChanged: function(active, ariaActiveAttribute) {
if (this.toggles) {
this.setAttribute(this.ariaActiveAttribute,
active ? 'true' : 'false');
} else {
this.removeAttribute(this.ariaActiveAttribute);
}
this._changedButtonState();
},
_controlStateChanged: function() {
if (this.disabled) {
this._setPressed(false);
} else {
this._changedButtonState();
}
},
// provide hook for follow-on behaviors to react to button-state
_changedButtonState: function() {
if (this._buttonStateChanged) {
this._buttonStateChanged(); // abstract
}
}
};
/** @polymerBehavior */
Polymer.IronButtonState = [
Polymer.IronA11yKeysBehavior,
Polymer.IronButtonStateImpl
];
</script>

110
public/paper-player/iron-behaviors/iron-control-state.html
View File

@ -1,110 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<script>
/**
* @demo demo/index.html
* @polymerBehavior
*/
Polymer.IronControlState = {
properties: {
/**
* If true, the element currently has focus.
*/
focused: {
type: Boolean,
value: false,
notify: true,
readOnly: true,
reflectToAttribute: true
},
/**
* If true, the user cannot interact with this element.
*/
disabled: {
type: Boolean,
value: false,
notify: true,
observer: '_disabledChanged',
reflectToAttribute: true
},
_oldTabIndex: {
type: Number
},
_boundFocusBlurHandler: {
type: Function,
value: function() {
return this._focusBlurHandler.bind(this);
}
}
},
observers: [
'_changedControlState(focused, disabled)'
],
ready: function() {
this.addEventListener('focus', this._boundFocusBlurHandler, true);
this.addEventListener('blur', this._boundFocusBlurHandler, true);
},
_focusBlurHandler: function(event) {
// NOTE(cdata): if we are in ShadowDOM land, `event.target` will
// eventually become `this` due to retargeting; if we are not in
// ShadowDOM land, `event.target` will eventually become `this` due
// to the second conditional which fires a synthetic event (that is also
// handled). In either case, we can disregard `event.path`.
if (event.target === this) {
this._setFocused(event.type === 'focus');
} else if (!this.shadowRoot) {
var target = /** @type {Node} */(Polymer.dom(event).localTarget);
if (!this.isLightDescendant(target)) {
this.fire(event.type, {sourceEvent: event}, {
node: this,
bubbles: event.bubbles,
cancelable: event.cancelable
});
}
}
},
_disabledChanged: function(disabled, old) {
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
this.style.pointerEvents = disabled ? 'none' : '';
if (disabled) {
this._oldTabIndex = this.tabIndex;
this._setFocused(false);
this.tabIndex = -1;
this.blur();
} else if (this._oldTabIndex !== undefined) {
this.tabIndex = this._oldTabIndex;
}
},
_changedControlState: function() {
// _controlStateChanged is abstract, follow-on behaviors may implement it
if (this._controlStateChanged) {
this._controlStateChanged();
}
}
};
</script>

280
public/paper-player/iron-behaviors/test/active-state.html
View File

@ -1,280 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>active-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="test-elements.html">
<link rel="import" href="../../paper-input/paper-input.html">
</head>
<body>
<test-fixture id="TrivialActiveState">
<template>
<test-button></test-button>
</template>
</test-fixture>
<test-fixture id="ToggleActiveState">
<template>
<test-button toggles></test-button>
</template>
</test-fixture>
<test-fixture id="ButtonWithNativeInput">
<template>
<test-light-dom><input id="input"></test-light-dom>
</template>
</test-fixture>
<test-fixture id="ButtonWithPaperInput">
<template>
<test-light-dom><paper-input id="input"></paper-input></test-light-dom>
</template>
</test-fixture>
<script>
suite('active-state', function() {
var activeTarget;
setup(function() {
activeTarget = fixture('TrivialActiveState');
});
suite('active state with toggles attribute', function() {
setup(function() {
activeTarget = fixture('ToggleActiveState');
});
suite('when down', function() {
test('is pressed', function() {
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('pressed')).to.be.eql(true);
});
});
suite('when clicked', function() {
test('is activated', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
done();
} catch (e) {
done(e);
}
});
});
test('is deactivated by a subsequent click', function(done) {
MockInteractions.downAndUp(activeTarget, function() {
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('false');
done();
} catch (e) {
done(e);
}
});
});
});
test('the correct aria attribute is set', function(done) {
activeTarget.ariaActiveAttribute = 'aria-checked';
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
done();
} catch (e) {
done(e);
}
});
});
test('the aria attribute is updated correctly', function(done) {
activeTarget.ariaActiveAttribute = 'aria-checked';
MockInteractions.downAndUp(activeTarget, function() {
try {
expect(activeTarget.hasAttribute('active')).to.be.eql(true);
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
activeTarget.ariaActiveAttribute = 'aria-pressed';
expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(false);
expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
done();
} catch (e) {
done(e);
}
});
});
});
});
suite('without toggles attribute', function() {
suite('when mouse is down', function() {
test('does not get an active attribute', function() {
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
suite('when mouse is up', function() {
test('does not get an active attribute', function() {
MockInteractions.down(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
MockInteractions.up(activeTarget);
expect(activeTarget.hasAttribute('active')).to.be.eql(false);
});
});
});
suite('when space is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressSpace(activeTarget);
});
test('only triggers click after the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(true);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressSpace(activeTarget);
});
});
suite('when enter is pressed', function() {
test('triggers a click event', function(done) {
activeTarget.addEventListener('click', function() {
done();
});
MockInteractions.pressEnter(activeTarget);
});
test('only triggers click before the key is released', function(done) {
var keyupTriggered = false;
activeTarget.addEventListener('keyup', function() {
keyupTriggered = true;
});
activeTarget.addEventListener('click', function() {
try {
expect(keyupTriggered).to.be.eql(false);
done();
} catch (e) {
done(e);
}
});
MockInteractions.pressEnter(activeTarget);
});
});
suite('nested native input inside button', function() {
test('space in light child input does not trigger a button click event', function(done) {
var item = fixture('ButtonWithNativeInput');
var input = item.querySelector('#input');
var itemClickHandler = sinon.spy();
item.addEventListener('click', itemClickHandler);
input.focus();
MockInteractions.pressSpace(input);
Polymer.Base.async(function(){
expect(itemClickHandler.callCount).to.be.equal(0);
done();
}, 1);
});
test('space in button triggers a button click event', function(done) {
var item = fixture('ButtonWithNativeInput');
var input = item.querySelector('#input');
var itemClickHandler = sinon.spy();
item.addEventListener('click', itemClickHandler);
MockInteractions.pressSpace(item);
Polymer.Base.async(function(){
// You need two ticks, one for the MockInteractions event, and one
// for the button event.
Polymer.Base.async(function(){
expect(itemClickHandler.callCount).to.be.equal(1);
done();
}, 1);
}, 1);
});
});
suite('nested paper-input inside button', function() {
test('space in light child input does not trigger a button click event', function(done) {
var item = fixture('ButtonWithPaperInput');
var input = item.querySelector('#input');
var itemClickHandler = sinon.spy();
item.addEventListener('click', itemClickHandler);
input.focus();
MockInteractions.pressSpace(input);
Polymer.Base.async(function(){
expect(itemClickHandler.callCount).to.be.equal(0);
done();
}, 1);
});
test('space in button triggers a button click event', function(done) {
var item = fixture('ButtonWithPaperInput');
var input = item.querySelector('#input');
var itemClickHandler = sinon.spy();
item.addEventListener('click', itemClickHandler);
MockInteractions.pressSpace(item);
Polymer.Base.async(function(){
// You need two ticks, one for the MockInteractions event, and one
// for the button event.
Polymer.Base.async(function(){
expect(itemClickHandler.callCount).to.be.equal(1);
done();
}, 1);
}, 1);
});
});
});
</script>
</body>
</html>

82
public/paper-player/iron-behaviors/test/disabled-state.html
View File

@ -1,82 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>disabled-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialDisabledState">
<template>
<test-control></test-control>
</template>
</test-fixture>
<test-fixture id="InitiallyDisabledState">
<template>
<test-control disabled></test-control>
</template>
</test-fixture>
<script>
suite('disabled-state', function() {
var disableTarget;
suite('a trivial disabled state', function() {
setup(function() {
disableTarget = fixture('TrivialDisabledState');
});
suite('when disabled is true', function() {
test('receives a disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
});
test('receives an appropriate aria attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
suite('when disabled is false', function() {
test('loses the disabled attribute', function() {
disableTarget.disabled = true;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
disableTarget.disabled = false;
expect(disableTarget.hasAttribute('disabled')).to.be.eql(false);
});
});
});
suite('a state with an initially disabled target', function() {
setup(function() {
disableTarget = fixture('InitiallyDisabledState');
});
test('preserves the disabled attribute on target', function() {
expect(disableTarget.hasAttribute('disabled')).to.be.eql(true);
expect(disableTarget.disabled).to.be.eql(true);
});
test('adds `aria-disabled` to the target', function() {
expect(disableTarget.getAttribute('aria-disabled')).to.be.eql('true');
});
});
});
</script>
</body>
</html>

161
public/paper-player/iron-behaviors/test/focused-state.html
View File

@ -1,161 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>focused-state</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../iron-test-helpers/mock-interactions.js"></script>
<link rel="import" href="test-elements.html">
</head>
<body>
<test-fixture id="TrivialFocusedState">
<template>
<test-control tabindex="-1"></test-control>
</template>
</test-fixture>
<test-fixture id="NestedFocusedState">
<template>
<nested-focusable></nested-focusable>
</template>
</test-fixture>
<test-fixture id="LightDOM">
<template>
<test-light-dom>
<input id="input">
<nested-focusable></nested-focusable>
</test-light-dom>
</template>
</test-fixture>
<script>
suite('focused-state', function() {
var focusTarget;
setup(function() {
focusTarget = fixture('TrivialFocusedState');
});
suite('when is focused', function() {
test('receives a focused attribute', function() {
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
});
test('focused property is true', function() {
expect(focusTarget.focused).to.not.be.eql(true);
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
});
});
suite('when is blurred', function() {
test('loses the focused attribute', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
});
test('focused property is false', function() {
MockInteractions.focus(focusTarget);
expect(focusTarget.focused).to.be.eql(true);
MockInteractions.blur(focusTarget);
expect(focusTarget.focused).to.be.eql(false);
});
});
suite('when the focused state is disabled', function() {
test('will not be focusable', function() {
var blurSpy = sinon.spy(focusTarget, 'blur');
MockInteractions.focus(focusTarget);
focusTarget.disabled = true;
expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
expect(blurSpy.called).to.be.eql(true);
});
});
});
suite('nested focusable', function() {
var focusable;
setup(function() {
focusable = fixture('NestedFocusedState');
});
test('focus/blur events fired on host element', function() {
var nFocusEvents = 0;
var nBlurEvents = 0;
focusable.addEventListener('focus', function() {
nFocusEvents += 1;
expect(focusable.focused).to.be.equal(true);
MockInteractions.blur(focusable.$.input);
});
focusable.addEventListener('blur', function() {
expect(focusable.focused).to.be.equal(false);
nBlurEvents += 1;
});
MockInteractions.focus(focusable.$.input);
expect(nBlurEvents).to.be.greaterThan(0);
expect(nFocusEvents).to.be.greaterThan(0);
});
});
suite('elements in the light dom', function() {
var lightDOM, input, lightDescendantShadowInput;
setup(function() {
lightDOM = fixture('LightDOM');
input = document.querySelector('#input');
lightDescendantShadowInput = Polymer.dom(lightDOM)
.querySelector('nested-focusable').$.input;
});
test('should not fire the focus event', function() {
var nFocusEvents = 0;
lightDOM.addEventListener('focus', function() {
nFocusEvents += 1;
});
MockInteractions.focus(input);
expect(nFocusEvents).to.be.equal(0);
});
test('should not fire the focus event from shadow descendants', function() {
var nFocusEvents = 0;
lightDOM.addEventListener('focus', function() {
nFocusEvents += 1;
});
MockInteractions.focus(lightDescendantShadowInput);
expect(nFocusEvents).to.be.equal(0);
});
});
</script>
</body>
</html>

27
public/paper-player/iron-behaviors/test/index.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><html><head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'focused-state.html',
'active-state.html',
'disabled-state.html',
'focused-state.html?dom=shadow',
'active-state.html?dom=shadow',
'disabled-state.html?dom=shadow'
]);
</script>
</body></html>

91
public/paper-player/iron-behaviors/test/test-elements.html
View File

@ -1,91 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-control-state.html">
<link rel="import" href="../iron-button-state.html">
<script>
Polymer({
is: 'test-control',
behaviors: [
Polymer.IronControlState
]
});
</script>
<script>
Polymer({
is: 'test-button',
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
],
_buttonStateChanged: function() {
}
});
</script>
<dom-module id="nested-focusable">
<template>
<input id="input">
</template>
</dom-module>
<script>
Polymer({
is: 'nested-focusable',
behaviors: [
Polymer.IronControlState
]
});
</script>
<dom-module id="test-light-dom">
<template>
<content select="*"></content>
</template>
</dom-module>
<script>
Polymer({
is: 'test-light-dom',
behaviors: [
Polymer.IronControlState,
Polymer.IronButtonState
]
});
</script>

43
public/paper-player/iron-checked-element-behavior/.bower.json
View File

@ -1,43 +0,0 @@
{
"name": "iron-checked-element-behavior",
"version": "1.0.5",
"description": "Implements an element that has a checked attribute and can be added to a form",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"iron",
"behavior"
],
"main": "iron-checked-element-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-checked-element-behavior.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-checked-element-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "c70add47a9af62d30746587e8a1303fb390787c6"
},
"_source": "git://github.com/PolymerElements/iron-checked-element-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-checked-element-behavior"
}

33
public/paper-player/iron-checked-element-behavior/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/iron-checked-element-behavior/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

1
public/paper-player/iron-checked-element-behavior/.gitignore vendored
View File

@ -1 +0,0 @@
bower_components

23
public/paper-player/iron-checked-element-behavior/.travis.yml
View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: zj5WTkJrZAy1QK0j65jHEsHluT4B/PZl0u3iVEWnyd4CSUbHh3rS5NytZTA8wZ63DYnUcrdbhPeIQI3UKaVBUM2MO/K4MwsC2YTRpifpCLbC+wlRV9WRZNZ9CJ3hu6leshOBWHzZucUWAcKtyQRm66rAU+90ZaJcrBPC/xtgPG1n/Bm2aygr5IA36vJy80Zpwk1+yFmb08eu7jpzNVhcFor+VX0gBW3rxeX0kvzhHGn0bTLxKztNB56Oe+bzx6vU8ACjBcSylouOtPJVIk/iIh7AIDHDcpoZGzmwtVnwAV2mJQtu3V8hQ2kE8eXpDloBGID+AUfTF3YSOVQo34I1yv4T+FlB7uxWrgJo80X5IRXUe15+OoXqraZ25v736RPdTWPjV2b6cWHqdOa45wODkDY0KZ9SrmwZibF3vcfVOG21llW2jF/HC5FvDIiM7gv1ro5jsFbEIwv7ligh0KKa+TOZBphL4sEtMrpxR/zXLqBLXUbKL54A+AefHelxjDIqT3oKQylesrGZ58fEF7Fx5xDSYGJwhIEwTLsEQWIWw8sWB34yRtDBIPocqh8nNZ9pJBOdhK3oC5KK44IQnE44YrIzLRRinHzRVoywpUb5OJDxxSSvOwcqmTYbkFmRJMzfJCEj/EtYsEokmSFv8zIRRDetvenBTGouNK/VsU9xQpA=
- secure: Q3xN3fRvTQuy/HKlkYFFnVrFo01r6Q8zgzHHK8yKNKio9T/BM0+iIMYP8mRY+qvCQxCboXuUawG6gsxxT2Zn/p7SgNZ+UHq7DcLmocqxmECdGfqra6Hy9Y7BZVYPWlWIADkNUjI0RfOz69/3o/TAFlt4Cnw3BX3ip0o0Rri5/jzj0Nn+xSF+onyMnpH2gQvUE77MHvCuWTPki3R86Bz8RRzbTwKYwVa0oVca7jzdPtOjqzsnz8k9X0HVwQEpHGjqgTP3lg8EotON0rac/ayWs3J3bk9ye5AfvdTCYcZnDcz8POAN6FeC2Xey7oqQO4N8vFagru88mC3AmN67ZYqwI0fmDEYre20lnXFAFBFzsiu4FvKMgFYi/C5tG5ngSR5XcXwLskax82Un7yYYRzVbyhFSxxWZCqIC4cJ5d+E0Wex4eEYDwAlZ9AFP/hRJ2qrBVUbzXeGVMkHlg4qtdUIzHRkMUmjvEWVzTvk0Xa2wD+S0mYPcBwQcscoZy9zqdJM4hfbG9IGi02/DyrTOL3IuNH8WHHvGWS4ajDhSRkGCV4I5VtGKQ/Y3RA/pU6AaI7tVcDhbxOyIPKuOXO6PWuZOiJhhPQ/kceMkUXeh0TmsDtSBpe5OKCnjsdSn02lTT5yYf4nlVIVczP9p6zBerXorzZk1/S3CRBtqYZPgRrefbCw=
node_js: stable
addons:
firefox: '46.0'
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
script:
- xvfb-run wct
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
dist: trusty

77
public/paper-player/iron-checked-element-behavior/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

27
public/paper-player/iron-checked-element-behavior/README.md
View File

@ -1,27 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
iron-checked-element-behavior.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/iron-checked-element-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-checked-element-behavior)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-checked-element-behavior)_
##Polymer.IronCheckedElementBehavior
Use `Polymer.IronCheckedElementBehavior` to implement a custom element
that has a `checked` property, which can be used for validation if the
element is also `required`. Element instances implementing this behavior
will also be registered for use in an `iron-form` element.

34
public/paper-player/iron-checked-element-behavior/bower.json
View File

@ -1,34 +0,0 @@
{
"name": "iron-checked-element-behavior",
"version": "1.0.5",
"description": "Implements an element that has a checked attribute and can be added to a form",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"iron",
"behavior"
],
"main": "iron-checked-element-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-checked-element-behavior.git"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-checked-element-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

39
public/paper-player/iron-checked-element-behavior/demo/index.html
View File

@ -1,39 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>iron-checked-element-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="simple-checkbox.html">
</head>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Not required</h4>
<div class="horizontal-section">
<simple-checkbox></simple-checkbox>
</div>
</div>
<div>
<h4>Required</h4>
<div class="horizontal-section">
<simple-checkbox required></simple-checkbox>
</div>
</div>
</div>
</body>
</html>

65
public/paper-player/iron-checked-element-behavior/demo/simple-checkbox.html
View File

@ -1,65 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../iron-checked-element-behavior.html">
<dom-module id="simple-checkbox">
<template>
<style>
:host {
display: block;
}
:host([invalid]) span {
color: red;
}
#labelText {
display: inline-block;
width: 100px;
}
</style>
<input type="checkbox" id="checkbox" on-tap="_onCheckTap">
<span id="labelText">{{label}}</span>
<paper-button raised on-click="_onClick">validate</paper-button>
</template>
<script>
Polymer({
is: 'simple-checkbox',
behaviors: [
Polymer.IronCheckedElementBehavior
],
properties: {
label: {
type: String,
value: 'not validated'
}
},
_onCheckTap: function() {
this.checked = this.$.checkbox.checked;
},
_onClick: function() {
this.validate();
this.label = this.invalid ? 'is invalid' : 'is valid';
}
});
</script>
</dom-module>

30
public/paper-player/iron-checked-element-behavior/index.html
View File

@ -1,30 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-checked-element-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

120
public/paper-player/iron-checked-element-behavior/iron-checked-element-behavior.html
View File

@ -1,120 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<script>
/**
* Use `Polymer.IronCheckedElementBehavior` to implement a custom element
* that has a `checked` property, which can be used for validation if the
* element is also `required`. Element instances implementing this behavior
* will also be registered for use in an `iron-form` element.
*
* @demo demo/index.html
* @polymerBehavior Polymer.IronCheckedElementBehavior
*/
Polymer.IronCheckedElementBehaviorImpl = {
properties: {
/**
* Fired when the checked state changes.
*
* @event iron-change
*/
/**
* Gets or sets the state, `true` is checked and `false` is unchecked.
*/
checked: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true,
observer: '_checkedChanged'
},
/**
* If true, the button toggles the active state with each tap or press
* of the spacebar.
*/
toggles: {
type: Boolean,
value: true,
reflectToAttribute: true
},
/* Overriden from Polymer.IronFormElementBehavior */
value: {
type: String,
value: 'on',
observer: '_valueChanged'
}
},
observers: [
'_requiredChanged(required)'
],
created: function() {
// Used by `iron-form` to handle the case that an element with this behavior
// doesn't have a role of 'checkbox' or 'radio', but should still only be
// included when the form is serialized if `this.checked === true`.
this._hasIronCheckedElementBehavior = true;
},
/**
* Returns false if the element is required and not checked, and true otherwise.
* @param {*=} _value Ignored.
* @return {boolean} true if `required` is false or if `checked` is true.
*/
_getValidity: function(_value) {
return this.disabled || !this.required || this.checked;
},
/**
* Update the aria-required label when `required` is changed.
*/
_requiredChanged: function() {
if (this.required) {
this.setAttribute('aria-required', 'true');
} else {
this.removeAttribute('aria-required');
}
},
/**
* Fire `iron-changed` when the checked state changes.
*/
_checkedChanged: function() {
this.active = this.checked;
this.fire('iron-change');
},
/**
* Reset value to 'on' if it is set to `undefined`.
*/
_valueChanged: function() {
if (this.value === undefined || this.value === null) {
this.value = 'on';
}
}
};
/** @polymerBehavior Polymer.IronCheckedElementBehavior */
Polymer.IronCheckedElementBehavior = [
Polymer.IronFormElementBehavior,
Polymer.IronValidatableBehavior,
Polymer.IronCheckedElementBehaviorImpl
];
</script>

152
public/paper-player/iron-checked-element-behavior/test/basic.html
View File

@ -1,152 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>iron-checked-element-behavior basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link href="../../test-fixture/test-fixture.html" rel="import">
<link href="../../iron-meta/iron-meta.html" rel="import">
<link href="simple-checkbox.html" rel="import">
</head>
<body>
<test-fixture id="basic">
<template>
<simple-checkbox></simple-checkbox>
</template>
</test-fixture>
<test-fixture id="checked">
<template>
<simple-checkbox checked></simple-checkbox>
</template>
</test-fixture>
<test-fixture id="with-value">
<template>
<simple-checkbox value="batman"></simple-checkbox>
</template>
</test-fixture>
<script>
suite('basic', function() {
test('can be checked', function() {
var c = fixture('basic');
assert.isFalse(c.checked);
c.checked = true;
assert.isTrue(c.checked);
});
test('can be unchecked', function() {
var c = fixture('checked');
assert.isTrue(c.checked);
c.checked = false;
assert.isFalse(c.checked);
});
test('invalid if required and not checked', function() {
var c = fixture('basic');
c.required = true;
assert.isFalse(c.checked);
assert.isFalse(c.validate());
assert.isTrue(c.invalid);
});
test('valid if required and checked', function() {
var c = fixture('basic');
c.required = true;
c.checked = true;
assert.isTrue(c.checked);
assert.isTrue(c.validate());
assert.isFalse(c.invalid);
});
test('valid if not required and not checked', function() {
var c = fixture('basic');
assert.isFalse(c.checked);
assert.isTrue(c.validate());
assert.isFalse(c.invalid);
});
test('has a default value of "on", always', function() {
var c = fixture('basic');
assert.isTrue(c.value === 'on');
c.checked = true;
assert.isTrue(c.value === 'on');
});
test('does not stomp over user defined value when checked', function() {
var c = fixture('with-value');
assert.isTrue(c.value === 'batman');
c.checked = true;
assert.isTrue(c.value === 'batman');
});
test('value returns "on" when no explicit value is specified', function() {
var c = fixture('basic');
assert.equal(c.value, 'on', 'returns "on"');
});
test('value returns the value when an explicit value is set', function() {
var c = fixture('basic');
c.value = 'abc';
assert.equal(c.value, 'abc', 'returns "abc"');
c.value = '123';
assert.equal(c.value, '123', 'returns "123"');
});
test('value returns "on" when value is set to undefined', function() {
var c = fixture('basic');
c.value = 'abc';
assert.equal(c.value, 'abc', 'returns "abc"');
c.value = undefined;
assert.equal(c.value, 'on', 'returns "on"');
});
});
suite('a11y', function() {
test('setting `required` sets `aria-required=true`', function() {
var c = fixture('basic');
c.required = true;
assert.equal(c.getAttribute('aria-required'), 'true');
c.required = false;
assert.isFalse(c.hasAttribute('aria-required'));
});
test('setting `invalid` sets `aria-invalid=true`', function() {
var c = fixture('basic');
c.invalid = true;
assert.equal(c.getAttribute('aria-invalid'), 'true');
c.invalid = false;
assert.isFalse(c.hasAttribute('aria-invalid'));
});
});
</script>
</body>
</html>

31
public/paper-player/iron-checked-element-behavior/test/index.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html><!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><html><head>
<title>iron-checked-element-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'basic.html?dom=shadow'
]);
</script>
</body></html>

26
public/paper-player/iron-checked-element-behavior/test/simple-checkbox.html
View File

@ -1,26 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-checked-element-behavior.html">
<script>
Polymer({
is: 'simple-checkbox',
behaviors: [
Polymer.IronCheckedElementBehavior
]
});
</script>

41
public/paper-player/iron-flex-layout/.bower.json
View File

@ -1,41 +0,0 @@
{
"name": "iron-flex-layout",
"version": "1.3.1",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"main": "iron-flex-layout.html",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
"_release": "1.3.1",
"_resolution": {
"type": "version",
"tag": "v1.3.1",
"commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717"
},
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-flex-layout"
}

2
public/paper-player/iron-flex-layout/.gitignore vendored
View File

@ -1,2 +0,0 @@
bower_components

25
public/paper-player/iron-flex-layout/.travis.yml
View File

@ -1,25 +0,0 @@
language: node_js
sudo: false
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
env:
global:
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
- CXX=g++-4.8
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

77
public/paper-player/iron-flex-layout/CONTRIBUTING.md
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

55
public/paper-player/iron-flex-layout/README.md
View File

@ -1,55 +0,0 @@
<!---
This README is automatically generated from the comments in these files:
iron-flex-layout.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->
[![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-flex-layout)_
##&lt;iron-flex-layout&gt;
The `<iron-flex-layout>` component provides simple ways to use
[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
also known as flexbox. This component provides two different ways to use flexbox:
1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
The layout class stylesheet provides a simple set of class-based flexbox rules, that
let you specify layout properties directly in markup. You must include this file
in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
are deprecated, and should not be used. To continue using layout properties
directly in markup, please switch to using the new `dom-module`-based
[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
Please note that the new version does not use `/deep/`, and therefore requires you
to import the `dom-modules` in every element that needs to use them.
A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.

31
public/paper-player/iron-flex-layout/bower.json
View File

@ -1,31 +0,0 @@
{
"name": "iron-flex-layout",
"version": "1.3.1",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
"polymer",
"layout"
],
"main": "iron-flex-layout.html",
"private": true,
"license": "http://polymer.github.io/LICENSE.txt",
"authors": [
"The Polymer Authors"
],
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
},
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0"
},
"ignore": []
}

311
public/paper-player/iron-flex-layout/classes/iron-flex-layout.html
View File

@ -1,311 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="iron-shadow-flex-layout.html">
<script>
console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
</script>
<style>
/*******************************
Flex Layout
*******************************/
.layout.horizontal,
.layout.horizontal-reverse,
.layout.vertical,
.layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
.flex,
.flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
.flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
.flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
.flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
.flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
.flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
.flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
.layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.layout.center,
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
.layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.layout.center-justified,
.layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
.self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
.self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
.block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
[hidden] {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.relative {
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
.scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
/* fixed position */
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
.fixed-top {
top: 0;
left: 0;
right: 0;
}
.fixed-right {
top: 0;
right: 0;
bottom: 0;
}
.fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
.fixed-left {
top: 0;
bottom: 0;
left: 0;
}
</style>

307
public/paper-player/iron-flex-layout/classes/iron-shadow-flex-layout.html
View File

@ -1,307 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script>
console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
</script>
<style>
/*******************************
Flex Layout
*******************************/
html /deep/ .layout.horizontal,
html /deep/ .layout.horizontal-reverse,
html /deep/ .layout.vertical,
html /deep/ .layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ .layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
html /deep/ .layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
html /deep/ .layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
html /deep/ .layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
html /deep/ .layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
html /deep/ .layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
html /deep/ .layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
html /deep/ .flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
html /deep/ .flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
html /deep/ .flex,
html /deep/ .flex-1 {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ .flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
html /deep/ .flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
html /deep/ .flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
html /deep/ .flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
html /deep/ .flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
html /deep/ .flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
html /deep/ .flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
html /deep/ .flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
html /deep/ .flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
html /deep/ .flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
html /deep/ .flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
html /deep/ .layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
html /deep/ .layout.center,
html /deep/ .layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
html /deep/ .layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
html /deep/ .layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
html /deep/ .layout.center-justified,
html /deep/ .layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
html /deep/ .layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
html /deep/ .layout.around-justified {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
html /deep/ .layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
html /deep/ .self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
html /deep/ .self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
html /deep/ .self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
html /deep/ .self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
html /deep/ .block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
html /deep/ [hidden] {
display: none !important;
}
html /deep/ .invisible {
visibility: hidden !important;
}
html /deep/ .relative {
position: relative;
}
html /deep/ .fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
html /deep/ .scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
html /deep/ .fixed-top {
top: 0;
left: 0;
right: 0;
}
html /deep/ .fixed-right {
top: 0;
right: 0;
bottom: 0;
}
html /deep/ .fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
html /deep/ .fixed-left {
top: 0;
bottom: 0;
left: 0;
}
</style>

396
public/paper-player/iron-flex-layout/demo/index.html
View File

@ -1,396 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-layout demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../iron-flex-layout.html">
<style is="custom-style" include="demo-pages-shared-styles">
demo-snippet {
--demo-snippet-demo: {
padding: 0;
}
}
.container {
background-color: #ccc;
padding: 5px;
margin: 0;
}
.container > div {
padding: 15px;
margin: 5px;
background-color: white;
min-height: 20px;
}
.vertical-section-container {
max-width: 700px
}
</style>
</head>
<body unresolved class="fullbleed">
<div class="vertical-section-container centered">
<h4>Horizontal and vertical layout</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex {
@apply(--layout-horizontal);
}
</style>
<div class="container flex">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
</template>
</demo-snippet>
<h4>Flexible children</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-horizontal {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
</style>
<div class="container flex-horizontal">
<div>one</div>
<div class="flexchild">two (flex)</div>
<div>three</div>
</div>
</template>
</demo-snippet>
<h4>Flexible children in vertical layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-vertical {
@apply(--layout-vertical);
height: 220px;
}
.flexchild-vertical {
@apply(--layout-flex);
}
</style>
<div class="container flex-vertical">
<div>one</div>
<div class="flexchild-vertical">two (flex)</div>
<div>three</div>
</div>
</template>
</demo-snippet>
<h4>Flex ratios</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-horizontal-with-ratios {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
.flex2child {
@apply(--layout-flex-2);
}
.flex3child {
@apply(--layout-flex-3);
}
</style>
<div class="container flex-horizontal-with-ratios">
<div class="flex3child">one</div>
<div class="flexchild">two</div>
<div class="flex2child">three</div>
</div>
</template>
</demo-snippet>
<h4>Cross-axis stretch alignment (default)</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-stretch-align {
@apply(--layout-horizontal);
height: 120px;
}
</style>
<div class="container flex-stretch-align">
<div>stretch</div>
</div>
</template>
</demo-snippet>
<h4>Cross-axis center alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-center-align {
@apply(--layout-horizontal);
@apply(--layout-center);
height: 120px;
}
</style>
<div class="container flex-center-align">
<div>center</div>
</div>
</template>
</demo-snippet>
<h4>Cross-axis start alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-start-align {
@apply(--layout-horizontal);
@apply(--layout-start);
height: 120px;
}
</style>
<div class="container flex-start-align">
<div>start</div>
</div>
</template>
</demo-snippet>
<h4>Cross-axis end alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-end-align {
@apply(--layout-horizontal);
@apply(--layout-end);
height: 120px;
}
</style>
<div class="container flex-end-align">
<div>end</div>
</div>
</template>
</demo-snippet>
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-start-justified {
@apply(--layout-horizontal);
@apply(--layout-start-justified);
}
</style>
<div class="container flex-start-justified">
<div>start-justified</div>
</div>
</template>
</demo-snippet>
<h4>Justification, start justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-center-justified {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
}
</style>
<div class="container flex-center-justified">
<div>center-justified</div>
</div>
</template>
</demo-snippet>
<h4>Justification, end justified</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-end-justified {
@apply(--layout-horizontal);
@apply(--layout-end-justified);
}
</style>
<div class="container flex-end-justified">
<div>end-justified</div>
</div>
</template>
</demo-snippet>
<h4>Justification, equal space between elements</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-equal-justified {
@apply(--layout-horizontal);
@apply(--layout-justified);
}
</style>
<div class="container flex-equal-justified">
<div>justified</div>
<div>justified</div>
<div>justified</div>
</div>
</template>
</demo-snippet>
<h4>Justification, equal space around each element</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-equal-around-justified {
@apply(--layout-horizontal);
@apply(--layout-around-justified);
}
</style>
<div class="container flex-equal-around-justified">
<div>around-justified</div>
<div>around-justified</div>
</div>
</template>
</demo-snippet>
<h4>Self alignment</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-self-align {
@apply(--layout-horizontal);
@apply(--layout-justified);
height: 120px;
}
.flex-self-align div {
@apply(--layout-flex);
}
.child1 {
@apply(--layout-self-start);
}
.child2 {
@apply(--layout-self-center);
}
.child3 {
@apply(--layout-self-end);
}
.child4 {
@apply(--layout-self-stretch);
}
</style>
<div class="container flex-self-align">
<div class="child1">one</div>
<div class="child2">two</div>
<div class="child3">three</div>
<div class="child4">four</div>
</div>
</template>
</demo-snippet>
<h4>Wrapping</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-wrap {
@apply(--layout-horizontal);
@apply(--layout-wrap);
width: 200px;
}
</style>
<div class="container flex-wrap">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
</template>
</demo-snippet>
<h4>Reversed layouts</h4>
<demo-snippet>
<template>
<style is="custom-style">
.flex-reversed {
@apply(--layout-horizontal-reverse);
}
</style>
<div class="container flex-reversed">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
</template>
</demo-snippet>
<h4>General purpose rules</h4>
<demo-snippet>
<template>
<style is="custom-style">
.general {
width: 100%;
}
.general > div {
background-color: #ccc;
padding: 4px;
margin: 12px;
}
.block {
@apply(--layout-block);
}
.invisible {
@apply(--layout-invisible);
}
.relative {
@apply(--layout-relative);
}
.fit {
@apply(--layout-fit);
}
</style>
<div class="general">
<div>Before <span>[A Span]</span> After</div>
<div>Before <span class="block">[A Block Span]</span> After</div>
<div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
<div class="relative" style="height: 100px;">
<div class="fit" style="background-color: #000;color: white">Fit</div>
</div>
</div>
</template>
</demo-snippet>
</div>
</body>
</html>

24
public/paper-player/iron-flex-layout/index.html
View File

@ -1,24 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-layout</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

431
public/paper-player/iron-flex-layout/iron-flex-layout-classes.html
View File

@ -1,431 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
A set of layout classes that let you specify layout properties directly in markup.
You must include this file in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
The following imports are available:
- iron-flex
- iron-flex-reverse
- iron-flex-alignment
- iron-flex-factors
- iron-positioning
-->
<link rel="import" href="../polymer/polymer.html">
<!-- Most common used flex styles-->
<dom-module id="iron-flex">
<template>
<style>
.layout.horizontal,
.layout.vertical {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout.inline {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.layout.horizontal {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.layout.vertical {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.layout.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.layout.center,
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.layout.center-justified,
.layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.flex {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}
.flex-auto {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.flex-none {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
</style>
</template>
</dom-module>
<!-- Basic flexbox reverse styles -->
<dom-module id="iron-flex-reverse">
<template>
<style>
.layout.horizontal-reverse,
.layout.vertical-reverse {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.layout.horizontal-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.layout.vertical-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.layout.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
</style>
</template>
</dom-module>
<!-- Flexbox alignment -->
<dom-module id="iron-flex-alignment">
<template>
<style>
/**
* Alignment in cross axis.
*/
.layout.start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.layout.center,
.layout.center-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.layout.end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.layout.baseline {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/**
* Alignment in main axis.
*/
.layout.start-justified {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.layout.center-justified,
.layout.center-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.layout.end-justified {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.layout.around-justified {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.layout.justified {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/**
* Self alignment.
*/
.self-start {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.self-center {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
.self-end {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
.self-stretch {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
.self-baseline {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};
/**
* multi-line alignment in main axis.
*/
.layout.start-aligned {
-ms-flex-line-pack: start; /* IE10 */
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
}
.layout.end-aligned {
-ms-flex-line-pack: end; /* IE10 */
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}
.layout.center-aligned {
-ms-flex-line-pack: center; /* IE10 */
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
}
.layout.between-aligned {
-ms-flex-line-pack: justify; /* IE10 */
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
}
.layout.around-aligned {
-ms-flex-line-pack: distribute; /* IE10 */
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
}
</style>
</template>
</dom-module>
<dom-module id="iron-flex-factors">
<template>
<style>
.flex,
.flex-1 {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
}
.flex-2 {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
.flex-3 {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.flex-4 {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.flex-5 {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
.flex-6 {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
.flex-7 {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.flex-8 {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
.flex-9 {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
.flex-10 {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
.flex-11 {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
.flex-12 {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
</style>
</template>
</dom-module>
<!-- Non-flexbox positioning helper styles -->
<dom-module id="iron-positioning">
<template>
<style>
.block {
display: block;
}
/* IE 10 support for HTML5 hidden attr */
[hidden] {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.relative {
position: relative;
}
.fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body.fullbleed {
margin: 0;
height: 100vh;
}
.scroll {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
/* fixed position */
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top {
position: fixed;
}
.fixed-top {
top: 0;
left: 0;
right: 0;
}
.fixed-right {
top: 0;
right: 0;
bottom: 0;
}
.fixed-bottom {
right: 0;
bottom: 0;
left: 0;
}
.fixed-left {
top: 0;
bottom: 0;
left: 0;
}
</style>
</template>
</dom-module>

399
public/paper-player/iron-flex-layout/iron-flex-layout.html
View File

@ -1,399 +0,0 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<!--
The `<iron-flex-layout>` component provides simple ways to use
[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
also known as flexbox. This component provides two different ways to use flexbox:
1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
The layout class stylesheet provides a simple set of class-based flexbox rules, that
let you specify layout properties directly in markup. You must include this file
in every element that needs to use them.
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
are deprecated, and should not be used. To continue using layout properties
directly in markup, please switch to using the new `dom-module`-based
[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
Please note that the new version does not use `/deep/`, and therefore requires you
to import the `dom-modules` in every element that needs to use them.
A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
@group Iron Elements
@pseudoElement iron-flex-layout
@demo demo/index.html
-->
<style>
/* IE 10 support for HTML5 hidden attr */
[hidden] {
display: none !important;
}
</style>
<style is="custom-style">
:root {
--layout: {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
};
--layout-inline: {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
};
--layout-horizontal: {
@apply(--layout);
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
};
--layout-horizontal-reverse: {
@apply(--layout);
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
};
--layout-vertical: {
@apply(--layout);
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
};
--layout-vertical-reverse: {
@apply(--layout);
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
};
--layout-wrap: {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
};
--layout-wrap-reverse: {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
};
--layout-flex-auto: {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
};
--layout-flex-none: {
-ms-flex: none;
-webkit-flex: none;
flex: none;
};
--layout-flex: {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.000000001px;
};
--layout-flex-2: {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
};
--layout-flex-3: {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
};
--layout-flex-4: {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
};
--layout-flex-5: {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
};
--layout-flex-6: {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
};
--layout-flex-7: {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
};
--layout-flex-8: {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
};
--layout-flex-9: {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
};
--layout-flex-10: {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
};
--layout-flex-11: {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
};
--layout-flex-12: {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
};
/* alignment in cross axis */
--layout-start: {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
};
--layout-center: {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
};
--layout-end: {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
};
--layout-baseline: {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
};
/* alignment in main axis */
--layout-start-justified: {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
};
--layout-center-justified: {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
};
--layout-end-justified: {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
};
--layout-around-justified: {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
};
--layout-justified: {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
};
--layout-center-center: {
@apply(--layout-center);
@apply(--layout-center-justified);
};
/* self alignment */
--layout-self-start: {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
};
--layout-self-center: {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
};
--layout-self-end: {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
};
--layout-self-stretch: {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
};
--layout-self-baseline: {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};
/* multi-line alignment in main axis */
--layout-start-aligned: {
-ms-flex-line-pack: start; /* IE10 */
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
};
--layout-end-aligned: {
-ms-flex-line-pack: end; /* IE10 */
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
};
--layout-center-aligned: {
-ms-flex-line-pack: center; /* IE10 */
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
};
--layout-between-aligned: {
-ms-flex-line-pack: justify; /* IE10 */
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
};
--layout-around-aligned: {
-ms-flex-line-pack: distribute; /* IE10 */
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
};
/*******************************
Other Layout
*******************************/
--layout-block: {
display: block;
};
--layout-invisible: {
visibility: hidden !important;
};
--layout-relative: {
position: relative;
};
--layout-fit: {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
};
--layout-scroll: {
-webkit-overflow-scrolling: touch;
overflow: auto;
};
--layout-fullbleed: {
margin: 0;
height: 100vh;
};
/* fixed position */
--layout-fixed-top: {
position: fixed;
top: 0;
left: 0;
right: 0;
};
--layout-fixed-right: {
position: fixed;
top: 0;
right: 0;
bottom: 0;
};
--layout-fixed-bottom: {
position: fixed;
right: 0;
bottom: 0;
left: 0;
};
--layout-fixed-left: {
position: fixed;
top: 0;
bottom: 0;
left: 0;
};
}
</style>

31
public/paper-player/iron-flex-layout/test/index.html
View File

@ -1,31 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-flex-layout.html',
'iron-flex-layout.html?dom=shadow',
'iron-flex-layout-classes.html',
'iron-flex-layout-classes.html?dom=shadow'
]);
</script>
</body>
</html>

412
public/paper-player/iron-flex-layout/test/iron-flex-layout-classes.html
View File

@ -1,412 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-layout-classes tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
min-height: 50px;
background-color: #ccc;
}
.container > div {
width: 50px;
min-height: 50px; /* so that it can grow in vertical layouts. */
}
/* IE11 does not calculate flex proportions correctly in a vertical
* layout if the children just have a min-height. For those tests,
* use a fixed height instead. */
.container > div.fixed-height {
min-height: 0;
height: 50px;
}
.container.relative > div {
min-width: 50px;
min-height: 50px;
width: inherit;
}
.container.small { width: 120px; }
.container.tall { height: 300px; }
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }
</style>
</head>
<body>
<test-fixture id="basic">
<template>
<div class="container layout">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</template>
</test-fixture>
<test-fixture id="flex">
<template>
<div class="container layout">
<div id="c1" class="fixed-height"></div>
<div id="c2" class="fixed-height"></div>
<div id="c3" class="fixed-height"></div>
</div>
</template>
</test-fixture>
<test-fixture id="single-child">
<template>
<div class="container layout">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="positioning">
<template>
<div class="container layout relative">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="align-content">
<template>
<div class="container layout">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
setup(function() {
container = fixture('basic');
});
test('layout-horizontal', function() {
container.classList.add('horizontal');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok");
});
test('layout-horizontal-reverse', function() {
container.classList.add('horizontal-reverse');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok");
});
test('layout-vertical', function() {
container.classList.add('vertical');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok");
});
test('layout-vertical-reverse', function() {
container.classList.add('vertical-reverse');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
test('layout-wrap', function() {
container.classList.add('horizontal');
container.classList.add('wrap');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c1| |c2|
// |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
});
test('layout-wrap-reverse', function() {
container.classList.add('horizontal-reverse');
container.classList.add('wrap-reverse');
container.style.width = '100px';
assert.isTrue(positionEquals(container, 0, 100, 0, 100), "container position ok");
// |c3|
// |c2| |c1|
assert.isTrue(positionEquals(c1, 50, 100, 50, 100), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 50, 100), "child 3 position ok");
});
});
suite('flex', function() {
var container;
setup(function() {
container = fixture('flex');
});
test('layout-flex child in a horizontal layout', function() {
container.classList.add('horizontal');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('layout-flex child in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok");
});
test('layout-flex, layout-flex-2, layout-flex-3 in a horizontal layout', function() {
container.classList.add('horizontal');
c1.classList.add('flex');
c2.classList.add('flex-2');
c3.classList.add('flex-3');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok");
});
test('layout-flex, layout-flex-2, layout-flex-3 in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c1.classList.add('flex');
c2.classList.add('flex-2');
c3.classList.add('flex-3');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok");
});
});
suite('alignment', function() {
var container;
setup(function() {
container = fixture('single-child');
container.classList.add('horizontal');
});
test('stretch (default)', function() {
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok");
});
test('layout-center', function() {
container.classList.add('center');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok");
});
test('layout-start', function() {
container.classList.add('start');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('layout-end', function() {
container.classList.add('end');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok");
});
test('layout-start-justified', function() {
container.classList.add('start-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('layout-end-justified', function() {
container.classList.add('end-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
});
test('layout-center-justified', function() {
container.classList.add('center-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok");
});
});
suite('justification', function() {
var container;
setup(function() {
container = fixture('flex');
container.classList.add('horizontal');
});
test('layout-justified', function() {
container.classList.add('justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('layout-around-justified', function() {
container.classList.add('around-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var spacing = (300 - 50 * 3) / 6;
// Every child gets `spacing` on its left and right side.
assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok");
var end = spacing + 50 + spacing;
assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok");
end = end + spacing + 50 + spacing;
assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok");
});
});
suite('align-content', function() {
var container;
setup(function() {
container = fixture('align-content');
container.classList.add('small');
container.classList.add('tall');
container.classList.add('horizontal');
container.classList.add('flex');
container.classList.add('wrap');
});
test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});
test('layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});
test('layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});
test('layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});
suite('positioning', function() {
var container;
setup(function() {
container = fixture('positioning');
container.classList.add('tall');
});
test('layout-fit', function() {
c1.classList.add('fit');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok");
});
});
</script>
</body>
</html>

434
public/paper-player/iron-flex-layout/test/iron-flex-layout.html
View File

@ -1,434 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-layout tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../iron-flex-layout.html">
<style is="custom-style">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
min-height: 50px;
background-color: #ccc;
}
.container > div {
width: 50px;
min-height: 50px; /* so that it can grow in vertical layouts. */
}
/* IE11 does not calculate flex proportions correctly in a vertical
* layout if the children just have a min-height. For those tests,
* use a fixed height instead. */
.container > div.fixed-height {
min-height: 0;
height: 50px;
}
.relative { @apply(--layout-relative); }
.container.relative > div {
min-width: 50px;
min-height: 50px;
width: inherit;
}
.container.small { width: 120px; }
.container.tall { height: 300px; }
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }
.horizontal { @apply(--layout-horizontal); }
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
.vertical { @apply(--layout-vertical); }
.vertical-reverse { @apply(--layout-vertical-reverse); }
.wrap { @apply(--layout-wrap); }
.wrap-reverse { @apply(--layout-wrap-reverse); }
.flex { @apply(--layout-flex); }
.flex2 { @apply(--layout-flex-2); }
.flex3 { @apply(--layout-flex-3); }
.center { @apply(--layout-center); }
.start { @apply(--layout-start); }
.end { @apply(--layout-end); }
.start-justified { @apply(--layout-start-justified); }
.center-justified { @apply(--layout-center-justified); }
.end-justified { @apply(--layout-end-justified); }
.justified { @apply(--layout-justified); }
.around-justified { @apply(--layout-around-justified); }
.fit { @apply(--layout-fit); }
.start-aligned { @apply(--layout-start-aligned); }
.end-aligned { @apply(--layout-end-aligned); }
.center-aligned { @apply(--layout-center-aligned); }
.between-aligned { @apply(--layout-between-aligned); }
.around-aligned { @apply(--layout-around-aligned); }
</style>
</head>
<body>
<test-fixture id="basic">
<template>
<div class="container">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
</template>
</test-fixture>
<test-fixture id="flex">
<template>
<div class="container">
<div id="c1" class="fixed-height"></div>
<div id="c2" class="fixed-height"></div>
<div id="c3" class="fixed-height"></div>
</div>
</template>
</test-fixture>
<test-fixture id="single-child">
<template>
<div class="container">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="positioning">
<template>
<div class="container relative">
<div id="c1"></div>
</div>
</template>
</test-fixture>
<test-fixture id="align-content">
<template>
<div class="container small tall horizontal flex wrap">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
</div>
</template>
</test-fixture>
<script>
function positionEquals(node, top, bottom, left, right) {
var rect = node.getBoundingClientRect();
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
setup(function() {
container = fixture('basic');
});
test('--layout-horizontal', function() {
container.classList.add('horizontal');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok");
});
test('--layout-horizontal-reverse', function() {
container.classList.add('horizontal-reverse');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok");
});
test('--layout-vertical', function() {
container.classList.add('vertical');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c1| |c2| |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok");
});
test('--layout-vertical-reverse', function() {
container.classList.add('vertical-reverse');
assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
// vertically, |c3| |c2| |c1|
assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
test('--layout-wrap', function() {
container.classList.add('horizontal');
container.classList.add('wrap');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c1| |c2|
// |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
});
test('--layout-wrap-reverse', function() {
container.classList.add('horizontal');
container.classList.add('wrap-reverse');
container.classList.add('small');
assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
// |c3|
// |c1| |c2|
assert.isTrue(positionEquals(c1, 50, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
});
});
suite('flex', function() {
var container;
setup(function() {
container = fixture('flex');
});
test('--layout-flex child in a horizontal layout', function() {
container.classList.add('horizontal');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-flex child in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c2.classList.add('flex');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | |c3|
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a horizontal layout', function() {
container.classList.add('horizontal');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
// |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok");
});
test('--layout-flex, --layout-flex-2, --layout-flex-3 in a vertical layout', function() {
container.classList.add('vertical');
container.classList.add('tall');
c1.classList.add('flex');
c2.classList.add('flex2');
c3.classList.add('flex3');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
// vertically, |c1| | c2 | | c3 |
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok");
});
});
suite('alignment', function() {
var container;
setup(function() {
container = fixture('single-child');
container.classList.add('horizontal');
});
test('stretch (default)', function() {
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok");
});
test('--layout-center', function() {
container.classList.add('center');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok");
});
test('--layout-start', function() {
container.classList.add('start');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end', function() {
container.classList.add('end');
container.classList.add('tall');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok");
});
test('--layout-start-justified', function() {
container.classList.add('start-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
});
test('--layout-end-justified', function() {
container.classList.add('end-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
});
test('--layout-center-justified', function() {
container.classList.add('center-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok");
});
});
suite('justification', function() {
var container;
setup(function() {
container = fixture('flex');
container.classList.add('horizontal');
});
test('--layout-justified', function() {
container.classList.add('justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok");
assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
});
test('--layout-around-justified', function() {
container.classList.add('around-justified');
assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
var spacing = (300 - 50 * 3) / 6;
// Every child gets `spacing` on its left and right side.
assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok");
var end = spacing + 50 + spacing;
assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok");
end = end + spacing + 50 + spacing;
assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok");
});
});
suite('align-content', function() {
var container;
setup(function() {
container = fixture('align-content');
});
test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});
test('--layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});
test('--layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('--layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});
test('--layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('--layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});
suite('positioning', function() {
var container;
setup(function() {
container = fixture('positioning');
container.classList.add('tall');
});
test('--layout-fit', function() {
c1.classList.add('fit');
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok");
});
});
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More