bonethug 0.0.1 → 0.0.5

data/skel/project_types/silverstripe3/public/abc/javascript/library/jQuery/isotope/_posts/docs/2010-12-06-filtering.mdown

@@ -0,0 +1,109 @@
+---
+
+title: Filtering
+category: docs
+layout: default
+toc:
+  - { title: Markup, anchor: markup }
+  - { title: jQuery script, anchor: jquery_script }
+  - { title: Creating interactive buttons, anchor: creating_interactive_buttons }
+  - { title: Recommended CSS, anchor: recommended_css }
+
+---
+
+Isotope can hide and show item elements via the [`filter` option](options.html#filter). `filter` accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
+
+[**See Demo: Filtering**](../demos/filtering.html)
+
+## Markup
+
+Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc.
+
+{% highlight html %}
+
+<div id="container">
+  <div class="element transition metal">...</div>
+  <div class="element post-transition metal">...</div>
+  <div class="element alkali metal">...</div>
+  <div class="element transition metal">...</div>
+  <div class="element lanthanoid metal inner-transition">...</div> 
+  <div class="element halogen nonmetal">...</div> 
+  <div class="element alkaline-earth metal">...</div>
+  ...
+</div>
+
+{% endhighlight %}
+
+## jQuery script
+
+To show only `.metal` items, the jQuery script would be:
+
+{% highlight javascript %}
+
+$('#container').isotope({ filter: '.metal' });
+
+{% endhighlight %}
+
+The `filter` option uses a [jQuery selector](http://api.jquery.com/category/selectors/) to show item elements that match a selector, and hide all others that do not. For example:
+
++ `.alkali, .alkaline-earth` will show `.alkali` AND ` .alkaline-earth` item elements.
++ `.metal.transition` will show item elements that have BOTH `.metal` and `.transition` classes.
++ `.metal:not(.transition)` will show `.metal` item elements that are NOT `.transition`.
+
+## Creating interactive buttons
+
+Let's use a basic list for our buttons
+
+{% highlight html %}
+
+<ul id="filters">
+  <li><a href="#" data-filter="*">show all</a></li>
+  <li><a href="#" data-filter=".metal">metal</a></li>
+  <li><a href="#" data-filter=".transition">transition</a></li>
+  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
+  <li><a href="#" data-filter=":not(.transition)">not transition</a></li>
+  <li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
+</ul>
+
+{% endhighlight %}
+
+Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter selector.
+
+{% highlight javascript %}
+
+// cache container
+var $container = $('#container');
+// initialize isotope
+$container.isotope({
+  // options...
+});
+
+// filter items when filter link is clicked
+$('#filters a').click(function(){
+  var selector = $(this).attr('data-filter');
+  $container.isotope({ filter: selector });
+  return false;
+});
+
+{% endhighlight %}
+
+## Recommended CSS
+
+If you choose to use the filtering functionality, add the following CSS to your stylesheet:
+
+{% highlight css %}
+
+/**** Isotope filtering ****/
+
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+{% endhighlight %}
+
+These styles ensure that hidden items will not interfere with interactions.

data/skel/project_types/silverstripe3/public/abc/javascript/library/jQuery/isotope/_posts/docs/2010-12-07-sorting.mdown

@@ -0,0 +1,169 @@
+---
+
+title: Sorting
+category: docs
+layout: default
+toc:
+  - { title: Markup, anchor: markup }
+  - { title: getSortData option, anchor: getsortdata_option }
+  - { title: sortBy option, anchor: sortby_option }
+  - { title: sortAscending option, anchor: sortascending_option }
+  - { title: Creating interactive buttons, anchor: creating_interactive_buttons }
+
+---
+
+Collect data from item element and rearrange their order in the layout with sorting.
+
+[**See Demo: Sorting**](../demos/sorting.html)
+
+## Markup
+
+Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category.
+
+{% highlight html %}
+
+<div id="container">
+  <div class="element transition metal" data-category="transition"> 
+    <p class="number">79</p> 
+    <h3 class="symbol">Au</h3> 
+    <h2 class="name">Gold</h2> 
+    <p class="weight">196.966569</p> 
+  </div> 
+    
+  <div class="element metalloid" data-category="metalloid"> 
+    <p class="number">51</p> 
+    <h3 class="symbol">Sb</h3> 
+    <h2 class="name">Antimony</h2> 
+    <p class="weight">121.76</p> 
+  </div>
+</div>
+
+{% endhighlight %}
+
+
+## getSortData option
+
+In order to extract this data from the element, we need to pass in a function to get it via the [`getSortData`](options.html#getsortdata) option.  This option accepts an object, whose values are the functions to extract the data.
+
+Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.
+
+In the example above, to get element name, we would need to get the text from the `.name` element. The same works for symbol.
+
+{% highlight javascript %}
+
+$('#container').isotope({
+  getSortData : {
+    name : function ( $elem ) {
+      return $elem.find('.name').text();
+    },
+    symbol : function ( $elem ) {
+      return $elem.find('.symbol').text();
+    }
+  }
+});
+
+{% endhighlight %}
+
+
+For numerical data, we can convert a text value into a number with `parseInt()` or `parseFloat()`.
+
+{% highlight javascript %}
+
+getSortData : {
+  // ...
+  number : function ( $elem ) {
+    return parseInt( $elem.find('.number').text(), 10 );
+  },
+  weight : function ( $elem ) {
+    return parseFloat( $elem.find('.weight').text() );
+  }
+}
+
+{% endhighlight %}
+
+The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the `data-category` attribute, we can use the `.attr()`.
+
+{% highlight javascript %}
+
+getSortData : {
+  // ...
+  category : function ( $elem ) {
+    return $elem.attr('data-category');
+  }
+}
+
+{% endhighlight %}
+
+Get creative! You could sort a list by the width of each item element.
+
+{% highlight javascript %}
+
+getSortData : {
+  // ...
+  width : function( $elem ) {
+    return $elem.width();
+  }
+}
+
+{% endhighlight %}
+
+## sortBy option
+
+For every method set in `getSortData`, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.
+
+Sorting elements is done with the [`sortBy` option](options.html#sortby). The value needs to match the property name used in the `getSortData` object.
+
+With our example, we can use `'name'`, `'symbol'`, `'number'`, `'weight'` and `'category'`.
+
+{% highlight javascript %}
+
+$('#container').isotope({ sortBy : 'symbol' });
+
+{% endhighlight %}
+
+There are two additional sorting data methods built in to Isotope. 
+
++ `'original-order'` will use the original order of the item elements to arrange them in the layout.
++ `'random'` is a random order.
+
+## sortAscending option
+
+By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver."  To reverse the order and sort data in descension, set [`sortAscending`](options.html#sortascending) to <code><span class="kc">false</span></code>.
+
+{% highlight javascript %}
+
+$('#container').isotope({ 
+  sortBy : 'name',
+  sortAscending : false
+});
+
+{% endhighlight %}
+
+## Creating interactive buttons
+
+We can use a simple list for our buttons.
+
+{% highlight html %}
+
+<ul id="sort-by">
+  <li><a href="#name">name</a></li>
+  <li><a href="#symbol">symbol</a></li>
+  <li><a href="#number">number</a></li>
+  <li><a href="#weight">weight</a></li>
+  <li><a href="#category">category</a></li>
+</ul>
+
+{% endhighlight %}
+
+When one of these links is clicked, we can use the `href` attribute as the value for `sortBy` in the Isotope script.
+
+{% highlight javascript %}
+
+$('#sort-by a').click(function(){
+  // get href attribute, minus the '#'
+  var sortName = $(this).attr('href').slice(1);
+  $('#container').isotope({ sortBy : sortName });
+  return false;
+});
+
+{% endhighlight %}

data/skel/project_types/silverstripe3/public/abc/javascript/library/jQuery/isotope/_posts/docs/2010-12-09-animating.mdown

@@ -0,0 +1,100 @@
+---
+
+title: Animating
+category: docs
+layout: default
+toc:
+  - { title: animationEngine option, anchor: animationengine_option }
+  - { title: CSS transitions, anchor: css_transitions }
+  - { title: Variations, anchor: variations }
+
+---
+
+Isotope was developed to take advantage of the best browser features available. For animations, you can use CSS3 transitions and transforms in capable browsers. Isotope provides Javascript animation fall back for lesser browsers.
+
+
+## animationEngine option
+
+You can control how Isotope handles animation with the [`animationEngine`](options.html#animationengine) option. This option has three values which control whether jQuery applies styles with`.css()` or `.animate()`.
+
++ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
++ `'css'`: Isotope uses `.css()`
++ `'jquery'`: Isotope uses `.animate()`
+
+## CSS transitions
+
+To enable animation with CSS transitions, you'll need the following code in your CSS:
+
+{% highlight css %}
+
+.isotope,
+.isotope .isotope-item {
+  /* change duration value to whatever you like */
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+      -ms-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
+          transition-duration: 0.8s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+      -ms-transition-property: height, width;
+       -o-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+      -ms-transition-property:     -ms-transform, opacity;
+       -o-transition-property:         top, left, opacity;
+          transition-property:         transform, opacity;
+}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+      -ms-transition-duration: 0s;
+       -o-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+{% endhighlight %}
+
+## Variations
+
+With these two options you can finely control how animation is handled across browsers.
+
+### Best available (recommended)
+
+Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.
+
++ **Add** CSS transition declarations
+
+### Always use jQuery
+
+All browsers will use jQuery animation, regardless of their CSS transition support.
+
++ `animationEngine : 'jquery'`
++ **No** CSS transition declarations
+
+Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing.
+
+### Only CSS transitions
+
++ `animationEngine: 'css'`
++ **Add** CSS transition declarations
+
+### None
+
+Animation is not enabled in any browser
+
++ `animationEngine : 'css'`
++ **No** CSS transition declarations
+

data/skel/project_types/silverstripe3/public/abc/javascript/library/jQuery/isotope/_posts/docs/2010-12-10-adding-items.mdown

@@ -0,0 +1,79 @@
+---
+
+title: Adding items
+category: docs
+layout: default
+toc:
+  - { title: addItems method, anchor: additems_method }
+  - { title: insert method, anchor: insert_method }
+  - { title: appended method, anchor: appended_method }
+  - { title: Prepending, anchor: prepending }
+  - { title: Recommended CSS, anchor: recommended_css }
+
+---
+
+If your application dynamically adds new content, Isotope provides several methods to add items.
+
+[**See Demo: Adding items**](../demos/adding-items.html).
+
+## addItems method
+
+The [`addItems` method](methods.html#additems) adds new content to an Isotope container. This applies the proper styles to the items so they can be positioned and any sorting data is retrieved. But that's it. The new content will _not_ be filtered, sorted, or positioned properly, nor will it be appended to the container element.
+
+{% highlight javascript %}
+
+var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').append( $newItems ).isotope( 'addItems', $newItems );
+
+{% endhighlight %}
+
+## insert method
+
+More likely, you want to use the [`insert` method](methods.html#insert), which does everything that `addItems` misses. `insert` will append the content to the container, filter the new content, sort all the content, then trigger a `reLayout` so all item elements are properly laid out.
+
+{% highlight javascript %}
+
+var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').isotope( 'insert', $newItems );
+
+{% endhighlight %}
+
+## appended method
+
+The [`appended` method](methods.html#appended) is a convenience method triggers `addItems` on new content, then lays out _only the new content_ at the end of the layout. This method is useful if you know you only want to add new content to the end, and **not** use filtering or sorting.  `appended` is the best method to use with Infinite Scroll.
+
+[**See Demo: Infinite Scroll**](../demos/infinite-scroll.html).
+
+See also [Infinite Scroll with filtering or sorting](help.html#infinite_scroll_with_filtering_or_sorting)
+
+## Prepending
+
+Because of Isotope's sorting functionality, prepending isn't as straight forward as might expect. However, it can be replicated fairly easy.  After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the [`reloadItems` method](methods.html#reloaditems). Then trigger a re-layout, with the original DOM order.
+
+{% highlight javascript %}
+
+var $newItems = $('<div class="item" /><div class="item" /><div class="item" />');
+$('#container').prepend( $newItems)
+  .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
+
+{% endhighlight %}
+
+## Recommended CSS
+
+You'll need these styles in your CSS for the reveal animation when adding items.
+
+{% highlight css %}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+      -ms-transition-duration: 0s;
+       -o-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+{% endhighlight %}

data/skel/project_types/silverstripe3/public/abc/javascript/library/jQuery/isotope/_posts/docs/2011-05-25-extending-isotope.mdown

@@ -0,0 +1,174 @@
+---
+
+title: Extending Isotope
+category: docs
+layout: default
+toc:
+  - { title: Custom layout modes, anchor: custom_layout_modes }
+
+---
+
+Isotope uses a constructor pattern, `$.Isotope`. To extend Isotope, you need only to add a method to `$.Isotope.prototype`.
+
+{% highlight javascript %}
+
+$.Isotope.prototype.myMethod = function() { ... };
+
+// or, using jQuery extend utility
+$.extend( $.Isotope.prototype, {
+  myMethod : function() { ... }
+});
+
+{% endhighlight %}
+
+Before diving in, try [looking over the source](../jquery.isotope.js) to get a better understand of the internal logic behind Isotope.
+
+## Custom layout modes
+
+Isotope's layout modes are built around four methods: `Reset`, `Layout`, `GetContainerSize`, and `ResizeChanged`. These methods are the hooks that allow you to develop your own custom layout mode, without getting your hands dirty dealing with sorting, filtering, or other functionality. These layout mode methods need to be prefixed with an underscore and the name of the layout mode.
+
+{% highlight javascript %}
+
+// adding layout mode methods for 'customMode'
+$.extend( $.Isotope.prototype, {
+  _customModeReset : function() { ... },
+  _customModeLayout : function( $elems ) { ... },
+  _customModeGetContainerSize : function() { ... },
+  _customModeResizeChanged : function() { ... }
+});
+
+{% endhighlight %}
+
+[**See Custom layout mode: Category Rows**](../custom-layout-modes/category-rows.html)
+[**See Custom layout mode: Spine align**](../custom-layout-modes/spine-align.html)
+
+All of the [default layout modes](../docs/layout-modes.html) follow this pattern. We'll look at the code behind the _fitRows_ layout mode.
+
+### Reset
+
+Each layout mode should have its own set of properties that only it can use and not be affected by other layout modes. These properties can be accessed in the instance as an object whose value matches the layout mode name (i.e. `this.fitRows` for _fitRows_).
+
+The `Reset` layout mode method is called with every `reLayout`, where Isotope will go through each item element and position it. This method resets layout mode properties.
+
+The _fitRows_ layout mode keeps track of x and y position, as well as the height of the container. These properties are set back to zero in `Reset`.
+
+{% highlight javascript %}
+
+_fitRowsReset : function() {
+  this.fitRows = {
+    x : 0,
+    y : 0,
+    height : 0
+  };
+},
+
+{% endhighlight %}
+
+### Layout
+
+The `Layout` layout mode method is where items are positioned. Most of your layout logic happens here. This method provides one argument `$elems` -- a jQuery object with the item elements that need to be positioned.
+
+`$elems.each` is the principle loop, iterating over each item element and positioning it. Items are positioned with the `_pushPosition` method (see below). The layout modes properties are 
+
+For _fitRows_, items are placed with the `this.fitRows.x` and `this.fitRows.y` values. This position is determined by if the item can fit in the current row, or if a new row needs to be started.
+
+{% highlight javascript %}
+
+_fitRowsLayout : function( $elems ) {
+  var instance = this,
+      containerWidth = this.element.width(),
+      props = this.fitRows;
+  
+  $elems.each( function() {
+    var $this = $(this),
+        atomW = $this.outerWidth(true),
+        atomH = $this.outerHeight(true);
+  
+    if ( props.x !== 0 && atomW + props.x > containerWidth ) {
+      // if this element cannot fit in the current row
+      props.x = 0;
+      props.y = props.height;
+    } 
+  
+    // position the atom
+    instance._pushPosition( $this, props.x, props.y );
+
+    props.height = Math.max( props.y + atomH, props.height );
+    props.x += atomW;
+
+  });
+},
+
+{% endhighlight %}
+
+### GetContainerSize
+
+After the script goes through positioning each item, it needs to resize the container. `GetContainerSize` returns the style for the size of the container.
+
+In _fitRows_, the height property is returned as the value for height.
+
+{% highlight javascript %}
+
+_fitRowsGetContainerSize : function () {
+  return { height : this.fitRows.height };
+},
+
+{% endhighlight %}
+
+### ResizeChanged
+
+`ResizeChanged` is triggered whenever the browser window is resized. Before Isotope adjusts the layout, this method is triggered to determine if the layout has actually changed. The methods return a boolean.
+
+{% highlight javascript %}
+
+_fitRowsResizeChanged : function() {
+  return true;
+},
+
+{% endhighlight %}
+
+### Helper methods
+
+The `_pushPosition` method is used within a layout mode's `Layout` method. It takes 3 arguments: the item element currently being positioned, the x position, and the y position.
+
+{% highlight javascript %}
+
+_pushPosition( $item, x, y )
+
+{% endhighlight %}
+
+`_getSegments` is used within the layout mode's `Reset` method. It performs several utilities:
+
++ Determines the `columnWidth` for the layout mode (`rowHeight` for horizontal layout modes). This is either passed in as an option (i.e. `masonry { columnWidth: 90 }`), or the width of the first item element. This property is then set for the layout mode, i.e. `this.masonry.columnWidth`.
++ Calculates the number of number of columns (or rows, if horizontal) given the size of the container. This property is then set for the layout mode, i.e. `this.masonry.cols`.
+
+{% highlight javascript %}
+
+_getSegments( isHorizontal )
+
+// for example
+_cellsByRowReset : function() {
+  this.cellsByRow = {
+    index : 0
+  };
+  // get this.cellsByRow.columnWidth
+  this._getSegments();
+  // get this.cellsByRow.rowHeight
+  this._getSegments(true);
+},
+
+{% endhighlight %}
+
+Similarly, `_checkIfSegmentsChanged` is used within `ResizeChanged`. It returns a boolean indicating whether or not the number of columns or rows has changed since the window has been resized.
+
+{% highlight javascript %}
+
+_checkIfSegmentsChanged( isHorizontal )
+
+// for example
+_masonryResizeChanged : function() {
+  return this._checkIfSegmentsChanged();
+},
+
+{% endhighlight %}
+