From 2950973b7adf6f2a7814747270d2e25094e98360 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 11 Apr 2015 16:51:13 -0700 Subject: [PATCH] Optimize embeded css, also organize build files --- css/cleanslate.css | 239 +++++++++++++++++++++++++++++++++++++ index.html | 2 +- js/embed.js | 10 +- js/main.js | 4 +- {js => rjs}/almond.js | 0 {js => rjs}/build.js | 15 +-- {js => rjs}/css-builder.js | 0 {js => rjs}/css.js | 11 +- {js => rjs}/normalize.js | 0 {js => rjs}/require.js | 0 {js => rjs}/text.js | 0 11 files changed, 259 insertions(+), 22 deletions(-) create mode 100644 css/cleanslate.css rename {js => rjs}/almond.js (100%) rename {js => rjs}/build.js (62%) rename {js => rjs}/css-builder.js (100%) mode change 100755 => 100644 rename {js => rjs}/css.js (98%) mode change 100755 => 100644 rename {js => rjs}/normalize.js (100%) rename {js => rjs}/require.js (100%) rename {js => rjs}/text.js (100%) diff --git a/css/cleanslate.css b/css/cleanslate.css new file mode 100644 index 00000000..86d65037 --- /dev/null +++ b/css/cleanslate.css @@ -0,0 +1,239 @@ +/*! +* CleanSlate +* github.com/premasagar/cleanslate +* +*//* + An extreme CSS reset stylesheet, for normalising the styling of a container element and its children. + + by Premasagar Rose + dharmafly.com + + license + opensource.org/licenses/mit-license.php + + ** + + v0.9.3 + +*/ + +/* == BLANKET RESET RULES == */ + +/* HTML 4.01 */ +#winamp2-js, #winamp2-js h1, #winamp2-js h2, #winamp2-js h3, #winamp2-js h4, #winamp2-js h5, #winamp2-js h6, #winamp2-js p, #winamp2-js td, #winamp2-js dl, #winamp2-js tr, #winamp2-js dt, #winamp2-js ol, #winamp2-js form, #winamp2-js select, #winamp2-js option, #winamp2-js pre, #winamp2-js div, #winamp2-js table, #winamp2-js th, #winamp2-js tbody, #winamp2-js tfoot, #winamp2-js caption, #winamp2-js thead, #winamp2-js ul, #winamp2-js li, #winamp2-js address, #winamp2-js blockquote, #winamp2-js dd, #winamp2-js fieldset, #winamp2-js li, #winamp2-js iframe, #winamp2-js strong, #winamp2-js legend, #winamp2-js em, #winamp2-js s, #winamp2-js cite, #winamp2-js span, #winamp2-js input, #winamp2-js sup, #winamp2-js label, #winamp2-js dfn, #winamp2-js object, #winamp2-js big, #winamp2-js q, #winamp2-js font, #winamp2-js samp, #winamp2-js acronym, #winamp2-js small, #winamp2-js img, #winamp2-js strike, #winamp2-js code, #winamp2-js sub, #winamp2-js ins, #winamp2-js textarea, #winamp2-js var, #winamp2-js a, #winamp2-js abbr, #winamp2-js applet, #winamp2-js del, #winamp2-js kbd, #winamp2-js tt, #winamp2-js b, #winamp2-js i, #winamp2-js hr, + +/* HTML5 */ +#winamp2-js article, #winamp2-js aside, #winamp2-js dialog, #winamp2-js figure, #winamp2-js footer, #winamp2-js header, #winamp2-js hgroup, #winamp2-js menu, #winamp2-js nav, #winamp2-js section, #winamp2-js time, #winamp2-js mark, #winamp2-js audio, #winamp2-js video { + background-attachment:scroll; + background-color:transparent; + background-image:none; /* This rule affects the use of pngfix JavaScript http://dillerdesign.com/experiment/DD_BelatedPNG for IE6, which is used to force the browser to recognise alpha-transparent PNGs files that replace the IE6 lack of PNG transparency. (The rule overrides the VML image that is used to replace the given CSS background-image). If you don't know what that means, then you probably haven't used the pngfix script, and this comment may be ignored :) */ + background-position:0 0; + background-repeat:repeat; + border-color:black; + border-color:currentColor; /* `border-color` should match font color. Modern browsers (incl. IE9) allow the use of "currentColor" to match the current font 'color' value . For older browsers, a default of 'black' is given before this rule. Guideline to support older browsers: if you haven't already declared a border-color for an element, be sure to do so, e.g. when you first declare the border-width. */ + border-radius:0; + border-style:none; + border-width:medium; + box-sizing:content-box; + bottom:auto; + clear:none; + clip:auto; + color:inherit; + counter-increment:none; + counter-reset:none; + cursor:auto; + direction:inherit; + display:inline; + float:none; + font-family: inherit; /* As with other inherit values, this needs to be set on the root container element */ + font-size: inherit; + font-style:inherit; + font-variant:normal; + font-weight:inherit; + height:auto; + left:auto; + letter-spacing:normal; + line-height:inherit; + list-style-type: inherit; /* Could set list-style-type to none */ + list-style-position: outside; + list-style-image: none; + margin:0; + max-height:none; + max-width:none; + min-height:0; + min-width:0; + opacity:1; + outline:invert none medium; + overflow:visible; + padding:0; + position:static; + quotes: "" ""; + right:auto; + table-layout:auto; + text-align:inherit; + text-decoration:inherit; + text-indent:0; + text-transform:none; + top:auto; + unicode-bidi:normal; + vertical-align:baseline; + visibility:inherit; + white-space:normal; + width:auto; + word-spacing:normal; + z-index:auto; + + /* Proprietary and draft rules */ + /* This section needs extending */ + -moz-border-radius:0; + -webkit-border-radius:0; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + text-shadow: none; +} + +/* == BLOCK-LEVEL == */ +/* Actually, some of these should be inline-block and other values, but block works fine (TODO: rigorously verify this) */ +/* HTML 4.01 */ +#winamp2-js, #winamp2-js h3, #winamp2-js h5, #winamp2-js p, #winamp2-js h1, #winamp2-js dl, #winamp2-js dt, #winamp2-js h6, #winamp2-js ol, #winamp2-js form, #winamp2-js select, #winamp2-js option, #winamp2-js pre, #winamp2-js div, #winamp2-js h2, #winamp2-js caption, #winamp2-js h4, #winamp2-js ul, #winamp2-js address, #winamp2-js blockquote, #winamp2-js dd, #winamp2-js fieldset, #winamp2-js hr, +/* HTML5 new elements */ +#winamp2-js article, #winamp2-js aside, #winamp2-js dialog, #winamp2-js figure, #winamp2-js footer, #winamp2-js header, #winamp2-js hgroup, #winamp2-js menu, #winamp2-js nav, #winamp2-js section { + display:block; +} + +#winamp2-js textarea { + display:inline-block; +} + +#winamp2-js table { + display: table; +} +#winamp2-js thead { + display: table-header-group; +} +#winamp2-js tbody { + display: table-row-group; +} +#winamp2-js tfoot { + display: table-footer-group; +} +#winamp2-js tr { + display: table-row; +} +#winamp2-js th, #winamp2-js td { + display: table-cell; + vertical-align: middle; +} +#winamp2-js td[valign=top] { + vertical-align: top +} +#winamp2-js td[valign=bottom] { + vertical-align: bottom +} +/* == SPECIFIC ELEMENTS == */ +/* Some of these are browser defaults; some are just useful resets */ + +#winamp2-js nav ul, #winamp2-js nav ol { + list-style-type:none; +} +#winamp2-js ul, #winamp2-js menu { + list-style-type:disc; +} +#winamp2-js ol { + list-style-type:decimal; +} +#winamp2-js ol ul, #winamp2-js ul ul, #winamp2-js menu ul, #winamp2-js ol menu, #winamp2-js ul menu, #winamp2-js menu menu { + list-style-type:circle; +} +#winamp2-js ol ol ul, #winamp2-js ol ul ul, #winamp2-js ol menu ul, #winamp2-js ol ol menu, #winamp2-js ol ul menu, #winamp2-js ol menu menu, #winamp2-js ul ol ul, #winamp2-js ul ul ul, #winamp2-js ul menu ul, #winamp2-js ul ol menu, #winamp2-js ul ul menu, #winamp2-js ul menu menu, #winamp2-js menu ol ul, #winamp2-js menu ul ul, #winamp2-js menu menu ul, #winamp2-js menu ol menu, #winamp2-js menu ul menu, #winamp2-js menu menu menu { + list-style-type:square; +} +#winamp2-js li { + display:list-item; + /* Fixes IE7 issue with positioning of nested bullets */ + min-height:auto; + min-width:auto; +} +#winamp2-js strong { + font-weight:bold; +} +#winamp2-js em { + font-style:italic; +} +#winamp2-js kbd, #winamp2-js samp, #winamp2-js code { + font-family:monospace; +} +#winamp2-js a, #winamp2-js a *, #winamp2-js input[type=submit], #winamp2-js input[type=radio], #winamp2-js input[type=checkbox], #winamp2-js select { + cursor:pointer; +} +#winamp2-js a:hover { + text-decoration:underline; +} +#winamp2-js button, #winamp2-js input[type=submit] { + text-align: center; +} +#winamp2-js input[type=hidden] { + display:none; +} +#winamp2-js abbr[title], #winamp2-js acronym[title], #winamp2-js dfn[title] { + cursor:help; + border-bottom-width:1px; + border-bottom-style:dotted; +} +#winamp2-js ins { + background-color:#ff9; + color:black; +} +#winamp2-js del { + text-decoration: line-through; +} +#winamp2-js blockquote, #winamp2-js q { + quotes:none; /* HTML5 */ +} +#winamp2-js blockquote:before, #winamp2-js blockquote:after, #winamp2-js q:before, #winamp2-js q:after, #winamp2-js li:before, #winamp2-js li:after { + content:""; +} +#winamp2-js input, #winamp2-js select { + vertical-align:middle; +} +#winamp2-js select, #winamp2-js textarea, #winamp2-js input { + border:1px solid #ccc; +} +#winamp2-js table { + border-collapse:collapse; + border-spacing:0; +} +#winamp2-js hr { + display:block; + height:1px; + border:0; + border-top:1px solid #ccc; + margin:1em 0; +} +#winamp2-js *[dir=rtl] { + direction: rtl; +} +#winamp2-js mark { + background-color:#ff9; + color:black; + font-style:italic; + font-weight:bold; +} + + + +/* == ROOT CONTAINER ELEMENT == */ +/* This contains default values for child elements to inherit */ +#winamp2-js { + font-size: medium; + line-height: 1; + direction:ltr; + text-align:left; + font-family: "Times New Roman", Times, serif; /* Override this with whatever font-family is required */ + color: black; + font-style:normal; + font-weight:normal; + text-decoration:none; + list-style-type:disc; +} diff --git a/index.html b/index.html index c5bcd62a..b8d0981f 100755 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - +

Your browser does not support the features we need

diff --git a/js/embed.js b/js/embed.js index f89ae2f4..3b44e730 100644 --- a/js/embed.js +++ b/js/embed.js @@ -3,22 +3,24 @@ var scriptTag = document.currentScript; require([ 'browser', - 'text!../html/main-window.html', - 'css!../css/winamp.css', + '../rjs/text!../html/main-window.html', + '../rjs/css!../css/cleanslate.css', + '../rjs/css!../css/winamp.css', 'winamp', 'context', 'hotkeys' ], function( Browser, mainWindowHtml, - pageCss, + cleanslateCss, + winampCss, Winamp, Context, Hotkeys ) { if(Browser.isCompatible()) { var node = document.createElement('div'); - node.setAttribute("id", "main-window-parent"); + node.setAttribute("id", "winamp2-js"); node.innerHTML = mainWindowHtml; if (scriptTag.nextSibling) { diff --git a/js/main.js b/js/main.js index d4169232..24306891 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,7 @@ require([ 'browser', - 'text!../html/main-window.html', - 'css!../css/winamp.css', + '../rjs/text!../html/main-window.html', + '../rjs/css!../css/winamp.css', 'winamp', 'context', 'hotkeys' diff --git a/js/almond.js b/rjs/almond.js similarity index 100% rename from js/almond.js rename to rjs/almond.js diff --git a/js/build.js b/rjs/build.js similarity index 62% rename from js/build.js rename to rjs/build.js index f949bccb..8eca7deb 100644 --- a/js/build.js +++ b/rjs/build.js @@ -1,7 +1,6 @@ ({ appDir: "../", baseUrl: "js/", - include: "main", wrap: true, dir: "../../winamp2-js-prod", optimizeCss: "standard", @@ -9,17 +8,13 @@ modules: [ { name: 'main' }, { - name: 'embed-built', + name: '../winamp2-js', create: true, include: [ - 'almond', + '../rjs/almond', 'embed' - ] + ], + exclude: ['../rjs/normalize'] } - ], - map: { - '*': { - 'css': 'css' - } - } + ] }) diff --git a/js/css-builder.js b/rjs/css-builder.js old mode 100755 new mode 100644 similarity index 100% rename from js/css-builder.js rename to rjs/css-builder.js diff --git a/js/css.js b/rjs/css.js old mode 100755 new mode 100644 similarity index 98% rename from js/css.js rename to rjs/css.js index bed79d9b..d30bf98d --- a/js/css.js +++ b/rjs/css.js @@ -1,7 +1,7 @@ /* * Require-CSS RequireJS css! loader plugin - * 0.1.2 - * Guy Bedford 2013 + * 0.1.8 + * Guy Bedford 2014 * MIT */ @@ -74,13 +74,14 @@ define(function() { var ieCurCallback; var createIeLoad = function(url) { + curSheet.addImport(url); + curStyle.onload = function(){ processIeLoad() }; + ieCnt++; - if (ieCnt == 32) { + if (ieCnt == 31) { createStyle(); ieCnt = 0; } - curSheet.addImport(url); - curStyle.onload = function(){ processIeLoad() }; } var processIeLoad = function() { ieCurCallback(); diff --git a/js/normalize.js b/rjs/normalize.js similarity index 100% rename from js/normalize.js rename to rjs/normalize.js diff --git a/js/require.js b/rjs/require.js similarity index 100% rename from js/require.js rename to rjs/require.js diff --git a/js/text.js b/rjs/text.js similarity index 100% rename from js/text.js rename to rjs/text.js