integarting admin dashboard

public/Dashboard/vendors/colcade/colcade.js

@@ -0,0 +1,366 @@
+/*!
+ * Colcade v0.2.0
+ * Lightweight masonry layout
+ * by David DeSandro
+ * MIT license
+ */
+
+/*jshint browser: true, undef: true, unused: true */
+
+( function( window, factory ) {
+  // universal module definition
+  /*jshint strict: false */
+  /*global define: false, module: false */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory();
+  } else {
+    // browser global
+    window.Colcade = factory();
+  }
+
+}( window, function factory() {
+
+// -------------------------- Colcade -------------------------- //
+
+function Colcade( element, options ) {
+  element = getQueryElement( element );
+
+  // do not initialize twice on same element
+  if ( element && element.colcadeGUID ) {
+    var instance = instances[ element.colcadeGUID ];
+    instance.option( options );
+    return instance;
+  }
+
+  this.element = element;
+  // options
+  this.options = {};
+  this.option( options );
+  // kick things off
+  this.create();
+}
+
+var proto = Colcade.prototype;
+
+proto.option = function( options ) {
+  this.options = extend( this.options, options );
+};
+
+// globally unique identifiers
+var GUID = 0;
+// internal store of all Colcade intances
+var instances = {};
+
+proto.create = function() {
+  this.errorCheck();
+  // add guid for Colcade.data
+  var guid = this.guid = ++GUID;
+  this.element.colcadeGUID = guid;
+  instances[ guid ] = this; // associate via id
+  // update initial properties & layout
+  this.reload();
+  // events
+  this._windowResizeHandler = this.onWindowResize.bind( this );
+  this._loadHandler = this.onLoad.bind( this );
+  window.addEventListener( 'resize', this._windowResizeHandler );
+  this.element.addEventListener( 'load', this._loadHandler, true );
+};
+
+proto.errorCheck = function() {
+  var errors = [];
+  if ( !this.element ) {
+    errors.push( 'Bad element: ' + this.element );
+  }
+  if ( !this.options.columns ) {
+    errors.push( 'columns option required: ' + this.options.columns );
+  }
+  if ( !this.options.items ) {
+    errors.push( 'items option required: ' + this.options.items );
+  }
+
+  if ( errors.length ) {
+    throw new Error( '[Colcade error] ' + errors.join('. ') );
+  }
+};
+
+// update properties and do layout
+proto.reload = function() {
+  this.updateColumns();
+  this.updateItems();
+  this.layout();
+};
+
+proto.updateColumns = function() {
+  this.columns = querySelect( this.options.columns, this.element );
+};
+
+proto.updateItems = function() {
+  this.items = querySelect( this.options.items, this.element );
+};
+
+proto.getActiveColumns = function() {
+  return this.columns.filter( function( column ) {
+    var style = getComputedStyle( column );
+    return style.display != 'none';
+  });
+};
+
+// ----- layout ----- //
+
+// public, updates activeColumns
+proto.layout = function() {
+  this.activeColumns = this.getActiveColumns();
+  this._layout();
+};
+
+// private, does not update activeColumns
+proto._layout = function() {
+  // reset column heights
+  this.columnHeights = this.activeColumns.map( function() {
+    return 0;
+  });
+  // layout all items
+  this.layoutItems( this.items );
+};
+
+proto.layoutItems = function( items ) {
+  items.forEach( this.layoutItem, this );
+};
+
+proto.layoutItem = function( item ) {
+  // layout item by appending to column
+  var minHeight = Math.min.apply( Math, this.columnHeights );
+  var index = this.columnHeights.indexOf( minHeight );
+  this.activeColumns[ index ].appendChild( item );
+  // at least 1px, if item hasn't loaded
+  // Not exactly accurate, but it's cool
+  this.columnHeights[ index ] += item.offsetHeight || 1;
+};
+
+// ----- adding items ----- //
+
+proto.append = function( elems ) {
+  var items = this.getQueryItems( elems );
+  // add items to collection
+  this.items = this.items.concat( items );
+  // lay them out
+  this.layoutItems( items );
+};
+
+proto.prepend = function( elems ) {
+  var items = this.getQueryItems( elems );
+  // add items to collection
+  this.items = items.concat( this.items );
+  // lay out everything
+  this._layout();
+};
+
+proto.getQueryItems = function( elems ) {
+  elems = makeArray( elems );
+  var fragment = document.createDocumentFragment();
+  elems.forEach( function( elem ) {
+    fragment.appendChild( elem );
+  });
+  return querySelect( this.options.items, fragment );
+};
+
+// ----- measure column height ----- //
+
+proto.measureColumnHeight = function( elem ) {
+  var boundingRect = this.element.getBoundingClientRect();
+  this.activeColumns.forEach( function( column, i ) {
+    // if elem, measure only that column
+    // if no elem, measure all columns
+    if ( !elem || column.contains( elem ) ) {
+      var lastChildRect = column.lastElementChild.getBoundingClientRect();
+      // not an exact calculation as it includes top border, and excludes item bottom margin
+      this.columnHeights[ i ] = lastChildRect.bottom - boundingRect.top;
+    }
+  }, this );
+};
+
+// ----- events ----- //
+
+proto.onWindowResize = function() {
+  clearTimeout( this.resizeTimeout );
+  this.resizeTimeout = setTimeout( function() {
+    this.onDebouncedResize();
+  }.bind( this ), 100 );
+};
+
+proto.onDebouncedResize = function() {
+  var activeColumns = this.getActiveColumns();
+  // check if columns changed
+  var isSameLength = activeColumns.length == this.activeColumns.length;
+  var isSameColumns = true;
+  this.activeColumns.forEach( function( column, i ) {
+    isSameColumns = isSameColumns && column == activeColumns[i];
+  });
+  if ( isSameLength && isSameColumns ) {
+    return;
+  }
+  // activeColumns changed
+  this.activeColumns = activeColumns;
+  this._layout();
+};
+
+proto.onLoad = function( event ) {
+  this.measureColumnHeight( event.target );
+};
+
+// ----- destroy ----- //
+
+proto.destroy = function() {
+  // move items back to container
+  this.items.forEach( function( item ) {
+    this.element.appendChild( item );
+  }, this );
+  // remove events
+  window.removeEventListener( 'resize', this._windowResizeHandler );
+  this.element.removeEventListener( 'load', this._loadHandler, true );
+  // remove data
+  delete this.element.colcadeGUID;
+  delete instances[ this.guid ];
+};
+
+// -------------------------- HTML init -------------------------- //
+
+docReady( function() {
+  var dataElems = querySelect('[data-colcade]');
+  dataElems.forEach( htmlInit );
+});
+
+function htmlInit( elem ) {
+  // convert attribute "foo: bar, qux: baz" into object
+  var attr = elem.getAttribute('data-colcade');
+  var attrParts = attr.split(',');
+  var options = {};
+  attrParts.forEach( function( part ) {
+    var pair = part.split(':');
+    var key = pair[0].trim();
+    var value = pair[1].trim();
+    options[ key ] = value;
+  });
+
+  new Colcade( elem, options );
+}
+
+Colcade.data = function( elem ) {
+  elem = getQueryElement( elem );
+  var id = elem && elem.colcadeGUID;
+  return id && instances[ id ];
+};
+
+// -------------------------- jQuery -------------------------- //
+
+Colcade.makeJQueryPlugin = function( $ ) {
+  $ = $ || window.jQuery;
+  if ( !$ ) {
+    return;
+  }
+
+  $.fn.colcade = function( arg0 /*, arg1 */) {
+    // method call $().colcade( 'method', { options } )
+    if ( typeof arg0 == 'string' ) {
+      // shift arguments by 1
+      var args = Array.prototype.slice.call( arguments, 1 );
+      return methodCall( this, arg0, args );
+    }
+    // just $().colcade({ options })
+    plainCall( this, arg0 );
+    return this;
+  };
+
+  function methodCall( $elems, methodName, args ) {
+    var returnValue;
+    $elems.each( function( i, elem ) {
+      // get instance
+      var colcade = $.data( elem, 'colcade' );
+      if ( !colcade ) {
+        return;
+      }
+      // apply method, get return value
+      var value = colcade[ methodName ].apply( colcade, args );
+      // set return value if value is returned, use only first value
+      returnValue = returnValue === undefined ? value : returnValue;
+    });
+    return returnValue !== undefined ? returnValue : $elems;
+  }
+
+  function plainCall( $elems, options ) {
+    $elems.each( function( i, elem ) {
+      var colcade = $.data( elem, 'colcade' );
+      if ( colcade ) {
+        // set options & init
+        colcade.option( options );
+        colcade.layout();
+      } else {
+        // initialize new instance
+        colcade = new Colcade( elem, options );
+        $.data( elem, 'colcade', colcade );
+      }
+    });
+  }
+};
+
+// try making plugin
+Colcade.makeJQueryPlugin();
+
+// -------------------------- utils -------------------------- //
+
+function extend( a, b ) {
+  for ( var prop in b ) {
+    a[ prop ] = b[ prop ];
+  }
+  return a;
+}
+
+// turn element or nodeList into an array
+function makeArray( obj ) {
+  var ary = [];
+  if ( Array.isArray( obj ) ) {
+    // use object if already an array
+    ary = obj;
+  } else if ( obj && typeof obj.length == 'number' ) {
+    // convert nodeList to array
+    for ( var i=0; i < obj.length; i++ ) {
+      ary.push( obj[i] );
+    }
+  } else {
+    // array of single index
+    ary.push( obj );
+  }
+  return ary;
+}
+
+// get array of elements
+function querySelect( selector, elem ) {
+  elem = elem || document;
+  var elems = elem.querySelectorAll( selector );
+  return makeArray( elems );
+}
+
+function getQueryElement( elem ) {
+  if ( typeof elem == 'string' ) {
+    elem = document.querySelector( elem );
+  }
+  return elem;
+}
+
+function docReady( onReady ) {
+  if ( document.readyState == 'complete' ) {
+    onReady();
+    return;
+  }
+  document.addEventListener( 'DOMContentLoaded', onReady );
+}
+
+// -------------------------- end -------------------------- //
+
+return Colcade;
+
+}));