RubyGems - wbase - Versions diffs - 0.0.14 → 0.0.15 - Mend

wbase 0.0.14 → 0.0.15

Files changed (875) hide show

data/app/assets/javascripts/wbase/admin/masonry/sandbox/fluid.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>fluid</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>basic</h1>
+  <div class="grid">
+    <div class="grid-sizer"></div>
+    <div class="grid-item grid-item--width2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item grid-item--height3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item grid-item--width2 grid-item--height2"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item grid-item--width2"></div>
+    <div class="grid-item grid-item--height3"></div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></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>
+docReady( function() {
+  window.msnry = new Masonry( '.grid', {
+    columnWidth: '.grid-sizer',
+    percentPosition: true
+  });
+});
+</script>
+</body>
+</html>

data/app/assets/javascripts/wbase/admin/masonry/sandbox/jquery.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>jQuery</title>
+  <link rel="stylesheet" href="sandbox.css" />
+</head>
+<body>
+  <h1>jQuery</h1>
+  <div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+  </div>
+<script src="../bower_components/jquery/dist/jquery.min.js"></script>
+<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() {
+  $('#basic').masonry({
+    columnWidth: 60
+  });
+});
+</script>
+</body>
+</html>

data/app/assets/javascripts/wbase/admin/masonry/sandbox/require-js/index.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>require js</title>
+  <link rel="stylesheet" href="../sandbox.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 h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>

data/app/assets/javascripts/wbase/admin/masonry/sandbox/require-js/main.js ADDED Viewed

@@ -0,0 +1,69 @@
+/*global requirejs: false*/
+// -------------------------- pkgd -------------------------- //
+/*
+requirejs( [ '../../dist/masonry.pkgd' ], function( Masonry ) {
+  new Masonry( document.querySelector('#basic') );
+});
+// */
+// -------------------------- bower -------------------------- //
+/*
+requirejs.config({
+  baseUrl: '../bower_components'
+});
+requirejs( [ '../masonry' ], function( Masonry ) {
+  new Masonry( document.querySelector('#basic') );
+});
+// */
+// -------------------------- pkgd & jQuery -------------------------- //
+// /*
+requirejs.config({
+  paths: {
+    jquery: '../../bower_components/jquery/dist/jquery'
+  }
+});
+requirejs( [ 'require', 'jquery', '../../dist/masonry.pkgd' ],
+  function( require, $, Masonry ) {
+    require( [
+      'jquery-bridget/jquery.bridget'
+    ],
+    function() {
+      $.bridget( 'masonry', Masonry );
+      $('#basic').masonry({
+        columnWidth: 60
+      });
+    }
+  );
+});
+// */
+// -------------------------- bower & jQuery -------------------------- //
+/*
+requirejs.config({
+  baseUrl: '../bower_components',
+  paths: {
+    jquery: 'jquery/dist/jquery'
+  }
+});
+requirejs( [
+    'jquery',
+    '../masonry',
+    'jquery-bridget/jquery.bridget'
+  ],
+  function( $, Masonry )  {
+    $.bridget( 'masonry', Masonry );
+    $('#basic').masonry({
+      columnWidth: 60
+    });
+  }
+);
+// */

data/app/assets/javascripts/wbase/admin/masonry/sandbox/right-to-left.html ADDED Viewed

@@ -0,0 +1,120 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>right to left</title>
+  <link rel="stylesheet" href="sandbox.css" />
+  <style>
+    #stamped .stamp1 {
+      width: 30%;
+      height: 100px;
+      left: 30%;
+      top: 20px;
+      margin: 10px;
+    }
+    #stamped .stamp2 {
+      width: 200px;
+      height: 50px;
+      left: 20px;
+      top: 50px;
+    }
+  </style>
+</head>
+<body>
+  <h1>right to left</h1>
+  <div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+  </div>
+  <div id="stamped" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item w2 h2"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h4"></div>
+    <div class="item w2"></div>
+    <div class="item h5"></div>
+    <div class="item w3"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item w2 h5"></div>
+    <div class="item w2"></div>
+    <div class="item h3"></div>
+    <div class="item w3"></div>
+    <div class="item"></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>
+docReady( function() {
+  ( function() {
+    var container = document.querySelector('#basic');
+    var msnry = new Masonry( container, {
+      isOriginLeft: false,
+      columnWidth: 60
+    });
+  })();
+  ( function() {
+    var container = document.querySelector('#stamped');
+    var msnry = new Masonry( container, {
+      itemSelector: '.item',
+      isOriginLeft: false,
+      columnWidth: 60,
+      gutter: 10,
+      stamp: '.stamp'
+    });
+  })();
+});
+</script>
+</body>
+</html>

data/app/assets/javascripts/wbase/admin/masonry/sandbox/sandbox.css ADDED Viewed

@@ -0,0 +1,33 @@
+* {
+  box-sizing: border-box;
+}
+.container {
+  background: #EEE;
+  width: 50%;
+  margin-bottom: 20px;
+}
+.item {
+  width:  60px;
+  height: 60px;
+  float: left;
+  border: 1px solid;
+  background: #09F;
+}
+.item.w2 { width: 120px; }
+.item.w3 { width: 180px; }
+.item.w4 { width: 240px; }
+.item.h2 { height: 100px; }
+.item.h3 { height: 160px; }
+.item.h4 { height: 220px; }
+.item.h5 { height: 280px; }
+.stamp {
+  background: red;
+  opacity: 0.75;
+  position: absolute;
+  border: 1px solid;
+}

data/app/assets/javascripts/wbase/admin/masonry/sandbox/stamps.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>stamps</title>
+  <link rel="stylesheet" href="sandbox.css" />
+  <style>
+  #alpha .stamp1 {
+    width: 30%;
+    height: 100px;
+    left: 30%;
+    top: 20px;
+  }
+  #alpha .stamp2 {
+    width: 200px;
+    height: 50px;
+    left: 20px;
+    top: 50px;
+  }
+  #beta {
+    border-style: solid;
+    border-width: 40px 30px 20px 10px;
+    padding: 10px 20px 30px 40px;
+  }
+  #beta .stamp1 {
+    width: 30%;
+    height: 100px;
+    left: 10%;
+    top: 20px;
+  }
+  #beta .stamp2 {
+    width: 200px;
+    height: 50px;
+    right: 20px;
+    top: 50px;
+  }
+  </style>
+</head>
+<body>
+  <h1>stamps</h1>
+  <div id="alpha" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+  </div>
+  <div id="beta" class="container">
+    <div class="stamp stamp2"></div>
+    <div class="stamp stamp1"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></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>
+docReady( function() {
+  ( function() {
+    var container = document.querySelector('#alpha');
+    var msnry = new Masonry( container, {
+      itemSelector: '.item',
+      columnWidth: 60,
+      gutter: 10,
+      stamp: '.stamp'
+    });
+  })();
+  ( function() {
+    var container = document.querySelector('#beta');
+    var msnry = new Masonry( container, {
+      columnWidth: 60,
+      gutter: 10,
+      stamp: '.stamp'
+    });
+  })();
+});
+</script>
+</body>
+</html>

data/app/assets/javascripts/wbase/admin/matches-selector/matches-selector.js ADDED Viewed

@@ -0,0 +1,107 @@
+/**
+ * matchesSelector v1.0.3
+ * matchesSelector( element, '.selector' )
+ * MIT license
+ */
+/*jshint browser: true, strict: true, undef: true, unused: true */
+/*global define: false, module: false */
+( function( ElemProto ) {
+  'use strict';
+  var matchesMethod = ( function() {
+    // check for the standard method name first
+    if ( ElemProto.matches ) {
+      return 'matches';
+    }
+    // check un-prefixed
+    if ( ElemProto.matchesSelector ) {
+      return 'matchesSelector';
+    }
+    // check vendor prefixes
+    var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
+    for ( var i=0, len = prefixes.length; i < len; i++ ) {
+      var prefix = prefixes[i];
+      var method = prefix + 'MatchesSelector';
+      if ( ElemProto[ method ] ) {
+        return method;
+      }
+    }
+  })();
+  // ----- match ----- //
+  function match( elem, selector ) {
+    return elem[ matchesMethod ]( selector );
+  }
+  // ----- appendToFragment ----- //
+  function checkParent( elem ) {
+    // not needed if already has parent
+    if ( elem.parentNode ) {
+      return;
+    }
+    var fragment = document.createDocumentFragment();
+    fragment.appendChild( elem );
+  }
+  // ----- query ----- //
+  // fall back to using QSA
+  // thx @jonathantneal https://gist.github.com/3062955
+  function query( elem, selector ) {
+    // append to fragment if no parent
+    checkParent( elem );
+    // match elem with all selected elems of parent
+    var elems = elem.parentNode.querySelectorAll( selector );
+    for ( var i=0, len = elems.length; i < len; i++ ) {
+      // return true if match
+      if ( elems[i] === elem ) {
+        return true;
+      }
+    }
+    // otherwise return false
+    return false;
+  }
+  // ----- matchChild ----- //
+  function matchChild( elem, selector ) {
+    checkParent( elem );
+    return match( elem, selector );
+  }
+  // ----- matchesSelector ----- //
+  var matchesSelector;
+  if ( matchesMethod ) {
+    // IE9 supports matchesSelector, but doesn't work on orphaned elems
+    // check for that
+    var div = document.createElement('div');
+    var supportsOrphans = match( div, 'div' );
+    matchesSelector = supportsOrphans ? match : matchChild;
+  } else {
+    matchesSelector = query;
+  }
+  // transport
+  if ( typeof define === 'function' && define.amd ) {
+    // AMD
+    define( function() {
+      return matchesSelector;
+    });
+  } else if ( typeof exports === 'object' ) {
+    module.exports = matchesSelector;
+  }
+  else {
+    // browser global
+    window.matchesSelector = matchesSelector;
+  }
+})( Element.prototype );