titon-toolkit 1.0.5 → 1.1.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 465c8929ea57b9d8d367f8fdec89404c25417434
-  data.tar.gz: e7bef8a168aaa03e9488d12913652db9e1ac0930
+  metadata.gz: aae25f90f5eaa6402a4548c1d0b03a40c8b042dd
+  data.tar.gz: e1901069a5fd1c06d6fb96331398d7f5ca9473c8
 SHA512:
-  metadata.gz: 3df1b925b85d5e6aecafe6d3796b7d034b612026a5607ddca771ae3db01f33ecb8fc713ecbfd5482ff997226556d3c39d664df441dd9952473bfa55f89fdb4c1
-  data.tar.gz: 734ef63a3a2a1b9b44964b8b1d362279a08812844d3f477a89b99a99dc7c4817757b3d670a81055afec4f6e38803758fccf73fc56a97419b0b851a75d64a8590
+  metadata.gz: 69e04e2be50296e1991ecb8c592c9d1c3fe15e4093c5a3452ad139a6c850efe3b9abf97663f57ef640b964e6db87a5c2cc2781a5bf7c583533cb9901e9405ecb
+  data.tar.gz: da9a3ccd9ff1eae0b872410c410c68baa35f81a4f7c8e084b81998f702c2d4313249d8f4ced7ae82815fdf0b5316c46c1ee3ef3010226517d0e393bff154ab65

data/changelog.md

@@ -1,33 +1,73 @@
 # Changelog #
 
-### 1.0.5 ###
-* Added `composer.json` allowing the project to be installed via Composer
-* Fixed a prototype inheritance bug that caused Popovers to trigger Tooltips that capture all click events
-* Updated `hover` modes to default to click on touch devices; will pass-through to anchor link on second click
+Older versions can be found in the documentation changelogs.
 
-### 1.0.4 ###
-* Added `.vertical-center` class
-* Added `!important` to Responsive display properties
-* Changed `.arrow` classes to use the `bigtriangleup` entity
-* Removed Responsive conditionals to allow all classes
-* Updated `pre code` to display block
-
-### 1.0.3 ###
-* Changed default Tooltip position to `topCenter`
-* Removed `stopPropagation()` calls
-
-### 1.0.2 ###
-* Changed bower package name
-* Fixed Modal not loading the correct content
-* Updated MooTools to not use `$` functions
-
-### 1.0.1 ###
-* Added variables for prefixing classes with vendor names and state prefixes
-* Added missing Input component to manifest
-* Fixed incorrect methods being called in jQuery Modal
-* Fixed a Modal bug where switching between AJAX and DOM loading caused issues
-* Updated Matrix deferred loading to render immediately if no images are found
-* Updated Modal target reading by swapping href to last
-
-### 1.0.0 ###
-* Released! Aww yiisss
+### 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 `hasTransform` and `hasTransition` feature flags
+* 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>`
+* 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)
+* 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
+* Grid
+    * Added an `.end` class that can be used on the last `.col` for justification
+    * Updated `$grid-columns-medium` from 8 to 9
+* 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
+* 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
+* 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`
+* TypeAhead
+    * Added `cycle` event

data/readme.md

@@ -6,7 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.0.5 #
+# Toolkit v1.1.0-rc.1 #
 Titon Toolkit is a collection of very powerful user interface components and utility classes.
 Each component represents encapsulated HTML, CSS, and JavaScript functionality for role specific page elements.
 
@@ -18,7 +18,7 @@ Sass for CSS pre-processing, and Grunt for task and package management.
 * [Components](http://titon.io/toolkit#components)
 
 ## Learn More ##
-* [Getting Started](https://github.com/titon/toolkit/blob/master/docs/pages/en/setup/getting-started.md)
-* [Downloading & Installing](https://github.com/titon/toolkit/blob/master/docs/pages/en/setup/installing.md)
-* [Custom Builds](https://github.com/titon/toolkit/blob/master/docs/pages/en/setup/custom-builds.md)
-* [Browser Compatibility](https://github.com/titon/toolkit/blob/master/docs/pages/en/support/compatibility.md)
+* [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)

data/roadmap.md

@@ -3,23 +3,35 @@
 All releases will contain bug fixing and polishing for current features.
 
 ### 1.1.0 ###
-* Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
 * Mask - A component that will mask a target element with a blackout.
-* Improvements for Input by adding custom select dropdowns and multi-select support
+* Loader - CSS based loaders and spinners.
+* Improvements for Input by adding custom select dropdowns and multi-select support.
 
 ### 1.2.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.
 
 ### 1.3.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 IE 8/9 support and upgrade to jQuery 2.
-* Replace JS option callbacks with namespaced element events.
-* Refactor the JS component layer and reduce complex implementation.
+* Drop IE8 support and upgrade to jQuery 2.
 * Separate component transitions into a stand alone layer that can be used anywhere.
-* Refactor in-between loading states. Possibly into a new component? CSS or JS based?
-* Replace examples with unit tests.
+* Replace examples with unit tests.
+* Add deferred/promise integration.
+* Inherit options at runtime through data attributes.
+* Add aria attributes where applicable.
+* Remove jQuery mobile dependency for touch events.
+* Updated to use AMD.
+* Optimize classes for smaller filesize.
+* Switch to Gulp.
+* Improved event binding within the component class.
+* Rework cookie management.
+
+### 3.0.0 ###
+* Remove jQuery dependency and go straight vanilla?

data/scss/toolkit.scss

@@ -18,11 +18,12 @@
 @import "toolkit/components/breadcrumb";
 @import "toolkit/components/button";
 @import "toolkit/components/button-group";
-@import "toolkit/components/dropdown";
+@import "toolkit/components/drop";
 @import "toolkit/components/icon";
 @import "toolkit/components/input";
 @import "toolkit/components/input-group";
 @import "toolkit/components/label";
+@import "toolkit/components/loader";
 @import "toolkit/components/notice";
 @import "toolkit/components/pagination";
 @import "toolkit/components/progress";
@@ -35,6 +36,7 @@
 @import "toolkit/components/flyout";
 @import "toolkit/components/lazy-load";
 @import "toolkit/components/matrix";
+@import "toolkit/components/mask";
 @import "toolkit/components/modal";
 @import "toolkit/components/pin";
 @import "toolkit/components/popover";

data/scss/toolkit/_common.scss

@@ -17,6 +17,11 @@ $state-has-prefix: "has-";
 $size-small-class: "small";
 $size-medium-class: "medium";
 $size-large-class: "large";
+$shape-square-class: "square";
+$shape-round-class: "round";
+$shape-oval-class: "oval";
+$shape-pill-class: "pill";
+$shape-skew-class: "skew";
 
 //-------------------- Colors --------------------//
 
@@ -95,8 +100,9 @@ $skew-reverse: $skew-y $skew-x;
 
 $default-opacity: .5 !default;
 $disabled-opacity: $default-opacity !default;
-$blackout-opacity: $default-opacity !default;
+$blackout-opacity: .85 !default;
 $carousel-opacity: $default-opacity !default;
+$mask-opacity: .85 !default;
 $showcase-opacity: $default-opacity !default;
 
 //-------------------- Transitions --------------------//
@@ -108,6 +114,7 @@ $carousel-transition: 1s !default;
 $dropdown-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;
@@ -137,7 +144,7 @@ $breakpoint-large: 1440px !default;
 //-------------------- Grid --------------------//
 
 $grid-columns-large: 12 !default;
-$grid-columns-medium: 8 !default;
+$grid-columns-medium: 9 !default;
 $grid-columns-small: 6 !default;
 
 $grid-columns-desktop: 12 !default;
@@ -147,6 +154,16 @@ $grid-columns-mobile: 3 !default;
 $grid-width: 100% !default;
 $grid-gutter: false !default;
 
+//-------------------- Loader --------------------//
+
+$loader-type: "all" !default;
+$loader-color: #000 !default;
+$loader-wave-count: 10 !default;
+$loader-spinner-count: 5 !default;
+$loader-bar-width: 0.65rem !default;
+$loader-bar-height: 2.5rem !default;
+$loader-bubble-size: 1.5rem !default;
+
 //-------------------- Imports --------------------//
 
 @import "mixins/helper";
@@ -159,4 +176,5 @@ $grid-gutter: false !default;
 @import "compass/css3/images";
 @import "compass/css3/transition";
 @import "compass/css3/transform";
-@import "compass/css3/filter";
+@import "compass/css3/filter";
+@import "animation";

data/scss/toolkit/components/accordion.scss

@@ -7,10 +7,7 @@
 @import "../common";
 
 .#{$vendor-prefix}accordion {
-    list-style: none;
-    text-align: left;
-    margin: 0;
-    padding: 0;
+    @include reset-list;
 }
 
 .#{$vendor-prefix}accordion-head {

data/scss/toolkit/components/blackout.scss

@@ -17,4 +17,14 @@
     visibility: hidden;
     background: black($blackout-opacity);
     @include transition(all $blackout-transition);
+
+    .#{$vendor-prefix}loader {
+        opacity: 1;
+        color: #fff;
+        @include position-center;
+        @include transition(all $blackout-transition);
+
+        > span,
+        .spinner > span { background: #fff !important; }
+    }
 }

data/scss/toolkit/components/breadcrumb.scss

@@ -12,15 +12,12 @@
     background: $gray;
 
     ul, ol {
-        margin: 0;
-        padding: 0;
-
+        @include reset-list;
         @include clear-fix;
     }
 
     li {
         position: relative;
-        list-style: none;
         float: left;
 
         &:last-child {

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

@@ -24,6 +24,7 @@
 
 .#{$vendor-prefix}button-group {
     @include reset-inline-block;
+    @include reset-list;
     white-space: nowrap;
 
     > li,
@@ -48,7 +49,7 @@
         }
     }
 
-    &.round {
+    &.#{$shape-round-class} {
         border-radius: $round;
 
         @include button-group-first-child {
@@ -88,14 +89,14 @@
         &:hover { z-index: 1; }
     }
 
-    &.round,
-    &.pill,
-    &.skew,
-    &.skew-reverse {
+    &.#{$shape-round-class},
+    &.#{$shape-pill-class},
+    &.#{$shape-skew-class},
+    &.#{$shape-skew-class}-reverse {
         .#{$vendor-prefix}button { border-radius: 0; }
     }
 
-    &.round {
+    &.#{$shape-round-class} {
         @include button-group-first-child {
             border-top-left-radius: $round;
             border-top-right-radius: $round;

data/scss/toolkit/components/button.scss

@@ -8,20 +8,24 @@
 
 .#{$vendor-prefix}button {
     @include reset-inline-block;
-    @include size-medium;
+    border: 0;
+    margin: 0;
+    padding: 0;
     cursor: pointer;
     text-align: center;
     font-weight: normal;
     line-height: normal;
     white-space: nowrap;
+    text-decoration: none;
     background: $gray;
+    @include size-medium;
 
     @include is-small(true, true) { @include size-small; }
     @include is-medium(true, true) { @include size-medium; }
     @include is-large(true, true) { @include size-large; }
 
-    &.round { border-radius: $round; }
-    &.square { border-radius: 0; }
+    &.#{$shape-round-class} { border-radius: $round; }
+    &.#{$shape-square-class} { border-radius: 0; }
 
     @include is-disabled {
         cursor: not-allowed;

data/scss/toolkit/components/carousel.scss

@@ -21,10 +21,8 @@
     position: relative;
 
     ul {
+        @include reset-list;
         position: absolute;
-        list-style: none;
-        margin: 0;
-        padding: 0;
         top: 0;
         left: 0;
         @include transition(left $carousel-transition, top $carousel-transition);

data/scss/toolkit/components/{dropdown.scss → drop.scss}

@@ -6,7 +6,10 @@
 
 @import "../common";
 
-.#{$vendor-prefix}dropdown {
+.#{$vendor-prefix}drop--down,
+.#{$vendor-prefix}drop--up,
+.#{$vendor-prefix}drop--left,
+.#{$vendor-prefix}drop--right {
     display: none;
     text-align: left;
     position: absolute;
@@ -20,8 +23,9 @@
     visibility: hidden;
     @include transition(opacity .3s);
 
-    // Nested dropdowns
-    .#{$vendor-prefix}dropdown {
+    // Nested
+    .#{$vendor-prefix}drop--down,
+    .#{$vendor-prefix}drop--up {
         display: block;
         top: 0;
         left: 90%;
@@ -29,6 +33,12 @@
         @include transition(left .3s, opacity .3s);
     }
 
+    // Apply to self
+    &,
+    ul {
+        @include reset-list;
+    }
+
     li {
         position: relative;
 
@@ -50,7 +60,8 @@
         &:hover {
             > a { background: $gray-lightest; }
 
-            .#{$vendor-prefix}dropdown {
+            .#{$vendor-prefix}drop--down,
+            .#{$vendor-prefix}drop--up {
                 visibility: visible;
                 opacity: 1;
                 left: 100%;
@@ -64,46 +75,45 @@
     }
 }
 
-.#{$vendor-prefix}dropdown,
-.#{$vendor-prefix}dropdown ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.#{$vendor-prefix}dropdown-divider {
+.#{$vendor-prefix}drop-divider {
     margin: ($margin / 2) 0;
     border-top: 1px solid $gray-dark;
 }
 
-.#{$vendor-prefix}dropdown-heading {
+.#{$vendor-prefix}drop-heading {
     padding: $small-padding;
     background-color: $gray-dark;
 }
 
 //-------------------- Modifiers --------------------//
 
-.#{$vendor-prefix}dropdown.on-top {
+.#{$vendor-prefix}drop--up {
     top: auto;
     bottom: 100%;
 }
 
-.#{$vendor-prefix}dropdown.on-right {
+.#{$vendor-prefix}drop--right {
     top: auto;
     left: 100%;
 }
 
-.#{$vendor-prefix}dropdown.on-left {
+.#{$vendor-prefix}drop--left {
     top: auto;
     left: auto;
     right: 100%;
 }
 
-.#{$vendor-prefix}dropdown.push-over {
-    left: auto;
-    right: 0;
+.#{$vendor-prefix}drop--right,
+.#{$vendor-prefix}drop--left {
+    &.reverse-align {
+        bottom: 0;
+    }
 }
 
-.#{$vendor-prefix}dropdown.pull-up {
-    bottom: 0;
+.#{$vendor-prefix}drop--down,
+.#{$vendor-prefix}drop--up {
+    &.reverse-align {
+        left: auto;
+        right: 0;
+    }
 }