import from la bonne adresse and first refactoring for ouidade.com

2017-06-19 11:25:19 +02:00
commit 344dae1543
2240 changed files with 288691 additions and 0 deletions
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <title>add items</title>
+
+  <style>
+  * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  .grid {
+    background: #DDD;
+  }
+  
+  /* clearfix */
+  .grid:after {
+    display: block;
+    content: '';
+    clear: both;
+  }
+
+
+  .grid-sizer,
+  .grid-item {
+    width: 25%;
+  }
+
+  .grid-item {
+    border: 1px solid;
+    background: #09F;
+    height: 100px;
+  }
+
+  .grid-item--width2 { width: 50%; }
+
+  .grid-item--height2 { height: 160px; }
+
+  .grid-item--height3 { height: 220px; }
+
+  </style>
+
+</head>
+<body>
+
+  <h1>add items</h1>
+
+  <p>
+    <button class="prepend-button">Prepend button</button>
+    <button class="append-button">Append button</button>
+  </p>
+
+  <div class="grid">
+    <div class="grid-sizer"></div>
+    <div class="grid-item grid-item--width2"></div>
+    <div class="grid-item grid-item--height2"></div>
+  </div>
+
+
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
+
+<script src="../masonry.js"></script>
+
+<script>
+function getItemElement() {
+  var elem = document.createElement('div');
+  var wRand = Math.random();
+  var hRand = Math.random();
+  var widthClass = wRand > 0.8 ? 'grid-item--width3' :
+    wRand > 0.6 ? 'grid-item--width2' : '';
+  var heightClass = hRand > 0.8 ? 'grid-item--height3' :
+    hRand > 0.5 ? 'grid-item--height2' : '';
+  elem.className = 'grid-item ' + widthClass + ' ' + heightClass;
+  return elem;
+};
+
+docReady( function() {
+  var msnry = window.msnry = new Masonry( '.grid', {
+    columnWidth: '.grid-sizer',
+    percentPosition: true
+  });
+
+  document.querySelector('.prepend-button').addEventListener( 'click', function() {
+    var itemElem = getItemElement();
+    msnry.element.insertBefore( itemElem, msnry.element.firstChild );
+    msnry.prepended( itemElem );
+  });
+
+  document.querySelector('.append-button').addEventListener( 'click', function() {
+    var itemElem = getItemElement();
+    msnry.element.appendChild( itemElem );
+    msnry.appended( itemElem );
+  });
+
+});
+</script>
+
+</body>
+</html>