titon-toolkit 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 25a094323fb10ebe2311ca637a6b848676dbb184
-  data.tar.gz: 9045e54d29b6cd57e3d4c2027e825934bf1ea141
+  metadata.gz: 7f271e59da7b66a7d31aa3c605f3d9f97a03c3e2
+  data.tar.gz: e129fe4b053d56fc96d99bf48de3779ae5187115
 SHA512:
-  metadata.gz: 68027f64647c8aaf2300e364ee891f151e29567c2fe160ab21e98cbaa5d360b306a1ce6958cd4e2e587fae0bd364f0755db00095badcd4b87e491b7e2f3cc21f
-  data.tar.gz: bb06bfa413e050a4b123b515dbff9bf4728ec9eda6d4ba208bf309446dec798c7d5452038d693c86e10a0e484fec65ea725747dd795964df6ed931d58687592b
+  metadata.gz: 2597f2d1472f9a8429b21968c5bea99fcdcdd965ccdaccab1f0a9d1a00eb1f46d490922bb34ff92e4c427788066c18f4497cd31f9386703dc9f032083f3eff5f
+  data.tar.gz: 328d6da529da7f32f247fc8c19b443df74a2836ce322ddfaa90a057724581c49b491d962fc87fd2195aefc1efdbadf9bab4f7fe5ca9b7097b354a1354870842a

data/changelog.md

@@ -2,78 +2,116 @@
 
 Older versions can be found in the documentation changelogs.
 
-### 1.1.0 ###
-* Added a `Loader` component - displays loading animations using purely CSS
-* Added a `Mask` component - masks an element with a transparent overlay
-* Added a `clickout` event type that triggers when a click happens outside of an element
-* Added `reset-list()` and `position-center()` mixins
-* Added no conflict resolution through a component creation method
-* Added a `--demo` parameter to Grunt that builds files for demo purposes
-* Improved the Grunt build process
-* Refactored `debounce()` and `throttle()` methods
-* Replaced Toolkit `ie8` and `ie9` flags with `hasTransition` feature flag
-* Renamed `Titon.js` to `Toolkit.js`
-* jQuery
-    * Prototype inheritance has been rewritten and improved
-    * New properties `component` and `version` have been added to all components
-    * Namespaced element events are now triggered in the format of `<event>.toolkit.<component>`
-    * Added `$.cookie()` and `$.removeCookie()` methods
-    * Added `swipe`, `swipeleft`, `swiperight`, `swipeup`, and `swipedown` event types for touch devices
+## 1.2.0 ##
+This minor release includes thorough documentation for all components,
+a refactored event binding and management layer, a data attribute option inheritance layer,
+and an optimization and cleanup pass. Also bug fixes.
+
+* Added `join-classes()` function
+* Added `grunt production` command to compress for production purposes
+* Updated `grunt` command to not compress for development purposes
+* Renamed all `__*` methods to `on*`
+* Renamed `currentIndex` to `index` in all components
+* Removed `content-spacing()` mixin
+* Removed `previousIndex` properties
+* Removed `loadingMessage` and `errorMessage` options
+* Removed `.medium` class support
+* Removed automatic setting of `animation` and `className` CSS classes for embedded elements
+* Removed background and font colors from CSS to reduce CSS filesize
+* Toolkit
+    * Added `bound()` to bound a number
+    * Added `isRetina` flag
+    * Updated `positionTo()` to re-position if the element falls outside the viewport
 * Component
-    * Added `process()` to handle non-HTML AJAX responses
-    * Added `onProcess` option event
-    * Updated `requestData()` to call `position()` for HTML responses and `process()` for non-HTML
-    * Updated `requestData()` to accept an object of options as the 1st argument
-    * Updated `fireEvent()` to trigger namespaced element events (jQuery only)
+    * Refactored that event management layer within all components
+    * Added `bindEvents()` to handle event attaching and detaching (paired with change above)
+        * Called automatically from `enable()` and `disable()`
+    * Added option inheritance from data attributes found on target elements and nodes
+        * Possible through new `inheritOptions()`
+    * Added option inheritance from parent component
+    * Added `readOption` to find an option via data attribute of option object
+    * Merged `setElement()` logic into `createElement()`
+    * Removed `setElement()`
 * Accordion
-    * Renamed `.accordion-head` to `.accordion-header`
-    * Renamed `.accordion-handle` to `.accordion-section`
-    * Renamed `contentElement` option to `sectionElement`
+    * Updated `show` event arguments to `[section, node, index]`
+* Base
+    * Added `.no-scroll`
+    * Removed `.inline`, `.inline-block`, `.static`, `.relative`, and `.absolute`
 * Blackout
-    * Rewritten to be a singleton to differ from the new `Mask` component
-    * Added `Loader` support for in-between states
-    * Added `showLoader()` and `hideLoader()` methods that toggle the loader
-    * Added `Toolkit.Blackout.factory()` to return the single instance
-    * Added a `count` property that records how many times the blackout has been opened to allow for multiple components to display
-    * Added a `loader` option that determines which loader class to render
-    * Added a `loaderMessage` option that displays a loading message while the blackout is loading
-    * Added a `waveCount` option that determines how many bars to display in wave loaders
-* Dropdown
-    * Renamed component to `Drop`
-    * Renamed modifiers to `drop--down`, `drop--up`, `drop--left`, and `drop--right`
-    * Replaced alignment classes with a single `reverse-align` class
+    * Added a `shown` argument to the `show` event
+    * Added `showLoader` and `hideLoader` events
+    * Renamed `loaderMessage` option to `loadingMessage`
+* Button
+    * Added outline none to `:focus` styles
+    * Fixed a bug with `input` buttons
+* Button Group
+    * Removed `!important` from negative margin properties
+* Drop
+    * Added support for drops built with `ol`
+    * Updated `show` and `hide` event arguments to `[element, node]`
+* Flyout
+    * Fixed a bug where data items were being mapped with no URL
+    * Removed `load` event from `show()` as it was being used incorrectly
+* Form
+    * Renamed `.is-legendless` to `.no-legend`
+    * Cleaned up some basic styles
 * Grid
-    * Added an `.end` class that can be used on the last `.col` for justification
-    * Updated `$grid-columns-medium` from 8 to 9
+    * Changed `$grid-columns-medium` to 12
+    * Added `$grid-push-pull` to toggle push and pull classes in output
+* Icon
+    * Removed `.icon--rotate`
 * Input
-    * Has been split up into 3 sub-components: `Radio`, `Checkbox`, and `Select`
-    * Added new jQuery methods `radio()`, `checkbox()`, and `select()` (primary `input()` method still exists and triggers all 3)
-    * Added custom drop down support that replaces the native drop downs (requires the `Drop` component)
-    * Added multiple select support (only possible when native is disabled)
-    * Added a `copyClasses` option that will copy classes from the form element to the custom one
-    * Added a `native` option that opens native drop downs instead of custom drop downs
-    * Added a `hideFirst` option that hides the first select option
-    * Added a `hideSelected` option that hides the currently selected option
-    * Added a `multipleFormat` option that describes the label format for multi-selects
-    * Added a `countMessage` option that defines the message to use when format is count
-    * Added a `listLimit` option that limits the number of items in the multiple message
-    * Added a `arrowContent` option that renders the contents of a select arrow
-    * Added a `getDefaultLabel` option that displays the default label for multi-selects
-    * Added a `getOptionLabel` option that displays custom titles for options
-    * Added a `getDescription` option that allows for option descriptions
+    * Updated build methods to be private
+    * Fixed an issue where select event names were incorrect
+* Input Group
+    * Added small and large size support
+* LazyLoad
+    * Instantiation will need to be set on a container instead of the items being loaded
+    * Added `data-src-retina` support
+    * Added support for lazy loading within an overflown element
+    * Fixed a bug where hidden images were being loaded
+    * Renamed `data-lazyload` to `data-src`
+* Loader
+    * Renamed `.spinner` to `.loader-spinner`
+* Matrix
+    * Replaced `.matrix-item` with `li`
+    * Removed `selector` option
+    * Removed inline `img` styles, use `.fluid` instead
 * Modal
-    * Multiple modals can now be opened at the same time (requires separate modal instances)
-    * Added file uploading support for form submissions (requires the browser `FormData` API)
-    * Added a `stopScroll` option that freezes the scrollbar while the modal is open
-    * Refactored to handle the `Blackout` changes
-    * Removed the `showLoading` option in favor of the `Blackout` loader
-* Showcase
-    * Added a `stopScroll` option that freezes the scrollbar while the showcase is open
-    * Refactored to handle the `Blackout` changes
-    * Updated gutter detection to include the showcase padding
+    * Added `$modal-animation` to filter the animations in the CSS output
+    * Updated `.modal-close` to use a `button`
+    * Updated `ajax` and `getContent` options to be inheritable at runtime through the activating node
+    * Refactored markup and CSS to support large height modals
+    * Removed `flip` and `flip-vert` animations
+    * Removed dragging (temporarily)
+* Pin
+    * Fixed a bug where `.is-pinned` was not being removed
 * Popover & Tooltip
-    * Fixed a bug where the title was not being displaying during an AJAX load
-    * Added a `loadingMessage` option to use during AJAX loading
-    * Updated default `position` to `topCenter`
+    * Added `$popover-tooltip-animation` to filter the animations in the CSS output
+    * Added `$popover-arrow-width` and `$tooltip-arrow-width` to alter the arrow sizes
+    * Added automatic compatibility of `title` attributes
+    * Fixed a bug where node was being set and used incorrectly
+    * Fixed a bug with mouseleave events
+    * Options `className` and `position` are added and removed dynamically each reveal
+    * Updated options to be inheritable at runtime through the activating node
+    * Updated `position` values to be dashed instead of camel case
+    * Removed `slide-in` animation
+* Progress
+    * Added multiple progress bar support
+    * Removed `.medium` size
+    * Refactored state classes
+* Responsive
+    * Added `.fluid` class for images, audio, canvas, etc
+* Showcase
+    * Updated options to be inheritable at runtime through the activating node
+    * Replaced `a` with `button`
+* Stalker
+    * Added nested marker support
+    * Added `targetBy` and `markBy` options
+    * Removed `marker` and `target` properties
+* Table
+    * Moved zebra-striping into an `.is-striped` class
+* Tabs
+    * Renamed `sectionsElement` option to `sectionElement`
 * TypeAhead
-    * Added `cycle` event
+    * Renamed `process()` to `source()`

data/license.md

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

data/readme.md

@@ -6,7 +6,8 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.1.0 #
+# Toolkit v1.2.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,
 and JavaScript functionality for role specific page elements.
@@ -21,13 +22,9 @@ and powerful new browser APIs for the JavaScript layer.
 * [Interactive Demo](http://demo.titon.io/)
 
 ## Learn More ##
+
+* [Documentation](https://github.com/titon/toolkit/tree/master/docs/en)
 * [Getting Started](https://github.com/titon/toolkit/blob/master/docs/en/setup/getting-started.md)
 * [Downloading & Installing](https://github.com/titon/toolkit/blob/master/docs/en/setup/installing.md)
 * [Custom Builds](https://github.com/titon/toolkit/blob/master/docs/en/setup/custom-builds.md)
-* [Browser Compatibility](https://github.com/titon/toolkit/blob/master/docs/en/support/compatibility.md)
-
-## Documentation ##
-
-Documentation for installing and developing with Toolkit can be found within the docs folder.
-Documentation for implementation of components is still in progress, but reading the source code
-or interacting with the demos should provide more than enough information. We hope to have it ready soon!
+* [Browser Compatibility](https://github.com/titon/toolkit/blob/master/docs/en/support/compatibility.md)

data/roadmap.md

@@ -2,29 +2,31 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 1.2.0 ###
+### 1.3.0 ###
 * Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
 * Step - A component that highlights a step in a series of consecutive steps (represented by an arrow based navigation).
 * Dialog - A component that prompts the user for an action. Sister to the modal component.
-* Add support for large modals that need to be scrolled.
+* Remove is and has state prefixing.
+* Add destroy method to clean up and remove the component.
+* Add aria attributes where applicable.
+* Add deferred/promise integration.
 
-### 1.3.0 ###
-* Toast - A component to display toast notifications
+### 1.4.0 ###
+* 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.
 * Divider - A component for dividing content horizontally or vertically.
 
 ### 2.0.0 ###
 * Remove the MooTools port.
 * Drop IE8 support and upgrade to jQuery 2.
-* Separate component transitions into a stand alone layer that can be used anywhere.
 * Replace examples with unit tests.
-* Add deferred/promise integration.
-* Inherit options at runtime through data attributes.
-* Add aria attributes where applicable.
 * Updated to use AMD.
-* Optimize classes for smaller filesize.
 * Switch to Gulp.
-* Improved event binding within the component class.
+* Updated to Sass 3.
+* Refactor events for before/after conditions.
 
 ### 3.0.0 ###
-* Remove jQuery dependency and go straight vanilla?
+* 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/
+* Separate component transitions into a stand alone layer that can be used anywhere.

data/scss/toolkit/_common.scss

@@ -15,7 +15,6 @@ $vendor-prefix: "";
 $state-is-prefix: "is-";
 $state-has-prefix: "has-";
 $size-small-class: "small";
-$size-medium-class: "medium";
 $size-large-class: "large";
 $shape-square-class: "square";
 $shape-round-class: "round";
@@ -111,20 +110,16 @@ $default-transition: .3s !default;
 $accordion-transition: $default-transition !default;
 $blackout-transition: $default-transition !default;
 $carousel-transition: 1s !default;
-$dropdown-transition: $default-transition !default;
+$drop-transition: $default-transition !default;
 $flyout-transition: $default-transition !default;
 $lazyLoad-transition: $default-transition !default;
 $mask-transition: $default-transition !default;
 $matrix-transition: $default-transition !default;
 $modal-transition: $default-transition !default;
-$progress-transition: $default-transition !default;
+$progress-transition: .5s !default;
 $showcase-transition: $default-transition !default;
 $tooltip-transition: $default-transition !default;
 
-//-------------------- Animations --------------------//
-
-$icon-animation: 1.5s !default;
-
 //-------------------- Responsive --------------------//
 
 $responsive-design: "mobile" !default; // mobile, desktop
@@ -144,7 +139,7 @@ $breakpoint-large: 1440px !default;
 //-------------------- Grid --------------------//
 
 $grid-columns-large: 12 !default;
-$grid-columns-medium: 9 !default;
+$grid-columns-medium: 12 !default;
 $grid-columns-small: 6 !default;
 
 $grid-columns-desktop: 12 !default;
@@ -153,17 +148,30 @@ $grid-columns-mobile: 3 !default;
 
 $grid-width: 100% !default;
 $grid-gutter: false !default;
+$grid-push-pull: true !default;
 
 //-------------------- Loader --------------------//
 
 $loader-type: "all" !default;
 $loader-color: #000 !default;
-$loader-wave-count: 10 !default;
-$loader-spinner-count: 5 !default;
+$loader-wave-count: 5 !default;
 $loader-bar-width: 0.65rem !default;
 $loader-bar-height: 2.5rem !default;
 $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"
+) !default;
+
+//-------------------- Popover, Tooltip --------------------//
+
+$popover-tooltip-animation: ("fade", "from-above", "from-below", "flip-rotate") !default;
+$popover-arrow-width: 8 !default;
+$tooltip-arrow-width: 6 !default;
+
 //-------------------- Imports --------------------//
 
 @import "mixins/helper";
@@ -172,6 +180,7 @@ $loader-bubble-size: 1.5rem !default;
 @import "mixins/state";
 @import "mixins/grid";
 @import "mixins/responsive";
+@import "mixins/components";
 @import "compass/css3/box-sizing";
 @import "compass/css3/images";
 @import "compass/css3/transition";

data/scss/toolkit/components/accordion.scss

@@ -12,18 +12,11 @@
 
 .#{$vendor-prefix}accordion-header {
     padding: $padding;
-    background: $gray;
     cursor: pointer;
-
-    @include is-active-parent {
-        background: $gray-dark;
-    }
 }
 
 .#{$vendor-prefix}accordion-body {
     padding: $padding;
-
-    @include content-spacing;
 }
 
 // Handle is used for animations, do not style it!

data/scss/toolkit/components/breadcrumb.scss

@@ -9,7 +9,6 @@
 .#{$vendor-prefix}breadcrumb {
     text-align: left;
     margin: $margin 0;
-    background: $gray;
 
     ul, ol {
         @include reset-list;
@@ -33,7 +32,6 @@
 
         .caret {
             margin-left: $medium-padding;
-            color: $gray-darkest;
             position: relative;
             left: -1px;
         }

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

@@ -6,22 +6,6 @@
 
 @import "../common";
 
-@mixin button-group-first-child {
-    > li:first-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:first-child,
-    > .#{$vendor-prefix}button.first {
-        @content;
-    }
-}
-
-@mixin button-group-last-child {
-    > li:last-child .#{$vendor-prefix}button,
-    > .#{$vendor-prefix}button:last-child,
-    > .#{$vendor-prefix}button.last {
-        @content;
-    }
-}
-
 .#{$vendor-prefix}button-group {
     @include reset-inline-block;
     @include reset-list;
@@ -30,7 +14,7 @@
     > li,
     > .#{$vendor-prefix}button {
         float: left;
-        margin-left: -1px !important;
+        margin-left: -1px;
         border-radius: 0;
 
         &:first-child { margin-left: 0; }
@@ -81,11 +65,11 @@
     > .#{$vendor-prefix}button {
         float: none;
         display: block;
-        margin: -1px 0 0 0 !important;
+        margin: -1px 0 0 0;
         width: auto;
         max-width: 100%;
 
-        &:first-child { margin-top: 0 !important; }
+        &:first-child { margin-top: 0; }
         &:hover { z-index: 1; }
     }
 

data/scss/toolkit/components/button.scss

@@ -17,11 +17,11 @@
     line-height: normal;
     white-space: nowrap;
     text-decoration: none;
-    background: $gray;
     @include size-medium;
 
+    &:focus { outline: none; }
+
     @include is-small(true, true) { @include size-small; }
-    @include is-medium(true, true) { @include size-medium; }
     @include is-large(true, true) { @include size-large; }
 
     &.#{$shape-round-class} { border-radius: $round; }