titon-toolkit 1.5.3 → 2.0.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ce251c935a16fcf1636fad480fc331f4602636d8
-  data.tar.gz: 46f34924e0576107f6d3eca626ded9522cc0efd4
+  metadata.gz: 45212dc7c2e4c712241c179a71040b88879a55d2
+  data.tar.gz: 1cf11bbd68b151cffc4eccfab446608d14719e03
 SHA512:
-  metadata.gz: d9ccafe1ee64fceea710c9155acb8eb628ed7e1c5457dc994675ec9db406a47debc287aea3a4550ffdcb7de5732bbe1f6a392d1e7e7dab9a610a935cfa19a645
-  data.tar.gz: 0fe4fb2d1994509915e967a3093ecde1bc839adae90efecd53c18370fb62f5e18e6e9ade45f095b56aadaab64188c3ff34600b97221c5d55a7fed245ff6cbb94
+  metadata.gz: 7b2201b5614a5e555743061a1d9c73a5bfec6719b6edf89de5aef5188aa0137a18ba1cc31bc20fd5f214d67ec62fc346d45d5065d3c1a3b8811f52209f970ae2
+  data.tar.gz: a64f2c94da6ca15f2e9d64a5a1d29385ab46cf93fbbaaadf199af14595945cacd864e891777f091db8dd325d8f719c4f881b51de217e4c5e6caa0b5e3829202a

data/changelog.md

@@ -2,65 +2,184 @@
 
 Older versions can be found in the documentation changelogs.
 
-## 1.5.3 ##
-* Updated the competitor comparison
-* Carousel
-    * Fixed an issue where direct descendants were not being used and `ul li`s were conflicting with nested lists
+## 2.0.0 ##
+This major release includes a rewritten class, event, hooks, and component layer. 
+It improves overall tooling, drops out dated technologies, introduces new concepts, and more. 
+Check out the release update for more information.
 
-## 1.5.2 ##
-* Matrix
-    * Added defer rendering support to items either appended or prepended
-* Modal
-    * Fixed a bug where DOM IDs passed to `show()` as an argument did not work
-    * Removed `pointer-events` from the CSS as it caused weirdness on touch devices
-    * Refactored events to handle click to close
-
-## 1.5.1 ##
-* Matrix
-    * Added a `colHeights` property to track the height of each column
-    * Fixed a bug where the height style was not removed when columns are reduced to 1
-    * Refactored so that items are placed in the smallest height column first, instead of the next column
-
-## 1.5.0 ##
-This minor release includes a new responsive option, a major overhaul of the Carousel component,
-and a complete refactor of the demo system. It also marks the final minor release before the 2.0 major version.
-
-* MooTools support is slowly being phased out and JavaScript changes have not been ported
-* Added `$.fn.transitionend()` which will set a `transitionend` event if transitions have been defined on the element,
-    else it will execute the callback immediately
-* Added a global `responsive` component option that allows for different options to be set depending on breakpoints
-* Updated `$.fn.positionTo()` to re-position accordingly when a mouse event is being used as the offset
-* Button Group
-    * Fixed a bug with incorrect button widths when the `vertical` modifier is used
-* Carousel
-    * Added a `container` property which is the parent element for `items`
-    * Added a `animating` property that represents whether the items are currently animating
-    * Added a `calculate()` method that resizes the carousel based on the window size and defined options
-    * Added a `infinite` option which allows for infinite cycling in either direction
-    * Added a `loop` option which rewinds the cycle pointer to the beginning or end when the opposite edge is reached
-        (only applicable when `infinite` is disabled)
-    * Added a `reverse` option to reverse the automatic cycle direction
-    * Added a `itemsToShow` option which is used for displaying a specific number of items at once
-    * Added a `itemsToCycle` option which is used as the number of items to move when a cycle occurs
-    * Added a `defaultIndex` option which displays that item on initial page load
-    * Added `.no-next` and `.no-prev` classes to the component to hide navigation buttons
-    * Added `.carousel-stop` and `.carousel-start` as elements to delegate events to
-    * Removed `.carousel-caption` styles
-* Form
-    * Added `.fields` which can be coupled with list elements to mimic `.field`
-* Lazy Load
-    * Fixed a bug where offsets were incorrect when the parent with overflow was not the direct parent
-* Matrix
-    * Fixed a bug where multiple spanning items break when the span is larger than the column count
-    * Updated image pre-loading to use deferred promises
-    * Removed `imagesLoaded` property
-    * Removed `onLoad` method
-* Pin
-    * Fixed a bug where `yOffset` was not being applied for `fixed` pins
-* Popover
-    * Fixed a bug when no options were passed to the constructor
-* Showcase
-    * Updated item cycling to use deferred promises
-    * Added a `animating` property that represents whether the items are currently animating
-    * Fixed a bug where gutter was not being applied correctly
-    * Fixed a bug where the incorrect item was being opened when a grouping is used
+* Dropped MooTools support
+* Dropped IE8 support
+* Upgraded to jQuery 2
+* Upgraded to Gulp from Grunt
+* Upgraded to Sass 3.4 and Compass 1.0
+* Upgraded to RequireJS for JS dependency management and compilation
+* Added a robust namespacing system which allows components to be nested within each other
+* Added unit tests for all components through Mocha, Chai, and PhantomJS
+* Decoupled the CSS and JS layers so that CSS classes (excluding states) are no longer hardcoded
+* Refactored components to make more use of templates for DOM building
+* Renamed most instances of the word "component" to "plugin" to differentiate between components and behaviors,
+    with plugins being a top-level grouping of everything
+* Renamed `--components` to `--plugins` in the Gulp command line
+* Removed themes
+* Sass
+    * Added `$enable-small-size` and `$enable-large-size` to toggle size classes in CSS output
+    * Added `$enable-all-effects`, `$enable-all-modifiers`, and `$enable-all-animations` for easier styling
+    * Added `$breakpoint-range-xsmall`, `$breakpoint-range-small`, `$breakpoint-range-medium`, `$breakpoint-range-large`,
+        and `$breakpoint-range-xlarge` for responsive range breakpoints
+    * Added `$bem-element-separator` and `$bem-modifier-separator` to control the BEM class conventions
+    * Added `class-name()` and `bem()` for building CSS class names
+    * Added `full-screen()` mixin for full screen fixed positioning
+    * Added `in-range($range)` mixin that will accept a range of breakpoints and output the correct min/max width media query
+    * Added `in-xsmall()`, `in-xlarge()`, `if-xsmall()`, and `if-xlarge()` responsive mixins
+    * Fixed a bug in `join-classes()` when a class name doesn't start with a period
+    * Moved `.span-*` classes from the Grid component into the shared base file
+    * Updated all component CSS class names to use Sass variables for more configuration control
+    * Updated all modifiers to not use `@extend` to reduce CSS output (requires full class declarations now)
+    * Updated all modifiers to be toggleable through Sass variables
+    * Updated `:before` and `:after` pseudo elements to use double colon `::` syntax
+    * Updated `$size-*` and `$shape-*` variables to be prefixed by default with a `.`
+    * Refactored effects into their respective components that can be toggled through Sass variables
+    * Refactored the visual effects into modifiers for the Button component
+    * Removed `is-active()`, `is-disabled()`, and `is-*()` state mixins
+    * Removed `in-mobile()`, `in-tablet()`, `in-desktop()`, `if-mobile()`, `if-tablet()`, and `if-desktop()` responsive mixins
+    * Removed `.arrow-*` classes
+    * Removed `$breakpoint-*` variables and replaced with with range list variables
+* JavaScript
+    * Added a `Base` class layer that both `Component` and `Behavior` extend
+    * Added a new hook layer to `Base` that replaces the instance event layer
+    * Added `$.fn.toString()` which returns the elements markup as a string
+    * Improved the prototype inheritance layer by initializing a new class instead of extending objects
+    * Refactored the class layer so that constructors are passed as a property instead of an argument
+    * Refactored so that class properties are passed through an object instead of set through the constructor
+    * Removed `$.cookie()` and `$.removeCookie()` methods (use a third-party instead)
+    * Renamed `$.fn.addData()` to `$.fn.cache()`
+    * Updated `$.fn.conceal()` to set the element to display none when the transitions is complete
+    * Updated `$.fn.reveal()` to set the element to display block (or similar) before transitions occur
+    * Component
+        * Added `hiding`, `showing`, and `destroying` events
+        * Added option groups
+        * Added `namespace` property
+        * Added `ns()` method for generating namespace selectors
+        * Refactored the `requestData()` method
+            * Added `url`, `cache` (whether to cache in the class), and `settings` (AJAX settings) to the XHR object used by jQuery
+            * Removed the `before`, `done`, and `fail` arguments
+            * Moved the callbacks into `onRequestBefore`, `onRequestDone`, and `onRequestFail` methods
+        * Renamed the `hide` event to `hidden`
+        * Renamed the `show` event to `shown`
+        * Renamed the `destroy` event to `destroyed`
+        * Renamed the `component` property to `name`
+        * Renamed the `doDestroy` method to `destructor`
+* Components
+    * Accordion
+        * The active class is now applied to the header instead of the parent `li`
+        * Added `calculate()` method for determining section heights
+        * Removed the `jump` event
+        * Renamed selectors `.accordion-header`, `.accordion-section` to `[data-accordion-header]`, `[data-accordion-section]`
+    * Blackout
+        * Added `loaderTemplate` and `showLoading` options for generating loader markup
+        * Removed `hideLoader` and `showLoader` events
+        * Removed `loader` and `waveCount` options in favor of `loaderTemplate`
+        * Renamed `Toolkit.Blackout.factory()` to `Toolkit.Blackout.instance()`
+    * Carousel
+        * Added a `calculate()` method that triggers on load/resize to determine carousel dimensions
+        * Added a `swipe` option
+        * Added `cycling`, `cycled`, `jumping` and `jumped` events
+        * Removed `cycle` and `jump` events
+        * Renamed selectors `.carousel-items ul`, `.carousel-tabs`, `.carousel-next`, `.carousel-prev`, `.carousel-start`, `.carousel-stop` to
+            `[data-carousel-items]`, `[data-carousel-tabs]`, `[data-carousel-next]`, `[data-carousel-prev]`, `[data-carousel-start]`, `[data-carousel-stop]`
+        * Removed `.carousel-prev`, `.carousel-next`, and `.carousel-tabs` styles
+    * Divider
+        * Improved the divider to support longer strings of text and multiline text
+    * Drop
+        * All drop menus will now require a `data-drop-menu` attribute
+    * Flyout
+        * Added `headingTemplate` option
+        * Renamed selectors `.flyout` to `[data-flyout-menu]`
+    * Form
+        * Improved disabled state across inputs
+        * Normalized `fieldset` and `legend` when used in an inline form
+    * Grid
+        * Added new `xsmall` and `xlarge` (disabled by default) column sizes
+        * Added `$grid-sizes` map for associating sizes to breakpoints and column counts
+        * Added `$grid-columns-xsmall` and `$grid-columns-xlarge` for new column counts
+        * Added `$grid-class-end` to change the `.end` class
+        * Changed `$grid-columns-small` from `6` to `12`
+        * Fixed a bug where `.push-*` and `.pull-*` classes were being generated if `$grid-push-pull` was disabled
+        * Removed the `mobile`, `tablet`, and `desktop` column sizes
+        * Removed `$grid-columns-mobile`, `$grid-columns-tablet`, and `$grid-columns-desktop`
+    * Icon
+        * Added a `$icon-sizes` list variable to control the CSS output
+    * Input
+        * Added a `filterClasses` option which can be used in conjunction with `copyClasses`
+        * Added `template`, `checkboxTemplate`, `radioTemplate`, `selectTemplate`, `optionsTemplate`, `headingTemplate`, and `descTemplate`
+        * Renamed `arrowContent` to `arrowTemplate`
+        * Renamed selectors `.select-options`, `.select-label`, `.select-arrow` to
+            `[data-select-options]`, `[data-select-label]`, `[data-select-arrow]`
+    * Lazy Load
+        * Added `loading` and `loaded` events
+        * Added a `lazyClass` option that defaults to `.lazy-load`
+        * Added a `timer` property
+        * Fixed a bug where `shutdown` event was being called twice
+        * Removed `load` event
+    * Mask
+        * Added `template` and `messageTemplate` options
+        * Renamed `.mask-target` to `.is-maskable`
+        * Renamed selectors `.mask`, `.mask-message` to `[data-mask]`, `[data-mask-message]`
+    * Matrix
+        * Added `appending`, `prepending`, `removing`, `rendering`, and `rendered` events
+        * Improved the deferred image rendering process and item fade in animation
+        * Removed `render` event
+        * Updated to no longer automatically set `.matrix` on the container
+    * Modal
+        * IDs can now be passed as the 2nd argument to `show()`
+        * Renamed selectors `.modal-inner`, `.modal-hide`, `.modal-submit` to
+            `[data-modal-content]`, `[data-modal-close]`, `[data-modal-submit]`
+    * Off Canvas
+        * Added a `swipe` option
+        * Renamed selectors `.on-canvas`, `.off-canvas` to `[data-offcanvas-content]`, `[data-offcanvas-sidebar]`
+        * Updated so that `[data-offcanvas-sidebar]` defines the default side orientation
+        * Updated to no longer automatically set `.off-canvas` on the sidebar
+    * Pagination
+        * Updated to only support `ol` lists
+    * Pin
+        * Updated to have position absolute by default for `.pin`
+        * Updated to no longer automatically set `.pin` on the element
+    * Popover
+        * Updated so that an `.is-active` class is toggled on the target node
+        * Updated the `follow` attribute to `false` always
+        * Removed the `delay` option
+        * Renamed selectors `.popover-head`, `.popover-body` to `[data-popover-header]`, `[data-popover-content]`
+    * Responsive
+        * Added `.show-xsmall`, `.show-xlarge`, `.hide-xsmall`, and `.hide-xlarge` classes
+        * Removed `.show-mobile`, `.show-tablet`, `.show-desktop`, `.hide-mobile`, `.hide-tablet`, and `.hide-desktop` classes
+        * Removed `$responsive-size` variable
+    * Showcase
+        * Added a `swipe` option
+        * Added `jumping` and `jumped` events
+        * Removed `jump` event
+        * Removed `.showcase-prev`, `.showcase-next`, and `.showcase-tabs` styles
+        * Renamed selectors `.showcase-items`, `.showcase-tabs`, `.showcase-next`, `.showcase-prev`, `.showcase-hide`, `.showcase-caption` to
+            `[data-showcase-items]`, `[data-showcase-tabs]`, `[data-showcase-next]`, `[data-showcase-prev]`, `[data-showcase-close]`, `[data-showcase-caption]`
+    * Stalker
+        * Added `activating`, `activated`, `deactivating`, and `deactivated` events
+        * Removed the `applyToParent` option
+        * Removed `activate` and `deactivate` events
+        * Updated to no longer automatically set `.stalker`, `.stalker-target`, and `.stalker-marker`
+    * Switch
+        * The `.pill` and `.round` classes have moved to `.switch-bar` from `.switch`
+    * Tabs
+        * Has been renamed to `Tab` and all files and references have been changed
+        * Option `preventDefault` now applies to both cookie and fragment persistence
+        * Option `ajax` has changed to `false` by default
+        * Fixed a bug trying to determine the index to show on load
+        * Renamed selectors `.tab-nav`, `.tab-section` to `[data-tab-nav]`, `[data-tab-section]`
+        * Updated the `is-active` state to be set on the tab, instead of the parent `li`
+    * Toast
+        * Added a `toastTemplate` property
+        * Added a `reset()` method to reset the tooltip state
+    * Tooltip
+        * Removed the `delay` option
+        * Renamed selectors `.tooltip-head`, `.tooltip-body` to `[data-tooltip-header]`, `[data-tooltip-content]`
+    * Type Ahead
+        * Added `shadowTemplate`, `titleTemplate`, `descTemplate`, `highlightTemplate`, and `headingTemplate` options
+        * The `matcher` function now accepts the item object as the 1st argument

data/license.md

@@ -1,4 +1,4 @@
-Copyright (c) 2010-2014, The Titon Project, Miles Johnson.
+Copyright (c) 2010-2015, The Titon Project, Miles Johnson.
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,

data/readme.md

@@ -1,19 +1,19 @@
 ```
-                       ______  ______  ______  __      __  __   __  ______
-                      /\__  _\/\  __ \/\  __ \/\ \    /\ \/ /_ /\ \/\__  _\
-                      \/_/\ \/\ \ \/\ \ \ \/\ \ \ \___\ \  _  \\ \ \/_/\ \/
-                         \ \_\ \ \_____\ \_____\ \_____\ \_\ \_\\ \_\ \ \_\
-                          \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
+ ______  ______  ______  __      __  __   __  ______
+/\__  _\/\  __ \/\  __ \/\ \    /\ \/ /_ /\ \/\__  _\
+\/_/\ \/\ \ \/\ \ \ \/\ \ \ \___\ \  _  \\ \ \/_/\ \/
+   \ \_\ \ \_____\ \_____\ \_____\ \_\ \_\\ \_\ \ \_\
+    \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.5.3 #
+# Toolkit v2.0.0 RC1 #
 
 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,
 and JavaScript functionality for role specific page elements.
 
 Toolkit makes use of the latest and greatest technology. This includes HTML5 for semantics,
-CSS3 for animations and styles, Sass for CSS pre-processing, Grunt for task and package management,
+CSS3 for animations and styles, Sass for CSS pre-processing, Gulp for task and package management,
 and powerful new browser APIs for the JavaScript layer.
 
 * [Official Website](http://titon.io/toolkit)

data/roadmap.md

@@ -2,26 +2,11 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 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.
-* Update to use AMD/requirejs.
-* Switch to Gulp.
-* Updated to Sass 3.3 (maps for settings).
-* Refactor events for before/after conditions.
+### 2.x ###
 * RTL support.
-* Add debug option.
-* Rename Tabs to Tab.
-* Remove cookie dependency.
 * Take Google fundamentals into consideration - https://developers.google.com/web/fundamentals/
-* Gracefully handle situations where components are nested within the same component. How to handle event delegation?
 
-### 3.0.0 ###
+### 3.x ###
 * Remove jQuery dependency and go straight vanilla?
 * Switch to Less (removes sass/compass/ruby dependencies).
 * Implement custom elements / components - http://w3c.github.io/webcomponents/explainer/
@@ -32,9 +17,8 @@ All releases will contain bug fixing and polishing for current features.
 * 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.
+* Drag & Drop - Provides a drag and drop system.
 
 ### 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 Binding - Provides 2 way data binding.