From b33867ff22ac5e7379816cb6cab8351353234677 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 13 Apr 2013 15:20:06 -0400 Subject: [PATCH] Shapes: working on example for shapes Former-commit-id: 22faf837e42d1ae7fa759b58d253cbd0af4dfcad Former-commit-id: e65a75df8ae157ace36dbf7460bd9f70495db773 --- examples/button.html | 17 +++- examples/example.css | 63 +++++--------- examples/example.js | 3 +- examples/images/heroku.png | Bin 0 -> 5595 bytes examples/images/jira.png | Bin 0 -> 13273 bytes examples/images/quirky.png | Bin 0 -> 6949 bytes examples/index.html | 11 +-- examples/module.html | 109 +++++++++++++++++------- examples/ui/button.css | 2 +- src/shape.css | 2 +- src/shape.js | 164 ++++++++++++++++++++++--------------- 11 files changed, 216 insertions(+), 155 deletions(-) create mode 100755 examples/images/heroku.png create mode 100755 examples/images/jira.png create mode 100755 examples/images/quirky.png diff --git a/examples/button.html b/examples/button.html index ecef82901..a25df78ca 100755 --- a/examples/button.html +++ b/examples/button.html @@ -53,9 +53,6 @@

Can show a loading indicator:

Loading Button
-

Can show a toggled state:

-
Toggled Button
-

Can alert to a succesful action:

Succesful Button
@@ -109,8 +106,20 @@
Two
Three
+

Groups can be vertical

+
+
One
+
Two
+
Three
+
+

Groups can be divided evenly to fit parent

+
+
One
+
Two
+
Three
+
-

Variations can modify groups

+

Singular variations can be applied to groups to infer all elements share the same quality

Blue

One
diff --git a/examples/example.css b/examples/example.css index d8ef91fb9..a48d50394 100755 --- a/examples/example.css +++ b/examples/example.css @@ -77,6 +77,16 @@ a:hover { list-style-type: decimal; margin: 0px 0px 10px; } +#example .list { + list-style-position: inside; + margin: 10px 0px 40px; + padding: 0px; +} +#example .list li { + list-style-type: disc; + margin: 0px 0px 10px; +} + /* content */ #example .container { @@ -101,15 +111,15 @@ a:hover { #example .demo.shape .side { - width: 300px; - height: 300px; + width: 250px; + height: 250px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; - background-color: #22C1FC; + background-color: #E6E6E6; color: #FFFFFF; @@ -117,6 +127,13 @@ a:hover { -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); } + +#example .demo.shape .side img { + display: block; + margin: 0px auto; + max-width: 100%; +} + #example .demo.shape .side b { display: block; position: absolute; @@ -127,44 +144,6 @@ a:hover { text-align: center; } -#example .demo.shape .up.side, -#example .demo.shape .down.side { - background-color: #E6E6E6; - color: #737373; -} - -/* Shapes */ #example .demo.rectangle.shape .side { - width: 500px; - height: 300px; -} -#example .demo.rectangle.shape .up.side, -#example .demo.rectangle.shape .down.side { - height: 100px; -} -#example .demo.rectangle.shape .left.side, -#example .demo.rectangle.shape .right.side, -#example .demo.rectangle.shape .over.side { - width: 300px; -} - - -#example .demo.irregular.shape .side { - padding: 0px; -} -#example .demo.irregular.shape .side:nth-child(1n) { - width: 514px; - height: 210px; -} -#example .demo.irregular.shape .side:nth-child(2n) { - width: 126px; - height: 115px; -} -#example .demo.irregular.shape .side:nth-child(3n) { - width: 864px; - height: 510px; -} -#example .demo.irregular.shape .side:nth-child(4n) { - width: 322px; - height: 210px; + width: 350px; } \ No newline at end of file diff --git a/examples/example.js b/examples/example.js index c07b37f02..c2d0c5e67 100755 --- a/examples/example.js +++ b/examples/example.js @@ -26,7 +26,6 @@ shape.ready = function() { if(direction && animation) { $('.active.side') .next() - .attr('class', direction + ' side') ; $demo .shape(animation + '.' + direction) @@ -54,7 +53,7 @@ shape.ready = function() { $shape .addClass('active') ; - $otherShapes + $otherShapes .removeClass('active') .each(handler.removeShape) ; diff --git a/examples/images/heroku.png b/examples/images/heroku.png new file mode 100755 index 0000000000000000000000000000000000000000..06ee22dd56c3bc22d15cbbf512c1907b783a07e2 GIT binary patch literal 5595 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
    p359SdQl>Son9NegT-Tub@`de9)S(2x6G6 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 literal 0 HcmV?d00001 diff --git a/examples/images/quirky.png b/examples/images/quirky.png new file mode 100755 index 0000000000000000000000000000000000000000..3d31fbc5ce64702da5a9d975964e814fb076b521 GIT binary patch literal 6949 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 literal 0 HcmV?d00001 diff --git a/examples/index.html b/examples/index.html index 18edec282..cc4010f35 100755 --- a/examples/index.html +++ b/examples/index.html @@ -32,7 +32,7 @@

    Shapes makes creating 3D tweens easier by taking care of the dirty business of calculating translations based on content sizing, which can be a confusing, frustrating task.

    The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

    -

    Shapes is written using the semantic module specification. Semantic is a standard pattern for writing Javascript modules which intends to make understanding new code less confusing, and debugging errors less frustrating, by making coding decisions less arbitrary and more semantic. +

    Shapes is written using the semantic module specification. Semantic is a standard pattern for writing Javascript modules which intends to make understanding new code less confusing, and debugging errors less frustrating, by making coding decisions less arbitrary and more semantic.

    Click here to read more about Semantic spec, and the upcoming library.

    @@ -42,16 +42,13 @@
    - 1 +
    - 2 +
    - 3 -
    -
    - 4 +
    diff --git a/examples/module.html b/examples/module.html index dbf070a34..dde6315eb 100755 --- a/examples/module.html +++ b/examples/module.html @@ -30,42 +30,55 @@

    Semantic

    Semantic is a set of standards designed to make front end development less arbitrary.

    + +
    +
    Just the details
    +
    Tell me everything
    +
    +

    What is Semantic?

    -

    Semantic has two parts. The semantic standard, and the semantic library.

    +

    Semantic has two parts. The semantic standard, and the semantic library.

    +

    The standard

    -

    The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components (modules).

    +

    The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components or behavioral definitions (Javascript modules).

    -

    Static components are things like: menus, columns, grids, tables, buttons, forms. Dynamic components are things like: popups, modals, chat rooms.

    +

    Static elements: menus, columns, grids, tables, buttons, forms.

    +

    Dynamic components: popups, modals, chat rooms.

    +

    Behavioral components: form validation, state management, history.

    -

    Defining UI

    -

    The DNA of the web is UI. Semantic's goal is to create an exchange format for UI, by architecting a consistent HTML structure and classname usage for defining UI elements.

    -

    If as a community we can agree on consistent UI definitions to, for example, describe what a button is, then we can freely share variations of element designs without having to modify our site's structure to match the expectations of the library.

    +

    Defining UI

    +

    Semantic creates an exchange format for UI, by defining a consistent HTML structure and set of class names for representing UI elements.

    +

    Sharing a structural standard for UI releases the burden from developers at being a naming authorities in their own projects.

    + +

    If, as a community we can agree on consistent UI definitions, then we can freely share variations of element designs without having to modify our site's codebase to match any declarative expectations by other developers, and interface designs can be freely exchanged between projects and teams.

    -

    What's in an element

    +

    What's in an element

    UI elements definitions are made of 4 parts:

      -
    1. A prototype format of an element (A bunny has two long ears and is furry)
      2. +
    2. An ideal form of an element (A bunny has two long ears and is furry)
    3. A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)
    4. A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)
      5. -
    5. A definition of possible variations of the element (A bunny can be tall or short and can be friendly or mean)
      6. +
    6. A definition of possible variations of the element (A bunny can be large or small and can be spotted or fuzzy)
    -

    UI elements can be thought of as nouns, and variations as adjectives. Variations should be written in a way which only describe the innate features of that variation, so that variations can be used together without affecting each other.

    +

    UI elements can be thought of as nouns, and variations as adjectives. Variations are written in a way which only describe the innate features of that variation in the context of the noun. For example, in english, a large planet has a different meaning than a large chair, but both are the same variant "largeness".

    +

    Variations can be used together without negating each other unless used in a pardoxical way (A large small bunny).

    +

    I don't know what you're talking about just show me the code

    If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.

    - UI Button Spec + UI Button Spec +

    Defining Modules

    +

    The Semantic modules standard is created primarily to accomplish two things:

    +
      +
    1. Provide conveniences for module authors so that they can be written faster and without clutter.
      2. +
    2. Add features which make understanding and debugging other developers' modules simpler
      3. +
    -

    The library

    - -

    The semantic library is a UI library and set of javascript modules which have been written to adhere to the semantic standard.

    - -

    The aim is to release pieces of the library on a schedule over the course of the next few months. Check out the Semantic library release calendar

    - -

    Why use Semantic Modules?

    +

    Why use Semantic Modules?

      -
    1. Puts accessibility first. Although Coffeescript is beautiful, and Angular is smart, Semantic has a different agenda: to be easy to use, and opinionless. Semantic can be thought of more as the Aaron Copland of programming libraries. To code in Semantic only requires an understanding of jQuery and Javascript to begin writing code. If you're stuck there are also plenty of examples to help you get started.
      2. +
    2. Puts accessibility first. Although Coffeescript is beautiful, and Angular is smart, Semantic has a different agenda: to be easy to use, and opinionless. Semantic can be thought of more as the Aaron Copland of programming libraries. It only requires an understanding of jQuery and Javascript to begin writing code. If you're stuck there are also plenty of examples to help you get started.
    3. Is self documenting. Instead of reading through inline comments to determine what a developer is intending, semantic allows developers to pass meaningful debug data where its most useful: the javascript console. This allows you to see the sequence of events that occur in a module , along with useful debug information, like the value of significant variables. If you're in the source code, debug statements also read similarly to code comments which provide context. Show me
    4. Designed to separate the arbitrary bits from the core logic of your module. Ever scroll through an unfimiliar library looking for the line of code where they define the ID tag for an expected html structure? Semantic keeps you from ever having to do that again. Developer decisions like metadata, classnames, selectors, and messages are separated from the less arbitrary parts of code. Show me
    5. Lets you access anything, and change everything. Methods defined as part of module definitions are all invokable. Semantic also maps from dot notation to their appropriate locations inside the module, allowing developers not to only make flat modules. Settings can be changed at initialization, or after. Module defaults can be changed whenever. Show me
      6. @@ -73,17 +86,53 @@
    6. Patterns for every need. Semantic has patterns that work well both as a widget factory, and as a single entity.
    -

    How to write a module

    -
    View Annotated Source
    - -
      -
    1. Select the most appropriate design pattern.
      2. -
    2. Define a settings object.
      3. -
    3. Define a selector cache.
      4. -
    4. Add an object literal defining invokable methods for your plugin
      5. -
    5. You're done!
      6. -
    - +

    You really like to talk. Lets see some code

    +

    For a complete definition of the specification check to annotated source:

    + +
    +
    Single Instance / Behavioral
    +
    Many Instances
    +
    + + +

    The Libraries

    +

    To semantic library is a set of UI elements and javascript modules that provides an example implementation of the Semantic standard. The purpose is to be useful in their own right for developers, but also to provide a guide for how the standard can be used.

    +

    The UI Library

    + +

    The aim is to release pieces of the library on a schedule over the course of the next few months.

    UI Release Calendar +

    The module library

    +

    Javascript modules.

    +
      +
    • Accordion
      • +
    • API
      • +
    • Animation
      • +
    • Chat Room
      • +
    • Form Validation
      • +
    • Placeholder Text
      • +
    • Modal
      • +
    • Nag
      • +
    • Popup
      • +
    • Search
      • +
    • Star Rating
      • +
    • Shape
      • +
    • State
      • +
    • Tabs
      • +
    +
diff --git a/examples/ui/button.css b/examples/ui/button.css index eab6c8ad1..01f55f8b8 100755 --- a/examples/ui/button.css +++ b/examples/ui/button.css @@ -315,7 +315,7 @@ .ui.toggle.buttons .button.active, .ui.buttons .button.toggle.active, .ui.button.toggle.active { - + background-color: #BBF0A9; } .ui.buttons.toggle .ui.button.active.hover, .ui.buttons .ui.button.toggle.active.hover, diff --git a/src/shape.css b/src/shape.css index 14d40832b..5210a9d67 100755 --- a/src/shape.css +++ b/src/shape.css @@ -48,7 +48,7 @@ z-index: 100; } .shape.module .hidden.side { - opacity: 0.5; + opacity: 0.7; } /* css animation */ diff --git a/src/shape.js b/src/shape.js index fdc584547..d1fac9e4e 100755 --- a/src/shape.js +++ b/src/shape.js @@ -80,47 +80,58 @@ $.fn.shape = function(parameters) { }, animate: function(propertyObject, callback) { - module.verbose('Animating box with properties', propertyObject); - callback = callback || function() { - module.reset(); - module.set.active(); - $.proxy(settings.onChange, $nextSide)(); - }; - if(settings.useCSS || 1) { - module.verbose('Using CSS transitions to animate'); - $module - .addClass(className.animating) - ; - module.set.stageSize(); - module.repaint(); - $module - .addClass(className.css) - ; - $activeSide - .addClass(className.hidden) - ; + if( $module.hasClass(className.animating) ) { + module.debug('Animation in progress, queing animation'); $shape - .css(propertyObject) - .one(endTransition, callback) + .one(endTransition, function() { + console.verbose('Executing queued animation'); + module.animate(propertyObject, callback); + }) ; } else { - // not yet supported until .animate() is extended to allow RotateX/Y - module.verbose('Using javascript to animate'); - $module - .addClass(className.animating) - .removeClass(className.css) - ; - module.set.stageSize(); - module.repaint(); - $activeSide - .animate({ - opacity: 0 - }, settings.duration, settings.easing) - ; - $shape - .animate(propertyObject, settings.duration, settings.easing, callback) - ; + module.verbose('Animating box with properties', propertyObject); + callback = callback || function() { + module.reset(); + module.set.active(); + $.proxy(settings.onChange, $nextSide)(); + }; + if(settings.useCSS || 1) { + module.verbose('Using CSS transitions to animate'); + $module + .addClass(className.animating) + ; + module.set.stageSize(); + module.repaint(); + $module + .addClass(className.css) + ; + $activeSide + .addClass(className.hidden) + ; + $shape + .css(propertyObject) + .one(endTransition, callback) + ; + } + else { + // not yet supported until .animate() is extended to allow RotateX/Y + module.verbose('Using javascript to animate'); + $module + .addClass(className.animating) + .removeClass(className.css) + ; + module.set.stageSize(); + module.repaint(); + $activeSide + .animate({ + opacity: 0 + }, settings.duration, settings.easing) + ; + $shape + .animate(propertyObject, settings.duration, settings.easing, callback) + ; + } } }, @@ -201,10 +212,44 @@ $.fn.shape = function(parameters) { ; module.set.defaultSide(); } + }, + + flip: { + + up: function() { + module.debug('Flipping up', $nextSide); + module.stage.above(); + module.animate( module.getTransform.up() ); + }, + + down: function() { + module.debug('Flipping down', $nextSide); + module.stage.below(); + module.animate( module.getTransform.down() ); + }, + + left: function() { + module.debug('Flipping left', $nextSide); + module.stage.left(); + module.animate(module.getTransform.left() ); + }, + + right: function() { + module.debug('Flipping right', $nextSide); + module.stage.right(); + module.animate(module.getTransform.right() ); + }, + + over: function() { + module.debug('Flipping over', $nextSide); + module.stage.behind(); + module.animate(module.getTransform.behind() ); + } }, getTransform: { + up: function() { var translate = { @@ -216,6 +261,7 @@ $.fn.shape = function(parameters) { transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' }; }, + down: function() { var translate = { @@ -227,6 +273,7 @@ $.fn.shape = function(parameters) { transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' }; }, + left: function() { var translate = { @@ -238,6 +285,7 @@ $.fn.shape = function(parameters) { transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' }; }, + right: function() { var translate = { @@ -249,6 +297,7 @@ $.fn.shape = function(parameters) { transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' }; }, + behind: function() { var translate = { @@ -259,9 +308,11 @@ $.fn.shape = function(parameters) { transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' }; } + }, stage: { + above: function() { var box = { @@ -287,6 +338,7 @@ $.fn.shape = function(parameters) { }) ; }, + below: function() { var box = { @@ -312,6 +364,7 @@ $.fn.shape = function(parameters) { }) ; }, + left: function() { var box = { @@ -337,6 +390,7 @@ $.fn.shape = function(parameters) { }) ; }, + right: function() { var box = { @@ -362,6 +416,7 @@ $.fn.shape = function(parameters) { }) ; }, + behind: function() { var box = { @@ -389,37 +444,6 @@ $.fn.shape = function(parameters) { } }, - flip: { - up: function() { - module.debug('Flipping up', $nextSide); - module.stage.above(); - module.animate( module.getTransform.up() ); - }, - down: function() { - module.debug('Flipping down', $nextSide); - module.stage.below(); - module.animate( module.getTransform.down() ); - }, - left: function() { - module.debug('Flipping left', $nextSide); - module.stage.left(); - module.animate(module.getTransform.left() ); - - }, - right: function() { - module.debug('Flipping right', $nextSide); - module.stage.right(); - module.animate(module.getTransform.right() ); - }, - over: function() { - module.debug('Flipping over', $nextSide); - module.stage.behind(); - module.animate(module.getTransform.behind() ); - } - }, - - - /* standard module */ setting: function(name, value) { if( $.isPlainObject(name) ) { @@ -432,11 +456,13 @@ $.fn.shape = function(parameters) { settings[name] = value; } }, + verbose: function() { if(settings.verbose) { module.debug.apply(this, arguments); } }, + debug: function() { var output = [], @@ -450,6 +476,7 @@ $.fn.shape = function(parameters) { log.apply(console, output.concat(variables) ); } }, + error: function() { var output = [], @@ -464,6 +491,7 @@ $.fn.shape = function(parameters) { log.apply(console, output.concat(variables) ); } }, + invoke: function(query, context, passedArguments) { var maxDepth,