From f4999197a9662b11779ceb287eb1ebde7b303327 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 24 Apr 2013 11:35:00 -0400 Subject: [PATCH] adds code example style Former-commit-id: 432b3eea3afcd9e152e56ed02b6ba3054ca9302d Former-commit-id: 0f871e10e3a78591ff4c533f6d78cfcb40a817d2 --- docs/button.html | 2 +- docs/form.html | 82 +++++++++++++------------- docs/javascript/semantic.js | 83 +++++++++++++++++++++------ docs/library/jquery.js.REMOVED.git-id | 1 + docs/module.html | 2 +- docs/shape.html | 8 ++- docs/stylesheets/example.css | 50 +++++++++++++++- src/modules/ui/shape.js | 3 +- 8 files changed, 168 insertions(+), 63 deletions(-) create mode 100644 docs/library/jquery.js.REMOVED.git-id diff --git a/docs/button.html b/docs/button.html index 45fa755e9..04dfd1bd1 100755 --- a/docs/button.html +++ b/docs/button.html @@ -18,7 +18,7 @@ - + diff --git a/docs/form.html b/docs/form.html index 083352480..42ae700f5 100755 --- a/docs/form.html +++ b/docs/form.html @@ -15,20 +15,20 @@ - - + - - - - + + + + + @@ -148,48 +148,52 @@

Standard

-

Form:

-

A form is a collection of user input elements, and has no stylings of its own.

-
-

Let's go ahead and get you signed up.

-
-
- - -
-
- - -
-
+
+ +

Form:

+

A form is a collection of user input elements, and has no stylings of its own.

+
+

Let's go ahead and get you signed up.

+
- - + +
- - + +
-
-
- - -
- +
+
+ + +
+
+ + +
+
+
+ +
-
Submit
+ +
+
Submit
+
-

Types of Content

-

Field

-

A field is a form element containing a label and an input

-
-
- - +
+ +

Field

+

A field is a form element containing a label and an input

+
+
+ + +
-

Text Area

A textarea uses the default form element

diff --git a/docs/javascript/semantic.js b/docs/javascript/semantic.js index 6c5bc2322..1770e13e2 100755 --- a/docs/javascript/semantic.js +++ b/docs/javascript/semantic.js @@ -1,5 +1,5 @@ // namespace -var semantic = { +window.semantic = { handler: {} }; @@ -7,16 +7,18 @@ var semantic = { semantic.ready = function() { // selector cache - var - $ui = $('.ui').not('.hover, .down'), - $swap = $('.swap'), - $menu = $('.menu.button'), - $demo = $('.demo'), - $waypoints = $('h2'), - - $peek = $('.peek'), - $peekMenu = $peek.find('li'), - $code = $('.code'), + var + $ui = $('.ui').not('.hover, .down'), + $swap = $('.swap'), + $menu = $('.menu.button'), + $demo = $('.demo'), + $waypoints = $('h2'), + + $exampleCode = $('.example i.code'), + + $peek = $('.peek'), + $peekMenu = $peek.find('li'), + $code = $('div.code'), // alias handler @@ -25,19 +27,60 @@ semantic.ready = function() { // event handlers handler = { + createCode: function() { + var + $example = $(this).closest('.example'), + $shape = $example.find('.shape.module'), + $demo = $example.find('.demo'), + $annotated = $example.find('.annotated'), + $code = $annotated.find('.code'), + code = $demo.get(0).innerHTML + ; + // add source if doesnt exist and initialize + if($annotated.size() === 0) { + $annotated = $('
') + .addClass('annotated') + .appendTo($example) + ; + } + if( $code.size() === 0) { + code = code.replace('^(\s+)', '$1$1'); + console.log(code); + $code = $('
') + .data('type', 'html') + .addClass('code') + .text(code) + .appendTo($annotated) + ; + $.proxy(handler.initializeCode, $code)(); + } + if( $demo.is(':visible') ) { + $demo.hide(); + $annotated.fadeIn(500); + } + else { + $annotated.hide(); + $demo.fadeIn(500); + } + }, + + removeIndents: function(code) { + + }, + initializeCode: function() { - var - $content = $(this), - contentType = $content.data('type') || 'javascript', - editor = ace.edit($content[0]), + var + $code = $(this), + contentType = $code.data('type') || 'javascript', + editor = ace.edit($code[0]), editorSession = editor.getSession(), - padding = 3, + padding = 0, codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth() ; editor.setTheme('ace/theme/github'); editor.setShowPrintMargin(false); editor.setReadOnly(true); - editor.renderer.setShowGutter(false); + editor.renderer.setShowGutter(false); editor.setHighlightActiveLine(false); editorSession.setMode('ace/mode/'+ contentType); @@ -92,7 +135,7 @@ semantic.ready = function() { continuous : false, offset : 215, handler : function(direction) { - var + var index = (direction == 'down') ? $waypoints.index(this) : ($waypoints.index(this) - 1 >= 0) @@ -114,6 +157,10 @@ semantic.ready = function() { ; } + $exampleCode + .on('click', handler.createCode) + ; + $swap .on('click', handler.swapStyle) ; diff --git a/docs/library/jquery.js.REMOVED.git-id b/docs/library/jquery.js.REMOVED.git-id new file mode 100644 index 000000000..2f2c2173c --- /dev/null +++ b/docs/library/jquery.js.REMOVED.git-id @@ -0,0 +1 @@ +9908c1a7219dda4289be6b1dce8de87c439bec13 \ No newline at end of file diff --git a/docs/module.html b/docs/module.html index 287a75409..9dcd7c876 100755 --- a/docs/module.html +++ b/docs/module.html @@ -16,7 +16,7 @@ - + diff --git a/docs/shape.html b/docs/shape.html index fdc21e344..8d8114f8d 100755 --- a/docs/shape.html +++ b/docs/shape.html @@ -17,7 +17,7 @@ - + @@ -184,7 +184,11 @@

Changing Settings

  1. A settings object can be passed in when initializing the plugin -
    $('.foo').shape({ moduleName: 'Godzilla'});
    +
    $('.foo') + .shape({ + moduleName: 'Godzilla' + }) +;
  2. Default settings for the module can be overridden by modifying $.fn.shape.settings.
    $.fn.shape.settings.moduleName = 'Godzilla';
    diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index ab61d6a42..0a66e34ab 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -1,7 +1,8 @@ /******************************* - Standard Example + Glue Code *******************************/ + @font-face { font-family: 'Icons'; src: url(../fonts/icons.eot); @@ -215,15 +216,28 @@ a:hover { #example .peek .panel :nth-child(1) { border-left-color: #00B9F0; } +#example .main h2.standard { + color: #00B9F0; +} #example .peek .panel :nth-child(2) { border-left-color: #56BB73; } +#example .main h2.states { + color: #56BB73; +} #example .peek .panel :nth-child(3) { border-left-color: #EF3F49; } +#example .main h2.variations { + color: #EF3F49; +} #example .peek .panel :nth-child(4) { border-left-color: #A24096; } +#example .main h2.group { + color: #A24096; +} + #example .peek .panel { width: 180px; } @@ -244,6 +258,7 @@ a:hover { width: 300px; } +/* example code reskin */ #example div.code { position: relative; width: 100%; @@ -291,6 +306,38 @@ a:hover { color: #555555; } +/* examples */ +#example .example { + position: relative; +} +#example .example i.code { + cursor: pointer; + position: absolute; + height: 0px; + width: 0px; + overflow: hidden; + opacity: 0; + + font-size: 24px; + color: #888888; + + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; +} +#example .example:hover i.code { + height: auto; + width: auto; + overflow: visible; + opacity: 0.5; + top: 5px; + right: 5px; +} +#example .example:hover i.code:hover { + opacity: 1; +} @media only screen and (max-width : 1640px) { @@ -315,3 +362,4 @@ a:hover { } } + diff --git a/src/modules/ui/shape.js b/src/modules/ui/shape.js index c38971f35..0dc0b6913 100755 --- a/src/modules/ui/shape.js +++ b/src/modules/ui/shape.js @@ -83,7 +83,8 @@ $.fn.shape = function(parameters) { repaint: function() { module.verbose('Forcing repaint event'); var - fakeAssignment = $shape.get(0).offsetWidth + shape = $shape.get(0) || document.createElement('div'), + fakeAssignment = shape.offsetWidth ; },