titon-toolkit 1.3.2 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8dbb1d48da8f0317038e027c31c9408adb76e47a
-  data.tar.gz: 6f5cc50f508fcd16899298189264b01d30328e21
+  metadata.gz: f7acf78b6a86370cfa956707f66d5ae3904d1e8b
+  data.tar.gz: e708ce5bddbdfe2f928e3523abaf996e37b9e399
 SHA512:
-  metadata.gz: 377990b3751c233e006b87300f7fffc7dc301a35853636ee15cd21febe0a6c881329632c027bfebf392a01f6f0c496f074494c11122bcd3c489bdfee1340017e
-  data.tar.gz: 683c2289a6c01c9875f553096e0eb2bb41ab5fd13f8f34d44d7a1135b8754464c10f8f2cffa36c97a990f4888d2c1d27059204b6d5a7b231ec51d5f8b29e4d7b
+  metadata.gz: d1f61eb435a1884c57cb8d1dc312101e2c21a34d68a04f2c28ff5b38cf98d9b5973f9e1cd0fc0396b56f82c35b8ca845f0fdea8d6c0d0a9752622cac2f80def8
+  data.tar.gz: 7c0ef03b143f15bf79b01161e80e44fc9572cd3b09bdd9649bc9912d3a21d2d15a9da6277a4d80f4b07560dba68afdf983a0c9dc73ac921a7221efd0c58d3c9b

data/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

data/license.md

@@ -1,23 +1,26 @@
-Copyright (c) 2013, The Titon Project, Miles Johnson.
+Copyright (c) 2010-2014, The Titon Project, Miles Johnson.
 All rights reserved.
 
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
 
-* Redistributions of source code must retain the above copyright notice,
+1. Redistributions of source code must retain the above copyright notice,
 this list of conditions and the following disclaimer.
 
-* Redistributions in binary form must reproduce the above copyright notice,
-this list of conditions and the following disclaimer in the documentation
-and/or other materials provided with the distribution.
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may
+be used to endorse or promote products derived from this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/readme.md

@@ -6,7 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.3.2 #
+# Toolkit v1.4.0 #
 
 Titon Toolkit is a collection of very powerful user interface components and utility classes
 for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS,

data/roadmap.md

@@ -2,30 +2,46 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 1.4.0 ###
-* Off Canvas - A component for displaying side menus off the canvas (viewport). Useful for sliding mobile navigations.
-* Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
-* Divider - A component for dividing content horizontally or vertically.
-* Add destroy method to clean up and remove the component.
-
 ### 1.5.0 ###
-* Dialog - A component that prompts the user for an action. Sister to the modal component.
-* Toast - A component to display toast notifications.
-* Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
+* Add more features support to Carousel.
+    * Use pixels instead of percentages for transitions.
+    * Add support for multiple items displayed at once.
+    * Add support for variable amount of items being cycled at once.
+    * Add support for infinite scrolling (move items around).
 * Add deferred/promise integration.
+* Make nested menus expandable on touch devices (drop).
+* Rename Tabs to Tab.
+* Remove cookie dependency.
 
 ### 2.0.0 ###
 * Remove the MooTools port.
+* Remove CSS dependencies from the JS layer, use the DOM (classes vs attributes, semantic tags).
+* Make CSS class names customizable.
+* Move CSS component styles into mixins, that are inherited into classes.
+* Use :: pseudo element syntax.
 * Drop IE8 support and upgrade to jQuery 2.
 * Replace examples with unit tests.
-* Updated to use AMD.
+* Update to use AMD/requirejs.
 * Switch to Gulp.
-* Updated to Sass 3.
+* Updated to Sass 3.3 (maps for settings).
 * Refactor events for before/after conditions.
 * RTL support.
+* Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/
 
 ### 3.0.0 ###
 * Remove jQuery dependency and go straight vanilla?
-* Switch to Less (removes sass/compass/ruby dependencies)
+* Switch to Less (removes sass/compass/ruby dependencies).
 * Implement custom elements / components - http://w3c.github.io/webcomponents/explainer/
-* Separate component transitions into a stand alone layer that can be used anywhere.
+* Separate component transitions into a stand alone layer that can be used anywhere.
+* Use `calc()` in CSS.
+
+### Components ###
+* Dialog - A component that prompts the user for an action. Sister to the modal component.
+* Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
+* Flex - A grid component that uses flex box instead of floats.
+
+### Behaviors ###
+* Form Validator - Provides form validation.
+* Data Binding - Provides 2 way data binding.
+* Drag & Drop - Provides a drag and drop system.
+* Move Lazy Load to behaviors.

data/scss/toolkit.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -18,6 +18,7 @@
 @import "toolkit/components/breadcrumb";
 @import "toolkit/components/button";
 @import "toolkit/components/button-group";
+@import "toolkit/components/divider";
 @import "toolkit/components/drop";
 @import "toolkit/components/icon";
 @import "toolkit/components/input";
@@ -40,10 +41,12 @@
 @import "toolkit/components/matrix";
 @import "toolkit/components/mask";
 @import "toolkit/components/modal";
+@import "toolkit/components/off-canvas";
 @import "toolkit/components/pin";
 @import "toolkit/components/popover";
 @import "toolkit/components/showcase";
 @import "toolkit/components/tabs";
+@import "toolkit/components/toast";
 @import "toolkit/components/tooltip";
 @import "toolkit/components/type-ahead";
 

data/scss/toolkit/_common.scss

@@ -1,14 +1,13 @@
 
 //-------------------- Toolkit --------------------//
 
-$vendor-prefix: "";
-$size-small-class: "small";
-$size-large-class: "large";
-$shape-square-class: "square";
-$shape-round-class: "round";
-$shape-oval-class: "oval";
-$shape-pill-class: "pill";
-$shape-skew-class: "skew";
+$vendor-prefix: "" !default;
+$size-small-class: "small" !default;
+$size-large-class: "large" !default;
+$shape-round-class: "round" !default;
+$shape-oval-class: "oval" !default;
+$shape-pill-class: "pill" !default;
+$shape-skew-class: "skew" !default;
 
 //-------------------- Colors --------------------//
 
@@ -104,26 +103,31 @@ $lazyLoad-transition: $default-transition !default;
 $mask-transition: $default-transition !default;
 $matrix-transition: $default-transition !default;
 $modal-transition: $default-transition !default;
+$offCanvas-transition: .5s !default;
 $pin-transition: .2s !default;
 $progress-transition: .5s !default;
 $showcase-transition: $default-transition !default;
 $switch-transition: $default-transition !default;
+$toast-transition: $default-transition !default;
 $tooltip-transition: $default-transition !default;
 
 //-------------------- Z Index --------------------//
 
 // 1) Modal and Showcase should be higher than Blackout
 // 2) Tooltip and Popover should be higher than Modals in case they exist within them
-
-$blackout-zindex: 600;
-$drop-zindex: 500;
-$flyout-zindex: 500;
-$mask-zindex: 500;
-$modal-zindex: 610;
-$popover-zindex: 700;
-$showcase-zindex: 610;
-$tooltip-zindex: 700;
-$typeAhead-zindex: 500;
+// 3) Off Canvas should be the lowest so everything can display above it
+
+$blackout-zindex: 600 !default;
+$drop-zindex: 500 !default;
+$flyout-zindex: 500 !default;
+$mask-zindex: 500 !default;
+$modal-zindex: 610 !default;
+$offCanvas-zindex: 250 !default;
+$popover-zindex: 700 !default;
+$showcase-zindex: 610 !default;
+$toast-zindex: 500 !default;
+$tooltip-zindex: 700 !default;
+$typeAhead-zindex: 500 !default;
 
 //-------------------- Responsive --------------------//
 
@@ -166,9 +170,23 @@ $loader-bubble-size: 1.5rem !default;
 
 //-------------------- Modal --------------------//
 
-$modal-animation: (
-    "fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left",
-    "sticky-top", "sticky-right", "sticky-bottom", "sticky-left"
+$modal-animation: ("fade", "from-above", "from-below", "slide-in-top", "slide-in-right", "slide-in-bottom", "slide-in-left") !default;
+$modal-mobile-breakpoint: 640px !default; // iOS5
+
+//-------------------- Off Canvas --------------------//
+
+$offCanvas-left-width: 20% !default;
+$offCanvas-right-width: 20% !default;
+$offCanvas-left-width-mobile: 90% !default;
+$offCanvas-right-width-mobile: 90% !default;
+$offCanvas-mobile-breakpoint: 640px !default; // iOS5
+
+//-------------------- Toast --------------------//
+
+$toast-animation: ("fade", "slide-up", "slide-down", "slide-left", "slide-right") !default;
+$toast-position: (
+    "top-left", "top-center", "top-right", "center-left",
+    "center-right", "bottom-left", "bottom-center", "bottom-right"
 ) !default;
 
 //-------------------- Popover, Tooltip --------------------//

data/scss/toolkit/components/accordion.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/blackout.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/breadcrumb.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/button-group.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/button.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 

data/scss/toolkit/components/carousel.scss

@@ -1,6 +1,6 @@
 /**
- * @copyright   2010-2013, The Titon Project
- * @license     http://opensource.org/licenses/bsd-license.php
+ * @copyright   2010-2014, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
  */
 
@@ -103,7 +103,7 @@
             left: 0;
             opacity: 0;
             z-index: 1;
-            transition: opacity $carousel-transition;
+            transition: opacity $carousel-transition, visibility $carousel-transition;
 
             &.show { z-index: 5; }
         }