Merge pull request #25 from titon/1.4

Merge 1.4 branch into master

.gitignore

@@ -3,8 +3,8 @@
 .sass-cache/
 node_modules/
 build/
-css/
 npm-debug.log
+*.css
 *.gem
 Gemfile.lock
 

.jshintrc

@@ -22,6 +22,7 @@
         "Toolkit": true,
         "Timers": true,
         "Cache": true,
+
         "Zepto": true,
         "DocumentTouch": true
     }

Gruntfile.js

@@ -96,14 +96,7 @@ module.exports = function(grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
 
-        // 1) Validate the Javascript source directory
-        // http://jshint.com/docs/
-        jshint: {
-            options: grunt.file.readJSON('.jshintrc'),
-            files: ['js/**/*.js']
-        },
-
-        // 2) Generate new CSS files before building
+        // Generate new CSS files before building
         // https://github.com/gruntjs/grunt-sass
         /*sass: {
             options: {
@@ -137,7 +130,7 @@ module.exports = function(grunt) {
             }
         },
 
-        // 3) Combine the JS and CSS components into a single file
+        // Combine the JS and CSS components into a single file
         // https://github.com/gruntjs/grunt-contrib-concat
         concat: {
             options: {
@@ -160,7 +153,14 @@ module.exports = function(grunt) {
             }
         },
 
-        // 4) Minify Javascript using the concatenated file
+        // Validate the Javascript source directory
+        // http://jshint.com/docs/
+        jshint: {
+            options: grunt.file.readJSON('.jshintrc'),
+            files: ['build/*.js']
+        },
+
+        // Minify Javascript using the concatenated file
         // http://lisperator.net/uglifyjs/
         uglify: {
             options: {
@@ -197,7 +197,7 @@ module.exports = function(grunt) {
             }
         },
 
-        // 4) Apply auto prefixing to CSS properties
+        // Apply auto prefixing to CSS properties
         // https://github.com/nDmitry/grunt-autoprefixer
         autoprefixer: {
             options: {
@@ -216,7 +216,7 @@ module.exports = function(grunt) {
             }
         },
 
-        // 5) Replace variables in files
+        // Replace variables in files
         // https://npmjs.org/package/grunt-string-replace
         'string-replace': {
             build: {
@@ -273,7 +273,7 @@ module.exports = function(grunt) {
 
     // Register tasks
     grunt.registerTask('validate', ['jshint']);
-    grunt.registerTask('distribute', ['jshint', 'sass:dist', 'concat:dist', 'uglify:dist', 'autoprefixer:dist', 'string-replace:dist']);
-    grunt.registerTask('production', ['jshint', 'sass:dist', 'concat:build', 'uglify:prod', 'autoprefixer:build', 'string-replace:build']);
-    grunt.registerTask('default', ['jshint', 'sass:build', 'concat:build', 'uglify:build', 'autoprefixer:build', 'string-replace:build']);
+    grunt.registerTask('distribute', ['sass:dist', 'concat:dist', 'jshint', 'uglify:dist', 'autoprefixer:dist', 'string-replace:dist']);
+    grunt.registerTask('production', ['sass:dist', 'concat:build', 'jshint', 'uglify:prod', 'autoprefixer:build', 'string-replace:build']);
+    grunt.registerTask('default', ['sass:build', 'concat:build', 'jshint', 'uglify:build', 'autoprefixer:build', 'string-replace:build']);
 };

bower.json

@@ -1,5 +1,5 @@
 {
-    "version": "1.3.2",
+    "version": "1.4.0",
     "name": "toolkit",
     "description": "A collection of extensible front-end UI components for the responsive and mobile web.",
     "keywords": [

changelog.md

@@ -2,64 +2,78 @@
 
 Older versions can be found in the documentation changelogs.
 
-## 1.3.2 ##
-* Updated `clickout` events to trigger for `touchstart` events
-* Button, Form
-    * Reset browser specific styles, specifically in iOS
-* Modal
-    * Added mobile specific styles that span the width of the viewport
-* TypeAhead
-    * Turned off `autocapitalize`, `autocorrect`, and `spellcheck` on the input field
-
-## 1.3.1 ##
-* Updated `event.target` to `event.currentTarget` where applicable
-
-## 1.3.0 ##
-This minor release includes 2 new components, automatic ARIA support for all applicable components,
-replacing Compass with autoprefixer, removal of state prefixing, and many more bug fixes and improvements.
+## 1.4.0 ##
+This minor release includes 3 new components, a new `destroy()` method,
+a cleanup of element and event options, expanded documentation, and a handful of optimization improvements.
 
-* Added new Step component for step based navigation
-* Added new Switch component for visual checkbox switches
-* Added ARIA support to all components with supported documentation
-* Added CSS vendor prefixing support through [autoprefixer](https://github.com/ai/autoprefixer)
-* Added namespace event triggering support to the activating node
-* Removed is and has state prefixing from the CSS and JS layers
-* Removed `$state-is-prefix` and `$state-has-prefix` Sass variables
-* Removed individual JavaScript distribution files
-* Removed Compass dependency in favor of autoprefixer
-* Updated to normalize.css v3.0.1
-* jQuery
-    * Updated `$.fn.item()` to return an empty jQuery collection if index out of range
-    * Refactored the `clickout` event to support delegated elements
-    * Removed `$.hyphenate()`
-    * Removed event helper methods like `clickout()`, `swipeleft()`, etc
+* Usage license has been updated to BSD-3 from BSD-2
+* MooTools support is slowly being phased out and new components are not supported
+* Added new Divider component for separating content
+* Added new Off Canvas component for displaying sidebars outside the viewport
+* Added new Toast component for notifying users with timed messages
+* Added `.no-transition` class to disable transitions
+* Added `.sr-only` class for screen readers
+* Added `suppression` setting for swipe events
+* Fixed a bug with `swipe` events where select dropdowns would stop working
+* Fixed a bug with `swipe` events where page scrolling gets disabled
+* Fixed a bug with certain fade animations
+* Fixed a bug where certain Sass variables were not customizable
+* Removed `$shape-square-class` Sass variable
+* Removed `*Element` options (CSS classes are now hardcoded)
+* Removed `*Event` options (CSS classes are now hardcoded)
 * Toolkit
-    * Added `aria` property to toggle support
-    * Added `aria()` collection method that can set ARIA attributes
-    * Removed `Toolkit.options.isPrefix` and `Toolkit.options.hasPrefix`
-    * Renamed `Toolkit.options.vendor` to `Toolkit.vendor`
-    * Renamed `Toolkit.createComponent()` to `Toolkit.create()`
+    * Added `toolkit(component, method, args)` support for triggering methods on the class instance
+    * Added `transitionEnd` flag
+    * Refactored `toolkit()` to return a single instance instead of multiple instances
+    * Removed `i()` and `item()` jQuery collection methods
 * Component
-    * Added global `cache` option to toggle AJAX response caching
-    * Added static `count` property to each component that tracks the number of instances in the page
-    * Added `uid` property that represents the current instance count
-    * Added `cssClass` property that represents the component name in CSS class form
-    * Added `id()` method to generate unique CSS class names
-    * Removed error and loading template generation from components (wasn't being used)
+    * Added a `initialize()` method that is triggered within all constructors
+    * Added a `destroy()` method that will unbind all events, remove elements, and delete the instance
+    * Added automatic `this` scope binding to all methods on a class instance
+    * Refactored `bindEvents()` with an easier lightweight syntax
+* Accordion
+    * Removed `headerElement`, `sectionElement` options
+* Blackout
+    * Fixed incorrect `.loader-spinner` class
 * Carousel
-    * Fixed a bug where `swipedown` would not trigger
-    * Merged `itemsElement` and `itemElement` options
-    * Merged `tabsElement` and `tabElement` options
-    * Removed `itemsWrapper`, `itemsList`, `tabsWrapper` properties
-* Drop
-    * Added a global `.drop` class that all menus require
-* Grid
-    * Added `%row` placeholder to extend row styles from
-    * Added `%col` placeholder to extend column styles from
-    * Removed `.row` (reserved now for another component)
+    * Removed `nextButton`, `prevButton` properties
+    * Removed `itemsElement`, `tabsElement`, `nextElement`, `prevElement` options
+* Code
+    * Added overflow scrolling for touch devices
+* Flyout
+    * Disabled automatically for touch devices
+    * Removed `contentElement` option
+* Input
+    * Added `hideOpened` option to selects to hide other opened selects
+    * Updated `native` option value to be `Toolkit.isTouch` by default
+* Lazy Load
+    * Removed `isLoaded` property
+* Mask
+    * Added `selector` option to bind toggle events to
+    * Renamed `.maskable` to `.mask-target`
+    * Removed `messageElement` option
 * Modal
-    * Fixed a bug where a modal opened on the same modal causes the blackout to persist
-* Pin
-    * Added `lock` option to disable pinning if element is taller than the viewport
-    * Added `$pin-transition` variable
-    * Fixed a bug where the pin element margin was not included in the total height
+    * Added `$modal-mobile-breakpoint` to apply mobile widths to the modal
+    * Added `submit()` method for submitting forms
+    * Updated with new markup
+    * Renamed `.modal-event-submit` to `.modal-submit`
+    * Renamed `.modal-event-close` to `.modal-hide`
+    * Removed `.modal-handle` within the template
+    * Removed `elementBody` property
+    * Removed `contentElement`, `closeElement`, `closeEvent`, `submitEvent` options
+    * Removed `sticky-*` animations
+* Popover, Tooltip
+    * Removed `titleElement`, `contentElement` options
+* Showcase
+    * Updated with new markup
+    * Renamed `.showcase-event-prev` to `.showcase-prev`
+    * Renamed `.showcase-event-next` to `.showcase-next`
+    * Renamed `.showcase-event-close` to `.showcase-hide`
+    * Renamed `.showcase-event-jump` to `.showcase-tabs a`
+    * Removed `nextButton`, `prevButton` properties
+    * Removed `transition`, `itemsElement`, `tabsElement`, `prevElement`, `nextElement`,
+        `closeEvent`, `jumpEvent`, `prevEvent`, `nextEvent` options
+* Tabs
+    * Removed `navElement`, `sectionElement` options
+* Type Ahead
+    * Removed `contentElement` option

composer.json

@@ -22,7 +22,7 @@
         "mobile"
     ],
     "homepage": "http://titon.io",
-    "license": "BSD-2",
+    "license": "BSD-3",
     "authors": [
         {
             "name": "Miles Johnson",

demo/ajax/modal-form.php

@@ -7,15 +7,15 @@
         <?php if ($_POST) {
             print_r($_POST);
         } else { ?>
-            <p>By adding the class "modal-event-submit" to the submit button of a modal form, the form can be submitted via AJAX.
+            <p>By adding the class "modal-submit" to the submit button of a modal form, the form can be submitted via AJAX.
             The response of the AJAX call will replace the current modal. Give it a try!</p>
 
             <p><label for="name">Name:</label> <input type="text" name="name" id="name"></p>
         <?php } ?>
     </div>
 
     <div class="modal-foot">
-        <button type="button" class="button info modal-event-submit">Submit</button>
-        <button type="button" class="button modal-event-close">Close</button>
+        <button type="button" class="button info modal-submit">Submit</button>
+        <button type="button" class="button modal-hide">Close</button>
     </div>
 </form>

demo/ajax/modal-multi.php

@@ -11,5 +11,5 @@
 </div>
 
 <div class="modal-foot">
-    <button type="button" class="button modal-event-close">Close</button>
+    <button type="button" class="button modal-hide">Close</button>
 </div>

demo/ajax/modal.php

@@ -13,5 +13,5 @@
 <div class="modal-foot">
     <a href="ajax/modal-multi.php" class="button js-modal2">Open Second Modal</a>
     <a href="ajax/modal-multi.php" class="button js-modal">Open Another Modal</a>
-    <button type="button" class="button modal-event-close">Close</button>
+    <button type="button" class="button modal-hide">Close</button>
 </div>

demo/css/example.css

@@ -19,6 +19,7 @@ a:hover { color: #b84374; }
 
 .example { padding: 2rem; }
 .example > *:first-child { margin-top: 0; }
+.example img { max-width: 100%; }
 
 .example-form { margin: 0; padding: 0; list-style: none; background: #283442; color: #ebe8dd; width: 100%; z-index: 550; }
 .example-form li { display: inline-block; padding: 5px; }
@@ -76,4 +77,23 @@ a:hover { color: #b84374; }
 #stalker2-target { position: fixed; right: 20px; top: 120px; }
 
 .mask .loader.bar-wave > span { background: #fff; }
-.col.maskable { border-radius: 10px; }
+.col.mask-target { border-radius: 10px; }
+
+.on-canvas { background: #fff; }
+.off-canvas--left,
+.off-canvas--right { background: #000; color: #fff; }
+
+.toasts.bottom-left,
+.toasts.bottom-center,
+.toasts.bottom-right {
+    bottom: 50px;
+}
+
+.toast { background: #000; color: #fff; padding: 10px; }
+
+@media only screen and (max-width: 640px) {
+    .toasts { width: auto; left: 0 !important; right: 0 !important; }
+}
+
+.canvas,
+.on-canvas { height: 100%; }

demo/divider.php

@@ -0,0 +1,4 @@
+
+<div class="divider"></div>
+<div class="divider">OR</div>
+<div class="divider"><span class="label--badge"><span class="icon-16-1"></span></span></div>

demo/grid.php

@@ -187,7 +187,7 @@
 
 <p>For large, medium and small!</p>
 
-<div class="row example-grid">
+<div class="grid example-grid">
     <div class="col large-4 medium-3 small-2">
         Large: 33%<br>
         Medium: 37%<br>