{{>layout_content}}
Some items are not shown due to the current visibility settings. Use the checkboxes at the upper right of this page to change the visibility settings.
This class doesn\'t provide any methods, properties, attributes, or events.
{name}
{resultType}{description}
{class}"+f+"
").get("text"),f=f.length>65?a.Escape.html(f.substr(0,65))+" …":a.Escape.html(f),e["class"]||(e["class"]=""),e.description=f,e.name=d.highlighted,b.sub(this.RESULT_TEMPLATE,e)},this)},_apiTextLocator:function(a){return a.displayName||a.name}},{ATTRS:{resultFormatter:{valueFn:function(){return this._apiResultFormatter}},resultFilters:{valueFn:function(){return this._apiResultFilter}},resultHighlighter:{value:"phraseMatch"},resultListLocator:{value:"data.results"},resultTextLocator:{valueFn:function(){return this._apiTextLocator}},source:{value:"/api/v1/search?q={query}&count={maxResults}"}}})},"3.4.0",{requires:["autocomplete-base","autocomplete-highlighters","autocomplete-sources","escape"]}),YUI.add("api-list",function(a){function o(){return"classes"===j.get("queryType")?e:g}function p(e){var f=a.one(a.config.doc.createDocumentFragment()),g=o(),h=j.get("queryType"),i="classes"===h?"class":"module";e.results.length?c.each(e.results,function(a){f.append(b.sub(n,{rootPath:d.rootPath,displayName:j.getDisplayName(a.highlighted),name:a.text,typePlural:h,typeSingular:i}))}):f.append('"),g.empty(!0),g.append(f),m.refresh()}function q(){m.refresh()}function r(a){var b=a.target;b.test("input,select,textarea")||b.get("isContentEditable")||(a.preventDefault(),f.focus(),m.refresh())}function s(b){var d=a.one(a.config.doc.createDocumentFragment());b.results.length?c.each(b.results,function(a){d.append(a.display)}):d.append(''),m.refresh()}function t(a){var b=a.newVal,c=b.get("label").toLowerCase();switch(i.selected={index:b.get("index"),name:c,tab:b},c){case"classes":case"modules":j.setAttrs({minQueryLength:0,queryType:c}),k.set("minQueryLength",-1),a.prevVal&&j.sendRequest(j.get("value"));break;case"everything":j.set("minQueryLength",-1),k.set("minQueryLength",1),k.get("value")?k.sendRequest(k.get("value")):f.focus();break;default:j.set("minQueryLength",-1),k.set("minQueryLength",-1)}m&&setTimeout(function(){m.refresh()},1)}function u(b){var c=i.selected.index;if(b.ctrlKey||b.metaKey)switch(b.preventDefault(),b.keyCode){case 37:c>0&&(l.selectChild(c-1),f.focus());break;case 39:c,
+//
+// Notes
+// - Review normalize.scss for default tag styling
+//
+// Contents
+// 1) BASE
+// 2) LINKS
+// 3) TYPE
+// 4) EMBEDDED CONTENT
+// 5) FIGURES
+// 6) FORMS
+// 7) TABLES
+//
+//*******************************************
+
+
+
+%fontSmoothing {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+
+
+//*******************************************
+//
+// BASE
+//
+//*******************************************
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+
+html { font-size: $fontSize-root; }
+
+
+body {
+ @extend %fontSmoothing;
+ min-width: 320px;
+ background-color: $color_gray-lightest;
+ color: $color_gray-darker;
+ font-family: $fontFamily-default;
+ &.loading { display: none; }
+}
+section {
+ @extend %clearfix;
+ max-width:$bp_width-max;
+
+ margin: 0 auto;
+ @include bp($bp_width-480, max-) {
+ padding: $gridUnit-large $gridUnit-default;
+ }
+ @include bp($bp_width-480, min-) {
+ padding: $gridUnit-largest $gridUnit-default;
+ }
+}
+
+
+
+//*******************************************
+//
+// LINKS
+//
+//*******************************************
+a:link,
+a:visited {
+ // EXTEND
+ // VARS (locally scoped)
+ // LAYOUT
+ // Display, Positioning
+ // Box Model
+ //padding: 0 2px;
+ position: relative;
+ // Type
+ // DISPLAY
+ // Visual Enhancement
+ color: $color_gray-dark;
+ outline: none;
+ z-index: 0;
+ // Type
+ font-family: $fontFamily-default;
+ font-weight: 400;
+ text-decoration: underline;
+ white-space: nowrap;
+ // PSUEDO Elements & Classes
+ // Elements :: before, after, first-line, first-letter, selection
+ // &::before {
+ // @extend %fontSmoothing;
+ // content: attr(data-label);
+ // }
+ // Classes : http://css-tricks.com/almanac/
+ // CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
+ // MODIFIERS
+ // Static
+ // Dynamic
+ // BREAKPOINTS
+}
+a:active,
+a:hover {
+ color: $color_gray-darkest;
+ cursor: pointer;
+}
+
+
+
+//*******************************************
+//
+// TYPE
+//
+//*******************************************
+h1 {
+ // EXTEND
+ @extend %fontSmoothing;
+ // VARS (locally scoped)
+ // LAYOUT
+ // Display, Positioning
+ // Box Model
+ margin:$gridUnit-default 0 0 0;
+ // Type
+ font-size: $fontSize-large;
+ // DISPLAY
+ // Visual Enhancement
+ // Type
+ font-weight: 700;
+ // text-transform:uppercase;
+ // PSUEDO Elements & Classes
+ // Elements :: before, after, first-line, first-letter, selection
+ // Classes : http://css-tricks.com/almanac/
+ // CHILDREN
+ // Sass 3.3 Syntax Only (otherwise scope child outside this selector)
+ // MODIFIERS
+ // Static
+ // Dynamic
+ // BREAKPOINTS
+ @include bp($bp_width-600, min-) {
+ font-size: $fontSize-larger;
+ line-height: $gridUnit-larger;
+ }
+}
+
+h2 {
+ @extend h1;
+ @include bp($bp_width-600, max-) {
+ font-size: $fontSize-default;
+ line-height: $gridUnit-default;
+ }
+ @include bp($bp_width-600, min-) {
+ font-size: $fontSize-large;
+ line-height: $gridUnit-large;
+ }
+}
+
+h3 {
+ @extend h1;
+ font-size: $fontSize-small;
+ font-weight: 700;
+ text-transform: none;
+}
+
+.args code,
+h3 code {
+ font-family: "effra", sans-serif;
+}
+h3 code {
+ font-weight: bold;
+}
+
+
+.paren {
+ font-size: $fontSize-smaller;
+ margin: auto 5px;
+}
+
+h4 {
+ font-variant: normal;
+ line-height: $gridUnit-smallest;
+ font-size: $fontSize-smaller;
+}
+
+h5 {
+ @extend h1;
+ font-size: $fontSize-small;
+ line-height: 2.5rem;
+}
+
+h6 {
+ @extend h1;
+ font-size: $fontSize-smaller;
+ line-height: $gridUnit-small;
+ margin: $gridUnit-smaller 0 0 0;
+}
+
+p {
+ // EXTEND
+ @extend %fontSmoothing;
+ // VARS (locally scoped)
+ // LAYOUT
+ // Display, Positioning
+ // Box Model
+ margin: $gridUnit-smaller 0 $gridUnit-smaller 0;
+ // Type
+ font-size: $fontSize-smallest;
+ line-height: 2.4rem;
+ // DISPLAY
+ // Visual Enhancement
+ color: $color_gray-dark;
+ // Type
+ font-family: $fontFamily-secondary;
+ font-weight: 400;
+ // PSUEDO Elements & Classes
+ // Elements :: before, after, first-line, first-letter, selection
+ // Classes : http://css-tricks.com/almanac/
+ // CHILDREN
+ // Sass 3.3 Syntax Only (otherwise scope child outside this selector)
+ // MODIFIERS
+ // Static
+ // Dynamic
+ // BREAKPOINTS
+ @include bp($bp_width-600) {
+ font-size: $fontSize-smaller;
+ }
+}
+
+// abbr[title] {}
+// b {}
+strong {font-weight:700;} // assumes the font is 'effra' weight: 700
+// dfn {}
+
+hr {
+ // EXTEND
+ // VARS (locally scoped)
+ // LAYOUT
+ // Display, Positioning
+ clear: both;
+ // Box Model
+ border: none;
+ height: $gridUnit-smallest;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ // Type
+ // DISPLAY
+ // Visual Enhancement
+ color: transparent;
+ outline: none;
+ background-color: $color_gray-darkest;
+ -webkit-backface-visibility: hidden;
+ // Type
+ // PSUEDO Elements & Classes
+ // Elements :: before, after, first-line, first-letter, selection
+ // Classes : http://css-tricks.com/almanac/
+ // CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
+ // MODIFIERS
+ // Static
+ // Dynamic
+ // BREAKPOINTS
+}
+
+// mark {}
+
+code {
+ @extend %fontSmoothing;
+ //font-size: $fontSize-smaller;
+ font-weight: 400;
+ font-family: $fontFamily-monospace;
+}
+
+// kbd {}
+pre {
+ @extend %fontSmoothing;
+ white-space:pre;
+}
+// q {}
+// small {}
+// sub {}
+// sup {}
+// sub {}
+ul {
+ padding: 0 0 0 $gridUnit-small;
+ margin: $gridUnit-smaller;
+}
+li {
+ @extend %fontSmoothing;
+}
+
+
+
+//*******************************************
+//
+// EMBEDDED CONTENT
+//
+//*******************************************
+img {max-width:100%;}
+canvas {display: block;}
+
+
+
+//*******************************************
+//
+// FIGURES
+//
+//*******************************************
+// figure {}
+
+
+
+//*******************************************
+//
+// FORMS
+//
+//*******************************************
+// fieldset {}
+// legend {}
+// button {}
+// input {}
+// select {}
+// textarea {}
+// html input[type="button"] {}
+// input[type="reset"] {}
+// input[type="submit"] {}
+// input[type="checkbox"] {}
+// input[type="radio"] {}
+// input[type="search"] {}
+
+
+
+//*******************************************
+//
+// TABLES
+//
+//*******************************************
+// table {}
diff --git a/build/createjsTheme/assets/scss/elements/transitions.scss b/build/createjsTheme/assets/scss/elements/transitions.scss
new file mode 100644
index 00000000..a73c1adb
--- /dev/null
+++ b/build/createjsTheme/assets/scss/elements/transitions.scss
@@ -0,0 +1,68 @@
+//*******************************************
+//
+// PAGE TRANSITIONS
+//
+// Description
+// - Transitions that affect the whole project
+//
+// Contents
+// 1) PAGE
+// 2) SVG LOAD
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// PAGE
+//
+//*******************************************
+.page-in { opacity: 1 !important; }
+
+.page-default {
+ opacity: 0;
+ transition: opacity $transition-longer-out;
+}
+
+
+//*******************************************
+//
+// SVG LOAD
+//
+//*******************************************
+img {
+ opacity: 0;
+ transition: opacity $transition-longer-default;
+}
+
+.svg-background {
+ // EXTEND
+ @extend %clearfix;
+ // VARS (locally scoped)
+ // LAYOUT
+ // Display, Positioning
+ position: absolute;
+ z-index: -1;
+ // Box Model
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ // Type
+ // DISPLAY
+ // Visual Enhancement
+ opacity: 1;
+ // Type
+ // PSUEDO Elements & Classes
+ // Elements :: before, after, first-line, first-letter, selection
+ // Classes : http://css-tricks.com/almanac/
+ // CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
+ // MODIFIERS
+ // Static
+ // Dynamic
+ transition: opacity $transition-longer-default;
+ // BREAKPOINTS
+}
+
+.svg-loaded { opacity: 1 !important; }
diff --git a/build/createjsTheme/assets/scss/library-specific.scss b/build/createjsTheme/assets/scss/library-specific.scss
new file mode 100644
index 00000000..94d90ebf
--- /dev/null
+++ b/build/createjsTheme/assets/scss/library-specific.scss
@@ -0,0 +1,5 @@
+.header {
+ @extend %color_preloadjs-gradient;
+}
+
+$library-color: $color_preloadjs-default;
\ No newline at end of file
diff --git a/build/createjsTheme/assets/css/main.css b/build/createjsTheme/assets/scss/main.scss
similarity index 51%
rename from build/createjsTheme/assets/css/main.css
rename to build/createjsTheme/assets/scss/main.scss
index 94e95980..d688ce74 100644
--- a/build/createjsTheme/assets/css/main.css
+++ b/build/createjsTheme/assets/scss/main.scss
@@ -1,45 +1,84 @@
-/*
-Font sizes for all selectors other than the body are given in percentages,
-with 100% equal to 13px. To calculate a font size percentage, multiply the
-desired size in pixels by 7.6923076923.
-
-Here's a quick lookup table:
-
-10px - 76.923%
-11px - 84.615%
-12px - 92.308%
-13px - 100%
-14px - 107.692%
-15px - 115.385%
-16px - 123.077%
-17px - 130.769%
-18px - 138.462%
-19px - 146.154%
-20px - 153.846%
-*/
+//*******************************************
+//
+// EASELJS DOCS
+// - 2.0 skin
+//
+// 1) IMPORTS
+// 2) LIBRARY SPECIFIC COLORS
+// 3) RULES
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// IMPORTS
+//
+//*******************************************
+// UTILITIES
+@import "utilities/breakpoint.scss";
+@import "utilities/clearfix.scss";
+
+// SETTINGS
+@import "settings/breakpoint.scss";
+@import "settings/color.scss";
+@import "settings/fonts.scss";
+@import "settings/layout.scss";
+@import "settings/path.scss";
+
+// ELEMENTS
+@import "elements/tags.scss";
+
+
+//*******************************************
+//
+// LIBRARY SPECIFIC COLORS
+//
+//*******************************************
+@import "library-specific.scss";
+
+.yui3-skin-sam .yui3-tab-selected .yui3-tab-label,
+.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:focus,
+.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:hover {
+ background: none !important;
+ border: none !important;
+ background-color: $library-color !important;
+}
+.yui3-skin-sam .yui3-tabview-list {
+ border-bottom: 5px solid $library-color !important;
+}
+
+
+//*******************************************
+//
+// RULES
+//
+//*******************************************
html {
- background: #e6e6e6;
- color: #111111;
+ background: $color_gray-lightest;
+ color: $color_gray-default;
overflow-y: scroll;
}
body {
- font: 13px/1.4 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', 'Bitstream Vera Sans', 'Helvetica', 'Arial', sans-serif;
margin: 0;
padding: 0;
}
+
+
/* -- Links ----------------------------------------------------------------- */
-a {
- color: #356de4;
- text-decoration: none;
+h1 a {
+ &::after {
+ display: none;
+ }
}
+
.hidden {
display: none;
}
-a:hover {
- text-decoration: underline;
-}
+
/* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
- sight until it's focused. */
+sight until it's focused. */
.jump {
position: absolute;
padding: 3px 6px;
@@ -50,9 +89,6 @@ a:hover {
left: 40%;
}
/* -- Paragraphs ------------------------------------------------------------ */
-p {
- margin: 1.3em 0;
-}
dd p,
td p {
margin-bottom: 0;
@@ -61,61 +97,20 @@ dd p:first-child,
td p:first-child {
margin-top: 0;
}
-/* -- Headings -------------------------------------------------------------- */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- color: #111111 !important;
- /*was #f80*/
-
- font-weight: 100;
- line-height: 1.1;
- margin: 1.1em 0 0.5em;
-}
-h1 {
- font-size: 184.6%;
- margin: 0;
-}
-h2 {
- font-size: 153.846%;
- margin: 0 !important;
- padding: 1.5em 0 .5em 0;
- border-bottom: 1px solid #c3c3c3 !important;
-}
-h3 {
- font-size: 138.462%;
- padding: 1.5em 0 .5em 0;
-}
-h4 {
- border-bottom: 1px solid #DBDFEA;
- color: #E48A2B;
- font-size: 115.385%;
- font-weight: normal;
- padding: 1em 0 0 0;
-}
-h5,
-h6 {
- font-size: 107.692%;
-}
+
+
/* -- Code and examples ----------------------------------------------------- */
code,
kbd,
pre,
-samp {
- font-family: Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
- font-size: 92.308%;
- line-height: 1.35;
+samp,
+A.crosslink {
+ font-family: $fontFamily-monospace;
+ font-size: $fontSize-smallest;
}
p code,
p kbd,
-p samp {
- background: #FCFBFA;
- border: 1px solid #EFEEED;
- padding: 0 3px;
-}
+p samp {}
a code,
a kbd,
a samp,
@@ -142,27 +137,29 @@ pre.cmd {
*overflow-x: scroll;
padding: 1em;
}
-pre.code {
- background: #f3f3f3;
- border: 1px solid #c3c3c3;
- border-left-width: 5px;
- line-height: 150%;
-}
+
pre.terminal,
-pre.cmd {
- background: #F0EFFC;
- border: 1px solid #D0CBFB;
- border-left: 5px solid #D0CBFB;
-}
-/* Don't reduce the font size of // elements inside
- blocks. */
-pre code,
-pre kbd,
-pre samp {
- font-size: 100%;
+pre.cmd,
+pre.code {
+ background: $color_gray-darkest;
+ border-left: $gridUnit-smallest solid $color_gray-dark;
+ margin: $gridUnit-large 0;
}
+
+.description,
+.box.intro,
+.param-description,
+.returns-description {
+ code {
+ background-color: $color-gray-lighter;
+ }
+}
+pre code { background-color: transparent !important; }
+
+
+
/* Used to denote text that shouldn't be selectable, such as line numbers or
- shell prompts. Guess which browser this doesn't work in. */
+shell prompts. Guess which browser this doesn't work in. */
.noselect {
-moz-user-select: -moz-none;
-khtml-user-select: none;
@@ -191,12 +188,12 @@ table {
}
td,
th {
- border: 1px solid #fff;
+ border: 1px solid $color_gray-lightest;
padding: 5px 12px;
vertical-align: top;
}
td {
- background: #E6E9F5;
+ background: $color_gray-lighter;
}
td dl {
margin: 0;
@@ -208,13 +205,12 @@ td pre:first-child {
margin-top: 0;
}
th {
- background: #D2D7E6;
- /*#97A0BF*/
+ background: $color_gray-light;
border-bottom: none;
border-top: none;
- color: #000;
- /*#FFF1D5*/
+ color: $color_gray-darker;
+ /*$color_gray-lightest1D5*/
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
@@ -228,18 +224,22 @@ th {
}
.content {
padding: 0 20px 0 25px;
+ max-width: 104rem;
+}
+.content.source-content{
+ max-width: none;
}
.sidebar {
padding: 0 2em;
}
#bd {
- padding: 7px 0 130px;
+ padding: $gridUnit-large 0 $gridUnit-larger;
position: relative;
width: 99%;
}
/* -- Table of Contents ----------------------------------------------------- */
/* The #toc id refers to the single global table of contents, while the .toc
- class refers to generic TOC lists that could be used throughout the page. */
+class refers to generic TOC lists that could be used throughout the page. */
.toc code,
.toc kbd,
.toc samp {
@@ -269,29 +269,29 @@ th {
*/
/* -- Other Styles ---------------------------------------------------------- */
/* These are probably YUI-specific, and should be moved out of Selleck's default
- theme. */
+theme. */
.button {
- border: 1px solid #dadada;
+ border: 1px solid $color_gray-lighter;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
- color: #444;
+ color: $color_gray-darker;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 92.308%;
font-weight: bold;
padding: 4px 13px 3px;
- -moz-text-shadow: 1px 1px 0 #fff;
- -webkit-text-shadow: 1px 1px 0 #fff;
- text-shadow: 1px 1px 0 #fff;
+ -moz-text-shadow: 1px 1px 0 $color_gray-lightest;
+ -webkit-text-shadow: 1px 1px 0 $color_gray-lightest;
+ text-shadow: 1px 1px 0 $color_gray-lightest;
white-space: nowrap;
- background: #EFEFEF;
+ background: $color_gray-lighter;
/* old browsers */
- background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%);
+ background: -moz-linear-gradient(top, #f5f5f5 0%, $color_gray-lighter 50%, #e5e5e5 51%, #dfdfdf 100%);
/* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, #efefef), color-stop(51%, #e5e5e5), color-stop(100%, #dfdfdf));
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, $color_gray-lighter), color-stop(51%, #e5e5e5), color-stop(100%, #dfdfdf));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfdfdf', GradientType=0);
@@ -300,7 +300,7 @@ th {
}
.button:hover {
border-color: #466899;
- color: #fff;
+ color: $color_gray-lightest;
text-decoration: none;
-moz-text-shadow: 1px 1px 0 #222;
-webkit-text-shadow: 1px 1px 0 #222;
@@ -321,27 +321,35 @@ th {
.newwindow {
text-align: center;
}
-#hd h1 {
- font-size: 250%;
- text-transform: uppercase;
-}
.header {
- padding: 2em !important;
+ padding: 1em 0 0 0 !important;
+ background-color: $color_gray-dark;
+ a:hover {
+ background: transparent;
+ }
+ .yui3-u-3-4 {
+ width: 100%;
+ }
+}
+.header .version {
+ display: block;
+ background: $color_gray-dark;
+ padding: 0 $gridUnit-smaller;
+ width: 100%;
+ text-align: right;
}
.header .version em {
display: block;
text-align: right;
- line-height: 60px;
- color: #444444;
+ line-height: 32px;
+ color: $color_gray-default;
+ margin-bottom: 0;
}
#classdocs .item {
- border-bottom: 1px solid #c3c3c3;
+ border-bottom: 1px solid $color_gray-light;
margin: 0 !important;
padding: 2em;
}
-#classdocs h2 {
- padding-top: 0 !important;
-}
#classdocs .item .params p,
#classdocs .item .returns p {
display: inline;
@@ -389,20 +397,38 @@ ul li p {
.apidocs .attrs .extends .attr,
.apidocs .events .extends .event {
font-weight: bold;
+ a {
+ font-weight: bold;
+ }
}
.apidocs .methods .extends .inherited,
.apidocs .properties .extends .inherited,
.apidocs .attrs .extends .inherited,
.apidocs .events .extends .inherited {
font-weight: normal;
+ a {
+ font-weight: normal;
+ }
}
+
#hd {
padding: 0 15px 1px 20px;
}
-#hd img {
- margin-right: 10px;
+#hd a {
+ display: block;
+ margin: 0 auto;
vertical-align: middle;
+ text-align: center;
+ img {
+ display: inline-block;
+ height: 60px;
+ margin-bottom: $gridUnit-small;
+ }
+}
+#hd a:hover {
+ background: transparent;
}
+
/* -- API Docs CSS ---------------------------------------------------------- */
/*
This file is organized so that more generic styles are nearer the top, and more
@@ -425,239 +451,227 @@ specific tabview, see the other sections below.
visibility: visible;
}
.apidocs .tabview .yui3-tabview-panel {
- background: #f3f3f3;
- padding: 1em;
- border-radius: 0 0 1em 1em !important;
- border: 1px solid #c3c3c3 !important;
+ padding: 0;
}
/* -- Generic Content Styles ------------------------------------------------ */
-/* Headings */
-h2,
-h3,
-h4,
-h5,
-h6 {
- border: none;
- color: #30418C;
- font-weight: bold;
- text-decoration: none;
-}
+
.link-docs {
float: right;
font-size: 15px;
margin: 4px 4px 6px;
padding: 6px 30px 5px;
}
-.apidocs {
- zoom: 1;
-}
+
/* Generic box styles. */
.apidocs .box {
- border: 1px solid;
- border-radius: 3px;
margin: 1em 0;
padding: 0 1em;
}
/* A flag is a compact, capsule-like indicator of some kind. It's used to
indicate private and protected items, item return types, etc. in an
attractive and unobtrusive way. */
-.apidocs .flag {
- background: #444444;
- border-radius: 3px;
- color: #fff;
- font-size: 11px;
- margin: 0 0.5em;
- padding: 4px;
- position: relative;
- top: -2px;
-}
-/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
-.apidocs .meta {
- border: none;
- border-top: 1px solid #c3c3c3;
- color: #555;
- font-size: 11px;
- padding: 1em 0;
-}
-.apidocs .meta p {
- margin: 0;
-}
-/* Deprecation warning. */
-.apidocs .box.deprecated,
-.apidocs .flag.deprecated {
- background: #fdac9f;
- border: 1px solid #fd7775;
-}
-.apidocs .box.deprecated p {
- margin: 0.5em 0;
-}
-.apidocs .flag.deprecated {
- color: #444444;
-}
-/* Module/Class intro description. */
-.apidocs .intro {
- background: none;
- border: none;
- padding: 0 !important;
-}
-/* Loading spinners. */
-#bd.loading .apidocs,
-#api-list.loading .yui3-tabview-panel {
- background: #ffffff url(../img/spinner.gif) no-repeat center 70px;
- min-height: 150px;
-}
-#bd.loading .apidocs .content,
-#api-list.loading .yui3-tabview-panel .apis {
- display: none;
-}
-.apidocs .no-visible-items {
- color: #666;
-}
-/* Generic inline list. */
-.apidocs ul.inline {
- display: inline;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-.apidocs ul.inline li {
- display: inline;
-}
-/* Comma-separated list. */
-.apidocs ul.commas li:after {
- content: ',';
-}
-.apidocs ul.commas li:last-child:after {
- content: '';
-}
-/* Keyboard shortcuts. */
-kbd .cmd {
- font-family: Monaco, Helvetica;
-}
-/* -- Generic Access Level styles ------------------------------------------- */
-.apidocs .item.protected,
-.apidocs .item.private,
-.apidocs .index-item.protected,
-.apidocs .index-item.deprecated,
-.apidocs .index-item.private {
- display: none;
-}
-.show-deprecated .item.deprecated,
-.show-deprecated .index-item.deprecated,
-.show-protected .item.protected,
-.show-protected .index-item.protected,
-.show-private .item.private,
-.show-private .index-item.private {
- display: block;
-}
-.hide-inherited .item.inherited,
-.hide-inherited .index-item.inherited {
- display: none;
-}
-/* -- Generic Item Index styles --------------------------------------------- */
-.apidocs .index h3 {
- border-bottom: 1px solid #efefef;
- color: #444444;
- font-size: 13px;
- margin: 2em 0 0.6em;
- padding-bottom: 2px;
-}
-.apidocs .index .no-visible-items {
- margin-top: 2em;
-}
-.apidocs .index-list {
- border-color: #efefef;
+ .apidocs .flag {
+ background: transparentize($color_gray-darker, 0.9);
+ color: $color_gray-darker;
+ font-size: 11px;
+ margin: 0 0.5em;
+ padding: 4px;
+ position: relative;
+ top: 0;
+ }
+ /* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
+ .apidocs .meta {
+ color: $color_gray-default;
+ font-size: $fontSize-smallest;
+ padding: 1em 0;
+ }
+ .apidocs .meta p {
+ margin: 0;
+ }
+ .module-class {
+ font-size: $fontSize-smaller;
+ }
+ /* Deprecation warning. */
+ .apidocs .box.deprecated,
+ .apidocs .flag.deprecated {
+ background: $color_tweenjs-default-transparent;
+ border: 1px solid #fd7775;
+ p {
+ color: $color_gray-darkest;
+ }
+ }
+ .apidocs .box.deprecated p {
+ margin: 0.5em 0;
+ }
+ .apidocs .flag.deprecated {
+ color: $color_gray-darker;
+ }
+ /* Module/Class intro description. */
+ .apidocs .intro {
+ background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
+ border: medium none;
+ font-family: $fontFamily-secondary;
+ font-size: $fontSize-smaller;
+ line-height: $gridUnit-small;
+ padding: 0 !important;
+ }
+ /* Loading spinners. */
+ #bd.loading .apidocs,
+ #api-list.loading .yui3-tabview-panel {
+ background: $color_gray-lightest url(../img/spinner.gif) no-repeat center 70px;
+ min-height: 150px;
+ }
+ #bd.loading .apidocs .content,
+ #api-list.loading .yui3-tabview-panel .apis {
+ display: none;
+ }
+ .apidocs .no-visible-items {
+ color: $color_gray-default;
+ }
+ /* Generic inline list. */
+ .apidocs ul.inline {
+ display: inline;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ .apidocs ul.inline li {
+ display: inline;
+ }
+ /* Comma-separated list. */
+ .apidocs ul.commas li:after {
+ content: ',';
+ font-size: $fontSize-smaller;
+ }
+ .apidocs ul.commas li:last-child:after {
+ content: '';
+ }
+ /* Keyboard shortcuts. */
+ kbd .cmd {
+ font-family: $fontFamily-monospace;
+ }
+ /* -- Generic Access Level styles ------------------------------------------- */
+ .apidocs .item.protected,
+ .apidocs .item.private,
+ .apidocs .index-item.protected,
+ .apidocs .index-item.deprecated,
+ .apidocs .index-item.private {
+ display: none;
+ }
+ .show-deprecated .item.deprecated,
+ .show-deprecated .index-item.deprecated,
+ .show-protected .item.protected,
+ .show-protected .index-item.protected,
+ .show-private .item.private,
+ .show-private .index-item.private {
+ display: block;
+ }
+ .hide-inherited .item.inherited,
+ .hide-inherited .index-item.inherited {
+ display: none;
+ }
+ /* -- Generic Item Index styles --------------------------------------------- */
+ .apidocs .index h3 {
+ border-bottom: 1px solid $color_gray-light;
+ color: $color_gray-darker;
+ font-size: 13px;
+ margin: 1em 0 0.6em;
+ padding-bottom: 2px;
+ }
+ .apidocs .index .no-visible-items {
+ margin-top: 2em;
+ }
+ .apidocs .index-list {
+ border-color: $color_gray-lighter;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ -moz-column-count: 4;
+ -moz-column-gap: 10px;
+ -moz-column-width: 170px;
+ -ms-column-count: 4;
+ -ms-column-gap: 10px;
+ -ms-column-width: 170px;
+ -o-column-count: 4;
+ -o-column-gap: 10px;
+ -o-column-width: 170px;
+ -webkit-column-count: 4;
+ -webkit-column-gap: 10px;
+ -webkit-column-width: 170px;
+ column-count: 4;
+ column-gap: 10px;
+ column-width: 170px;
+ }
+ .apidocs .no-columns .index-list {
+ -moz-column-count: 1;
+ -ms-column-count: 1;
+ -o-column-count: 1;
+ -webkit-column-count: 1;
+ column-count: 1;
+ }
+ .apidocs .index-item {
+ white-space: nowrap;
+ }
+ .apidocs .index-item .flag {
+ background: none;
+ border: none;
+ color: #afafaf;
+ display: inline;
+ margin: 0 0 0 0.2em;
+ padding: 0;
+ }
+ /* -- Generic API item styles ----------------------------------------------- */
+ .apidocs .args {
+ display: inline;
+ margin: 0 0.5em;
+ }
+ .apidocs .flag.chainable {
+ background: #46ca3b;
+ }
+ .apidocs .flag.protected {
+ background: #9b86fc;
+ }
+ .apidocs .flag.private {
+ background: #fd6b1b;
+ }
+ .apidocs .flag.async {
+ background: $color_gray-darker;
+ }
+ .apidocs .flag.required {
+ background: #e60923;
+ }
+ .apidocs .item {
+ border-bottom: 1px solid $color_gray-lighter;
+ margin: 1.5em 0 2em;
+ padding-bottom: 2em;
+ }
+ .apidocs .item .description p,
+ .apidocs .item pre.code {
+ margin: 1em 0 0;
+ }
+ .apidocs .item .description {
+ font-size: $fontSize-smaller;
+ }
+ .apidocs .item .meta {
+ background: none;
+ border: none;
+ padding: 0;
+ }
+ .apidocs .item .name {
+ display: inline;
+ font-size: 14px;
+ }
+ .apidocs .item .type,
+ .apidocs .item .type a,
+ .apidocs .returns-inline {
+ //color: $color_gray-default;
+ text-decoration: none;
font-size: 12px;
- list-style: none;
- margin: 0;
- padding: 0;
- -moz-column-count: 4;
- -moz-column-gap: 10px;
- -moz-column-width: 170px;
- -ms-column-count: 4;
- -ms-column-gap: 10px;
- -ms-column-width: 170px;
- -o-column-count: 4;
- -o-column-gap: 10px;
- -o-column-width: 170px;
- -webkit-column-count: 4;
- -webkit-column-gap: 10px;
- -webkit-column-width: 170px;
- column-count: 4;
- column-gap: 10px;
- column-width: 170px;
-}
-.apidocs .no-columns .index-list {
- -moz-column-count: 1;
- -ms-column-count: 1;
- -o-column-count: 1;
- -webkit-column-count: 1;
- column-count: 1;
-}
-.apidocs .index-item {
- white-space: nowrap;
-}
-.apidocs .index-item .flag {
- background: none;
- border: none;
- color: #afafaf;
- display: inline;
- margin: 0 0 0 0.2em;
- padding: 0;
-}
-/* -- Generic API item styles ----------------------------------------------- */
-.apidocs .args {
- display: inline;
- margin: 0 0.5em;
-}
-.apidocs .flag.chainable {
- background: #46ca3b;
-}
-.apidocs .flag.protected {
- background: #9b86fc;
-}
-.apidocs .flag.private {
- background: #fd6b1b;
-}
-.apidocs .flag.async {
- background: #356de4;
-}
-.apidocs .flag.required {
- background: #e60923;
-}
-.apidocs .item {
- border-bottom: 1px solid #efefef;
- margin: 1.5em 0 2em;
- padding-bottom: 2em;
-}
-.apidocs .item h4,
-.apidocs .item h5,
-.apidocs .item h6 {
- color: #444444;
- font-family: inherit;
- font-size: 100%;
-}
-.apidocs .item .description p,
-.apidocs .item pre.code {
- margin: 1em 0 0;
-}
-.apidocs .item .meta {
- background: none;
- border: none;
- padding: 0;
-}
-.apidocs .item .name {
- display: inline;
- font-size: 14px;
-}
-.apidocs .item .type,
-.apidocs .item .type a,
-.apidocs .returns-inline {
- color: #555;
}
.apidocs .item .type,
.apidocs .returns-inline {
- font-size: 11px;
+ font-size: 12px;
margin: 0 0 0 0;
}
.apidocs .item .type a {
@@ -675,16 +689,22 @@ kbd .cmd {
.apidocs .param {
margin-bottom: 1em;
}
+.apidocs .param-description {
+ font-size: $fontSize-smaller;
+ code {
+ font-size: $fontSize-smallest
+ }
+}
.apidocs .param .type,
.apidocs .param .type a {
- color: #666;
+ //color: $color_gray-default;
}
.apidocs .param .type {
margin: 0 0 0 0.5em;
*margin-left: 0.5em;
}
.apidocs .param-name {
- font-weight: bold;
+ // font-weight: bold;
}
/* -- Item "Emits" block ---------------------------------------------------- */
.apidocs .item .emits {
@@ -694,7 +714,7 @@ kbd .cmd {
/* -- Item "Returns" block -------------------------------------------------- */
.apidocs .item .returns .type,
.apidocs .item .returns .type a {
- font-size: 100%;
+ font-size: 12px;
margin: 0;
}
/* -- Class Constructor block ----------------------------------------------- */
@@ -710,6 +730,11 @@ kbd .cmd {
overflow: visible;
padding: 0;
}
+pre.prettyprint {
+ border-top: inherit;
+ border-right: inherit;
+ border-bottom: inherit;
+}
.apidocs .L0,
.apidocs .L1,
.apidocs .L2,
@@ -736,7 +761,7 @@ kbd .cmd {
}
#api-tabview-filter,
#api-tabview-panel {
- background: #f3f3f3;
+ background: $color_gray-lighter;
border: none !important;
}
#api-tabview-filter {
@@ -775,44 +800,39 @@ kbd .cmd {
/*#api-options label { margin-right: 0.6em; }*/
/* -- API list -------------------------------------------------------------- */
#api-list {
- margin-top: -2em;
- *zoom: 1;
+ margin-top: 0em;
}
#api-modules {
- border-bottom: 1px solid #c3c3c3;
+ background-color: $color_gray-light
}
.apis {
font-size: 12px;
line-height: 1.4;
list-style: none;
margin: 0;
- padding: 0.5em 0 0.5em 0.4em;
+ padding: 0 0 0 0.4em;
}
.apis a {
- border: 1px solid transparent;
display: block;
+ font-size: 1.3rem;
+ font-weight: 700;
margin: 0 0 0 -4px;
- padding: 0.4em;
+ padding: 0.1rem 1.4em;
text-decoration: none;
- _border: none;
- _display: inline;
- color: #444444 !important;
-}
-.apis a:hover,
-.apis a:focus {
- background: #444444;
- color: white !important;
- border-radius: 3px;
- color: #444444;
- outline: none;
+}
+#api-modules.apis a {
+ font-size: $fontSize-smaller;
+}
+.apis li {
+ margin: 0;
}
.api-list-item a:hover,
.api-list-item a:focus {
font-weight: bold;
- text-shadow: 1px 1px 1px #fff;
+ text-shadow: 1px 1px 1px $color_gray-lightest;
}
.apis .message {
- color: #888;
+ color: $color_gray-light;
}
.apis .result a {
padding: 3px 5px 2px;
@@ -825,34 +845,94 @@ kbd .cmd {
font-weight: bold;
}
/* -- YUI Overrides -------------------------------------------------------------- */
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label {
+.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
border: none !important;
+ &::after {
+ display: none !important;
+ }
}
.yui3-skin-sam .yui3-tab-label {
padding: 1em !important;
border: none !important;
background: none !important;
- background-color: #c3c3c3 !important;
+ background-color: $color_gray-light !important;
}
.yui3-skin-sam .yui3-tab-label:hover {
- background-color: #444444 !important;
- color: white !important;
-}
-/* Important Library Specifics, find and replace
- @color-CreateJS: #e7841d;
- @color-EaselJS: #3399ff;
- @color-TweenJS: #f12528;
- @color-SoundJS: #8765d6;
- @color-PreloadJS: #bb2ee5;
- @color-Zoe: #00b224;
- */
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label,
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:focus,
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:hover {
- background: none !important;
- border: none !important;
- background-color: #3399ff !important;
+ background-color: $color_gray-darker !important;
+ color: $color_gray-lightest !important;
}
-.yui3-skin-sam .yui3-tabview-list {
- border-bottom: 5px solid #3399ff !important;
+
+.yui3-tab-panel-selected {
+ padding: $gridUnit-smaller;
+}
+div#hd.yui3-g.header {
+ word-spacing: normal;
+ letter-spacing: normal;
+}
+
+// Syntax Highlighting
+.pln {
+ color: $color_gray-lighter;
+}
+.com {
+ color: lighten($color_gray-dark, 10%);
+}
+.kwd {
+ color: $color_easeljs-default;
+}
+.str {
+ color: $color_createjs-default;
+}
+.typ {
+ color: $color_tweenjs-default;
+}
+.lit {
+ color: $color_preloadjs-default;
+}
+.pun,
+.opn,
+.clo {
+ color: $color_soundjs-default;
+}
+
+ol.linenums {
+ position: relative;
+ padding-left: 60px;
+ &::before {
+ content: '';
+ position: absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ width: 5.5rem;
+ background-color: $color_gray-dark;;
+ }
+ .file-line {
+ position: relative;
+ z-index: 2;
+ color:$color_gray-darkest;
+ }
+}
+
+.yui3-skin-sam .yui3-tab-label,
+.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
+ font-size: $fontSize-smallest;
+ &::after {
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ }
+}
+
+ol.linenums .file-line {
+ color: $color_gray-light;
+}
+
+.apidocs .file pre.code, #doc .apidocs .file pre.prettyprint {
+ overflow-x: auto;
+ background-color: $color_gray-darkest;
+}
+#doc {
+ overflow-x: hidden;
}
diff --git a/build/createjsTheme/assets/scss/settings/breakpoint.scss b/build/createjsTheme/assets/scss/settings/breakpoint.scss
new file mode 100644
index 00000000..a11bdbd3
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/breakpoint.scss
@@ -0,0 +1,51 @@
+//*******************************************
+//
+// BREAKPOINT SETTINGS
+// Default breakpoint settings used by gBootstrap
+//
+// Contents
+// 1) GENERIC WIDTHS
+// 2) MAX-WIDTH
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// GENERIC WIDTHS
+//
+//*******************************************
+// Small Devices i.e. "Phones"
+//$bp_width-320: 320px;
+$bp_width-480: 480px;
+$bp_width-500: 500px;
+$bp_width-600: 600px;
+
+// Medium Devices i.e. "Tablets"
+//$bp_width-640: 640px;
+$bp_width-700: 700px;
+
+// iFrame width
+$bp_width-960: 960px;
+
+// Standard Devices i.e. "Laptops or Desktops"
+$bp_width-1024: 1024px;
+
+// Large Devices i.e. "Large Monitors"
+//$bp_width-1300: 1300px;
+//$bp_width-1400: 1400px;
+//$bp_width-1600: 1600px;
+//$bp_width-1700: 1700px;
+//$bp_width-2000: 2000px;
+
+
+
+//*******************************************
+//
+// MAX-WIDTH
+//
+//*******************************************
+$bp_width-max: 1140px;
+$bp_width-1300: 1300px;
+$bp_width-1600: 1600px;
diff --git a/build/createjsTheme/assets/scss/settings/color.scss b/build/createjsTheme/assets/scss/settings/color.scss
new file mode 100644
index 00000000..280a72f7
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/color.scss
@@ -0,0 +1,194 @@
+//*******************************************
+//
+// COLOR SETTINGS
+// Colors and brand gradients used in your project
+//
+// Contents
+// 1) createjs
+// 2) easeljs
+// 3) preloadjs
+// 4) soundjs
+// 5) tweenjs
+// 6) zoe
+// 7) notifications (green)
+// 8) grey
+// 9) grey transparent
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// createjs
+//
+//*******************************************
+$color_createjs-default: rgba(255, 210, 20, 1);
+.color-createjs {color: $color_createjs-default;}
+%color_createjs-gradient {
+ background: $color_createjs-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjI5ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ3MGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(255,242,157) 0%, rgb(255,215,15) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,242,157)), color-stop(100%,rgb(255,215,15)));
+ background: -webkit-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: -o-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: -ms-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: linear-gradient(to bottom, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff29d', endColorstr='#ffd70f',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// easeljs
+//
+//*******************************************
+$color_easeljs-default: rgba(73, 207, 239, 1);
+%color_easeljs-gradient {
+ background: $color_easeljs-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3ZjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0OWNmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(167,243,242) 0%, rgb(73,207,239) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(167,243,242)), color-stop(100%,rgb(73,207,239)));
+ background: -webkit-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: -o-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: -ms-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: linear-gradient(to bottom, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7f3f2', endColorstr='#49cfef',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// preloadjs
+//
+//*******************************************
+$color_preloadjs-default: rgba(230,115,222,1);
+%color_preloadjs-gradient {
+ background: $color_preloadjs-default;
+ background: rgb(240,170,220);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWFkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNjczZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(240,170,220,1) 0%, rgba(230,115,222,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,170,220,1)), color-stop(100%,rgba(230,115,222,1)));
+ background: -webkit-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: -o-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: -ms-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: linear-gradient(to bottom, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0aadc', endColorstr='#e673de',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// soundjs
+//
+//*******************************************
+$color_soundjs-default: rgba(37,229,130,1);
+%color_soundjs-gradient {
+ background: $color_soundjs-default;
+ background: rgb(97,232,176);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYxZThiMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNWU1ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(97,232,176,1) 0%, rgba(37,229,130,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,232,176,1)), color-stop(100%,rgba(37,229,130,1)));
+ background: -webkit-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: -o-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: -ms-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: linear-gradient(to bottom, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61e8b0', endColorstr='#25e582',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// tweenjs
+//
+//*******************************************
+$color_tweenjs-default: rgba(255,97,106,1);
+%color_tweenjs-gradient {
+ background: $color_tweenjs-default;
+ background: rgb(255,125,149);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2Q5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjYxNmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(255,125,149,1) 0%, rgba(255,97,106,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,125,149,1)), color-stop(100%,rgba(255,97,106,1)));
+ background: -webkit-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: -o-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: -ms-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: linear-gradient(to bottom, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d95', endColorstr='#ff616a',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// zoe
+//
+//*******************************************
+$color_zoe-default: rgba(208, 238, 55, 1);
+%color_zoe-gradient {
+ background: $color_zoe-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UxZWUxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZmVlMzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(225,238,27) 0%, rgb(191,238,55) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(225,238,27)), color-stop(100%,rgb(191,238,55)));
+ background: -webkit-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: -o-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: -ms-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: linear-gradient(to bottom, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ee1b', endColorstr='#bfee37',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// notifications (green)
+//
+//*******************************************
+$color_green-default: rgba(63, 185, 6, 1);
+
+
+
+//*******************************************
+//
+// grey
+//
+//*******************************************
+$color_gray-darkest: rgba( 55, 66, 82, 1 );
+$color_gray-darker: rgba( 64, 82, 97, 1 );
+$color_gray-dark: rgba( 76, 101, 117, 1 );
+$color_gray-default: rgba( 156, 166, 179, 1 );
+$color_gray-light: rgba( 201, 209, 216, 1 );
+$color_gray-lighter: rgba( 236, 238, 244, 1 );
+$color_gray-lightest: rgba( 250, 252, 255, 1 );
+
+$color_gray-backToTop: rgba( 52, 59, 78, 1.0 );
+
+
+
+//*******************************************
+//
+// grey transparent/gradients
+//
+//*******************************************
+$color_gray-darker-transparent: rgba( 64, 82, 97, 0 );
+$color_gray-lighter-transparent: rgba( 236, 238, 244, 0 );
+
+$color_gray-darkest-translucent: rgba( 55, 66, 82, 0.7 );
+$color_gray-dark-translucent-high: rgba( 76, 101, 117, 0.7 );
+$color_gray-dark-translucent-low: rgba( 76, 101, 117, 0.4 );
+$color_tweenjs-default-transparent: rgba(255,97,106,0.5);
+
+%color_gray-dark-gradient {
+ background: $color_gray-dark;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNjU3NSIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRjNjU3NSIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+ background: -moz-linear-gradient(top, rgba(76,101,117,0.4) 0%, rgba(76,101,117,0.9) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,101,117,0.4)), color-stop(100%,rgba(76,101,117,0.9)));
+ background: -webkit-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: -o-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: -ms-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: linear-gradient(to bottom, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#664c6575', endColorstr='#e64c6575',GradientType=0 );
+}
diff --git a/build/createjsTheme/assets/scss/settings/fonts.scss b/build/createjsTheme/assets/scss/settings/fonts.scss
new file mode 100644
index 00000000..7992d9bf
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/fonts.scss
@@ -0,0 +1,105 @@
+//*******************************************
+//
+// FONT SETTINGS
+// families, sizes, and REM value used in your project
+//
+// Contents
+// 1) ROOT ELEMENT (REM)
+// 2) FAMILIES
+// 3) SIZE RAMP
+// 4) MODULAR SCALE
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// REM VALUE
+// Controls root element font size(rem) applied to
+//
+//*******************************************
+$fontSize-root: 9px; // (1rem)
+
+
+
+//*******************************************
+//
+// FAMILIES
+// Define your font families here
+//
+//*******************************************
+/*
+
+
+*/
+
+// Default Font
+$fontFamily-default: 'effra', sans-serif;
+// Weights: 400, 400 italic, 700
+
+
+// Secondary Font
+$fontFamily-secondary: 'Proxima Nova', sans-serif;
+// Weights: 400, 500
+
+// Monospace Font
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext");
+$fontFamily-monospace: 'Source Code Pro', monospace;
+// Weights: 400
+
+
+
+//*******************************************
+//
+// SIZE RAMP
+// Define your font sizes below
+//
+//*******************************************
+$fontSize-smallest: 1.5rem;
+$fontSize-smaller: 1.6rem;
+$fontSize-small: 2.2rem;
+$fontSize-default: 2.8rem;
+$fontSize-large: 3.8rem;
+$fontSize-larger: 5rem;
+$fontSize-largest: 9rem;
+$fontSize-display: 12rem;
+
+
+
+//*******************************************
+//
+// MODULAR SCALE
+//
+// 16px @ 1:1.333
+//
+// Pixels Ems
+// 1,192.803 74.55
+// 894.826 55.927
+// 671.287 41.955
+// 503.591 31.474
+// 377.788 23.612
+// 283.412 17.713
+// 212.612 13.288
+// 159.499 9.969
+// 119.654 7.478
+// 89.763 5.61
+// 67.339 4.209
+// 50.517 3.157
+// 37.897 2.369
+// 28.430 1.777
+// 21.328 1.333
+// 16.000 1
+// 12.003 0.75
+// 9.005 0.563
+// 6.755 0.422
+// 5.068 0.317
+// 3.802 0.238
+// 2.852 0.178
+// 2.140 0.134
+// 1.605 0.1
+// 1.204 0.075
+//
+// (source: http://modularscale.com/)
+//
+//*******************************************
diff --git a/build/createjsTheme/assets/scss/settings/layout.scss b/build/createjsTheme/assets/scss/settings/layout.scss
new file mode 100644
index 00000000..8284e2a1
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/layout.scss
@@ -0,0 +1,24 @@
+//*******************************************
+//
+// LAYOUT SETTINGS
+// Default grid units settings used for layout by gBootstrap
+//
+// Sections
+// 1) GRID UNITS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// GRID UNITS
+//
+//*******************************************
+$gridUnit-smallest: 0.9rem;
+$gridUnit-smaller: 1.6rem;
+$gridUnit-small: 2.1rem;
+$gridUnit-default: 2.8rem;
+$gridUnit-large: 3.8rem;
+$gridUnit-larger: 5rem;
+$gridUnit-largest: 9rem;
\ No newline at end of file
diff --git a/build/createjsTheme/assets/scss/settings/path.scss b/build/createjsTheme/assets/scss/settings/path.scss
new file mode 100644
index 00000000..ab5da454
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/path.scss
@@ -0,0 +1,29 @@
+//*******************************************
+//
+// PATH SETTINGS
+// Variables for defining file paths in your project
+//
+// Contents
+// 1) MY PROJECT
+// 2) PROJECT ASSETS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// MY PROJECT
+//
+//*******************************************
+$path-myProject: "../../";
+
+
+
+//*******************************************
+//
+// PROJECT ASSETS
+//
+//*******************************************
+$path-fonts: $path-myProject + "assets/fonts/";
+$path-images: $path-myProject + "assets/images/";
diff --git a/build/createjsTheme/assets/scss/settings/transition.scss b/build/createjsTheme/assets/scss/settings/transition.scss
new file mode 100644
index 00000000..ca4aef4a
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/transition.scss
@@ -0,0 +1,57 @@
+//*******************************************
+//
+// TRANSITION SETTINGS
+// Default transition settings used by gBootstrap
+//
+// Contents
+// 1) DURATIONS
+// 2) EASING
+// 3) COMBINATIONS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// DURATIONS
+//
+//*******************************************
+$duration-short: 0.1s;
+$duration-default: 0.2s;
+$duration-long: 0.4s;
+$duration-longer: 0.6s;
+// $duration-longest: 0.8s;
+
+
+//*******************************************
+//
+// EASING
+//
+//*******************************************
+$ease-default: cubic-bezier( 0.6, 0.18, 0.32, 0.95 );
+$ease-inOut: cubic-bezier( 0.55, 0, 0.45, 1 );
+$ease-out: cubic-bezier( 0.4, 0.18, 0.32, 1 );
+
+
+
+//*******************************************
+//
+// COMBINATIONS
+//
+//*******************************************
+$transition-short-default: $duration-short $ease-default;
+$transition-short-out: $duration-short $ease-out;
+$transition-short-inOut: $duration-short $ease-inOut;
+
+$transition-default-default: $duration-default $ease-default;
+$transition-default-inOut: $duration-default $ease-inOut;
+$transition-default-out: $duration-default $ease-out;
+
+$transition-long-default: $duration-long $ease-default;
+$transition-long-inOut: $duration-long $ease-inOut;
+$transition-long-out: $duration-long $ease-out;
+
+$transition-longer-default: $duration-longer $ease_default;
+$transition-longer-out: $duration-longer $ease_out;
+
diff --git a/build/createjsTheme/assets/scss/utilities/breakpoint.scss b/build/createjsTheme/assets/scss/utilities/breakpoint.scss
new file mode 100755
index 00000000..8f4f4410
--- /dev/null
+++ b/build/createjsTheme/assets/scss/utilities/breakpoint.scss
@@ -0,0 +1,144 @@
+//*******************************************
+//
+// BREAKPOINT UTILITY
+//
+// Description
+// - Utilities for creating breakpoints
+//
+// Contents
+// 1) WIDTH
+// 2) HEIGHT
+// 3) ASPEECT RATIO
+// 4) ORIENTATION
+// 5) PIXEL DENSITY
+//
+// Notes
+// - Default prefix favors mobile and portrait first design principles.
+//
+// Acknowledgements:
+// Chris Coyier: http://css-tricks.com/media-queries-sass-3-2-and-codekit/
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// WIDTH OR HEIGHT
+//
+// Notes
+// - also accepts orientation, and prefix params (min-, max-, min-device-, max-device-)
+// - supports end range
+//
+//*******************************************
+
+@mixin bp ($bp, $prefix: min-, $bpEndRange: null, $orientation: null, $direction: width, $endRangePrefix: max-) {
+
+ // Define focus direction of breakpoint statement (width or height)
+ @if $direction == "height" {
+ $prefix: $prefix + "height: ";
+ } @else {
+ $prefix: $prefix + "width: ";
+ }
+
+ // Re-define orientation variable if value exists
+ @if $orientation != null {
+ $orientation: "orientation:" + $orientation;
+ }
+
+ // Output statement for single condition value (includes orientation if applied)
+ @if $bpEndRange == null {
+
+ @if $orientation == null { // Checks to see if there is an orientation value
+ @media ($prefix $bp) { @content };
+ } @else {
+ @media ($prefix $bp) and ($orientation) { @content; }
+ }
+
+ // Output statement for end range condition value (includes orientation if applied)
+ } @else {
+
+ // Define focus direction of breakpoint end range statement (width or height)
+ @if $direction == "height" {
+ $endRangePrefix: $endRangePrefix + "height: ";
+ } @else {
+ $endRangePrefix: $endRangePrefix + "width: ";
+ }
+
+ @if $orientation == null { // Checks to see if there is an orientation value
+ @media ($prefix $bp) and ($endRangePrefix $bpEndRange) { @content };
+ } @else {
+ @media ($prefix $bp) and ($endRangePrefix $bpEndRange) and ($orientation) { @content; }
+ }
+
+ }
+}
+
+
+//*******************************************
+//
+// ASPECT RATIO
+//
+// Notes
+// - $aspectRatio syntax '16/9'
+//
+//*******************************************
+// Aspect Ratio with width limitation
+@mixin bpAspectRatio ($aspectRatio: null, $width: null) {
+ @if $aspectRatio != null {
+ @if $width == null {
+ @media (max-aspect-ratio: $aspectRatio) { @content; }
+ } @else {
+ @media (max-aspect-ratio: $aspectRatio) and (min-width: $width) { @content; }
+ }
+ }
+}
+
+
+
+//*******************************************
+//
+// ORIENTATION
+//
+//*******************************************
+@mixin bpOrientation ($orientation: portrait, $width: null, $prefix: min-) {
+ $width-prefix: $prefix + "width: ";
+ @if $width == null {
+ @media (orientation: $orientation) { @content; }
+ } @else {
+ @media (orientation: $orientation) and ($width-prefix $width) { @content; }
+ }
+}
+
+
+
+//*******************************************
+//
+// PIXEL DENSITIES
+//
+// Common Device Pixel Ratios
+// 1.25, 1.3, 1.5, 2
+//
+//*******************************************
+@mixin bpPixelDensity ($pd: 2) {
+ // 1.25
+ @if $pd == 1.25 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 120dpi) { @content; }
+ }
+ // 1.3
+ @if $pd == 1.3 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 124.8dpi) { @content; }
+ }
+ // 1.5
+ @if $pd == 1.5 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 144dpi) { @content; }
+ }
+ // 2
+ @if $pd == 2 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 192dpi) { @content; }
+ }
+}
\ No newline at end of file
diff --git a/build/createjsTheme/assets/scss/utilities/clearfix.scss b/build/createjsTheme/assets/scss/utilities/clearfix.scss
new file mode 100644
index 00000000..cf99750a
--- /dev/null
+++ b/build/createjsTheme/assets/scss/utilities/clearfix.scss
@@ -0,0 +1,28 @@
+//*******************************************
+//
+// CLEAR FIX UTILITIES
+//
+// Details
+// - Utility for clearing floats
+//
+// Contents
+// 1) CLEARFIX
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// CLEARFIX
+//
+//*******************************************
+%clearfix {
+ zoom: 1; // For IE 6/7 (trigger hasLayout)
+ &::before,
+ &::after {
+ content: "";
+ display: table;
+ }
+ &::after { clear: both; }
+}
diff --git a/build/createjsTheme/layouts/main.handlebars b/build/createjsTheme/layouts/main.handlebars
index b9af452f..71f49b0c 100755
--- a/build/createjsTheme/layouts/main.handlebars
+++ b/build/createjsTheme/layouts/main.handlebars
@@ -35,7 +35,7 @@
{{>options}}
-
+
diff --git a/build/createjsTheme/partials/props.handlebars b/build/createjsTheme/partials/props.handlebars
index 8385ad17..a94b44d9 100755
--- a/build/createjsTheme/partials/props.handlebars
+++ b/build/createjsTheme/partials/props.handlebars
@@ -18,6 +18,10 @@
static
{{/if}}
+ {{#if readonly}}
+ readonly
+ {{/if}}
+
{{#if overwritten_from}}
Inherited from
diff --git a/build/package.json b/build/package.json
index 34354974..380e4973 100644
--- a/build/package.json
+++ b/build/package.json
@@ -1,18 +1,20 @@
{
- "name": "PreloadJS",
- "version": "0.4.1",
- "description": "PreloadJS Docs",
- "url": "http://www.createjs.com/#!/PreloadJS",
- "logo": "assets/docs-icon-PreloadJS.png",
- "devDependencies": {
- "grunt": "~0.4.1",
- "grunt-contrib-concat": "~0.3.0",
- "grunt-contrib-uglify": "~0.2.1",
- "grunt-contrib-yuidoc": "~0.4.0",
- "grunt-contrib-compress": "~0.5.0",
- "grunt-contrib-copy": "~0.4.1",
- "lodash": "~0.9.0",
- "grunt-hub":""
- },
- "engine": "node >= 0.10.22"
+ "name": "PreloadJS",
+ "version": "1.0.0",
+ "description": "PreloadJS Docs",
+ "url": "http://www.createjs.com/preloadjs",
+ "logo": "assets/docs-icon-PreloadJS.png",
+ "repository": "git@github.com:CreateJS/PreloadJS.git",
+ "devDependencies": {
+ "grunt": "~0.4.5",
+ "grunt-contrib-concat": "~0.5.0",
+ "grunt-contrib-uglify": "~0.6.0",
+ "grunt-contrib-yuidoc": "~0.5.2",
+ "grunt-contrib-compress": "~0.12.0",
+ "grunt-contrib-copy": "~0.7.0",
+ "grunt-contrib-sass": "^0.8.1",
+ "grunt-contrib-clean":"^0.4.0",
+ "lodash": "~0.9.2"
+ },
+ "engine": "node >= 0.10.22"
}
diff --git a/build/tasks/updateversion.js b/build/tasks/updateversion.js
index 9a7ae8d3..eec62239 100644
--- a/build/tasks/updateversion.js
+++ b/build/tasks/updateversion.js
@@ -1,36 +1,36 @@
module.exports = function (grunt) {
grunt.registerMultiTask('updateversion', function() {
- var data = this.data;
- var file = data.file;
- var version = data.version;
+ var newValues = {date:new Date().toUTCString(), version:this.data.version};
+ replaceMetaData(this.data.file, newValues);
+ });
+ grunt.registerMultiTask('clearversion', function() {
+ // Don't clear the version when building everything (the combined build will run this after its done)
+ var buildArgs = grunt.config("buildArgs");
+ if (buildArgs && buildArgs[0] == "all") {
+ return;
+ }
+ replaceMetaData(this.data.file, {date:"", version:""});
+ });
+
+ function replaceMetaData(file, values) {
if (!grunt.file.exists(file)) {
grunt.log.error(file+' not found.');
return;
}
- var contents = grunt.file.read(file);
- var pattern = /\/\*version\*\/"([\w.]+)"/g;
-
- var newValues = {date:new Date().toUTCString(), version:version};
- var newFile = replaceMetaData(contents, newValues);
- grunt.file.write(file, newFile);
- });
+ var str = grunt.file.read(file);
- function replaceMetaData(data, values) {
- var finalResult = "";
- var newData = data;
for(var n in values) {
- var pattern = new RegExp("(\/\\*"+n+"\\*\/\")(.*)(\";)", "i");
- var result = pattern.test(data);
+ var pattern = new RegExp("(\/\\*="+n+"\\*\/\")(.*)(\";)", "g");
+ var result = pattern.test(str);
if (result) {
- finalResult = newData.replace(pattern, "$1"+values[n]+"$3");
- newData = finalResult;
+ str = str.replace(pattern, "$1"+values[n]+"$3");
} else {
grunt.log.error("Error -- Unable to resolve value:"+ pattern);
}
}
- return finalResult;
+ grunt.file.write(file, str);
}
}
diff --git a/build/updates/README.md b/build/updates/README.md
new file mode 100644
index 00000000..ea33056c
--- /dev/null
+++ b/build/updates/README.md
@@ -0,0 +1,11 @@
+## Important ##
+
+The current YUIDocs does not support @readonly on properties (only attributes). This folder contains an updated
+`builder.js`, which injects this support.
+
+Copy `builder.js` into
+ > node_modules/grunt-contrib-yuidoc/node-modules/yuidocjs/lib
+
+Without this file, properties will not show the "readonly" flag.
+
+Last tested with YUIDocs 0.5.2
\ No newline at end of file
diff --git a/build/updates/builder.js b/build/updates/builder.js
new file mode 100644
index 00000000..63c8e6d7
--- /dev/null
+++ b/build/updates/builder.js
@@ -0,0 +1,1663 @@
+/*
+Copyright (c) 2011, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://yuilibrary.com/license/
+*/
+var marked = require('marked'),
+ fs = require('graceful-fs'),
+ noop = function () {},
+ path = require('path'),
+ TEMPLATE;
+
+/**
+* Takes the `JSON` data from the `DocParser` class, creates and parses markdown and handlebars
+based templates to generate static HTML content
+* @class DocBuilder
+* @module yuidoc
+*/
+
+YUI.add('doc-builder', function (Y) {
+ /*jshint onevar:false */
+
+ var fixType = Y.Lang.fixType,
+ print = function (items) {
+ var out = '
';
+
+ Y.each(items, function (i, k) {
+ out += '- ';
+ if (Y.Lang.isObject(i)) {
+ if (!i.path) {
+ out += k + '/' + print(i);
+ } else {
+ out += '' + k + '';
+ }
+ }
+ out += '
';
+ });
+
+ out += '
';
+ return out;
+ };
+
+ Y.Handlebars.registerHelper('buildFileTree', function (items) {
+ return print(items);
+ });
+
+ var DEFAULT_THEME = path.join(__dirname, '../', 'themes', 'default'),
+ themeDir = DEFAULT_THEME;
+
+ Y.DocBuilder = function (options, data) {
+ this.options = options;
+ if (options.helpers) {
+ this._addHelpers(options.helpers);
+ }
+ if (options.themedir) {
+ themeDir = options.themedir;
+ }
+
+ this.data = data;
+ Y.log('Building..', 'info', 'builder');
+ this.files = 0;
+ var self = this;
+
+ Y.Handlebars.registerHelper('crossLink', function (item, options) {
+ var str = '';
+ if (!item) {
+ item = '';
+ }
+ //console.log('CrossLink:', item);
+ if (item.indexOf('|') > 0) {
+ var parts = item.split('|'),
+ p = [];
+ Y.each(parts, function (i) {
+ p.push(self._parseCrossLink.call(self, i));
+ });
+ str = p.join(' | ');
+ } else {
+ str = self._parseCrossLink.call(self, item, false, options.fn(this));
+ }
+ return str;
+ });
+
+ Y.Handlebars.registerHelper('crossLinkModule', function (item, options) {
+ var str = item;
+ if (self.data.modules[item]) {
+ var content = options.fn(this);
+ if (content === "") {
+ content = item;
+ }
+ str = '' + content + '';
+ }
+ return str;
+ });
+
+ Y.Handlebars.registerHelper('crossLinkRaw', function (item) {
+ var str = '';
+ if (!item) {
+ item = '';
+ }
+ if (item.indexOf('|') > 0) {
+ var parts = item.split('|'),
+ p = [];
+ Y.each(parts, function (i) {
+ p.push(self._parseCrossLink.call(self, i, true));
+ });
+ str = p.join(' | ');
+ } else {
+ str = self._parseCrossLink.call(self, item, true);
+ }
+ return str;
+ });
+
+ this.cacheTemplates = true;
+ if (options.cacheTemplates === false) {
+ this.cacheTemplates = false;
+ }
+ };
+
+ Y.DocBuilder.prototype = {
+ /**
+ * Register a `Y.Handlebars` helper method
+ * @method _addHelpers
+ * @param {Object} helpers Object containing a hash of names and functions
+ */
+ _addHelpers: function (helpers) {
+ Y.log('Importing helpers: ' + helpers, 'info', 'builder');
+ helpers.forEach(function (imp) {
+ if (!Y.Files.exists(imp) || Y.Files.exists(path.join(process.cwd(), imp))) {
+ imp = path.join(process.cwd(), imp);
+ }
+ var h = require(imp);
+ Object.keys(h).forEach(function (name) {
+ Y.Handlebars.registerHelper(name, h[name]);
+ });
+ });
+ },
+ /**
+ * Wrapper around the Markdown parser so it can be normalized or even side stepped
+ * @method markdown
+ * @private
+ * @param {String} md The Markdown string to parse
+ * @return {HTML} The rendered HTML
+ */
+ markdown: function (md) {
+ var html = marked(md, this.options.markdown);
+ //Only reprocess if helpers were asked for
+ if (this.options.helpers || (html.indexOf('{{#crossLink') > -1)) {
+ //console.log('MD: ', html);
+ try {
+ // marked auto-escapes quotation marks (and unfortunately
+ // does not expose the escaping function)
+ html = html.replace(/"/g, "\"");
+ html = (Y.Handlebars.compile(html))({});
+ } catch (hError) {
+ //Remove all the extra escapes
+ html = html.replace(/\\{/g, '{').replace(/\\}/g, '}');
+ Y.log('Failed to parse Handlebars, probably an unknown helper, skipping..', 'warn', 'builder');
+ }
+ //console.log('HB: ', html);
+ }
+ return html;
+ },
+
+ /**
+ * Parse the item to be cross linked and return an HREF linked to the item
+ * @method _parseCrossLink
+ * @private
+ * @param {String} item The item to crossLink
+ * @param {Boolean} [raw=false] Do not wrap it in HTML
+ * @param {String} [content] crossLink helper content
+ */
+ _parseCrossLink: function (item, raw, content) {
+ var self = this;
+ var base = '../',
+ baseItem,
+ newWin = false,
+ className = 'crosslink';
+
+ item = fixType(item);
+
+ item = baseItem = Y.Lang.trim(item.replace('{', '').replace('}', ''));
+ //Remove Cruft
+ item = item.replace('*', '').replace('[', '').replace(']', '');
+ var link = false,
+ href;
+
+ if (self.data.classes[item]) {
+ link = true;
+ } else {
+ if (self.data.classes[item.replace('.', '')]) {
+ link = true;
+ item = item.replace('.', '');
+ }
+ }
+ if (self.options.externalData) {
+ if (self.data.classes[item]) {
+ if (self.data.classes[item].external) {
+ href = self.data.classes[item].path;
+ base = self.options.externalData.base;
+ className += ' external';
+ newWin = true;
+ link = true;
+ }
+ }
+ }
+
+ if (item.indexOf('/') > -1) {
+ //We have a class + method to parse
+ var parts = item.split('/'),
+ cls = parts[0],
+ method = parts[1],
+ type = 'method';
+
+ if (method.indexOf(':') > -1) {
+ parts = method.split(':');
+ method = parts[0];
+ type = parts[1];
+ if (type.indexOf('attr') === 0) {
+ type = 'attribute';
+ }
+ }
+
+ if (cls && method) {
+ if (self.data.classes[cls]) {
+ self.data.classitems.forEach(function (i) {
+ if (i.itemtype === type && i.name === method && i.class === cls) {
+ link = true;
+ baseItem = method;
+ var t = type;
+ if (t === 'attribute') {
+ t = 'attr';
+ }
+ href = Y.webpath(base, 'classes', cls + '.html#' + t + '_' + method);
+ }
+ });
+ }
+ }
+
+ }
+
+ if (item === 'Object' || item === 'Array') {
+ link = false;
+ }
+ if (!href) {
+ href = Y.webpath(base, 'classes', item + '.html');
+ if (base.match(/^https?:\/\//)) {
+ href = base + Y.webpath('classes', item + '.html');
+ }
+ }
+ if (!link && self.options.linkNatives) {
+ if (self.NATIVES && self.NATIVES[item]) {
+ href = self.NATIVES_LINKER(item);
+ if (href) {
+ className += ' external';
+ newWin = true;
+ link = true;
+ }
+ }
+ }
+ if (link) {
+ if (content !== undefined) {
+ content = content.trim();
+ }
+ if (!content) {
+ content = baseItem;
+ }
+ item = '' + content + '';
+ }
+ return (raw) ? href : item;
+ },
+ /**
+ * List of native types to cross link to MDN
+ * @property NATIVES
+ * @type Object
+ */
+ NATIVES: {
+ 'Array': 1,
+ 'Boolean': 1,
+ 'Date': 1,
+ 'decodeURI': 1,
+ 'decodeURIComponent': 1,
+ 'encodeURI': 1,
+ 'encodeURIComponent': 1,
+ 'eval': 1,
+ 'Error': 1,
+ 'EvalError': 1,
+ 'Function': 1,
+ 'Infinity': 1,
+ 'isFinite': 1,
+ 'isNaN': 1,
+ 'Math': 1,
+ 'NaN': 1,
+ 'Number': 1,
+ 'Object': 1,
+ 'parseFloat': 1,
+ 'parseInt': 1,
+ 'RangeError': 1,
+ 'ReferenceError': 1,
+ 'RegExp': 1,
+ 'String': 1,
+ 'SyntaxError': 1,
+ 'TypeError': 1,
+ 'undefined': 1,
+ 'URIError': 1,
+ 'HTMLElement': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'HTMLCollection': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'DocumentFragment': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'HTMLDocument': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/'
+ },
+ /**
+ * Function to link an external type uses `NATIVES` object
+ * @method NATIVES_LINKER
+ * @private
+ * @param {String} name The name of the type to link
+ * @return {String} The combined URL
+ */
+ NATIVES_LINKER: function (name) {
+ var url = 'https:/' + '/developer.mozilla.org/en/JavaScript/Reference/Global_Objects/';
+ if (this.NATIVES[name] !== 1) {
+ url = this.NATIVES[name];
+ }
+ return url + name;
+ },
+ /**
+ * Mixes the various external data soures together into the local data, augmenting
+ * it with flags.
+ * @method _mixExternal
+ * @private
+ */
+ _mixExternal: function () {
+ var self = this;
+ Y.log('External data received, mixing', 'info', 'builder');
+ self.options.externalData.forEach(function (exData) {
+
+ ['files', 'classes', 'modules'].forEach(function (k) {
+ Y.each(exData[k], function (item, key) {
+ item.external = true;
+ var file = item.name;
+ if (!item.file) {
+ file = self.filterFileName(item.name);
+ }
+
+ if (item.type) {
+ item.type = fixType(item.type);
+ }
+
+ item.path = exData.base + path.join(k, file + '.html');
+
+ self.data[k][key] = item;
+ });
+ });
+ Y.each(exData.classitems, function (item) {
+ item.external = true;
+ item.path = exData.base + path.join('files', self.filterFileName(item.file) + '.html');
+ if (item.type) {
+ item.type = fixType(item.type);
+ }
+ if (item.params) {
+ item.params.forEach(function (p) {
+ if (p.type) {
+ p.type = fixType(p.type);
+ }
+ });
+ }
+ if (item["return"]) {
+ item["return"].type = fixType(item["return"].type);
+ }
+ self.data.classitems.push(item);
+ });
+ });
+ },
+ /**
+ * Fetches the remote data and fires the callback when it's all complete
+ * @method mixExternal
+ * @param {Callback} cb The callback to execute when complete
+ * @async
+ */
+ mixExternal: function (cb) {
+ var self = this,
+ info = self.options.external;
+
+ if (!info) {
+ cb();
+ return;
+ }
+ if (!info.merge) {
+ info.merge = 'mix';
+ }
+ if (!info.data) {
+ Y.log('External config found but no data path defined, skipping import.', 'warn', 'builder');
+ cb();
+ return;
+ }
+ if (!Y.Lang.isArray(info.data)) {
+ info.data = [info.data];
+ }
+ Y.log('Importing external documentation data.', 'info', 'builder');
+
+ var stack = new Y.Parallel();
+ info.data.forEach(function (i) {
+ var base;
+ if (i.match(/^https?:\/\//)) {
+ base = i.replace('data.json', '');
+ Y.use('io-base', stack.add(function () {
+ Y.log('Fetching: ' + i, 'info', 'builder');
+ Y.io(i, {
+ on: {
+ complete: stack.add(function (id, e) {
+ Y.log('Received: ' + i, 'info', 'builder');
+ var data = JSON.parse(e.responseText);
+ data.base = base;
+ //self.options.externalData = Y.mix(self.options.externalData || {}, data);
+ if (!self.options.externalData) {
+ self.options.externalData = [];
+ }
+ self.options.externalData.push(data);
+ })
+ }
+ });
+ }));
+ } else {
+ base = path.dirname(path.resolve(i));
+ var data = Y.Files.getJSON(i);
+ data.base = base;
+ //self.options.externalData = Y.mix(self.options.externalData || {}, data);
+ if (!self.options.externalData) {
+ self.options.externalData = [];
+ }
+ self.options.externalData.push(data);
+ }
+ });
+
+ stack.done(function () {
+ Y.log('Finished fetching remote data', 'info', 'builder');
+ self._mixExternal();
+ cb();
+ });
+ },
+ /**
+ * File counter
+ * @property files
+ * @type Number
+ */
+ files: null,
+ /**
+ * Holder for project meta data
+ * @property _meta
+ * @type Object
+ * @private
+ */
+ _meta: null,
+ /**
+ * Prep the meta data to be fed to Selleck
+ * @method getProjectMeta
+ * @return {Object} The project metadata
+ */
+ getProjectMeta: function () {
+ var obj = {
+ meta: {
+ yuiSeedUrl: 'http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js',
+ yuiGridsUrl: 'http://yui.yahooapis.com/3.5.0/build/cssgrids/cssgrids-min.css'
+ }
+ };
+ if (!this._meta) {
+ try {
+ var meta,
+ theme = path.join(themeDir, 'theme.json');
+ if (Y.Files.exists(theme)) {
+ Y.log('Loading theme from ' + theme, 'info', 'builder');
+ meta = Y.Files.getJSON(theme);
+ } else if (DEFAULT_THEME !== themeDir) {
+ theme = path.join(DEFAULT_THEME, 'theme.json');
+ if (Y.Files.exists(theme)) {
+ Y.log('Loading theme from ' + theme, 'info', 'builder');
+ meta = Y.Files.getJSON(theme);
+ }
+ }
+
+ if (meta) {
+ obj.meta = meta;
+ this._meta = meta;
+ }
+ } catch (e) {
+ console.error('Error', e);
+ }
+ } else {
+ obj.meta = this._meta;
+ }
+ Y.each(this.data.project, function (v, k) {
+ var key = k.substring(0, 1).toUpperCase() + k.substring(1, k.length);
+ obj.meta['project' + key] = v;
+ });
+ return obj;
+ },
+ /**
+ * Populate the meta data for classes
+ * @method populateClasses
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateClasses: function (opts) {
+ opts.meta.classes = [];
+ Y.each(this.data.classes, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.classes.push({
+ displayName: v.name,
+ name: v.name,
+ namespace: v.namespace,
+ module: v.module,
+ description: v.description,
+ access: v.access || 'public'
+ });
+ });
+ opts.meta.classes.sort(this.nameSort);
+ return opts;
+ },
+ /**
+ * Populate the meta data for modules
+ * @method populateModules
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateModules: function (opts) {
+ var self = this;
+ opts.meta.modules = [];
+ opts.meta.allModules = [];
+ Y.each(this.data.modules, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.allModules.push({
+ displayName: v.displayName || v.name,
+ name: self.filterFileName(v.name),
+ description: v.description
+ });
+ if (!v.is_submodule) {
+ var o = {
+ displayName: v.displayName || v.name,
+ name: self.filterFileName(v.name)
+ };
+ if (v.submodules) {
+ o.submodules = [];
+ Y.each(v.submodules, function (i, k) {
+ var moddef = self.data.modules[k];
+ if (moddef) {
+ o.submodules.push({
+ displayName: k,
+ description: moddef.description
+ });
+ // } else {
+ // Y.log('Submodule data missing: ' + k + ' for ' + v.name, 'warn', 'builder');
+ }
+ });
+ o.submodules.sort(self.nameSort);
+ }
+ opts.meta.modules.push(o);
+ }
+ });
+ opts.meta.modules.sort(this.nameSort);
+ opts.meta.allModules.sort(this.nameSort);
+ return opts;
+ },
+ /**
+ * Populate the meta data for files
+ * @method populateFiles
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateFiles: function (opts) {
+ var self = this;
+ opts.meta.files = [];
+ Y.each(this.data.files, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.files.push({
+ displayName: v.name,
+ name: self.filterFileName(v.name),
+ path: v.path || v.name
+ });
+ });
+
+ var tree = {};
+ var files = [];
+ Y.each(this.data.files, function (v) {
+ if (v.external) {
+ return;
+ }
+ files.push(v.name);
+ });
+ files.sort();
+ Y.each(files, function (v) {
+ var p = v.split('/'),
+ par;
+ p.forEach(function (i, k) {
+ if (!par) {
+ if (!tree[i]) {
+ tree[i] = {};
+ }
+ par = tree[i];
+ } else {
+ if (!par[i]) {
+ par[i] = {};
+ }
+ if (k + 1 === p.length) {
+ par[i] = {
+ path: v,
+ name: self.filterFileName(v)
+ };
+ }
+ par = par[i];
+ }
+ });
+ });
+
+ opts.meta.fileTree = tree;
+
+ return opts;
+ },
+ /**
+ * Parses file and line number from an item object and build's an HREF
+ * @method addFoundAt
+ * @param {Object} a The item to parse
+ * @return {String} The parsed HREF
+ */
+ addFoundAt: function (a) {
+ var self = this;
+ if (a.file && a.line && !self.options.nocode) {
+ a.foundAt = '../files/' + self.filterFileName(a.file) + '.html#l' + a.line;
+ if (a.path) {
+ a.foundAt = a.path + '#l' + a.line;
+ }
+ }
+ return a;
+ },
+ /**
+ * Augments the **DocParser** meta data to provide default values for certain keys as well as parses all descriptions
+ * with the `Markdown Parser`
+ * @method augmentData
+ * @param {Object} o The object to recurse and augment
+ * @return {Object} The augmented object
+ */
+ augmentData: function (o) {
+ var self = this;
+ o = self.addFoundAt(o);
+ Y.each(o, function (i, k1) {
+ if (i && i.forEach) {
+ Y.each(i, function (a, k) {
+ if (!(a instanceof Object)) {
+ return;
+ }
+ if (!a.type) {
+ a.type = 'Object'; //Default type is Object
+ }
+ if (a.final === '') {
+ a.final = true;
+ }
+ if (!a.description) {
+ a.description = ' ';
+ } else {
+ //a.description = markdown(a.description, true, self.defaultTags);
+ a.description = self.markdown(a.description);
+ }
+ if (a.example) {
+ a.example = self.markdown(a.example);
+ }
+ a = self.addFoundAt(a);
+
+ Y.each(a, function (c, d) {
+ if (c.forEach || (c instanceof Object)) {
+ c = self.augmentData(c);
+ a[d] = c;
+ }
+ });
+
+ o[k1][k] = a;
+ });
+ } else if (i instanceof Object) {
+ i = self.addFoundAt(i);
+ Y.each(i, function (v, k) {
+ if (k === 'final') {
+ o[k1][k] = true;
+ }
+ if (k === 'description' || k === 'example') {
+ if (k1 === 'return') {
+ o[k1][k] = self.markdown(v);
+ } else if (v.forEach || (v instanceof Object)) {
+ o[k1][k] = self.augmentData(v);
+ } else {
+ //o[k1][k] = markdown(v, true, self.defaultTags);
+ o[k1][k] = self.markdown(v);
+ }
+ }
+ });
+ } else if (k1 === 'description' || k1 === 'example') {
+ //o[k1] = markdown(i, true, self.defaultTags);
+ o[k1] = self.markdown(i);
+ }
+ });
+ return o;
+ },
+ /**
+ * Makes the default directories needed
+ * @method makeDirs
+ * @param {Callback} cb The callback to execute after it's completed
+ */
+ makeDirs: function (cb) {
+ var self = this;
+ var dirs = ['classes', 'modules', 'files'];
+ if (self.options.dumpview) {
+ dirs.push('json');
+ }
+ var writeRedirect = function (dir, file, cb) {
+ Y.Files.exists(file, function (x) {
+ if (x) {
+ var out = path.join(dir, 'index.html');
+ fs.createReadStream(file).pipe(fs.createWriteStream(out));
+ }
+ cb();
+ });
+ };
+ var defaultIndex = path.join(themeDir, 'assets', 'index.html');
+ var stack = new Y.Parallel();
+ Y.log('Making default directories: ' + dirs.join(','), 'info', 'builder');
+ dirs.forEach(function (d) {
+ var dir = path.join(self.options.outdir, d);
+ Y.Files.exists(dir, stack.add(function (x) {
+ if (!x) {
+ fs.mkdir(dir, 0777, stack.add(function () {
+ writeRedirect(dir, defaultIndex, stack.add(noop));
+ }));
+ } else {
+ writeRedirect(dir, defaultIndex, stack.add(noop));
+ }
+ }));
+ });
+ stack.done(function () {
+ if (cb) {
+ cb();
+ }
+ });
+ },
+
+
+ _resolveUrl: function (url, opts) {
+ if (!url) {
+ return null;
+ }
+ if (url.indexOf("://") >= 0) {
+ return url;
+ }
+ return path.join(opts.meta.projectRoot, url);
+ },
+
+ /**
+ * Parses `` tags and adds the __prettyprint__ `className` to them
+ * @method _parseCode
+ * @private
+ * @param {HTML} html The HTML to parse
+ * @return {HTML} The parsed HTML
+ */
+ _parseCode: function (html) {
+ html = html || '';
+ //html = html.replace(//g, '');
+ html = html.replace(/' + Y.escapeHTML(code) + ' PreloadJS: Custom Loader
+
+
+
+
+
+
+
+
+
+ PreloadJS Custom Loaders in Plugins
+ This sample shows how to a plugin can provide a custom loader to PreloadJS. This enables plugins to
+ create their own loader classes and instances (and add listeners or additional functionality), but rely
+ on PreloadJS to manage everything else.
+
+ This example uses a simple image loader, and the plugin has an opportunity to modify it once it is loaded
+ (by setting the image size).
+
+
+
+
+
+
+
+
diff --git a/examples/FontLoader.html b/examples/FontLoader.html
new file mode 100644
index 00000000..0c99579e
--- /dev/null
+++ b/examples/FontLoader.html
@@ -0,0 +1,140 @@
+
+
+
+ PreloadJS: Font Loading
+
+
+
+
+
+
+
+
+
+ PreloadJS Font Loading Approaches
+
+ This sample shows the different approaches for loading fonts in PreloadJS. Currently supported are
+ local font loading using a CSS file and manual definitions, and remote loading using Google Fonts. Currently,
+ Typekit is not supported.
+
+
+
+
+
+
+
+
+
+
+ Load CSS Source |
+ Load CSS Source List |
+ Load Manual List |
+ Load CSS Tag |
+ Load Google Fonts
+
+
+
+ Hello World!
+
+
+ Hello World (bold)!
+
+
+ Hello World (google)!
+
+
+
+
+
+
+
diff --git a/examples/MediaGrid.html b/examples/MediaGrid.html
index c261a52e..d13644be 100644
--- a/examples/MediaGrid.html
+++ b/examples/MediaGrid.html
@@ -3,9 +3,12 @@
PreloadJS: Multimedia Preload Example
-
+
+
+
+
-
- PreloadJS Example: Media Grid
- PreloadJS can load a variety of media. In this example, click each example to load its related item.
- Once the item is loaded, it will display (image, svg), play (sound), apply to the document (css), or display
- an alert (script). Note that when loading images, sounds, css, scripts, or svg locally, you need to ensure
- that PreloadJS uses tag loading to avoid cross-origin errors. Other media types will not load locally.
-
-
-
-
- Click an item to load it.
+
+ Example: Media Grid
+
+ PreloadJS can load a variety of media. In this example, click each
+ example to load its related item.
+ Once the item is loaded, it will display (image, svg), play (sound),
+ apply to the document (css), or display
+ an alert (script). Note that when loading images, sounds, css, scripts,
+ or svg locally, you need to ensure
+ that PreloadJS uses tag loading to avoid cross-origin errors. Other
+ media types will not load locally.
+
+
+
+ Click an item to load it.
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
-
+
+ }
+ }
+
diff --git a/examples/PluginSample.html b/examples/PluginSample.html
index 5ee6f845..187f430b 100644
--- a/examples/PluginSample.html
+++ b/examples/PluginSample.html
@@ -3,7 +3,10 @@
PreloadJS: Plugin Sample
-
+
+
+
+
-
- PreloadJS Preload Queue
- Click "load another" to add another image the the overall queue. As images are added, the preload progress reflects
- the overall loaded progress. Click "load all" to queue everything at once.
- Note that when loading images and sounds locally, you need to ensure that PreloadJS uses tag loading to avoid
- cross-origin errors.
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Preload Queue
+
+ Click "load another" to add another image the the overall queue. As
+ images are added, the preload progress reflects
+ the overall loaded progress. Click "load all" to queue everything at
+ once.
+ Note that when loading images and sounds locally, you need to ensure
+ that PreloadJS uses tag loading to avoid
+ cross-origin errors.
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+ function loadAll() {
+ while (manifest.length > 0) {
+ loadAnother();
+ }
+ }
+
+ function loadAnother() {
+ // Get the next manifest item, and load it
+ var item = manifest.shift();
+ preload.loadFile(item);
+
+ // If we have no more items, disable the UI.
+ if (manifest.length == 0) {
+ $("#loadAnotherBtn").attr("disabled", "disabled");
+ $("#loadAllBtn").attr("disabled", "disabled");
+ $("#reloadBtn").css("display", "inline");
+ }
+
+ // Create a new loader display item
+ var div = $("#template").clone();
+ div.attr("id", ""); // Wipe out the ID
+ div.addClass("box")
+ $("#container").append(div);
+ map[item] = div; // Store a reference to each item by its src
+ }
+
+ // File complete handler
+ function handleFileLoad(event) {
+ var div = map[event.item.id];
+ div.addClass("complete");
+
+ // Get a reference to the loaded image (![]()
)
+ var img = event.result;
+
+ // Resize it to fit inside the item
+ var r = img.width / img.height;
+ var ir = w / h
+ if (r > ir) {
+ img.width = w;
+ img.height = w / r;
+ } else {
+ img.height = h;
+ img.width = h;
+ }
+ div.append(img); // Add it to the DOM
+ }
+
+ // File progress handler
+ function handleFileProgress(event) {
+ var div = map[event.item.id]; // Lookup the related item
+ div.children("DIV").width(event.progress * div.width()); // Set the width the progress.
+ }
+
+ // Overall progress handler
+ function handleOverallProgress(event) {
+ $("#mainProgress > .progress").width(preload.progress * $("#mainProgress").width());
+ }
+
+ // An error happened on a file
+ function handleFileError(event) {
+ var div = map[event.item.id];
+ div.addClass("error");
+ }
+
-
\ No newline at end of file
+
- blocks. */
-pre code,
-pre kbd,
-pre samp {
- font-size: 100%;
+pre.cmd,
+pre.code {
+ background: $color_gray-darkest;
+ border-left: $gridUnit-smallest solid $color_gray-dark;
+ margin: $gridUnit-large 0;
}
+
+.description,
+.box.intro,
+.param-description,
+.returns-description {
+ code {
+ background-color: $color-gray-lighter;
+ }
+}
+pre code { background-color: transparent !important; }
+
+
+
/* Used to denote text that shouldn't be selectable, such as line numbers or
- shell prompts. Guess which browser this doesn't work in. */
+shell prompts. Guess which browser this doesn't work in. */
.noselect {
-moz-user-select: -moz-none;
-khtml-user-select: none;
@@ -191,12 +188,12 @@ table {
}
td,
th {
- border: 1px solid #fff;
+ border: 1px solid $color_gray-lightest;
padding: 5px 12px;
vertical-align: top;
}
td {
- background: #E6E9F5;
+ background: $color_gray-lighter;
}
td dl {
margin: 0;
@@ -208,13 +205,12 @@ td pre:first-child {
margin-top: 0;
}
th {
- background: #D2D7E6;
- /*#97A0BF*/
+ background: $color_gray-light;
border-bottom: none;
border-top: none;
- color: #000;
- /*#FFF1D5*/
+ color: $color_gray-darker;
+ /*$color_gray-lightest1D5*/
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
@@ -228,18 +224,22 @@ th {
}
.content {
padding: 0 20px 0 25px;
+ max-width: 104rem;
+}
+.content.source-content{
+ max-width: none;
}
.sidebar {
padding: 0 2em;
}
#bd {
- padding: 7px 0 130px;
+ padding: $gridUnit-large 0 $gridUnit-larger;
position: relative;
width: 99%;
}
/* -- Table of Contents ----------------------------------------------------- */
/* The #toc id refers to the single global table of contents, while the .toc
- class refers to generic TOC lists that could be used throughout the page. */
+class refers to generic TOC lists that could be used throughout the page. */
.toc code,
.toc kbd,
.toc samp {
@@ -269,29 +269,29 @@ th {
*/
/* -- Other Styles ---------------------------------------------------------- */
/* These are probably YUI-specific, and should be moved out of Selleck's default
- theme. */
+theme. */
.button {
- border: 1px solid #dadada;
+ border: 1px solid $color_gray-lighter;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
- color: #444;
+ color: $color_gray-darker;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 92.308%;
font-weight: bold;
padding: 4px 13px 3px;
- -moz-text-shadow: 1px 1px 0 #fff;
- -webkit-text-shadow: 1px 1px 0 #fff;
- text-shadow: 1px 1px 0 #fff;
+ -moz-text-shadow: 1px 1px 0 $color_gray-lightest;
+ -webkit-text-shadow: 1px 1px 0 $color_gray-lightest;
+ text-shadow: 1px 1px 0 $color_gray-lightest;
white-space: nowrap;
- background: #EFEFEF;
+ background: $color_gray-lighter;
/* old browsers */
- background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%);
+ background: -moz-linear-gradient(top, #f5f5f5 0%, $color_gray-lighter 50%, #e5e5e5 51%, #dfdfdf 100%);
/* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, #efefef), color-stop(51%, #e5e5e5), color-stop(100%, #dfdfdf));
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, $color_gray-lighter), color-stop(51%, #e5e5e5), color-stop(100%, #dfdfdf));
/* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfdfdf', GradientType=0);
@@ -300,7 +300,7 @@ th {
}
.button:hover {
border-color: #466899;
- color: #fff;
+ color: $color_gray-lightest;
text-decoration: none;
-moz-text-shadow: 1px 1px 0 #222;
-webkit-text-shadow: 1px 1px 0 #222;
@@ -321,27 +321,35 @@ th {
.newwindow {
text-align: center;
}
-#hd h1 {
- font-size: 250%;
- text-transform: uppercase;
-}
.header {
- padding: 2em !important;
+ padding: 1em 0 0 0 !important;
+ background-color: $color_gray-dark;
+ a:hover {
+ background: transparent;
+ }
+ .yui3-u-3-4 {
+ width: 100%;
+ }
+}
+.header .version {
+ display: block;
+ background: $color_gray-dark;
+ padding: 0 $gridUnit-smaller;
+ width: 100%;
+ text-align: right;
}
.header .version em {
display: block;
text-align: right;
- line-height: 60px;
- color: #444444;
+ line-height: 32px;
+ color: $color_gray-default;
+ margin-bottom: 0;
}
#classdocs .item {
- border-bottom: 1px solid #c3c3c3;
+ border-bottom: 1px solid $color_gray-light;
margin: 0 !important;
padding: 2em;
}
-#classdocs h2 {
- padding-top: 0 !important;
-}
#classdocs .item .params p,
#classdocs .item .returns p {
display: inline;
@@ -389,20 +397,38 @@ ul li p {
.apidocs .attrs .extends .attr,
.apidocs .events .extends .event {
font-weight: bold;
+ a {
+ font-weight: bold;
+ }
}
.apidocs .methods .extends .inherited,
.apidocs .properties .extends .inherited,
.apidocs .attrs .extends .inherited,
.apidocs .events .extends .inherited {
font-weight: normal;
+ a {
+ font-weight: normal;
+ }
}
+
#hd {
padding: 0 15px 1px 20px;
}
-#hd img {
- margin-right: 10px;
+#hd a {
+ display: block;
+ margin: 0 auto;
vertical-align: middle;
+ text-align: center;
+ img {
+ display: inline-block;
+ height: 60px;
+ margin-bottom: $gridUnit-small;
+ }
+}
+#hd a:hover {
+ background: transparent;
}
+
/* -- API Docs CSS ---------------------------------------------------------- */
/*
This file is organized so that more generic styles are nearer the top, and more
@@ -425,239 +451,227 @@ specific tabview, see the other sections below.
visibility: visible;
}
.apidocs .tabview .yui3-tabview-panel {
- background: #f3f3f3;
- padding: 1em;
- border-radius: 0 0 1em 1em !important;
- border: 1px solid #c3c3c3 !important;
+ padding: 0;
}
/* -- Generic Content Styles ------------------------------------------------ */
-/* Headings */
-h2,
-h3,
-h4,
-h5,
-h6 {
- border: none;
- color: #30418C;
- font-weight: bold;
- text-decoration: none;
-}
+
.link-docs {
float: right;
font-size: 15px;
margin: 4px 4px 6px;
padding: 6px 30px 5px;
}
-.apidocs {
- zoom: 1;
-}
+
/* Generic box styles. */
.apidocs .box {
- border: 1px solid;
- border-radius: 3px;
margin: 1em 0;
padding: 0 1em;
}
/* A flag is a compact, capsule-like indicator of some kind. It's used to
indicate private and protected items, item return types, etc. in an
attractive and unobtrusive way. */
-.apidocs .flag {
- background: #444444;
- border-radius: 3px;
- color: #fff;
- font-size: 11px;
- margin: 0 0.5em;
- padding: 4px;
- position: relative;
- top: -2px;
-}
-/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
-.apidocs .meta {
- border: none;
- border-top: 1px solid #c3c3c3;
- color: #555;
- font-size: 11px;
- padding: 1em 0;
-}
-.apidocs .meta p {
- margin: 0;
-}
-/* Deprecation warning. */
-.apidocs .box.deprecated,
-.apidocs .flag.deprecated {
- background: #fdac9f;
- border: 1px solid #fd7775;
-}
-.apidocs .box.deprecated p {
- margin: 0.5em 0;
-}
-.apidocs .flag.deprecated {
- color: #444444;
-}
-/* Module/Class intro description. */
-.apidocs .intro {
- background: none;
- border: none;
- padding: 0 !important;
-}
-/* Loading spinners. */
-#bd.loading .apidocs,
-#api-list.loading .yui3-tabview-panel {
- background: #ffffff url(../img/spinner.gif) no-repeat center 70px;
- min-height: 150px;
-}
-#bd.loading .apidocs .content,
-#api-list.loading .yui3-tabview-panel .apis {
- display: none;
-}
-.apidocs .no-visible-items {
- color: #666;
-}
-/* Generic inline list. */
-.apidocs ul.inline {
- display: inline;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-.apidocs ul.inline li {
- display: inline;
-}
-/* Comma-separated list. */
-.apidocs ul.commas li:after {
- content: ',';
-}
-.apidocs ul.commas li:last-child:after {
- content: '';
-}
-/* Keyboard shortcuts. */
-kbd .cmd {
- font-family: Monaco, Helvetica;
-}
-/* -- Generic Access Level styles ------------------------------------------- */
-.apidocs .item.protected,
-.apidocs .item.private,
-.apidocs .index-item.protected,
-.apidocs .index-item.deprecated,
-.apidocs .index-item.private {
- display: none;
-}
-.show-deprecated .item.deprecated,
-.show-deprecated .index-item.deprecated,
-.show-protected .item.protected,
-.show-protected .index-item.protected,
-.show-private .item.private,
-.show-private .index-item.private {
- display: block;
-}
-.hide-inherited .item.inherited,
-.hide-inherited .index-item.inherited {
- display: none;
-}
-/* -- Generic Item Index styles --------------------------------------------- */
-.apidocs .index h3 {
- border-bottom: 1px solid #efefef;
- color: #444444;
- font-size: 13px;
- margin: 2em 0 0.6em;
- padding-bottom: 2px;
-}
-.apidocs .index .no-visible-items {
- margin-top: 2em;
-}
-.apidocs .index-list {
- border-color: #efefef;
+ .apidocs .flag {
+ background: transparentize($color_gray-darker, 0.9);
+ color: $color_gray-darker;
+ font-size: 11px;
+ margin: 0 0.5em;
+ padding: 4px;
+ position: relative;
+ top: 0;
+ }
+ /* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
+ .apidocs .meta {
+ color: $color_gray-default;
+ font-size: $fontSize-smallest;
+ padding: 1em 0;
+ }
+ .apidocs .meta p {
+ margin: 0;
+ }
+ .module-class {
+ font-size: $fontSize-smaller;
+ }
+ /* Deprecation warning. */
+ .apidocs .box.deprecated,
+ .apidocs .flag.deprecated {
+ background: $color_tweenjs-default-transparent;
+ border: 1px solid #fd7775;
+ p {
+ color: $color_gray-darkest;
+ }
+ }
+ .apidocs .box.deprecated p {
+ margin: 0.5em 0;
+ }
+ .apidocs .flag.deprecated {
+ color: $color_gray-darker;
+ }
+ /* Module/Class intro description. */
+ .apidocs .intro {
+ background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
+ border: medium none;
+ font-family: $fontFamily-secondary;
+ font-size: $fontSize-smaller;
+ line-height: $gridUnit-small;
+ padding: 0 !important;
+ }
+ /* Loading spinners. */
+ #bd.loading .apidocs,
+ #api-list.loading .yui3-tabview-panel {
+ background: $color_gray-lightest url(../img/spinner.gif) no-repeat center 70px;
+ min-height: 150px;
+ }
+ #bd.loading .apidocs .content,
+ #api-list.loading .yui3-tabview-panel .apis {
+ display: none;
+ }
+ .apidocs .no-visible-items {
+ color: $color_gray-default;
+ }
+ /* Generic inline list. */
+ .apidocs ul.inline {
+ display: inline;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ .apidocs ul.inline li {
+ display: inline;
+ }
+ /* Comma-separated list. */
+ .apidocs ul.commas li:after {
+ content: ',';
+ font-size: $fontSize-smaller;
+ }
+ .apidocs ul.commas li:last-child:after {
+ content: '';
+ }
+ /* Keyboard shortcuts. */
+ kbd .cmd {
+ font-family: $fontFamily-monospace;
+ }
+ /* -- Generic Access Level styles ------------------------------------------- */
+ .apidocs .item.protected,
+ .apidocs .item.private,
+ .apidocs .index-item.protected,
+ .apidocs .index-item.deprecated,
+ .apidocs .index-item.private {
+ display: none;
+ }
+ .show-deprecated .item.deprecated,
+ .show-deprecated .index-item.deprecated,
+ .show-protected .item.protected,
+ .show-protected .index-item.protected,
+ .show-private .item.private,
+ .show-private .index-item.private {
+ display: block;
+ }
+ .hide-inherited .item.inherited,
+ .hide-inherited .index-item.inherited {
+ display: none;
+ }
+ /* -- Generic Item Index styles --------------------------------------------- */
+ .apidocs .index h3 {
+ border-bottom: 1px solid $color_gray-light;
+ color: $color_gray-darker;
+ font-size: 13px;
+ margin: 1em 0 0.6em;
+ padding-bottom: 2px;
+ }
+ .apidocs .index .no-visible-items {
+ margin-top: 2em;
+ }
+ .apidocs .index-list {
+ border-color: $color_gray-lighter;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ -moz-column-count: 4;
+ -moz-column-gap: 10px;
+ -moz-column-width: 170px;
+ -ms-column-count: 4;
+ -ms-column-gap: 10px;
+ -ms-column-width: 170px;
+ -o-column-count: 4;
+ -o-column-gap: 10px;
+ -o-column-width: 170px;
+ -webkit-column-count: 4;
+ -webkit-column-gap: 10px;
+ -webkit-column-width: 170px;
+ column-count: 4;
+ column-gap: 10px;
+ column-width: 170px;
+ }
+ .apidocs .no-columns .index-list {
+ -moz-column-count: 1;
+ -ms-column-count: 1;
+ -o-column-count: 1;
+ -webkit-column-count: 1;
+ column-count: 1;
+ }
+ .apidocs .index-item {
+ white-space: nowrap;
+ }
+ .apidocs .index-item .flag {
+ background: none;
+ border: none;
+ color: #afafaf;
+ display: inline;
+ margin: 0 0 0 0.2em;
+ padding: 0;
+ }
+ /* -- Generic API item styles ----------------------------------------------- */
+ .apidocs .args {
+ display: inline;
+ margin: 0 0.5em;
+ }
+ .apidocs .flag.chainable {
+ background: #46ca3b;
+ }
+ .apidocs .flag.protected {
+ background: #9b86fc;
+ }
+ .apidocs .flag.private {
+ background: #fd6b1b;
+ }
+ .apidocs .flag.async {
+ background: $color_gray-darker;
+ }
+ .apidocs .flag.required {
+ background: #e60923;
+ }
+ .apidocs .item {
+ border-bottom: 1px solid $color_gray-lighter;
+ margin: 1.5em 0 2em;
+ padding-bottom: 2em;
+ }
+ .apidocs .item .description p,
+ .apidocs .item pre.code {
+ margin: 1em 0 0;
+ }
+ .apidocs .item .description {
+ font-size: $fontSize-smaller;
+ }
+ .apidocs .item .meta {
+ background: none;
+ border: none;
+ padding: 0;
+ }
+ .apidocs .item .name {
+ display: inline;
+ font-size: 14px;
+ }
+ .apidocs .item .type,
+ .apidocs .item .type a,
+ .apidocs .returns-inline {
+ //color: $color_gray-default;
+ text-decoration: none;
font-size: 12px;
- list-style: none;
- margin: 0;
- padding: 0;
- -moz-column-count: 4;
- -moz-column-gap: 10px;
- -moz-column-width: 170px;
- -ms-column-count: 4;
- -ms-column-gap: 10px;
- -ms-column-width: 170px;
- -o-column-count: 4;
- -o-column-gap: 10px;
- -o-column-width: 170px;
- -webkit-column-count: 4;
- -webkit-column-gap: 10px;
- -webkit-column-width: 170px;
- column-count: 4;
- column-gap: 10px;
- column-width: 170px;
-}
-.apidocs .no-columns .index-list {
- -moz-column-count: 1;
- -ms-column-count: 1;
- -o-column-count: 1;
- -webkit-column-count: 1;
- column-count: 1;
-}
-.apidocs .index-item {
- white-space: nowrap;
-}
-.apidocs .index-item .flag {
- background: none;
- border: none;
- color: #afafaf;
- display: inline;
- margin: 0 0 0 0.2em;
- padding: 0;
-}
-/* -- Generic API item styles ----------------------------------------------- */
-.apidocs .args {
- display: inline;
- margin: 0 0.5em;
-}
-.apidocs .flag.chainable {
- background: #46ca3b;
-}
-.apidocs .flag.protected {
- background: #9b86fc;
-}
-.apidocs .flag.private {
- background: #fd6b1b;
-}
-.apidocs .flag.async {
- background: #356de4;
-}
-.apidocs .flag.required {
- background: #e60923;
-}
-.apidocs .item {
- border-bottom: 1px solid #efefef;
- margin: 1.5em 0 2em;
- padding-bottom: 2em;
-}
-.apidocs .item h4,
-.apidocs .item h5,
-.apidocs .item h6 {
- color: #444444;
- font-family: inherit;
- font-size: 100%;
-}
-.apidocs .item .description p,
-.apidocs .item pre.code {
- margin: 1em 0 0;
-}
-.apidocs .item .meta {
- background: none;
- border: none;
- padding: 0;
-}
-.apidocs .item .name {
- display: inline;
- font-size: 14px;
-}
-.apidocs .item .type,
-.apidocs .item .type a,
-.apidocs .returns-inline {
- color: #555;
}
.apidocs .item .type,
.apidocs .returns-inline {
- font-size: 11px;
+ font-size: 12px;
margin: 0 0 0 0;
}
.apidocs .item .type a {
@@ -675,16 +689,22 @@ kbd .cmd {
.apidocs .param {
margin-bottom: 1em;
}
+.apidocs .param-description {
+ font-size: $fontSize-smaller;
+ code {
+ font-size: $fontSize-smallest
+ }
+}
.apidocs .param .type,
.apidocs .param .type a {
- color: #666;
+ //color: $color_gray-default;
}
.apidocs .param .type {
margin: 0 0 0 0.5em;
*margin-left: 0.5em;
}
.apidocs .param-name {
- font-weight: bold;
+ // font-weight: bold;
}
/* -- Item "Emits" block ---------------------------------------------------- */
.apidocs .item .emits {
@@ -694,7 +714,7 @@ kbd .cmd {
/* -- Item "Returns" block -------------------------------------------------- */
.apidocs .item .returns .type,
.apidocs .item .returns .type a {
- font-size: 100%;
+ font-size: 12px;
margin: 0;
}
/* -- Class Constructor block ----------------------------------------------- */
@@ -710,6 +730,11 @@ kbd .cmd {
overflow: visible;
padding: 0;
}
+pre.prettyprint {
+ border-top: inherit;
+ border-right: inherit;
+ border-bottom: inherit;
+}
.apidocs .L0,
.apidocs .L1,
.apidocs .L2,
@@ -736,7 +761,7 @@ kbd .cmd {
}
#api-tabview-filter,
#api-tabview-panel {
- background: #f3f3f3;
+ background: $color_gray-lighter;
border: none !important;
}
#api-tabview-filter {
@@ -775,44 +800,39 @@ kbd .cmd {
/*#api-options label { margin-right: 0.6em; }*/
/* -- API list -------------------------------------------------------------- */
#api-list {
- margin-top: -2em;
- *zoom: 1;
+ margin-top: 0em;
}
#api-modules {
- border-bottom: 1px solid #c3c3c3;
+ background-color: $color_gray-light
}
.apis {
font-size: 12px;
line-height: 1.4;
list-style: none;
margin: 0;
- padding: 0.5em 0 0.5em 0.4em;
+ padding: 0 0 0 0.4em;
}
.apis a {
- border: 1px solid transparent;
display: block;
+ font-size: 1.3rem;
+ font-weight: 700;
margin: 0 0 0 -4px;
- padding: 0.4em;
+ padding: 0.1rem 1.4em;
text-decoration: none;
- _border: none;
- _display: inline;
- color: #444444 !important;
-}
-.apis a:hover,
-.apis a:focus {
- background: #444444;
- color: white !important;
- border-radius: 3px;
- color: #444444;
- outline: none;
+}
+#api-modules.apis a {
+ font-size: $fontSize-smaller;
+}
+.apis li {
+ margin: 0;
}
.api-list-item a:hover,
.api-list-item a:focus {
font-weight: bold;
- text-shadow: 1px 1px 1px #fff;
+ text-shadow: 1px 1px 1px $color_gray-lightest;
}
.apis .message {
- color: #888;
+ color: $color_gray-light;
}
.apis .result a {
padding: 3px 5px 2px;
@@ -825,34 +845,94 @@ kbd .cmd {
font-weight: bold;
}
/* -- YUI Overrides -------------------------------------------------------------- */
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label {
+.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
border: none !important;
+ &::after {
+ display: none !important;
+ }
}
.yui3-skin-sam .yui3-tab-label {
padding: 1em !important;
border: none !important;
background: none !important;
- background-color: #c3c3c3 !important;
+ background-color: $color_gray-light !important;
}
.yui3-skin-sam .yui3-tab-label:hover {
- background-color: #444444 !important;
- color: white !important;
-}
-/* Important Library Specifics, find and replace
- @color-CreateJS: #e7841d;
- @color-EaselJS: #3399ff;
- @color-TweenJS: #f12528;
- @color-SoundJS: #8765d6;
- @color-PreloadJS: #bb2ee5;
- @color-Zoe: #00b224;
- */
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label,
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:focus,
-.yui3-skin-sam .yui3-tab-selected .yui3-tab-label:hover {
- background: none !important;
- border: none !important;
- background-color: #3399ff !important;
+ background-color: $color_gray-darker !important;
+ color: $color_gray-lightest !important;
}
-.yui3-skin-sam .yui3-tabview-list {
- border-bottom: 5px solid #3399ff !important;
+
+.yui3-tab-panel-selected {
+ padding: $gridUnit-smaller;
+}
+div#hd.yui3-g.header {
+ word-spacing: normal;
+ letter-spacing: normal;
+}
+
+// Syntax Highlighting
+.pln {
+ color: $color_gray-lighter;
+}
+.com {
+ color: lighten($color_gray-dark, 10%);
+}
+.kwd {
+ color: $color_easeljs-default;
+}
+.str {
+ color: $color_createjs-default;
+}
+.typ {
+ color: $color_tweenjs-default;
+}
+.lit {
+ color: $color_preloadjs-default;
+}
+.pun,
+.opn,
+.clo {
+ color: $color_soundjs-default;
+}
+
+ol.linenums {
+ position: relative;
+ padding-left: 60px;
+ &::before {
+ content: '';
+ position: absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ width: 5.5rem;
+ background-color: $color_gray-dark;;
+ }
+ .file-line {
+ position: relative;
+ z-index: 2;
+ color:$color_gray-darkest;
+ }
+}
+
+.yui3-skin-sam .yui3-tab-label,
+.yui3-skin-sam .yui3-tab-selected a.yui3-tab-label {
+ font-size: $fontSize-smallest;
+ &::after {
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ }
+}
+
+ol.linenums .file-line {
+ color: $color_gray-light;
+}
+
+.apidocs .file pre.code, #doc .apidocs .file pre.prettyprint {
+ overflow-x: auto;
+ background-color: $color_gray-darkest;
+}
+#doc {
+ overflow-x: hidden;
}
diff --git a/build/createjsTheme/assets/scss/settings/breakpoint.scss b/build/createjsTheme/assets/scss/settings/breakpoint.scss
new file mode 100644
index 00000000..a11bdbd3
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/breakpoint.scss
@@ -0,0 +1,51 @@
+//*******************************************
+//
+// BREAKPOINT SETTINGS
+// Default breakpoint settings used by gBootstrap
+//
+// Contents
+// 1) GENERIC WIDTHS
+// 2) MAX-WIDTH
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// GENERIC WIDTHS
+//
+//*******************************************
+// Small Devices i.e. "Phones"
+//$bp_width-320: 320px;
+$bp_width-480: 480px;
+$bp_width-500: 500px;
+$bp_width-600: 600px;
+
+// Medium Devices i.e. "Tablets"
+//$bp_width-640: 640px;
+$bp_width-700: 700px;
+
+// iFrame width
+$bp_width-960: 960px;
+
+// Standard Devices i.e. "Laptops or Desktops"
+$bp_width-1024: 1024px;
+
+// Large Devices i.e. "Large Monitors"
+//$bp_width-1300: 1300px;
+//$bp_width-1400: 1400px;
+//$bp_width-1600: 1600px;
+//$bp_width-1700: 1700px;
+//$bp_width-2000: 2000px;
+
+
+
+//*******************************************
+//
+// MAX-WIDTH
+//
+//*******************************************
+$bp_width-max: 1140px;
+$bp_width-1300: 1300px;
+$bp_width-1600: 1600px;
diff --git a/build/createjsTheme/assets/scss/settings/color.scss b/build/createjsTheme/assets/scss/settings/color.scss
new file mode 100644
index 00000000..280a72f7
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/color.scss
@@ -0,0 +1,194 @@
+//*******************************************
+//
+// COLOR SETTINGS
+// Colors and brand gradients used in your project
+//
+// Contents
+// 1) createjs
+// 2) easeljs
+// 3) preloadjs
+// 4) soundjs
+// 5) tweenjs
+// 6) zoe
+// 7) notifications (green)
+// 8) grey
+// 9) grey transparent
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// createjs
+//
+//*******************************************
+$color_createjs-default: rgba(255, 210, 20, 1);
+.color-createjs {color: $color_createjs-default;}
+%color_createjs-gradient {
+ background: $color_createjs-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjI5ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmQ3MGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(255,242,157) 0%, rgb(255,215,15) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,242,157)), color-stop(100%,rgb(255,215,15)));
+ background: -webkit-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: -o-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: -ms-linear-gradient(top, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ background: linear-gradient(to bottom, rgb(255,242,157) 0%,rgb(255,215,15) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff29d', endColorstr='#ffd70f',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// easeljs
+//
+//*******************************************
+$color_easeljs-default: rgba(73, 207, 239, 1);
+%color_easeljs-gradient {
+ background: $color_easeljs-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3ZjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0OWNmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(167,243,242) 0%, rgb(73,207,239) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(167,243,242)), color-stop(100%,rgb(73,207,239)));
+ background: -webkit-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: -o-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: -ms-linear-gradient(top, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ background: linear-gradient(to bottom, rgb(167,243,242) 0%,rgb(73,207,239) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7f3f2', endColorstr='#49cfef',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// preloadjs
+//
+//*******************************************
+$color_preloadjs-default: rgba(230,115,222,1);
+%color_preloadjs-gradient {
+ background: $color_preloadjs-default;
+ background: rgb(240,170,220);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYWFkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNjczZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(240,170,220,1) 0%, rgba(230,115,222,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,170,220,1)), color-stop(100%,rgba(230,115,222,1)));
+ background: -webkit-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: -o-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: -ms-linear-gradient(top, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ background: linear-gradient(to bottom, rgba(240,170,220,1) 0%,rgba(230,115,222,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0aadc', endColorstr='#e673de',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// soundjs
+//
+//*******************************************
+$color_soundjs-default: rgba(37,229,130,1);
+%color_soundjs-gradient {
+ background: $color_soundjs-default;
+ background: rgb(97,232,176);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYxZThiMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNWU1ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(97,232,176,1) 0%, rgba(37,229,130,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,232,176,1)), color-stop(100%,rgba(37,229,130,1)));
+ background: -webkit-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: -o-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: -ms-linear-gradient(top, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ background: linear-gradient(to bottom, rgba(97,232,176,1) 0%,rgba(37,229,130,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61e8b0', endColorstr='#25e582',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// tweenjs
+//
+//*******************************************
+$color_tweenjs-default: rgba(255,97,106,1);
+%color_tweenjs-gradient {
+ background: $color_tweenjs-default;
+ background: rgb(255,125,149);
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmN2Q5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjYxNmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(255,125,149,1) 0%, rgba(255,97,106,1) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,125,149,1)), color-stop(100%,rgba(255,97,106,1)));
+ background: -webkit-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: -o-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: -ms-linear-gradient(top, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ background: linear-gradient(to bottom, rgba(255,125,149,1) 0%,rgba(255,97,106,1) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d95', endColorstr='#ff616a',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// zoe
+//
+//*******************************************
+$color_zoe-default: rgba(208, 238, 55, 1);
+%color_zoe-gradient {
+ background: $color_zoe-default;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UxZWUxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZmVlMzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgb(225,238,27) 0%, rgb(191,238,55) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(225,238,27)), color-stop(100%,rgb(191,238,55)));
+ background: -webkit-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: -o-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: -ms-linear-gradient(top, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ background: linear-gradient(to bottom, rgb(225,238,27) 0%,rgb(191,238,55) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ee1b', endColorstr='#bfee37',GradientType=0 );
+}
+
+
+
+//*******************************************
+//
+// notifications (green)
+//
+//*******************************************
+$color_green-default: rgba(63, 185, 6, 1);
+
+
+
+//*******************************************
+//
+// grey
+//
+//*******************************************
+$color_gray-darkest: rgba( 55, 66, 82, 1 );
+$color_gray-darker: rgba( 64, 82, 97, 1 );
+$color_gray-dark: rgba( 76, 101, 117, 1 );
+$color_gray-default: rgba( 156, 166, 179, 1 );
+$color_gray-light: rgba( 201, 209, 216, 1 );
+$color_gray-lighter: rgba( 236, 238, 244, 1 );
+$color_gray-lightest: rgba( 250, 252, 255, 1 );
+
+$color_gray-backToTop: rgba( 52, 59, 78, 1.0 );
+
+
+
+//*******************************************
+//
+// grey transparent/gradients
+//
+//*******************************************
+$color_gray-darker-transparent: rgba( 64, 82, 97, 0 );
+$color_gray-lighter-transparent: rgba( 236, 238, 244, 0 );
+
+$color_gray-darkest-translucent: rgba( 55, 66, 82, 0.7 );
+$color_gray-dark-translucent-high: rgba( 76, 101, 117, 0.7 );
+$color_gray-dark-translucent-low: rgba( 76, 101, 117, 0.4 );
+$color_tweenjs-default-transparent: rgba(255,97,106,0.5);
+
+%color_gray-dark-gradient {
+ background: $color_gray-dark;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNjU3NSIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRjNjU3NSIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+ background: -moz-linear-gradient(top, rgba(76,101,117,0.4) 0%, rgba(76,101,117,0.9) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,101,117,0.4)), color-stop(100%,rgba(76,101,117,0.9)));
+ background: -webkit-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: -o-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: -ms-linear-gradient(top, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ background: linear-gradient(to bottom, rgba(76,101,117,0.4) 0%,rgba(76,101,117,0.9) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#664c6575', endColorstr='#e64c6575',GradientType=0 );
+}
diff --git a/build/createjsTheme/assets/scss/settings/fonts.scss b/build/createjsTheme/assets/scss/settings/fonts.scss
new file mode 100644
index 00000000..7992d9bf
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/fonts.scss
@@ -0,0 +1,105 @@
+//*******************************************
+//
+// FONT SETTINGS
+// families, sizes, and REM value used in your project
+//
+// Contents
+// 1) ROOT ELEMENT (REM)
+// 2) FAMILIES
+// 3) SIZE RAMP
+// 4) MODULAR SCALE
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// REM VALUE
+// Controls root element font size(rem) applied to
+//
+//*******************************************
+$fontSize-root: 9px; // (1rem)
+
+
+
+//*******************************************
+//
+// FAMILIES
+// Define your font families here
+//
+//*******************************************
+/*
+
+
+*/
+
+// Default Font
+$fontFamily-default: 'effra', sans-serif;
+// Weights: 400, 400 italic, 700
+
+
+// Secondary Font
+$fontFamily-secondary: 'Proxima Nova', sans-serif;
+// Weights: 400, 500
+
+// Monospace Font
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext");
+$fontFamily-monospace: 'Source Code Pro', monospace;
+// Weights: 400
+
+
+
+//*******************************************
+//
+// SIZE RAMP
+// Define your font sizes below
+//
+//*******************************************
+$fontSize-smallest: 1.5rem;
+$fontSize-smaller: 1.6rem;
+$fontSize-small: 2.2rem;
+$fontSize-default: 2.8rem;
+$fontSize-large: 3.8rem;
+$fontSize-larger: 5rem;
+$fontSize-largest: 9rem;
+$fontSize-display: 12rem;
+
+
+
+//*******************************************
+//
+// MODULAR SCALE
+//
+// 16px @ 1:1.333
+//
+// Pixels Ems
+// 1,192.803 74.55
+// 894.826 55.927
+// 671.287 41.955
+// 503.591 31.474
+// 377.788 23.612
+// 283.412 17.713
+// 212.612 13.288
+// 159.499 9.969
+// 119.654 7.478
+// 89.763 5.61
+// 67.339 4.209
+// 50.517 3.157
+// 37.897 2.369
+// 28.430 1.777
+// 21.328 1.333
+// 16.000 1
+// 12.003 0.75
+// 9.005 0.563
+// 6.755 0.422
+// 5.068 0.317
+// 3.802 0.238
+// 2.852 0.178
+// 2.140 0.134
+// 1.605 0.1
+// 1.204 0.075
+//
+// (source: http://modularscale.com/)
+//
+//*******************************************
diff --git a/build/createjsTheme/assets/scss/settings/layout.scss b/build/createjsTheme/assets/scss/settings/layout.scss
new file mode 100644
index 00000000..8284e2a1
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/layout.scss
@@ -0,0 +1,24 @@
+//*******************************************
+//
+// LAYOUT SETTINGS
+// Default grid units settings used for layout by gBootstrap
+//
+// Sections
+// 1) GRID UNITS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// GRID UNITS
+//
+//*******************************************
+$gridUnit-smallest: 0.9rem;
+$gridUnit-smaller: 1.6rem;
+$gridUnit-small: 2.1rem;
+$gridUnit-default: 2.8rem;
+$gridUnit-large: 3.8rem;
+$gridUnit-larger: 5rem;
+$gridUnit-largest: 9rem;
\ No newline at end of file
diff --git a/build/createjsTheme/assets/scss/settings/path.scss b/build/createjsTheme/assets/scss/settings/path.scss
new file mode 100644
index 00000000..ab5da454
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/path.scss
@@ -0,0 +1,29 @@
+//*******************************************
+//
+// PATH SETTINGS
+// Variables for defining file paths in your project
+//
+// Contents
+// 1) MY PROJECT
+// 2) PROJECT ASSETS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// MY PROJECT
+//
+//*******************************************
+$path-myProject: "../../";
+
+
+
+//*******************************************
+//
+// PROJECT ASSETS
+//
+//*******************************************
+$path-fonts: $path-myProject + "assets/fonts/";
+$path-images: $path-myProject + "assets/images/";
diff --git a/build/createjsTheme/assets/scss/settings/transition.scss b/build/createjsTheme/assets/scss/settings/transition.scss
new file mode 100644
index 00000000..ca4aef4a
--- /dev/null
+++ b/build/createjsTheme/assets/scss/settings/transition.scss
@@ -0,0 +1,57 @@
+//*******************************************
+//
+// TRANSITION SETTINGS
+// Default transition settings used by gBootstrap
+//
+// Contents
+// 1) DURATIONS
+// 2) EASING
+// 3) COMBINATIONS
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// DURATIONS
+//
+//*******************************************
+$duration-short: 0.1s;
+$duration-default: 0.2s;
+$duration-long: 0.4s;
+$duration-longer: 0.6s;
+// $duration-longest: 0.8s;
+
+
+//*******************************************
+//
+// EASING
+//
+//*******************************************
+$ease-default: cubic-bezier( 0.6, 0.18, 0.32, 0.95 );
+$ease-inOut: cubic-bezier( 0.55, 0, 0.45, 1 );
+$ease-out: cubic-bezier( 0.4, 0.18, 0.32, 1 );
+
+
+
+//*******************************************
+//
+// COMBINATIONS
+//
+//*******************************************
+$transition-short-default: $duration-short $ease-default;
+$transition-short-out: $duration-short $ease-out;
+$transition-short-inOut: $duration-short $ease-inOut;
+
+$transition-default-default: $duration-default $ease-default;
+$transition-default-inOut: $duration-default $ease-inOut;
+$transition-default-out: $duration-default $ease-out;
+
+$transition-long-default: $duration-long $ease-default;
+$transition-long-inOut: $duration-long $ease-inOut;
+$transition-long-out: $duration-long $ease-out;
+
+$transition-longer-default: $duration-longer $ease_default;
+$transition-longer-out: $duration-longer $ease_out;
+
diff --git a/build/createjsTheme/assets/scss/utilities/breakpoint.scss b/build/createjsTheme/assets/scss/utilities/breakpoint.scss
new file mode 100755
index 00000000..8f4f4410
--- /dev/null
+++ b/build/createjsTheme/assets/scss/utilities/breakpoint.scss
@@ -0,0 +1,144 @@
+//*******************************************
+//
+// BREAKPOINT UTILITY
+//
+// Description
+// - Utilities for creating breakpoints
+//
+// Contents
+// 1) WIDTH
+// 2) HEIGHT
+// 3) ASPEECT RATIO
+// 4) ORIENTATION
+// 5) PIXEL DENSITY
+//
+// Notes
+// - Default prefix favors mobile and portrait first design principles.
+//
+// Acknowledgements:
+// Chris Coyier: http://css-tricks.com/media-queries-sass-3-2-and-codekit/
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// WIDTH OR HEIGHT
+//
+// Notes
+// - also accepts orientation, and prefix params (min-, max-, min-device-, max-device-)
+// - supports end range
+//
+//*******************************************
+
+@mixin bp ($bp, $prefix: min-, $bpEndRange: null, $orientation: null, $direction: width, $endRangePrefix: max-) {
+
+ // Define focus direction of breakpoint statement (width or height)
+ @if $direction == "height" {
+ $prefix: $prefix + "height: ";
+ } @else {
+ $prefix: $prefix + "width: ";
+ }
+
+ // Re-define orientation variable if value exists
+ @if $orientation != null {
+ $orientation: "orientation:" + $orientation;
+ }
+
+ // Output statement for single condition value (includes orientation if applied)
+ @if $bpEndRange == null {
+
+ @if $orientation == null { // Checks to see if there is an orientation value
+ @media ($prefix $bp) { @content };
+ } @else {
+ @media ($prefix $bp) and ($orientation) { @content; }
+ }
+
+ // Output statement for end range condition value (includes orientation if applied)
+ } @else {
+
+ // Define focus direction of breakpoint end range statement (width or height)
+ @if $direction == "height" {
+ $endRangePrefix: $endRangePrefix + "height: ";
+ } @else {
+ $endRangePrefix: $endRangePrefix + "width: ";
+ }
+
+ @if $orientation == null { // Checks to see if there is an orientation value
+ @media ($prefix $bp) and ($endRangePrefix $bpEndRange) { @content };
+ } @else {
+ @media ($prefix $bp) and ($endRangePrefix $bpEndRange) and ($orientation) { @content; }
+ }
+
+ }
+}
+
+
+//*******************************************
+//
+// ASPECT RATIO
+//
+// Notes
+// - $aspectRatio syntax '16/9'
+//
+//*******************************************
+// Aspect Ratio with width limitation
+@mixin bpAspectRatio ($aspectRatio: null, $width: null) {
+ @if $aspectRatio != null {
+ @if $width == null {
+ @media (max-aspect-ratio: $aspectRatio) { @content; }
+ } @else {
+ @media (max-aspect-ratio: $aspectRatio) and (min-width: $width) { @content; }
+ }
+ }
+}
+
+
+
+//*******************************************
+//
+// ORIENTATION
+//
+//*******************************************
+@mixin bpOrientation ($orientation: portrait, $width: null, $prefix: min-) {
+ $width-prefix: $prefix + "width: ";
+ @if $width == null {
+ @media (orientation: $orientation) { @content; }
+ } @else {
+ @media (orientation: $orientation) and ($width-prefix $width) { @content; }
+ }
+}
+
+
+
+//*******************************************
+//
+// PIXEL DENSITIES
+//
+// Common Device Pixel Ratios
+// 1.25, 1.3, 1.5, 2
+//
+//*******************************************
+@mixin bpPixelDensity ($pd: 2) {
+ // 1.25
+ @if $pd == 1.25 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 120dpi) { @content; }
+ }
+ // 1.3
+ @if $pd == 1.3 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 124.8dpi) { @content; }
+ }
+ // 1.5
+ @if $pd == 1.5 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 144dpi) { @content; }
+ }
+ // 2
+ @if $pd == 2 {
+ @media (-webkit-min-device-pixel-ratio: $pd),
+ (min-resolution: 192dpi) { @content; }
+ }
+}
\ No newline at end of file
diff --git a/build/createjsTheme/assets/scss/utilities/clearfix.scss b/build/createjsTheme/assets/scss/utilities/clearfix.scss
new file mode 100644
index 00000000..cf99750a
--- /dev/null
+++ b/build/createjsTheme/assets/scss/utilities/clearfix.scss
@@ -0,0 +1,28 @@
+//*******************************************
+//
+// CLEAR FIX UTILITIES
+//
+// Details
+// - Utility for clearing floats
+//
+// Contents
+// 1) CLEARFIX
+//
+//*******************************************
+
+
+
+//*******************************************
+//
+// CLEARFIX
+//
+//*******************************************
+%clearfix {
+ zoom: 1; // For IE 6/7 (trigger hasLayout)
+ &::before,
+ &::after {
+ content: "";
+ display: table;
+ }
+ &::after { clear: both; }
+}
diff --git a/build/createjsTheme/layouts/main.handlebars b/build/createjsTheme/layouts/main.handlebars
index b9af452f..71f49b0c 100755
--- a/build/createjsTheme/layouts/main.handlebars
+++ b/build/createjsTheme/layouts/main.handlebars
@@ -35,7 +35,7 @@
{{>options}}
-
+
diff --git a/build/createjsTheme/partials/props.handlebars b/build/createjsTheme/partials/props.handlebars
index 8385ad17..a94b44d9 100755
--- a/build/createjsTheme/partials/props.handlebars
+++ b/build/createjsTheme/partials/props.handlebars
@@ -18,6 +18,10 @@
static
{{/if}}
+ {{#if readonly}}
+ readonly
+ {{/if}}
+
{{#if overwritten_from}}
Inherited from
diff --git a/build/package.json b/build/package.json
index 34354974..380e4973 100644
--- a/build/package.json
+++ b/build/package.json
@@ -1,18 +1,20 @@
{
- "name": "PreloadJS",
- "version": "0.4.1",
- "description": "PreloadJS Docs",
- "url": "http://www.createjs.com/#!/PreloadJS",
- "logo": "assets/docs-icon-PreloadJS.png",
- "devDependencies": {
- "grunt": "~0.4.1",
- "grunt-contrib-concat": "~0.3.0",
- "grunt-contrib-uglify": "~0.2.1",
- "grunt-contrib-yuidoc": "~0.4.0",
- "grunt-contrib-compress": "~0.5.0",
- "grunt-contrib-copy": "~0.4.1",
- "lodash": "~0.9.0",
- "grunt-hub":""
- },
- "engine": "node >= 0.10.22"
+ "name": "PreloadJS",
+ "version": "1.0.0",
+ "description": "PreloadJS Docs",
+ "url": "http://www.createjs.com/preloadjs",
+ "logo": "assets/docs-icon-PreloadJS.png",
+ "repository": "git@github.com:CreateJS/PreloadJS.git",
+ "devDependencies": {
+ "grunt": "~0.4.5",
+ "grunt-contrib-concat": "~0.5.0",
+ "grunt-contrib-uglify": "~0.6.0",
+ "grunt-contrib-yuidoc": "~0.5.2",
+ "grunt-contrib-compress": "~0.12.0",
+ "grunt-contrib-copy": "~0.7.0",
+ "grunt-contrib-sass": "^0.8.1",
+ "grunt-contrib-clean":"^0.4.0",
+ "lodash": "~0.9.2"
+ },
+ "engine": "node >= 0.10.22"
}
diff --git a/build/tasks/updateversion.js b/build/tasks/updateversion.js
index 9a7ae8d3..eec62239 100644
--- a/build/tasks/updateversion.js
+++ b/build/tasks/updateversion.js
@@ -1,36 +1,36 @@
module.exports = function (grunt) {
grunt.registerMultiTask('updateversion', function() {
- var data = this.data;
- var file = data.file;
- var version = data.version;
+ var newValues = {date:new Date().toUTCString(), version:this.data.version};
+ replaceMetaData(this.data.file, newValues);
+ });
+ grunt.registerMultiTask('clearversion', function() {
+ // Don't clear the version when building everything (the combined build will run this after its done)
+ var buildArgs = grunt.config("buildArgs");
+ if (buildArgs && buildArgs[0] == "all") {
+ return;
+ }
+ replaceMetaData(this.data.file, {date:"", version:""});
+ });
+
+ function replaceMetaData(file, values) {
if (!grunt.file.exists(file)) {
grunt.log.error(file+' not found.');
return;
}
- var contents = grunt.file.read(file);
- var pattern = /\/\*version\*\/"([\w.]+)"/g;
-
- var newValues = {date:new Date().toUTCString(), version:version};
- var newFile = replaceMetaData(contents, newValues);
- grunt.file.write(file, newFile);
- });
+ var str = grunt.file.read(file);
- function replaceMetaData(data, values) {
- var finalResult = "";
- var newData = data;
for(var n in values) {
- var pattern = new RegExp("(\/\\*"+n+"\\*\/\")(.*)(\";)", "i");
- var result = pattern.test(data);
+ var pattern = new RegExp("(\/\\*="+n+"\\*\/\")(.*)(\";)", "g");
+ var result = pattern.test(str);
if (result) {
- finalResult = newData.replace(pattern, "$1"+values[n]+"$3");
- newData = finalResult;
+ str = str.replace(pattern, "$1"+values[n]+"$3");
} else {
grunt.log.error("Error -- Unable to resolve value:"+ pattern);
}
}
- return finalResult;
+ grunt.file.write(file, str);
}
}
diff --git a/build/updates/README.md b/build/updates/README.md
new file mode 100644
index 00000000..ea33056c
--- /dev/null
+++ b/build/updates/README.md
@@ -0,0 +1,11 @@
+## Important ##
+
+The current YUIDocs does not support @readonly on properties (only attributes). This folder contains an updated
+`builder.js`, which injects this support.
+
+Copy `builder.js` into
+ > node_modules/grunt-contrib-yuidoc/node-modules/yuidocjs/lib
+
+Without this file, properties will not show the "readonly" flag.
+
+Last tested with YUIDocs 0.5.2
\ No newline at end of file
diff --git a/build/updates/builder.js b/build/updates/builder.js
new file mode 100644
index 00000000..63c8e6d7
--- /dev/null
+++ b/build/updates/builder.js
@@ -0,0 +1,1663 @@
+/*
+Copyright (c) 2011, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://yuilibrary.com/license/
+*/
+var marked = require('marked'),
+ fs = require('graceful-fs'),
+ noop = function () {},
+ path = require('path'),
+ TEMPLATE;
+
+/**
+* Takes the `JSON` data from the `DocParser` class, creates and parses markdown and handlebars
+based templates to generate static HTML content
+* @class DocBuilder
+* @module yuidoc
+*/
+
+YUI.add('doc-builder', function (Y) {
+ /*jshint onevar:false */
+
+ var fixType = Y.Lang.fixType,
+ print = function (items) {
+ var out = '
';
+
+ Y.each(items, function (i, k) {
+ out += '- ';
+ if (Y.Lang.isObject(i)) {
+ if (!i.path) {
+ out += k + '/' + print(i);
+ } else {
+ out += '' + k + '';
+ }
+ }
+ out += '
';
+ });
+
+ out += '
';
+ return out;
+ };
+
+ Y.Handlebars.registerHelper('buildFileTree', function (items) {
+ return print(items);
+ });
+
+ var DEFAULT_THEME = path.join(__dirname, '../', 'themes', 'default'),
+ themeDir = DEFAULT_THEME;
+
+ Y.DocBuilder = function (options, data) {
+ this.options = options;
+ if (options.helpers) {
+ this._addHelpers(options.helpers);
+ }
+ if (options.themedir) {
+ themeDir = options.themedir;
+ }
+
+ this.data = data;
+ Y.log('Building..', 'info', 'builder');
+ this.files = 0;
+ var self = this;
+
+ Y.Handlebars.registerHelper('crossLink', function (item, options) {
+ var str = '';
+ if (!item) {
+ item = '';
+ }
+ //console.log('CrossLink:', item);
+ if (item.indexOf('|') > 0) {
+ var parts = item.split('|'),
+ p = [];
+ Y.each(parts, function (i) {
+ p.push(self._parseCrossLink.call(self, i));
+ });
+ str = p.join(' | ');
+ } else {
+ str = self._parseCrossLink.call(self, item, false, options.fn(this));
+ }
+ return str;
+ });
+
+ Y.Handlebars.registerHelper('crossLinkModule', function (item, options) {
+ var str = item;
+ if (self.data.modules[item]) {
+ var content = options.fn(this);
+ if (content === "") {
+ content = item;
+ }
+ str = '' + content + '';
+ }
+ return str;
+ });
+
+ Y.Handlebars.registerHelper('crossLinkRaw', function (item) {
+ var str = '';
+ if (!item) {
+ item = '';
+ }
+ if (item.indexOf('|') > 0) {
+ var parts = item.split('|'),
+ p = [];
+ Y.each(parts, function (i) {
+ p.push(self._parseCrossLink.call(self, i, true));
+ });
+ str = p.join(' | ');
+ } else {
+ str = self._parseCrossLink.call(self, item, true);
+ }
+ return str;
+ });
+
+ this.cacheTemplates = true;
+ if (options.cacheTemplates === false) {
+ this.cacheTemplates = false;
+ }
+ };
+
+ Y.DocBuilder.prototype = {
+ /**
+ * Register a `Y.Handlebars` helper method
+ * @method _addHelpers
+ * @param {Object} helpers Object containing a hash of names and functions
+ */
+ _addHelpers: function (helpers) {
+ Y.log('Importing helpers: ' + helpers, 'info', 'builder');
+ helpers.forEach(function (imp) {
+ if (!Y.Files.exists(imp) || Y.Files.exists(path.join(process.cwd(), imp))) {
+ imp = path.join(process.cwd(), imp);
+ }
+ var h = require(imp);
+ Object.keys(h).forEach(function (name) {
+ Y.Handlebars.registerHelper(name, h[name]);
+ });
+ });
+ },
+ /**
+ * Wrapper around the Markdown parser so it can be normalized or even side stepped
+ * @method markdown
+ * @private
+ * @param {String} md The Markdown string to parse
+ * @return {HTML} The rendered HTML
+ */
+ markdown: function (md) {
+ var html = marked(md, this.options.markdown);
+ //Only reprocess if helpers were asked for
+ if (this.options.helpers || (html.indexOf('{{#crossLink') > -1)) {
+ //console.log('MD: ', html);
+ try {
+ // marked auto-escapes quotation marks (and unfortunately
+ // does not expose the escaping function)
+ html = html.replace(/"/g, "\"");
+ html = (Y.Handlebars.compile(html))({});
+ } catch (hError) {
+ //Remove all the extra escapes
+ html = html.replace(/\\{/g, '{').replace(/\\}/g, '}');
+ Y.log('Failed to parse Handlebars, probably an unknown helper, skipping..', 'warn', 'builder');
+ }
+ //console.log('HB: ', html);
+ }
+ return html;
+ },
+
+ /**
+ * Parse the item to be cross linked and return an HREF linked to the item
+ * @method _parseCrossLink
+ * @private
+ * @param {String} item The item to crossLink
+ * @param {Boolean} [raw=false] Do not wrap it in HTML
+ * @param {String} [content] crossLink helper content
+ */
+ _parseCrossLink: function (item, raw, content) {
+ var self = this;
+ var base = '../',
+ baseItem,
+ newWin = false,
+ className = 'crosslink';
+
+ item = fixType(item);
+
+ item = baseItem = Y.Lang.trim(item.replace('{', '').replace('}', ''));
+ //Remove Cruft
+ item = item.replace('*', '').replace('[', '').replace(']', '');
+ var link = false,
+ href;
+
+ if (self.data.classes[item]) {
+ link = true;
+ } else {
+ if (self.data.classes[item.replace('.', '')]) {
+ link = true;
+ item = item.replace('.', '');
+ }
+ }
+ if (self.options.externalData) {
+ if (self.data.classes[item]) {
+ if (self.data.classes[item].external) {
+ href = self.data.classes[item].path;
+ base = self.options.externalData.base;
+ className += ' external';
+ newWin = true;
+ link = true;
+ }
+ }
+ }
+
+ if (item.indexOf('/') > -1) {
+ //We have a class + method to parse
+ var parts = item.split('/'),
+ cls = parts[0],
+ method = parts[1],
+ type = 'method';
+
+ if (method.indexOf(':') > -1) {
+ parts = method.split(':');
+ method = parts[0];
+ type = parts[1];
+ if (type.indexOf('attr') === 0) {
+ type = 'attribute';
+ }
+ }
+
+ if (cls && method) {
+ if (self.data.classes[cls]) {
+ self.data.classitems.forEach(function (i) {
+ if (i.itemtype === type && i.name === method && i.class === cls) {
+ link = true;
+ baseItem = method;
+ var t = type;
+ if (t === 'attribute') {
+ t = 'attr';
+ }
+ href = Y.webpath(base, 'classes', cls + '.html#' + t + '_' + method);
+ }
+ });
+ }
+ }
+
+ }
+
+ if (item === 'Object' || item === 'Array') {
+ link = false;
+ }
+ if (!href) {
+ href = Y.webpath(base, 'classes', item + '.html');
+ if (base.match(/^https?:\/\//)) {
+ href = base + Y.webpath('classes', item + '.html');
+ }
+ }
+ if (!link && self.options.linkNatives) {
+ if (self.NATIVES && self.NATIVES[item]) {
+ href = self.NATIVES_LINKER(item);
+ if (href) {
+ className += ' external';
+ newWin = true;
+ link = true;
+ }
+ }
+ }
+ if (link) {
+ if (content !== undefined) {
+ content = content.trim();
+ }
+ if (!content) {
+ content = baseItem;
+ }
+ item = '' + content + '';
+ }
+ return (raw) ? href : item;
+ },
+ /**
+ * List of native types to cross link to MDN
+ * @property NATIVES
+ * @type Object
+ */
+ NATIVES: {
+ 'Array': 1,
+ 'Boolean': 1,
+ 'Date': 1,
+ 'decodeURI': 1,
+ 'decodeURIComponent': 1,
+ 'encodeURI': 1,
+ 'encodeURIComponent': 1,
+ 'eval': 1,
+ 'Error': 1,
+ 'EvalError': 1,
+ 'Function': 1,
+ 'Infinity': 1,
+ 'isFinite': 1,
+ 'isNaN': 1,
+ 'Math': 1,
+ 'NaN': 1,
+ 'Number': 1,
+ 'Object': 1,
+ 'parseFloat': 1,
+ 'parseInt': 1,
+ 'RangeError': 1,
+ 'ReferenceError': 1,
+ 'RegExp': 1,
+ 'String': 1,
+ 'SyntaxError': 1,
+ 'TypeError': 1,
+ 'undefined': 1,
+ 'URIError': 1,
+ 'HTMLElement': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'HTMLCollection': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'DocumentFragment': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/',
+ 'HTMLDocument': 'https:/' + '/developer.mozilla.org/en/Document_Object_Model_(DOM)/'
+ },
+ /**
+ * Function to link an external type uses `NATIVES` object
+ * @method NATIVES_LINKER
+ * @private
+ * @param {String} name The name of the type to link
+ * @return {String} The combined URL
+ */
+ NATIVES_LINKER: function (name) {
+ var url = 'https:/' + '/developer.mozilla.org/en/JavaScript/Reference/Global_Objects/';
+ if (this.NATIVES[name] !== 1) {
+ url = this.NATIVES[name];
+ }
+ return url + name;
+ },
+ /**
+ * Mixes the various external data soures together into the local data, augmenting
+ * it with flags.
+ * @method _mixExternal
+ * @private
+ */
+ _mixExternal: function () {
+ var self = this;
+ Y.log('External data received, mixing', 'info', 'builder');
+ self.options.externalData.forEach(function (exData) {
+
+ ['files', 'classes', 'modules'].forEach(function (k) {
+ Y.each(exData[k], function (item, key) {
+ item.external = true;
+ var file = item.name;
+ if (!item.file) {
+ file = self.filterFileName(item.name);
+ }
+
+ if (item.type) {
+ item.type = fixType(item.type);
+ }
+
+ item.path = exData.base + path.join(k, file + '.html');
+
+ self.data[k][key] = item;
+ });
+ });
+ Y.each(exData.classitems, function (item) {
+ item.external = true;
+ item.path = exData.base + path.join('files', self.filterFileName(item.file) + '.html');
+ if (item.type) {
+ item.type = fixType(item.type);
+ }
+ if (item.params) {
+ item.params.forEach(function (p) {
+ if (p.type) {
+ p.type = fixType(p.type);
+ }
+ });
+ }
+ if (item["return"]) {
+ item["return"].type = fixType(item["return"].type);
+ }
+ self.data.classitems.push(item);
+ });
+ });
+ },
+ /**
+ * Fetches the remote data and fires the callback when it's all complete
+ * @method mixExternal
+ * @param {Callback} cb The callback to execute when complete
+ * @async
+ */
+ mixExternal: function (cb) {
+ var self = this,
+ info = self.options.external;
+
+ if (!info) {
+ cb();
+ return;
+ }
+ if (!info.merge) {
+ info.merge = 'mix';
+ }
+ if (!info.data) {
+ Y.log('External config found but no data path defined, skipping import.', 'warn', 'builder');
+ cb();
+ return;
+ }
+ if (!Y.Lang.isArray(info.data)) {
+ info.data = [info.data];
+ }
+ Y.log('Importing external documentation data.', 'info', 'builder');
+
+ var stack = new Y.Parallel();
+ info.data.forEach(function (i) {
+ var base;
+ if (i.match(/^https?:\/\//)) {
+ base = i.replace('data.json', '');
+ Y.use('io-base', stack.add(function () {
+ Y.log('Fetching: ' + i, 'info', 'builder');
+ Y.io(i, {
+ on: {
+ complete: stack.add(function (id, e) {
+ Y.log('Received: ' + i, 'info', 'builder');
+ var data = JSON.parse(e.responseText);
+ data.base = base;
+ //self.options.externalData = Y.mix(self.options.externalData || {}, data);
+ if (!self.options.externalData) {
+ self.options.externalData = [];
+ }
+ self.options.externalData.push(data);
+ })
+ }
+ });
+ }));
+ } else {
+ base = path.dirname(path.resolve(i));
+ var data = Y.Files.getJSON(i);
+ data.base = base;
+ //self.options.externalData = Y.mix(self.options.externalData || {}, data);
+ if (!self.options.externalData) {
+ self.options.externalData = [];
+ }
+ self.options.externalData.push(data);
+ }
+ });
+
+ stack.done(function () {
+ Y.log('Finished fetching remote data', 'info', 'builder');
+ self._mixExternal();
+ cb();
+ });
+ },
+ /**
+ * File counter
+ * @property files
+ * @type Number
+ */
+ files: null,
+ /**
+ * Holder for project meta data
+ * @property _meta
+ * @type Object
+ * @private
+ */
+ _meta: null,
+ /**
+ * Prep the meta data to be fed to Selleck
+ * @method getProjectMeta
+ * @return {Object} The project metadata
+ */
+ getProjectMeta: function () {
+ var obj = {
+ meta: {
+ yuiSeedUrl: 'http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js',
+ yuiGridsUrl: 'http://yui.yahooapis.com/3.5.0/build/cssgrids/cssgrids-min.css'
+ }
+ };
+ if (!this._meta) {
+ try {
+ var meta,
+ theme = path.join(themeDir, 'theme.json');
+ if (Y.Files.exists(theme)) {
+ Y.log('Loading theme from ' + theme, 'info', 'builder');
+ meta = Y.Files.getJSON(theme);
+ } else if (DEFAULT_THEME !== themeDir) {
+ theme = path.join(DEFAULT_THEME, 'theme.json');
+ if (Y.Files.exists(theme)) {
+ Y.log('Loading theme from ' + theme, 'info', 'builder');
+ meta = Y.Files.getJSON(theme);
+ }
+ }
+
+ if (meta) {
+ obj.meta = meta;
+ this._meta = meta;
+ }
+ } catch (e) {
+ console.error('Error', e);
+ }
+ } else {
+ obj.meta = this._meta;
+ }
+ Y.each(this.data.project, function (v, k) {
+ var key = k.substring(0, 1).toUpperCase() + k.substring(1, k.length);
+ obj.meta['project' + key] = v;
+ });
+ return obj;
+ },
+ /**
+ * Populate the meta data for classes
+ * @method populateClasses
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateClasses: function (opts) {
+ opts.meta.classes = [];
+ Y.each(this.data.classes, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.classes.push({
+ displayName: v.name,
+ name: v.name,
+ namespace: v.namespace,
+ module: v.module,
+ description: v.description,
+ access: v.access || 'public'
+ });
+ });
+ opts.meta.classes.sort(this.nameSort);
+ return opts;
+ },
+ /**
+ * Populate the meta data for modules
+ * @method populateModules
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateModules: function (opts) {
+ var self = this;
+ opts.meta.modules = [];
+ opts.meta.allModules = [];
+ Y.each(this.data.modules, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.allModules.push({
+ displayName: v.displayName || v.name,
+ name: self.filterFileName(v.name),
+ description: v.description
+ });
+ if (!v.is_submodule) {
+ var o = {
+ displayName: v.displayName || v.name,
+ name: self.filterFileName(v.name)
+ };
+ if (v.submodules) {
+ o.submodules = [];
+ Y.each(v.submodules, function (i, k) {
+ var moddef = self.data.modules[k];
+ if (moddef) {
+ o.submodules.push({
+ displayName: k,
+ description: moddef.description
+ });
+ // } else {
+ // Y.log('Submodule data missing: ' + k + ' for ' + v.name, 'warn', 'builder');
+ }
+ });
+ o.submodules.sort(self.nameSort);
+ }
+ opts.meta.modules.push(o);
+ }
+ });
+ opts.meta.modules.sort(this.nameSort);
+ opts.meta.allModules.sort(this.nameSort);
+ return opts;
+ },
+ /**
+ * Populate the meta data for files
+ * @method populateFiles
+ * @param {Object} opts The original options
+ * @return {Object} The modified options
+ */
+ populateFiles: function (opts) {
+ var self = this;
+ opts.meta.files = [];
+ Y.each(this.data.files, function (v) {
+ if (v.external) {
+ return;
+ }
+ opts.meta.files.push({
+ displayName: v.name,
+ name: self.filterFileName(v.name),
+ path: v.path || v.name
+ });
+ });
+
+ var tree = {};
+ var files = [];
+ Y.each(this.data.files, function (v) {
+ if (v.external) {
+ return;
+ }
+ files.push(v.name);
+ });
+ files.sort();
+ Y.each(files, function (v) {
+ var p = v.split('/'),
+ par;
+ p.forEach(function (i, k) {
+ if (!par) {
+ if (!tree[i]) {
+ tree[i] = {};
+ }
+ par = tree[i];
+ } else {
+ if (!par[i]) {
+ par[i] = {};
+ }
+ if (k + 1 === p.length) {
+ par[i] = {
+ path: v,
+ name: self.filterFileName(v)
+ };
+ }
+ par = par[i];
+ }
+ });
+ });
+
+ opts.meta.fileTree = tree;
+
+ return opts;
+ },
+ /**
+ * Parses file and line number from an item object and build's an HREF
+ * @method addFoundAt
+ * @param {Object} a The item to parse
+ * @return {String} The parsed HREF
+ */
+ addFoundAt: function (a) {
+ var self = this;
+ if (a.file && a.line && !self.options.nocode) {
+ a.foundAt = '../files/' + self.filterFileName(a.file) + '.html#l' + a.line;
+ if (a.path) {
+ a.foundAt = a.path + '#l' + a.line;
+ }
+ }
+ return a;
+ },
+ /**
+ * Augments the **DocParser** meta data to provide default values for certain keys as well as parses all descriptions
+ * with the `Markdown Parser`
+ * @method augmentData
+ * @param {Object} o The object to recurse and augment
+ * @return {Object} The augmented object
+ */
+ augmentData: function (o) {
+ var self = this;
+ o = self.addFoundAt(o);
+ Y.each(o, function (i, k1) {
+ if (i && i.forEach) {
+ Y.each(i, function (a, k) {
+ if (!(a instanceof Object)) {
+ return;
+ }
+ if (!a.type) {
+ a.type = 'Object'; //Default type is Object
+ }
+ if (a.final === '') {
+ a.final = true;
+ }
+ if (!a.description) {
+ a.description = ' ';
+ } else {
+ //a.description = markdown(a.description, true, self.defaultTags);
+ a.description = self.markdown(a.description);
+ }
+ if (a.example) {
+ a.example = self.markdown(a.example);
+ }
+ a = self.addFoundAt(a);
+
+ Y.each(a, function (c, d) {
+ if (c.forEach || (c instanceof Object)) {
+ c = self.augmentData(c);
+ a[d] = c;
+ }
+ });
+
+ o[k1][k] = a;
+ });
+ } else if (i instanceof Object) {
+ i = self.addFoundAt(i);
+ Y.each(i, function (v, k) {
+ if (k === 'final') {
+ o[k1][k] = true;
+ }
+ if (k === 'description' || k === 'example') {
+ if (k1 === 'return') {
+ o[k1][k] = self.markdown(v);
+ } else if (v.forEach || (v instanceof Object)) {
+ o[k1][k] = self.augmentData(v);
+ } else {
+ //o[k1][k] = markdown(v, true, self.defaultTags);
+ o[k1][k] = self.markdown(v);
+ }
+ }
+ });
+ } else if (k1 === 'description' || k1 === 'example') {
+ //o[k1] = markdown(i, true, self.defaultTags);
+ o[k1] = self.markdown(i);
+ }
+ });
+ return o;
+ },
+ /**
+ * Makes the default directories needed
+ * @method makeDirs
+ * @param {Callback} cb The callback to execute after it's completed
+ */
+ makeDirs: function (cb) {
+ var self = this;
+ var dirs = ['classes', 'modules', 'files'];
+ if (self.options.dumpview) {
+ dirs.push('json');
+ }
+ var writeRedirect = function (dir, file, cb) {
+ Y.Files.exists(file, function (x) {
+ if (x) {
+ var out = path.join(dir, 'index.html');
+ fs.createReadStream(file).pipe(fs.createWriteStream(out));
+ }
+ cb();
+ });
+ };
+ var defaultIndex = path.join(themeDir, 'assets', 'index.html');
+ var stack = new Y.Parallel();
+ Y.log('Making default directories: ' + dirs.join(','), 'info', 'builder');
+ dirs.forEach(function (d) {
+ var dir = path.join(self.options.outdir, d);
+ Y.Files.exists(dir, stack.add(function (x) {
+ if (!x) {
+ fs.mkdir(dir, 0777, stack.add(function () {
+ writeRedirect(dir, defaultIndex, stack.add(noop));
+ }));
+ } else {
+ writeRedirect(dir, defaultIndex, stack.add(noop));
+ }
+ }));
+ });
+ stack.done(function () {
+ if (cb) {
+ cb();
+ }
+ });
+ },
+
+
+ _resolveUrl: function (url, opts) {
+ if (!url) {
+ return null;
+ }
+ if (url.indexOf("://") >= 0) {
+ return url;
+ }
+ return path.join(opts.meta.projectRoot, url);
+ },
+
+ /**
+ * Parses `` tags and adds the __prettyprint__ `className` to them
+ * @method _parseCode
+ * @private
+ * @param {HTML} html The HTML to parse
+ * @return {HTML} The parsed HTML
+ */
+ _parseCode: function (html) {
+ html = html || '';
+ //html = html.replace(//g, '');
+ html = html.replace(/' + Y.escapeHTML(code) + ' PreloadJS: Custom Loader
+
+
+
+
+
+
+
+
+
+ PreloadJS Custom Loaders in Plugins
+ This sample shows how to a plugin can provide a custom loader to PreloadJS. This enables plugins to
+ create their own loader classes and instances (and add listeners or additional functionality), but rely
+ on PreloadJS to manage everything else.
+
+ This example uses a simple image loader, and the plugin has an opportunity to modify it once it is loaded
+ (by setting the image size).
+
+
+
+
+
+
+
+
diff --git a/examples/FontLoader.html b/examples/FontLoader.html
new file mode 100644
index 00000000..0c99579e
--- /dev/null
+++ b/examples/FontLoader.html
@@ -0,0 +1,140 @@
+
+
+
+ PreloadJS: Font Loading
+
+
+
+
+
+
+
+
+
+ PreloadJS Font Loading Approaches
+
+ This sample shows the different approaches for loading fonts in PreloadJS. Currently supported are
+ local font loading using a CSS file and manual definitions, and remote loading using Google Fonts. Currently,
+ Typekit is not supported.
+
+
+
+
+
+
+
+
+
+
+ Load CSS Source |
+ Load CSS Source List |
+ Load Manual List |
+ Load CSS Tag |
+ Load Google Fonts
+
+
+
+ Hello World!
+
+
+ Hello World (bold)!
+
+
+ Hello World (google)!
+
+
+
+
+
+
+
diff --git a/examples/MediaGrid.html b/examples/MediaGrid.html
index c261a52e..d13644be 100644
--- a/examples/MediaGrid.html
+++ b/examples/MediaGrid.html
@@ -3,9 +3,12 @@
PreloadJS: Multimedia Preload Example
-
+
+
+
+
-
- PreloadJS Example: Media Grid
- PreloadJS can load a variety of media. In this example, click each example to load its related item.
- Once the item is loaded, it will display (image, svg), play (sound), apply to the document (css), or display
- an alert (script). Note that when loading images, sounds, css, scripts, or svg locally, you need to ensure
- that PreloadJS uses tag loading to avoid cross-origin errors. Other media types will not load locally.
-
-
-
-
- Click an item to load it.
+
+ Example: Media Grid
+
+ PreloadJS can load a variety of media. In this example, click each
+ example to load its related item.
+ Once the item is loaded, it will display (image, svg), play (sound),
+ apply to the document (css), or display
+ an alert (script). Note that when loading images, sounds, css, scripts,
+ or svg locally, you need to ensure
+ that PreloadJS uses tag loading to avoid cross-origin errors. Other
+ media types will not load locally.
+
+
+
+ Click an item to load it.
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
-
+
+ }
+ }
+
diff --git a/examples/PluginSample.html b/examples/PluginSample.html
index 5ee6f845..187f430b 100644
--- a/examples/PluginSample.html
+++ b/examples/PluginSample.html
@@ -3,7 +3,10 @@
PreloadJS: Plugin Sample
-
+
+
+
+
-
- PreloadJS Preload Queue
- Click "load another" to add another image the the overall queue. As images are added, the preload progress reflects
- the overall loaded progress. Click "load all" to queue everything at once.
- Note that when loading images and sounds locally, you need to ensure that PreloadJS uses tag loading to avoid
- cross-origin errors.
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Preload Queue
+
+ Click "load another" to add another image the the overall queue. As
+ images are added, the preload progress reflects
+ the overall loaded progress. Click "load all" to queue everything at
+ once.
+ Note that when loading images and sounds locally, you need to ensure
+ that PreloadJS uses tag loading to avoid
+ cross-origin errors.
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+ function loadAll() {
+ while (manifest.length > 0) {
+ loadAnother();
+ }
+ }
+
+ function loadAnother() {
+ // Get the next manifest item, and load it
+ var item = manifest.shift();
+ preload.loadFile(item);
+
+ // If we have no more items, disable the UI.
+ if (manifest.length == 0) {
+ $("#loadAnotherBtn").attr("disabled", "disabled");
+ $("#loadAllBtn").attr("disabled", "disabled");
+ $("#reloadBtn").css("display", "inline");
+ }
+
+ // Create a new loader display item
+ var div = $("#template").clone();
+ div.attr("id", ""); // Wipe out the ID
+ div.addClass("box")
+ $("#container").append(div);
+ map[item] = div; // Store a reference to each item by its src
+ }
+
+ // File complete handler
+ function handleFileLoad(event) {
+ var div = map[event.item.id];
+ div.addClass("complete");
+
+ // Get a reference to the loaded image (![]()
)
+ var img = event.result;
+
+ // Resize it to fit inside the item
+ var r = img.width / img.height;
+ var ir = w / h
+ if (r > ir) {
+ img.width = w;
+ img.height = w / r;
+ } else {
+ img.height = h;
+ img.width = h;
+ }
+ div.append(img); // Add it to the DOM
+ }
+
+ // File progress handler
+ function handleFileProgress(event) {
+ var div = map[event.item.id]; // Lookup the related item
+ div.children("DIV").width(event.progress * div.width()); // Set the width the progress.
+ }
+
+ // Overall progress handler
+ function handleOverallProgress(event) {
+ $("#mainProgress > .progress").width(preload.progress * $("#mainProgress").width());
+ }
+
+ // An error happened on a file
+ function handleFileError(event) {
+ var div = map[event.item.id];
+ div.addClass("error");
+ }
+
-
\ No newline at end of file
+