mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
config redirect
This commit is contained in:
Nuno Coração
34
node_modules/outlayer/sandbox/browserify/browserify.html
generated
vendored
Normal file
34
node_modules/outlayer/sandbox/browserify/browserify.html
generated
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>browserify</title>
|
||||
|
||||
<link rel="stylesheet" href="../examples.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>browserify</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
3
node_modules/outlayer/sandbox/browserify/main.js
generated
vendored
Normal file
3
node_modules/outlayer/sandbox/browserify/main.js
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
var CellsByRow = require('../cells-by-row');
|
||||
|
||||
new CellsByRow('#basic');
|
||||
100
node_modules/outlayer/sandbox/cells-by-row.html
generated
vendored
Normal file
100
node_modules/outlayer/sandbox/cells-by-row.html
generated
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>CellsByRow</title>
|
||||
|
||||
<link rel="stylesheet" href="examples.css" />
|
||||
<style>
|
||||
#horizontal {
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>CellsByRow</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div class="container" data-cells-by-row='{ "columnWidth": 120 }'>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div id="bottom-right" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div id="horizontal" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../item.js"></script>
|
||||
<script src="../outlayer.js"></script>
|
||||
|
||||
<script src="cells-by-row.js"></script>
|
||||
|
||||
<script>
|
||||
( function() {
|
||||
var container = document.querySelector('#basic');
|
||||
var layout = new CellsByRow( container );
|
||||
})();
|
||||
( function() {
|
||||
var container = document.querySelector('#bottom-right');
|
||||
var layout = new CellsByRow( container, {
|
||||
originLeft: false,
|
||||
originTop: false
|
||||
});
|
||||
})();
|
||||
( function() {
|
||||
new CellsByRow( '#horizontal', {
|
||||
isHorizontal: true
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
86
node_modules/outlayer/sandbox/cells-by-row.js
generated
vendored
Normal file
86
node_modules/outlayer/sandbox/cells-by-row.js
generated
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* CellsByRow example
|
||||
*/
|
||||
|
||||
( function( window, factory ) {
|
||||
/* jshint strict: false */ /* globals define, module, require */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'../outlayer'
|
||||
],
|
||||
factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
module.exports = factory(
|
||||
require('../outlayer')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.CellsByRow = factory(
|
||||
window.Outlayer
|
||||
);
|
||||
}
|
||||
|
||||
}( window, function factory( Outlayer) {
|
||||
'use strict';
|
||||
|
||||
var CellsByRow = Outlayer.create( 'cellsByRow', {
|
||||
columnWidth: 100,
|
||||
rowHeight: 100
|
||||
});
|
||||
|
||||
CellsByRow.prototype._resetLayout = function() {
|
||||
this.getSize();
|
||||
|
||||
this._getMeasurement( 'columnWidth', 'outerWidth' );
|
||||
this._getMeasurement( 'rowHeight', 'outerHeight' );
|
||||
|
||||
var isHorizontal = this._getOption('horizontal');
|
||||
if ( isHorizontal ) {
|
||||
this.rows = Math.floor( this.size.innerHeight / this.rowHeight );
|
||||
this.rows = Math.max( this.rows, 1 );
|
||||
} else {
|
||||
this.cols = Math.floor( this.size.innerWidth / this.columnWidth );
|
||||
this.cols = Math.max( this.cols, 1 );
|
||||
}
|
||||
|
||||
this.itemIndex = 0;
|
||||
};
|
||||
|
||||
CellsByRow.prototype._getItemLayoutPosition = function( item ) {
|
||||
item.getSize();
|
||||
var column, row;
|
||||
|
||||
var isHorizontal = this._getOption('horizontal');
|
||||
if ( isHorizontal ) {
|
||||
row = this.itemIndex % this.rows;
|
||||
column = Math.floor( this.itemIndex / this.rows );
|
||||
} else {
|
||||
column = this.itemIndex % this.cols;
|
||||
row = Math.floor( this.itemIndex / this.cols );
|
||||
}
|
||||
var x = column * this.columnWidth;
|
||||
var y = row * this.rowHeight;
|
||||
this.itemIndex++;
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
};
|
||||
|
||||
CellsByRow.prototype._getContainerSize = function() {
|
||||
var isHorizontal = this._getOption('horizontal');
|
||||
if ( isHorizontal ) {
|
||||
return {
|
||||
width: Math.ceil( this.itemIndex / this.rows ) * this.columnWidth
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: Math.ceil( this.itemIndex / this.cols ) * this.rowHeight
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return CellsByRow;
|
||||
|
||||
}));
|
||||
22
node_modules/outlayer/sandbox/examples.css
generated
vendored
Normal file
22
node_modules/outlayer/sandbox/examples.css
generated
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #EEE;
|
||||
width: 50%;
|
||||
margin-bottom: 1.0em;
|
||||
}
|
||||
|
||||
.item {
|
||||
border: 1px solid;
|
||||
background: #09F;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
44
node_modules/outlayer/sandbox/fit-rows.js
generated
vendored
Normal file
44
node_modules/outlayer/sandbox/fit-rows.js
generated
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
/*globals Outlayer */
|
||||
|
||||
( function() {
|
||||
'use strict';
|
||||
|
||||
var FitRows = window.FitRows = Outlayer.create('fitRows');
|
||||
|
||||
var proto = FitRows.prototype;
|
||||
|
||||
proto._resetLayout = function() {
|
||||
this.getSize();
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.maxY = 0;
|
||||
this._getMeasurement( 'gutter', 'outerWidth' );
|
||||
};
|
||||
|
||||
proto._getItemLayoutPosition = function( item ) {
|
||||
item.getSize();
|
||||
|
||||
var itemWidth = item.size.outerWidth + this.gutter;
|
||||
// if this element cannot fit in the current row
|
||||
var containerWidth = this.size.innerWidth + this.gutter;
|
||||
if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
|
||||
this.x = 0;
|
||||
this.y = this.maxY;
|
||||
}
|
||||
|
||||
var position = {
|
||||
x: this.x,
|
||||
y: this.y
|
||||
};
|
||||
|
||||
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
|
||||
this.x += itemWidth;
|
||||
|
||||
return position;
|
||||
};
|
||||
|
||||
proto._getContainerSize = function() {
|
||||
return { height: this.maxY };
|
||||
};
|
||||
|
||||
})();
|
||||
53
node_modules/outlayer/sandbox/item-methods.html
generated
vendored
Normal file
53
node_modules/outlayer/sandbox/item-methods.html
generated
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>Item Methods</title>
|
||||
|
||||
<link rel="stylesheet" href="examples.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Item Methods</h1>
|
||||
|
||||
<p>
|
||||
<button id="reveal">reveal</button>
|
||||
<button id="hide">hide</button>
|
||||
<button id="move">move</button>
|
||||
</p>
|
||||
|
||||
<div class="container">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../item.js"></script>
|
||||
<script src="../outlayer.js"></script>
|
||||
|
||||
<script>
|
||||
var basic = document.querySelector('.container');
|
||||
var layout = new Outlayer( basic );
|
||||
var item = layout.items[0];
|
||||
|
||||
document.querySelector('#reveal').onclick = function() {
|
||||
item.reveal();
|
||||
};
|
||||
|
||||
document.querySelector('#hide').onclick = function() {
|
||||
item.hide();
|
||||
};
|
||||
|
||||
document.querySelector('#move').onclick = function() {
|
||||
var x = Math.random() * 400;
|
||||
var y = Math.random() * 200;
|
||||
item.moveTo( x, y )
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
node_modules/outlayer/sandbox/padding-percent.html
generated
vendored
Normal file
120
node_modules/outlayer/sandbox/padding-percent.html
generated
vendored
Normal file
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>padding percent</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body { font-family: sans-serif; }
|
||||
|
||||
/* ---- grid ---- */
|
||||
|
||||
.container {
|
||||
width: 400px;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #EEE;
|
||||
/* max-width: 1200px;*/
|
||||
padding: 20px 10%;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
.grid:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ---- grid-item ---- */
|
||||
|
||||
.grid-item {
|
||||
width: 20%;
|
||||
height: 120px;
|
||||
float: left;
|
||||
background: #D26;
|
||||
border: 2px solid #333;
|
||||
border-color: hsla(0, 0%, 0%, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*.grid-item--width2 { width: 30%; }
|
||||
.grid-item--width3 { width: 45%; }*/
|
||||
|
||||
.grid-item--height2 { height: 200px; }
|
||||
.grid-item--height3 { height: 260px; }
|
||||
.grid-item--height4 { height: 360px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>padding + percent width bug</h1>
|
||||
|
||||
<p><button class="toggle-button">Toggle</button></p>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="grid-item"></div>
|
||||
<!-- <div class="grid-item grid-item--width2 grid-item--height2"></div>
|
||||
<div class="grid-item grid-item--height3"></div>
|
||||
<div class="grid-item grid-item--height2"></div> -->
|
||||
<!-- <div class="grid-item grid-item--width3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height2"></div>
|
||||
<div class="grid-item grid-item--width2 grid-item--height3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--width2 grid-item--height2"></div>
|
||||
<div class="grid-item grid-item--width2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height3"></div>
|
||||
<div class="grid-item grid-item--height2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height2"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../item.js"></script>
|
||||
<script src="../outlayer.js"></script>
|
||||
|
||||
<script src="fit-rows.js"></script>
|
||||
<script>
|
||||
var layout = new FitRows( '.grid', {
|
||||
transitionDuration: '0.8s',
|
||||
percentPosition: true
|
||||
});
|
||||
|
||||
var container = document.querySelector('.container');
|
||||
var isToggled = false;
|
||||
|
||||
document.querySelector('.toggle-button').onclick = function() {
|
||||
isToggled = !isToggled;
|
||||
container.style.width = isToggled ? '500px' : '400px';
|
||||
layout.layout();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
13
node_modules/outlayer/sandbox/requirejs/main.js
generated
vendored
Normal file
13
node_modules/outlayer/sandbox/requirejs/main.js
generated
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
requirejs.config({
|
||||
baseUrl: '../../bower_components'
|
||||
// OR
|
||||
// paths: {
|
||||
// 'ev-emitter': 'bower_components/ev-emitter',
|
||||
// 'get-size': 'bower_components/get-size',
|
||||
// 'matches-selector': 'bower_components/matches-selector'
|
||||
// }
|
||||
});
|
||||
|
||||
requirejs( [ '../sandbox/cells-by-row' ], function( CellsByRow ) {
|
||||
new CellsByRow( document.querySelector('#basic') );
|
||||
});
|
||||
33
node_modules/outlayer/sandbox/requirejs/requirejs.html
generated
vendored
Normal file
33
node_modules/outlayer/sandbox/requirejs/requirejs.html
generated
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>require js</title>
|
||||
|
||||
<link rel="stylesheet" href="../examples.css" />
|
||||
<script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>require js</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
64
node_modules/outlayer/sandbox/stagger.html
generated
vendored
Normal file
64
node_modules/outlayer/sandbox/stagger.html
generated
vendored
Normal file
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>stagger</title>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.grid {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid;
|
||||
background: #19F;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>stagger</h1>
|
||||
|
||||
<p>
|
||||
<button class="reveal-button">Reveal</button>
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../item.js"></script>
|
||||
<script src="../outlayer.js"></script>
|
||||
|
||||
<script src="fit-rows.js"></script>
|
||||
<script>
|
||||
var layout = new FitRows( '.grid', {
|
||||
stagger: 50
|
||||
});
|
||||
|
||||
document.querySelector('.reveal-button').onclick = function() {
|
||||
layout.reveal( layout.items );
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
95
node_modules/outlayer/sandbox/toggler.html
generated
vendored
Normal file
95
node_modules/outlayer/sandbox/toggler.html
generated
vendored
Normal file
@@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>CellsByRow toggler</title>
|
||||
|
||||
<link rel="stylesheet" href="examples.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>CellsByRow toggler</h1>
|
||||
|
||||
<button id="toggler">Toggle</button>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../item.js"></script>
|
||||
<script src="../outlayer.js"></script>
|
||||
|
||||
<script src="cells-by-row.js"></script>
|
||||
|
||||
<script>
|
||||
var basic = document.querySelector('#basic');
|
||||
var layout = new CellsByRow( basic );
|
||||
|
||||
var button = document.querySelector('button');
|
||||
var isToggled = false;
|
||||
button.onclick = function() {
|
||||
isToggled = !isToggled;
|
||||
basic.style.width = isToggled ? '800px' : '400px';
|
||||
layout.layout();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user