diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..31a91ae --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +notifyjs.com \ No newline at end of file diff --git a/dist/styles/notify-bootstrap.js b/dist/styles/bootstrap/notify-bootstrap.js similarity index 100% rename from dist/styles/notify-bootstrap.js rename to dist/styles/bootstrap/notify-bootstrap.js diff --git a/docs/Gruntsource.json b/docs/Gruntsource.json new file mode 100644 index 0000000..25abc44 --- /dev/null +++ b/docs/Gruntsource.json @@ -0,0 +1,7 @@ +{ + "source": "~/.grunt-sources/web", + "repo": "https://github.com/jpillora/grunt-source-web.git", + "output": { + "html": "../index.html" + } +} \ No newline at end of file diff --git a/docs/css/app.css b/docs/css/app.css new file mode 100644 index 0000000..6e93057 --- /dev/null +++ b/docs/css/app.css @@ -0,0 +1,1467 @@ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Content +================================================== + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Images + #Buttons + #Forms + #Misc */ + + +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + body { + line-height: 1; } + ol, ul { + list-style: none; } + blockquote, q { + quotes: none; } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; } + table { + border-collapse: collapse; + border-spacing: 0; } + + +/* #Basic Styles +================================================== */ + body { + background: #fff; + font: 14px/21px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; + } + + +/* #Typography +================================================== */ + h1, h2, h3, h4, h5, h6 { + color: #181818; + font-family: 'Merriweather Sans', "Georgia", "Times New Roman", serif; + font-weight: normal; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} + h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } + h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } + h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } + h5 { font-size: 17px; line-height: 24px; } + h6 { font-size: 14px; line-height: 21px; } + .subheader { color: #777; } + + p { margin: 0 0 20px 0; } + p img { margin: 0; } + p.lead { font-size: 21px; line-height: 27px; color: #777; } + + em { font-style: italic; } + strong { font-weight: bold; color: #333; } + small { font-size: 80%; } + +/* Blockquotes */ + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } + +/* #Lists +================================================== */ + ul, ol { margin-bottom: 20px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ul ol, + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } + ul ul li, ul ol li, + ol ol li, ol ul li { margin-bottom: 6px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + li p { line-height: 21px; } + +/* #Images +================================================== */ + + img.scale-with-grid { + max-width: 100%; + height: auto; } + + +/* #Buttons +================================================== */ + + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + background: #eee; /* Old browsers */ + background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ + background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ + background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ + background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ + background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ + background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, .75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover { + color: #222; + background: #ddd; /* Old browsers */ + background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ + background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ + background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ + background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ + background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ + background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; } + + .button:active, + button:active, + button.active, + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active { + border: 1px solid #666; + background: #ccc; /* Old browsers */ + background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ + background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ + background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ + background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ + background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ + background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } + + button.disabled, + button[disabled="disabled"] { + opacity: 0.85; + } + + .button.full-width, + button.full-width, + input[type="submit"].full-width, + input[type="reset"].full-width, + input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } + + /* Fix for odd Mozilla border & padding issues */ + button::-moz-focus-inner, + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + +/* #Forms +================================================== */ + + form { + margin-bottom: 20px; } + fieldset { + margin-bottom: 20px; } + input[type="text"], + input[type="password"], + input[type="email"], + textarea, + select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; } + select { + padding: 0; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + textarea:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); + box-shadow: 0 0 3px rgba(0,0,0,.2); } + textarea { + min-height: 60px; } + label, + legend { + display: block; + font-weight: bold; + font-size: 13px; } + select { + width: 220px; } + input[type="checkbox"] { + display: inline; } + label span, + legend span { + font-weight: normal; + font-size: 13px; + color: #444; } + +/* #Misc +================================================== */ + .remove-bottom { margin-bottom: 0 !important; } + .half-bottom { margin-bottom: 10px !important; } + .add-bottom { margin-bottom: 20px !important; } + + + +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + +/* Table of Content +================================================== + #Site Styles + #Page Styles + #Media Queries + #Font-Face */ + +/* #Site Styles +================================================== */ + +/* #Page Styles +================================================== */ + +/* #Media Queries +================================================== */ + + /* Smaller than standard 960 (devices and browsers) */ + @media only screen and (max-width: 959px) {} + + /* Tablet Portrait size to standard 960 (devices and browsers) */ + @media only screen and (min-width: 768px) and (max-width: 959px) {} + + /* All Mobile Sizes (devices and browser) */ + @media only screen and (max-width: 767px) {} + + /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ + @media only screen and (min-width: 480px) and (max-width: 767px) {} + + /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ + @media only screen and (max-width: 479px) {} + + +/* #Font-Face +================================================== */ +/* This is the proper syntax for an @font-face file + Just create a "fonts" folder at the root, + copy your FontName into code below and remove + comment brackets */ + +/* @font-face { + font-family: 'FontName'; + src: url('../fonts/FontName.eot'); + src: url('../fonts/FontName.eot?iefix') format('eot'), + url('../fonts/FontName.woff') format('woff'), + url('../fonts/FontName.ttf') format('truetype'), + url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); + font-weight: normal; + font-style: normal; } +*/ +.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Contents +================================================== + #Base 960 Grid + #Tablet (Portrait) + #Mobile (Portrait) + #Mobile (Landscape) + #Clearing */ + + + +/* #Base 960 Grid +================================================== */ + + .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } + .container .column, + .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .row { margin-bottom: 20px; } + + /* Nested Column Classes */ + .column.alpha, .columns.alpha { margin-left: 0; } + .column.omega, .columns.omega { margin-right: 0; } + + /* Base Grid */ + .container .one.column, + .container .one.columns { width: 40px; } + .container .two.columns { width: 100px; } + .container .three.columns { width: 160px; } + .container .four.columns { width: 220px; } + .container .five.columns { width: 280px; } + .container .six.columns { width: 340px; } + .container .seven.columns { width: 400px; } + .container .eight.columns { width: 460px; } + .container .nine.columns { width: 520px; } + .container .ten.columns { width: 580px; } + .container .eleven.columns { width: 640px; } + .container .twelve.columns { width: 700px; } + .container .thirteen.columns { width: 760px; } + .container .fourteen.columns { width: 820px; } + .container .fifteen.columns { width: 880px; } + .container .sixteen.columns { width: 940px; } + + .container .one-third.column { width: 300px; } + .container .two-thirds.column { width: 620px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 60px; } + .container .offset-by-two { padding-left: 120px; } + .container .offset-by-three { padding-left: 180px; } + .container .offset-by-four { padding-left: 240px; } + .container .offset-by-five { padding-left: 300px; } + .container .offset-by-six { padding-left: 360px; } + .container .offset-by-seven { padding-left: 420px; } + .container .offset-by-eight { padding-left: 480px; } + .container .offset-by-nine { padding-left: 540px; } + .container .offset-by-ten { padding-left: 600px; } + .container .offset-by-eleven { padding-left: 660px; } + .container .offset-by-twelve { padding-left: 720px; } + .container .offset-by-thirteen { padding-left: 780px; } + .container .offset-by-fourteen { padding-left: 840px; } + .container .offset-by-fifteen { padding-left: 900px; } + + + +/* #Tablet (Portrait) +================================================== */ + + /* Note: Design for a width of 768px */ + + @media only screen and (min-width: 768px) and (max-width: 959px) { + .container { width: 768px; } + .container .column, + .container .columns { margin-left: 10px; margin-right: 10px; } + .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } + .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } + .alpha.omega { margin-left: 0; margin-right: 0; } + + .container .one.column, + .container .one.columns { width: 28px; } + .container .two.columns { width: 76px; } + .container .three.columns { width: 124px; } + .container .four.columns { width: 172px; } + .container .five.columns { width: 220px; } + .container .six.columns { width: 268px; } + .container .seven.columns { width: 316px; } + .container .eight.columns { width: 364px; } + .container .nine.columns { width: 412px; } + .container .ten.columns { width: 460px; } + .container .eleven.columns { width: 508px; } + .container .twelve.columns { width: 556px; } + .container .thirteen.columns { width: 604px; } + .container .fourteen.columns { width: 652px; } + .container .fifteen.columns { width: 700px; } + .container .sixteen.columns { width: 748px; } + + .container .one-third.column { width: 236px; } + .container .two-thirds.column { width: 492px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 48px; } + .container .offset-by-two { padding-left: 96px; } + .container .offset-by-three { padding-left: 144px; } + .container .offset-by-four { padding-left: 192px; } + .container .offset-by-five { padding-left: 240px; } + .container .offset-by-six { padding-left: 288px; } + .container .offset-by-seven { padding-left: 336px; } + .container .offset-by-eight { padding-left: 384px; } + .container .offset-by-nine { padding-left: 432px; } + .container .offset-by-ten { padding-left: 480px; } + .container .offset-by-eleven { padding-left: 528px; } + .container .offset-by-twelve { padding-left: 576px; } + .container .offset-by-thirteen { padding-left: 624px; } + .container .offset-by-fourteen { padding-left: 672px; } + .container .offset-by-fifteen { padding-left: 720px; } + } + + +/* #Mobile (Portrait) +================================================== */ + + /* Note: Design for a width of 320px */ + + @media only screen and (max-width: 767px) { + .container { width: 300px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 300px; } + + /* Offsets */ + .container .offset-by-one, + .container .offset-by-two, + .container .offset-by-three, + .container .offset-by-four, + .container .offset-by-five, + .container .offset-by-six, + .container .offset-by-seven, + .container .offset-by-eight, + .container .offset-by-nine, + .container .offset-by-ten, + .container .offset-by-eleven, + .container .offset-by-twelve, + .container .offset-by-thirteen, + .container .offset-by-fourteen, + .container .offset-by-fifteen { padding-left: 0; } + + } + + +/* #Mobile (Landscape) +================================================== */ + + /* Note: Design for a width of 480px */ + + @media only screen and (min-width: 480px) and (max-width: 767px) { + .container { width: 420px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 420px; } + } + + +/* #Clearing +================================================== */ + + /* Self Clearing Goodness */ + .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns, + or wrap each row of columns in a
*/ + .clearfix:before, + .clearfix:after, + .row:before, + .row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + .row:after, + .clearfix:after { + clear: both; } + .row, + .clearfix { + zoom: 1; } + + /* You can also use a
to clear columns */ + .clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } + + +/* line 1 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/stylus/lib/functions/index.styl */ + +/* line 14 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/index.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/border.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/clearfix.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/color-image.styl */ + +/* line 6 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/flex.styl */ + +/* line 154 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/gradients.styl */ + +/* line 154 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/config.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/iconic.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/image.styl */ + +/* line 25 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/overflow.styl */ + +/* line 3 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/positions.styl */ + +/* line 3 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/reset.styl */ + +/* line 5 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/text/index.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/text/aliases.styl */ + +/* line 2 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/text/ellipsis.styl */ + +/* line 11 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/text/hide-text.styl */ + +/* line 9 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/text/replace-text.styl */ + +/* line 557 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/vendor.styl */ + +/* line 557 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/config.styl */ + +/* line 12 : /Users/jpillora/.grunt-sources/web/node_modules/grunt-contrib-stylus/node_modules/nib/lib/nib/size.styl */ + +/* line 29 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/vendor/base.css */ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Content +================================================== + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Images + #Buttons + #Forms + #Misc */ + + +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + body { + line-height: 1; } + ol, ul { + list-style: none; } + blockquote, q { + quotes: none; } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; } + table { + border-collapse: collapse; + border-spacing: 0; } + + +/* #Basic Styles +================================================== */ + body { + background: #fff; + font: 14px/21px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; + } + + +/* #Typography +================================================== */ + h1, h2, h3, h4, h5, h6 { + color: #181818; + font-family: 'Merriweather Sans', "Georgia", "Times New Roman", serif; + font-weight: normal; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} + h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } + h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } + h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } + h5 { font-size: 17px; line-height: 24px; } + h6 { font-size: 14px; line-height: 21px; } + .subheader { color: #777; } + + p { margin: 0 0 20px 0; } + p img { margin: 0; } + p.lead { font-size: 21px; line-height: 27px; color: #777; } + + em { font-style: italic; } + strong { font-weight: bold; color: #333; } + small { font-size: 80%; } + +/* Blockquotes */ + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } + +/* #Lists +================================================== */ + ul, ol { margin-bottom: 20px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ul ol, + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } + ul ul li, ul ol li, + ol ol li, ol ul li { margin-bottom: 6px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + li p { line-height: 21px; } + +/* #Images +================================================== */ + + img.scale-with-grid { + max-width: 100%; + height: auto; } + + +/* #Buttons +================================================== */ + + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + background: #eee; /* Old browsers */ + background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ + background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ + background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ + background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ + background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ + background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, .75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover { + color: #222; + background: #ddd; /* Old browsers */ + background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ + background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ + background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ + background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ + background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ + background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; } + + .button:active, + button:active, + button.active, + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active { + border: 1px solid #666; + background: #ccc; /* Old browsers */ + background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ + background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ + background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ + background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ + background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ + background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } + + button.disabled, + button[disabled="disabled"] { + opacity: 0.85; + } + + .button.full-width, + button.full-width, + input[type="submit"].full-width, + input[type="reset"].full-width, + input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } + + /* Fix for odd Mozilla border & padding issues */ + button::-moz-focus-inner, + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + +/* #Forms +================================================== */ + + form { + margin-bottom: 20px; } + fieldset { + margin-bottom: 20px; } + input[type="text"], + input[type="password"], + input[type="email"], + textarea, + select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; } + select { + padding: 0; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + textarea:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); + box-shadow: 0 0 3px rgba(0,0,0,.2); } + textarea { + min-height: 60px; } + label, + legend { + display: block; + font-weight: bold; + font-size: 13px; } + select { + width: 220px; } + input[type="checkbox"] { + display: inline; } + label span, + legend span { + font-weight: normal; + font-size: 13px; + color: #444; } + +/* #Misc +================================================== */ + .remove-bottom { margin-bottom: 0 !important; } + .half-bottom { margin-bottom: 10px !important; } + .add-bottom { margin-bottom: 20px !important; } + +/* line 29 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/vendor/skeleton.css */ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Contents +================================================== + #Base 960 Grid + #Tablet (Portrait) + #Mobile (Portrait) + #Mobile (Landscape) + #Clearing */ + + + +/* #Base 960 Grid +================================================== */ + + .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } + .container .column, + .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .row { margin-bottom: 20px; } + + /* Nested Column Classes */ + .column.alpha, .columns.alpha { margin-left: 0; } + .column.omega, .columns.omega { margin-right: 0; } + + /* Base Grid */ + .container .one.column, + .container .one.columns { width: 40px; } + .container .two.columns { width: 100px; } + .container .three.columns { width: 160px; } + .container .four.columns { width: 220px; } + .container .five.columns { width: 280px; } + .container .six.columns { width: 340px; } + .container .seven.columns { width: 400px; } + .container .eight.columns { width: 460px; } + .container .nine.columns { width: 520px; } + .container .ten.columns { width: 580px; } + .container .eleven.columns { width: 640px; } + .container .twelve.columns { width: 700px; } + .container .thirteen.columns { width: 760px; } + .container .fourteen.columns { width: 820px; } + .container .fifteen.columns { width: 880px; } + .container .sixteen.columns { width: 940px; } + + .container .one-third.column { width: 300px; } + .container .two-thirds.column { width: 620px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 60px; } + .container .offset-by-two { padding-left: 120px; } + .container .offset-by-three { padding-left: 180px; } + .container .offset-by-four { padding-left: 240px; } + .container .offset-by-five { padding-left: 300px; } + .container .offset-by-six { padding-left: 360px; } + .container .offset-by-seven { padding-left: 420px; } + .container .offset-by-eight { padding-left: 480px; } + .container .offset-by-nine { padding-left: 540px; } + .container .offset-by-ten { padding-left: 600px; } + .container .offset-by-eleven { padding-left: 660px; } + .container .offset-by-twelve { padding-left: 720px; } + .container .offset-by-thirteen { padding-left: 780px; } + .container .offset-by-fourteen { padding-left: 840px; } + .container .offset-by-fifteen { padding-left: 900px; } + + + +/* #Tablet (Portrait) +================================================== */ + + /* Note: Design for a width of 768px */ + + @media only screen and (min-width: 768px) and (max-width: 959px) { + .container { width: 768px; } + .container .column, + .container .columns { margin-left: 10px; margin-right: 10px; } + .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } + .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } + .alpha.omega { margin-left: 0; margin-right: 0; } + + .container .one.column, + .container .one.columns { width: 28px; } + .container .two.columns { width: 76px; } + .container .three.columns { width: 124px; } + .container .four.columns { width: 172px; } + .container .five.columns { width: 220px; } + .container .six.columns { width: 268px; } + .container .seven.columns { width: 316px; } + .container .eight.columns { width: 364px; } + .container .nine.columns { width: 412px; } + .container .ten.columns { width: 460px; } + .container .eleven.columns { width: 508px; } + .container .twelve.columns { width: 556px; } + .container .thirteen.columns { width: 604px; } + .container .fourteen.columns { width: 652px; } + .container .fifteen.columns { width: 700px; } + .container .sixteen.columns { width: 748px; } + + .container .one-third.column { width: 236px; } + .container .two-thirds.column { width: 492px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 48px; } + .container .offset-by-two { padding-left: 96px; } + .container .offset-by-three { padding-left: 144px; } + .container .offset-by-four { padding-left: 192px; } + .container .offset-by-five { padding-left: 240px; } + .container .offset-by-six { padding-left: 288px; } + .container .offset-by-seven { padding-left: 336px; } + .container .offset-by-eight { padding-left: 384px; } + .container .offset-by-nine { padding-left: 432px; } + .container .offset-by-ten { padding-left: 480px; } + .container .offset-by-eleven { padding-left: 528px; } + .container .offset-by-twelve { padding-left: 576px; } + .container .offset-by-thirteen { padding-left: 624px; } + .container .offset-by-fourteen { padding-left: 672px; } + .container .offset-by-fifteen { padding-left: 720px; } + } + + +/* #Mobile (Portrait) +================================================== */ + + /* Note: Design for a width of 320px */ + + @media only screen and (max-width: 767px) { + .container { width: 300px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 300px; } + + /* Offsets */ + .container .offset-by-one, + .container .offset-by-two, + .container .offset-by-three, + .container .offset-by-four, + .container .offset-by-five, + .container .offset-by-six, + .container .offset-by-seven, + .container .offset-by-eight, + .container .offset-by-nine, + .container .offset-by-ten, + .container .offset-by-eleven, + .container .offset-by-twelve, + .container .offset-by-thirteen, + .container .offset-by-fourteen, + .container .offset-by-fifteen { padding-left: 0; } + + } + + +/* #Mobile (Landscape) +================================================== */ + + /* Note: Design for a width of 480px */ + + @media only screen and (min-width: 480px) and (max-width: 767px) { + .container { width: 420px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 420px; } + } + + +/* #Clearing +================================================== */ + + /* Self Clearing Goodness */ + .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns, + or wrap each row of columns in a
*/ + .clearfix:before, + .clearfix:after, + .row:before, + .row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + .row:after, + .clearfix:after { + clear: both; } + .row, + .clearfix { + zoom: 1; } + + /* You can also use a
to clear columns */ + .clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } + +/* line 29 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/vendor/layout.css */ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + +/* Table of Content +================================================== + #Site Styles + #Page Styles + #Media Queries + #Font-Face */ + +/* #Site Styles +================================================== */ + +/* #Page Styles +================================================== */ + +/* #Media Queries +================================================== */ + + /* Smaller than standard 960 (devices and browsers) */ + @media only screen and (max-width: 959px) {} + + /* Tablet Portrait size to standard 960 (devices and browsers) */ + @media only screen and (min-width: 768px) and (max-width: 959px) {} + + /* All Mobile Sizes (devices and browser) */ + @media only screen and (max-width: 767px) {} + + /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ + @media only screen and (min-width: 480px) and (max-width: 767px) {} + + /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ + @media only screen and (max-width: 479px) {} + + +/* #Font-Face +================================================== */ +/* This is the proper syntax for an @font-face file + Just create a "fonts" folder at the root, + copy your FontName into code below and remove + comment brackets */ + +/* @font-face { + font-family: 'FontName'; + src: url('../fonts/FontName.eot'); + src: url('../fonts/FontName.eot?iefix') format('eot'), + url('../fonts/FontName.woff') format('woff'), + url('../fonts/FontName.ttf') format('truetype'), + url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); + font-weight: normal; + font-style: normal; } +*/ + +/* line 29 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/vendor/prettify.css */ +.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} + +/* line 12 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +h3 { + text-decoration: underline; +} + +/* line 14 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +b { + font-weight: bold; +} + +/* line 16 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +i { + font-style: italic !important; +} + +/* line 18 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +input[type="radio"], +label[for] { + cursor: pointer; +} + +/* line 20 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.main { + position: relative; + margin-top: 100px; + margin-bottom: 100px; +} + +/* line 24 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.center { + text-align: center; +} + +/* line 26 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.left { + text-align: left; +} + +/* line 28 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.right { + text-align: right; +} + +/* line 30 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.italic { + font-style: italic; +} + +/* line 32 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.bold { + font-weight: bold; +} + +/* line 34 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.inline { + display: inline; +} + +/* line 36 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.sixteen.columns { + margin-bottom: 50px; +} + +/* line 38 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.section { + margin-top: 20px; +} + +/* line 42 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +a, +a:visited { + color: #080; + outline: 0; + text-decoration: none; +} + +/* line 46 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ + +/* line 47 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +a:hover, +a:focus { + color: #040; +} + +/* line 49 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +p a, +p a:visited { + line-height: inherit; +} + +/* line 53 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.indent1 { + margin-left: 10px; +} + +/* line 55 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.indent2 { + margin-left: 20px; +} + +/* line 59 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +code { + color: #080; +} + +/* line 61 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +code.black { + color: #181818; +} + +/* line 64 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +pre.prettyprint { + word-wrap: break-word; + font-family: 'Droid Sans Mono', Courier; + border: none; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + padding: 10px; + margin-bottom: 10px; +} + +/* line 71 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +pre.prettyprint.runnable { + border-left: #080 1px solid; + cursor: pointer; +} + +/* line 74 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +pre.prettyprint:hover { + background: whiteSmoke; +} + +/* line 76 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +pre.prettyprint.running { + background: #d3f3d3; +} + +/* line 80 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.pos-chooser-dial { + cursor: pointer; +} + +/* line 83 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.box.pos-chooser-demo { + color: #000; + padding: 20px; +} + +/* line 88 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.entry { + margin-left: 10px; + padding: 10px; +} + +/* line 91 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.entry:hover { + background: whiteSmoke; +} + +/* line 95 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.demo-mouse { + position: relative; + left: 250px; + top: 30px; + -webkit-transition: all 1s ease-out; + -moz-transition: all 1s ease-out; + -o-transition: all 1s ease-out; + -ms-transition: all 1s ease-out; + transition: all 1s ease-out; +} + +/* line 98 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.demo-mouse.over { + top: -30px; + left: 125px; +} + +/* line 102 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.box { + color: #080; + font-weight: bold; + border: 1px solid #080; + padding: 3px; + -webkit-border-radius: 5px; + border-radius: 5px; +} + +/* line 110 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.build-tool-toggle { + margin: 20px; + display: none; + -webkit-box-shadow: 1px 1px 30px 1px #080; + box-shadow: 1px 1px 30px 1px #080; +} + +/* line 115 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool { + display: none; + background: whiteSmoke; + padding: 25px 25px 5px 25px; +} + +/* line 120 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool input, +.columns.build-tool textarea, +.columns.build-tool button, +.columns.build-tool select { + margin-bottom: 5px; +} + +/* line 122 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool hr { + margin-bottom: 15px; +} + +/* line 125 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool select { + display: inline; + height: 32px; +} + +/* line 129 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool .build-tool-style { + padding: 3px; + margin: 5px 0; + background: #ccc; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +/* line 135 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool .build-tool-style .name { + display: inline; +} + +/* line 137 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool .build-tool-style .name, +.columns.build-tool .build-tool-style .code { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 140 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.columns.build-tool .build-tool-style .code { + font-family: 'Droid Sans Mono', Courier; + height: 215px; +} + +/* line 147 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} + +/* line 155 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.clearfix { + display: inline-block; +} + +/* line 157 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +/* start commented backslash hack \*/ + +/* line 158 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +* html .clearfix { + height: 1%; +} + +/* line 160 : /Users/jpillora/Code/JavaScript/notifyjs/docs/src/styles/app.styl */ +.clearfix { + display: block; +} diff --git a/docs/img/pointer.png b/docs/img/pointer.png new file mode 100644 index 0000000..83fa316 Binary files /dev/null and b/docs/img/pointer.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..c627313 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,469 @@ + + + + + Notify.js + + + + + + + Fork me on GitHub +
+
+

Notify.js

+
+
+ + +
+
+
+

Summary

+

+ Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. + The javascript code snippets in this documentation with the green edge are runnable by clicking them. +

+

+ 

$.notify("Hello World");
+

+
+
+

Download

+

Download pre-packaged with the Bootstrap notification style:
+ +

+

Or, create a custom build with your own style
+ + +

+
+
+

Notify.js Core + +

+
+

Styles
+

+
+ +
+
+ + + + +
+
+
+ + + Contribute more styles ! +
+

+
+

Minify + +

+
+

+ Made with Compile.js +

+
+
+

Basic Usage

+
+
+

Element Notifications

+

You can place notifications on any element:

+

+ 

$(".elem-demo").notify("Hello Box");
+

+

Like this box

+
+
+

Global Notifications

+

+ + If you don't specify an element, notification + will appear in the top left (unless you specify a + different position - See Positioning) +

+

+ 

$.notify("I'm over here !");
+

+
+
+

Notification Styles

+

+ Each style may define a set of classes to use to substyle the notification. + The pre-packaged version includes a bootstrap notification style (see more below in Styling). + These classes include: + +

+
Success + 
$.notify("Access granted", "success");
Info + 
$.notify("Do not press this button", "info");
Warning + 
$.notify("Warning: Self-destruct in 3.. 2..", "warn");
Error + 
$.notify("BOOM!", "error");
+
+

Note: This page has set the default class to"success" with$.notify.defaults({ className: "success" });.

+
+
+

Positioning

+

+ Element notifications and Global notifications can + be vertically repositioned to: "top", "middle" or "bottom" and horozontally repositioned to: "left", "center" or "right" . +

+

+ 

$(".pos-demo").notify(
+  "I'm left of the box", 
+  { position:"left" }
+);
+

+

We can position the notification around this box

+

Use this positioning tool to see all possible position combinations

+
+ + + + +
+
+ +
+

An awesome cool larrrggggeeee box

+
+
+

API

+
+
$.notify( string|object, [ options ])
+

string|object - global notification data
options - an options object or class name string

+
+
+
$.notify( element, string|object, [ options ])
+

element - a jquery element
string|object - element notification data
options - an options object or class name string

+
+
+
$( selector ).notify( string|object, [ options ])
+

selector - jquery selector
string|object - element notification data
options - an options object or class name string

+
+
+
$.notify.addStyle( styleName, styleDefinition )
+

styleName - string (the style option references this name)
styleDefinition - style definition object (see Styling below)

+
+
+
$.notify.defaults( options )
+

options - an options object (updates the defaults listed below)

+
+
+
+

Options

+

+ + The options object listed above are in the form below. + This object below is the actual used to check option + validity and set defaults. +

+ 
{
+  // whether to hide the notification on click
+  clickToHide: true,
+  // whether to auto-hide the notification
+  autoHide: true,
+  // if autoHide, hide after milliseconds
+  autoHideDelay: 5000,
+  // show the arrow pointing at the element
+  arrowShow: true,
+  // arrow size in pixels
+  arrowSize: 5,
+  // default positions
+  elementPosition: 'bottom left',
+  globalPosition: 'top right',
+  // default style
+  style: 'bootstrap',
+  // default class (string or [string])
+  className: 'error',
+  // show animation
+  showAnimation: 'slideDown',
+  // show animation duration
+  showDuration: 400,
+  // hide animation
+  hideAnimation: 'slideUp',
+  // hide animation duration
+  hideDuration: 200,
+  // padding between element and notification
+  gap: 2
+}
+
+
+
+
+

Custom Styling Guide

+

You can add your own styles to Notify.js with the$.notify.addStyle method. See API.

+

Style definition objects are in the form:

+ 
{
+  //required html representing each notification 
+  html: "",
+  //optional object to be converted to css
+  classes: {
+    <className>: {
+      <propertyName>: <value> 
+    },
+    <className>: {
+      ...
+    },
+    ...
+  },
+  //optional css to be inserted onto the page
+  css: ""
+}
+
+

+

html
- If you only have HTML element that you need to modify per + notification then you should give this element an attribute of data-notify-text or data-notify-html. Use data-notify-html if you wish to display arbitrary HTML inside the notification, + otherwise, use data-notify-text as it is more secure.
Otherwise, if you wish to modify multiple HTML elements per + notification then you'll need to give each element one of the two + attributes above as well as a value. For an example of this see the Advanced Example below. +

+

+

classes
- This object will be used to construct css. It must be in the form described above and there is an example below. +

+

+

css
- This string is simply raw css. Use this property if you want to keep your style definition inside + your js files. +

+
+
+

Class naming convention

+

+ When each notification is constructed, it's container + (outer most element defined in your style html) will automatically + apply the class: +

+

notifyjs-<style name>-base

+

+ + When you use the class name option (className) the class: +

+

notifyjs-<style name>-<class name>

+

+ will be applied. So if you define your styles in an external CSS file or in the style's css + property, you must define your CSS rules using this naming convention. + +

+
+
+

Simple Example

+

If you were to define the style:

+ 
$.notify.addStyle('happyblue', {
+  html: "<div>☺<span data-notify-text/>☺</div>",
+  classes: {
+    base: {
+      "white-space": "nowrap",
+      "background-color": "lightblue",
+      "padding": "5px"
+    },
+    superblue: {
+      "color": "white",
+      "background-color": "blue"
+    }
+  }
+});
+
+

Upon running this code, the classes object in this example will be converted the following css:

+ 
.notifyjs-happyblue-base {
+  white-space: nowrap;
+  background-color: lightblue;
+  padding: 5px;
+}
+.notifyjs-happyblue-superblue {
+  color: white;
+  background-color: blue;
+}
+ You can confirm this now by inspecting the DOM (look for the tagged style element in the head) +

You can now use your new style with:

+ 
$.notify('hello !!', {
+  style: 'happyblue'
+});
+
+

+ + and you can use the superblue class with: +

+ 
$.notify('HELLO !!!!', {
+  style: 'happyblue',
+  className: 'superblue'
+});
+
+
+
+

Advanced Example

+

Say you wanted to use buttons in your notifications then you could do something like:

+ 
//add a new style 'foo'
+$.notify.addStyle('foo', {
+  html: 
+    "<div>" +
+      "<div class='clearfix'>" +
+        "<div class='title' data-notify-html='title'/>" +
+        "<div class='buttons'>" +
+          "<button class='no'>Cancel</button>" +
+          "<button class='yes' data-notify-text='button'></button>" +
+        "</div>" +
+      "</div>" +
+    "</div>"
+});
+
+//listen for click events from this style
+$(document).on('click', '.notifyjs-foo-base .no', function() {
+  //programmatically trigger propogating hide event
+  $(this).trigger('notify-hide');
+});
+$(document).on('click', '.notifyjs-foo-base .yes', function() {
+  //show button text
+  alert($(this).text() + " clicked!");
+  //hide notification
+  $(this).trigger('notify-hide');
+});
+
+

+ + Notice there is no classes property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead: +

+

Note: you could also convert this CSS code to a JavaScript string and use it with the css property. It's not very readable though it's better for distribution.

+ 
.notifyjs-foo-base {
+  opacity: 0.85;
+  width: 200px;
+  background: #F5F5F5;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.notifyjs-foo-base .title {
+  width: 100px;
+  float: left;
+  margin: 10px 0 0 10px;
+  text-align: right;
+}
+
+.notifyjs-foo-base .buttons {
+  width: 70px;
+  float: right;
+  font-size: 9px;
+  padding: 5px;
+  margin: 2px;
+}
+
+.notifyjs-foo-base button {
+  font-size: 9px;
+  padding: 5px;
+  margin: 2px;
+  width: 60px;
+}
+
+

You can now use this style with:

+ 
$.notify({
+  title: 'Would you like some Foo ?',
+  button: 'Confirm'
+}, { 
+  style: 'foo',
+  autoHide: false,
+  clickToHide: false
+});
+
+
+
+

Extra Example

+

+ If using the above methods still don't provide you + with what you need then you can, pass jQuery objects + straight into the notification (provided that the + element has the data-notify-html attribute): + +

+ 
var h5 = $("<h5/>").append("You MUST have some Foo !")
+
+$.notify({
+  title: h5,
+  button: 'YES !'
+}, { 
+  style: 'foo',
+  autoHide: false,
+  clickToHide: false
+});
+
+
+
+

Style List

+

Currently there is only one style available +

+

+
+
+
+

Contributing More Styles

+

+ + Contributing more styles is easy! +

    +
  1. Click this link
    2. +
  2. Sign into GitHub (if you're not already)
    3. +
  3. Click 'Fork'
    4. +
  4. Enter your new style
    5. +
  5. Click 'Commit New File'
    6. +
  6. Click 'Send Pull Request'!
    7. +
+

+

To get people started with some styles ideas, checkout this post on various Growl styles.

+

+ Note: If you wish to contribute to the library by fixing bugs or adding features, + see the src folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript. + I'm using Grunt to compile, minify and concat the builds, you can do so with: +

    +
  1. Fork https://github.com/jpillora/notifyjs
    2. +
  2. cd notifyjs
    3. +
  3. npm install -g grunt-cli
    4. +
  4. npm install
    5. +
  5. grunt
    6. +
  6. Pull-request !
    7. +
+

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/docs/js/app.js b/docs/js/app.js new file mode 100644 index 0000000..c566d91 --- /dev/null +++ b/docs/js/app.js @@ -0,0 +1,1017 @@ +/*!jQuery Knob*/ +/** + * Downward compatible, touchable dial + * + * Version: 1.2.0 (15/07/2012) + * Requires: jQuery v1.7+ + * + * Copyright (c) 2012 Anthony Terrien + * Under MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Thanks to vor, eskimoblood, spiffistan, FabrizioC + */ +(function($) { + + /** + * Kontrol library + */ + "use strict"; + + /** + * Check canvas support + */ + var elem = document.createElement('canvas'); + if(!elem.getContext || !elem.getContext('2d')) + return $.fn.knob = $.noop; + + /** + * Definition of globals and core + */ + var k = {}, // kontrol + max = Math.max, + min = Math.min; + + k.c = {}; + k.c.d = $(document); + k.c.t = function (e) { + return e.originalEvent.touches.length - 1; + }; + + /** + * Kontrol Object + * + * Definition of an abstract UI control + * + * Each concrete component must call this one. + * + * k.o.call(this); + * + */ + k.o = function () { + var s = this; + + this.o = null; // array of options + this.$ = null; // jQuery wrapped element + this.i = null; // mixed HTMLInputElement or array of HTMLInputElement + this.g = null; // 2D graphics context for 'pre-rendering' + this.v = null; // value ; mixed array or integer + this.cv = null; // change value ; not commited value + this.x = 0; // canvas x position + this.y = 0; // canvas y position + this.$c = null; // jQuery canvas element + this.c = null; // rendered canvas context + this.t = 0; // touches index + this.isInit = false; + this.fgColor = null; // main color + this.pColor = null; // previous color + this.dH = null; // draw hook + this.cH = null; // change hook + this.eH = null; // cancel hook + this.rH = null; // release hook + + this.run = function () { + var cf = function (e, conf) { + var k; + for (k in conf) { + s.o[k] = conf[k]; + } + s.init(); + s._configure() + ._draw(); + }; + + if(this.$.data('kontroled')) return; + this.$.data('kontroled', true); + + this.extend(); + this.o = $.extend( + { + // Config + min : this.$.data('min') || 0, + max : this.$.data('max') || 100, + stopper : true, + readOnly : this.$.data('readonly'), + + // UI + cursor : (this.$.data('cursor') === true && 30) + || this.$.data('cursor') + || 0, + thickness : this.$.data('thickness') || 0.35, + lineCap : this.$.data('linecap') || 'butt', + width : this.$.data('width') || 200, + height : this.$.data('height') || 200, + displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), + displayPrevious : this.$.data('displayprevious'), + fgColor : this.$.data('fgcolor') || '#87CEEB', + inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB', + inline : false, + step : this.$.data('step') || 1, + + // Hooks + draw : null, // function () {} + change : null, // function (value) {} + cancel : null, // function () {} + release : null // function (value) {} + }, this.o + ); + + // routing value + if(this.$.is('fieldset')) { + + // fieldset = array of integer + this.v = {}; + this.i = this.$.find('input') + this.i.each(function(k) { + var $this = $(this); + s.i[k] = $this; + s.v[k] = $this.val(); + + $this.bind( + 'change' + , function () { + var val = {}; + val[k] = $this.val(); + s.val(val); + } + ); + }); + this.$.find('legend').remove(); + + } else { + // input = integer + this.i = this.$; + this.v = this.$.val(); + (this.v == '') && (this.v = this.o.min); + + this.$.bind( + 'change' + , function () { + s.val(s._validate(s.$.val())); + } + ); + } + + (!this.o.displayInput) && this.$.hide(); + + this.$c = $(''); + this.c = this.$c[0].getContext("2d"); + + this.$ + .wrap($('
')) + .before(this.$c); + + if (this.v instanceof Object) { + this.cv = {}; + this.copy(this.v, this.cv); + } else { + this.cv = this.v; + } + + this.$ + .bind("configure", cf) + .parent() + .bind("configure", cf); + + this._listen() + ._configure() + ._xy() + .init(); + + this.isInit = true; + + this._draw(); + + return this; + }; + + this._draw = function () { + + // canvas pre-rendering + var d = true, + c = document.createElement('canvas'); + + c.width = s.o.width; + c.height = s.o.height; + s.g = c.getContext('2d'); + + s.clear(); + + s.dH + && (d = s.dH()); + + (d !== false) && s.draw(); + + s.c.drawImage(c, 0, 0); + c = null; + }; + + this._touch = function (e) { + + var touchMove = function (e) { + + var v = s.xy2val( + e.originalEvent.touches[s.t].pageX, + e.originalEvent.touches[s.t].pageY + ); + + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + + s.change(s._validate(v)); + s._draw(); + }; + + // get touches index + this.t = k.c.t(e); + + // First touch + touchMove(e); + + // Touch events listeners + k.c.d + .bind("touchmove.k", touchMove) + .bind( + "touchend.k" + , function () { + k.c.d.unbind('touchmove.k touchend.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._mouse = function (e) { + + var mouseMove = function (e) { + var v = s.xy2val(e.pageX, e.pageY); + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.change(s._validate(v)); + s._draw(); + }; + + // First click + mouseMove(e); + + // Mouse events listeners + k.c.d + .bind("mousemove.k", mouseMove) + .bind( + // Escape key cancel current change + "keyup.k" + , function (e) { + if (e.keyCode === 27) { + k.c.d.unbind("mouseup.k mousemove.k keyup.k"); + + if ( + s.eH + && (s.eH() === false) + ) return; + + s.cancel(); + } + } + ) + .bind( + "mouseup.k" + , function (e) { + k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._xy = function () { + var o = this.$c.offset(); + this.x = o.left; + this.y = o.top; + return this; + }; + + this._listen = function () { + + if (!this.o.readOnly) { + this.$c + .bind( + "mousedown" + , function (e) { + e.preventDefault(); + s._xy()._mouse(e); + } + ) + .bind( + "touchstart" + , function (e) { + e.preventDefault(); + s._xy()._touch(e); + } + ); + this.listen(); + } else { + this.$.attr('readonly', 'readonly'); + } + + return this; + }; + + this._configure = function () { + + // Hooks + if (this.o.draw) this.dH = this.o.draw; + if (this.o.change) this.cH = this.o.change; + if (this.o.cancel) this.eH = this.o.cancel; + if (this.o.release) this.rH = this.o.release; + + if (this.o.displayPrevious) { + this.pColor = this.h2rgba(this.o.fgColor, "0.4"); + this.fgColor = this.h2rgba(this.o.fgColor, "0.6"); + } else { + this.fgColor = this.o.fgColor; + } + + return this; + }; + + this._clear = function () { + this.$c[0].width = this.$c[0].width; + }; + + this._validate = function(v) { + return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; + }; + + // Abstract methods + this.listen = function () {}; // on start, one time + this.extend = function () {}; // each time configure triggered + this.init = function () {}; // each time configure triggered + this.change = function (v) {}; // on change + this.val = function (v) {}; // on release + this.xy2val = function (x, y) {}; // + this.draw = function () {}; // on change / on release + this.clear = function () { this._clear(); }; + + // Utils + this.h2rgba = function (h, a) { + var rgb; + h = h.substring(1,7) + rgb = [parseInt(h.substring(0,2),16) + ,parseInt(h.substring(2,4),16) + ,parseInt(h.substring(4,6),16)]; + return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; + }; + + this.copy = function (f, t) { + for (var i in f) { t[i] = f[i]; } + }; + }; + + + /** + * k.Dial + */ + k.Dial = function () { + k.o.call(this); + + this.startAngle = null; + this.xy = null; + this.radius = null; + this.lineWidth = null; + this.cursorExt = null; + this.w2 = null; + this.PI2 = 2*Math.PI; + + this.extend = function () { + this.o = $.extend( + { + bgColor : this.$.data('bgcolor') || '#EEEEEE', + angleOffset : this.$.data('angleoffset') || 0, + angleArc : this.$.data('anglearc') || 360, + inline : true + }, this.o + ); + }; + + this.val = function (v) { + if (null != v) { + this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + this.v = this.cv; + this.$.val(this.v); + this._draw(); + } else { + return this.v; + } + }; + + this.xy2val = function (x, y) { + var a, ret; + + a = Math.atan2( + x - (this.x + this.w2) + , - (y - this.y - this.w2) + ) - this.angleOffset; + + if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) { + // if isset angleArc option, set to min if .5 under min + a = 0; + } else if (a < 0) { + a += this.PI2; + } + + ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc)) + + this.o.min; + + this.o.stopper + && (ret = max(min(ret, this.o.max), this.o.min)); + + return ret; + }; + + this.listen = function () { + // bind MouseWheel + var s = this, + mw = function (e) { + e.preventDefault(); + var ori = e.originalEvent + ,deltaX = ori.detail || ori.wheelDeltaX + ,deltaY = ori.detail || ori.wheelDeltaY + ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0); + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.val(v); + } + , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step}; + + this.$ + .bind( + "keydown" + ,function (e) { + var kc = e.keyCode; + + // numpad support + if(kc >= 96 && kc <= 105) { + kc = e.keyCode = kc - 48; + } + + kval = parseInt(String.fromCharCode(kc)); + + if (isNaN(kval)) { + + (kc !== 13) // enter + && (kc !== 8) // bs + && (kc !== 9) // tab + && (kc !== 189) // - + && e.preventDefault(); + + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + e.preventDefault(); + + var v = parseInt(s.$.val()) + kv[kc] * m; + + s.o.stopper + && (v = max(min(v, s.o.max), s.o.min)); + + s.change(v); + s._draw(); + + // long time keydown speed-up + to = window.setTimeout( + function () { m*=2; } + ,30 + ); + } + } + } + ) + .bind( + "keyup" + ,function (e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + s.val(s.$.val()); + } + } else { + // kval postcond + (s.$.val() > s.o.max && s.$.val(s.o.max)) + || (s.$.val() < s.o.min && s.$.val(s.o.min)); + } + + } + ); + + this.$c.bind("mousewheel DOMMouseScroll", mw); + this.$.bind("mousewheel DOMMouseScroll", mw) + }; + + this.init = function () { + + if ( + this.v < this.o.min + || this.v > this.o.max + ) this.v = this.o.min; + + this.$.val(this.v); + this.w2 = this.o.width / 2; + this.cursorExt = this.o.cursor / 100; + this.xy = this.w2; + this.lineWidth = this.xy * this.o.thickness; + this.lineCap = this.o.lineCap; + this.radius = this.xy - this.lineWidth / 2; + + this.o.angleOffset + && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); + + this.o.angleArc + && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc); + + // deg to rad + this.angleOffset = this.o.angleOffset * Math.PI / 180; + this.angleArc = this.o.angleArc * Math.PI / 180; + + // compute start and end angles + this.startAngle = 1.5 * Math.PI + this.angleOffset; + this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; + + var s = max( + String(Math.abs(this.o.max)).length + , String(Math.abs(this.o.min)).length + , 2 + ) + 2; + + this.o.displayInput + && this.i.css({ + 'width' : ((this.o.width / 2 + 4) >> 0) + 'px' + ,'height' : ((this.o.width / 3) >> 0) + 'px' + ,'position' : 'absolute' + ,'vertical-align' : 'middle' + ,'margin-top' : ((this.o.width / 3) >> 0) + 'px' + ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px' + ,'border' : 0 + ,'background' : 'none' + ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial' + ,'text-align' : 'center' + ,'color' : this.o.inputColor || this.o.fgColor + ,'padding' : '0px' + ,'-webkit-appearance': 'none' + }) + || this.i.css({ + 'width' : '0px' + ,'visibility' : 'hidden' + }); + }; + + this.change = function (v) { + this.cv = v; + this.$.val(v); + }; + + this.angle = function (v) { + return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min); + }; + + this.draw = function () { + + var c = this.g, // context + a = this.angle(this.cv) // Angle + , sat = this.startAngle // Start angle + , eat = sat + a // End angle + , sa, ea // Previous angles + , r = 1; + + c.lineWidth = this.lineWidth; + + c.lineCap = this.lineCap; + + this.o.cursor + && (sat = eat - this.cursorExt) + && (eat = eat + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.o.bgColor; + c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true); + c.stroke(); + + if (this.o.displayPrevious) { + ea = this.startAngle + this.angle(this.v); + sa = this.startAngle; + this.o.cursor + && (sa = ea - this.cursorExt) + && (ea = ea + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.pColor; + c.arc(this.xy, this.xy, this.radius, sa, ea, false); + c.stroke(); + r = (this.cv == this.v); + } + + c.beginPath(); + c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + c.arc(this.xy, this.xy, this.radius, sat, eat, false); + c.stroke(); + }; + + this.cancel = function () { + this.val(this.v); + }; + }; + + $.fn.dial = $.fn.knob = function (o) { + return this.each( + function () { + var d = new k.Dial(); + d.o = o; + d.$ = $(this); + d.run(); + } + ).parent(); + }; + +})(jQuery); +!function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; +(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(b=r[a])?b:"0"<=a&&a<="7"?parseInt(e.substring(1),8):a==="u"||a==="x"?parseInt(e.substring(2),16):e.charCodeAt(1)}function g(e){if(e<32)return(e<16?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return e==="\\"||e==="-"||e==="]"||e==="^"?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),e=[],a= +b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,f=b.length;a122||(l<65||h>90||e.push([Math.max(65,h)|32,Math.min(l,90)|32]),l<97||h>122||e.push([Math.max(97,h)&-33,Math.min(l,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];f=[];for(a=0;ah[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(g(h[1])));c.push("]");return c.join("")}function s(e){for(var a=e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],f=0,h=0;f=2&&e==="["?a[f]=b(l):e!=="\\"&&(a[f]=l.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var x=0,m=!1,j=!1,k=0,c=a.length;k=5&&"lang-"===w.substring(0,5))&&!(t&&typeof t[1]==="string"))f=!1,w="src";f||(r[z]=w)}h=c;c+=z.length;if(f){f=t[1];var l=z.indexOf(f),B=l+f.length;t[2]&&(B=z.length-t[2].length,l=B-f.length);w=w.substring(5);H(j+h,z.substring(0,l),g,k);H(j+h+l,f,I(w,f),k);H(j+h+B,z.substring(B),g,k)}else k.push(j+h,w)}a.g=k}var b={},s;(function(){for(var g=a.concat(d),j=[],k={},c=0,i=g.length;c=0;)b[n.charAt(e)]=r;r=r[1];n=""+r;k.hasOwnProperty(n)||(j.push(r),k[n]=q)}j.push(/[\S\s]/);s=S(j)})();var x=d.length;return g}function v(a){var d=[],g=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&g.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),g.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,q])):d.push(["com", +/^#[^\n\r]*/,q,"#"]));a.cStyleComments&&(g.push(["com",/^\/\/[^\n\r]*/,q]),g.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));if(b=a.regexLiterals){var s=(b=b>1?"":"\n\r")?".":"[\\S\\s]";g.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+s+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+ +s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/, +q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d= +c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], +"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"], +O=[N,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],E=[E,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],P=[y,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], +Q=[y,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],W=[y,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],y=[y,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],R=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, +V=/\S/,X=v({keywords:[M,O,E,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",P,Q,y],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),F={};p(X,["default-code"]);p(C([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-", +/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);p(C([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/], +["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);p(v({keywords:M,hashComments:!0,cStyleComments:!0,types:R}),["c","cc","cpp","cxx","cyc","m"]);p(v({keywords:"null,true,false"}),["json"]);p(v({keywords:O,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:R}), +["cs"]);p(v({keywords:N,cStyleComments:!0}),["java"]);p(v({keywords:y,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(v({keywords:P,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);p(v({keywords:Q, +hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(v({keywords:E,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(v({keywords:W,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]); +p(C([],[["str",/^[\S\s]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,g){var b=document.createElement("div");b.innerHTML="
"+a+"
";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1}); +return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}\b/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); + +(function() { + var App, mod, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; + + App = App || {}; + + App.init = function() { + var mouseDemo; + $.notify.defaults({ + className: 'success' + }); + App.codeRunner(); + App.posChooser(); + $(document).on('click', "a[data-download]", function(e) { + var name, url; + if ($.compile) { + url = $(this).attr('href'); + name = $(this).attr('data-name') || 'lib'; + $.compile.fetch(name, url).download(name); + ga('send', 'event', 'download', name); + e.preventDefault(); + return false; + } + return true; + }); + mouseDemo = $(".demo-mouse"); + return $('.summary').hover(function() { + return mouseDemo.addClass("over"); + }, function() { + return mouseDemo.removeClass("over"); + }); + }; + + $(App.init); + + App = window.App = App || {}; + + window.BuildController = function($scope) { + var elem, getStyleName; + $scope.premadeStyles = [ + { + name: "bootstrap" + }, { + name: "metro", + css: true, + global: true, + test: function(text) { + return { + title: 'Email Notification', + text: 'You received an e-mail from your boss. You should read it right now!', + image: "" + }; + } + } + ]; + $(".build-tool-loading").hide(); + $(".build-tool-toggle").show(); + App.buildTool = $scope; + $scope.styles = []; + $scope.addStyle = function(code, premade) { + return $scope.styles.push({ + active: true, + code: code, + premade: premade + }); + }; + $scope.addStyle($(".happyblue-example").text()); + $scope.settings = { + minify: false, + "default": $scope.styles[0] + }; + $scope.loadStyle = function() { + var baseUrl, style; + style = $scope.premadeStyle; + if (!style) { + return; + } + baseUrl = "dist/styles/" + style.name + "/notify-" + style.name; + $.ajax({ + url: "" + baseUrl + ".js", + dataType: 'text', + success: function(js) { + if (style.css) { + return $.ajax({ + url: "" + baseUrl + ".css", + dataType: 'text', + success: function(css) { + css = css.replace(/(.+)$/mg, '"$1\\n"+'); + $scope.addStyle("" + js + "\n$.notify.insertCSS(\n" + css + "\"\");", style); + return $scope.$digest(); + } + }); + } else { + $scope.addStyle(js, style); + return $scope.$digest(); + } + } + }); + }; + $scope.toggle = function() { + $(".build-tool-toggle").toggleClass('active'); + return $(".build-tool").toggle(400); + }; + elem = $(".build-tool-toggle").click($scope.toggle); + $scope.active = function(scope, prop) { + return scope[prop] = !scope[prop]; + }; + $scope.useDefault = function(style) { + return $scope.settings["default"] = style; + }; + $scope["delete"] = function(i) { + return $scope.styles.splice(i, 1); + }; + getStyleName = function(style) { + var m; + m = style.code.match(/\$\.notify\.addStyle\('(["\w-]+)'/); + if (!m) { + m = style.code.match(/\$\.notify\.addStyle\("(['\w-]+)"/); + } + if (!m) { + return null; + } + return m[1]; + }; + $scope.test = function(event, style, global) { + var className, classes, code, contentText, e, name, notifyStyle, obj, rand, testBtn; + testBtn = $(event.target); + contentText = testBtn.parent().parent().find('.code'); + code = style.code; + if (!code) { + contentText.notify("No code", "error"); + return; + } + name = getStyleName(style); + if (!name) { + contentText.notify("Style name not found", "error"); + } + if (code !== style.lastEval) { + try { + eval(code); + style.lastEval = code; + } catch (_error) { + e = _error; + contentText.notify(e, "error"); + return; + } + } + notifyStyle = $.notify.getStyle(name); + if (!notifyStyle) { + testBtn.notify("No style added", "error"); + return; + } + classes = Object.keys(notifyStyle.classes); + rand = Math.floor(Math.random() * classes.length); + className = classes[rand]; + obj = className === 'base' ? 'no class' : "'" + className + "'"; + if (style.premade) { + obj = style.premade.test(obj); + } + try { + if (global) { + return $.notify(obj, { + style: name, + className: className + }); + } else { + return testBtn.notify(obj, { + style: name, + className: className + }); + } + } catch (_error) { + e = _error; + testBtn.notify(e, "error"); + } + }; + return $scope.build = function() { + var c, done, names, styles; + if ($scope.building) { + return; + } + $scope.building = true; + done = function() { + ga('send', 'event', 'download', 'notify-custom.js'); + $scope.building = false; + return $scope.$digest(); + }; + c = $.compile.fetch('core', 'dist/notify.js').set('set-defaults', "$.notify.defaults({\n style: \"" + (getStyleName($scope.settings["default"])) + "\"\n});"); + names = {}; + styles = []; + $.each($scope.styles, function(i, s) { + var name; + if (!s.active) { + return; + } + name = getStyleName(s); + if (!name) { + return; + } + if (names[name]) { + $.notify("Skipping style '" + name + "' as it already exists", "warn"); + return; + } + names[name] = 1; + name = "style-" + i + "-" + name; + styles.push(name); + return c.set(name, s.code); + }); + c.run('concat', { + src: ['core', 'set-defaults'].concat(styles), + dest: 'result' + }); + if ($scope.settings.minify) { + return c.run('uglify', { + src: 'result', + dest: 'result-min' + }).download('result-min', 'notify-custom.min.js').get('result-min', done); + } else { + return c.download('result', 'notify-custom.js').get('result', done); + } + }; + }; + + App = App || {}; + + App.codeRunner = function() { + var addCSS, ranSnippet, runSnippet; + prettyPrint(); + addCSS = function(e) { + var pre; + pre = $(this); + return $.notify.insertCSS(pre.text()); + }; + ranSnippet = false; + runSnippet = function(e) { + var pre; + if (e && e.type === 'click') { + ranSnippet = true; + } + pre = $(this); + pre.addClass('running'); + eval(pre.text()); + setTimeout(function() { + return pre.removeClass('running'); + }, 500); + return null; + }; + setTimeout(function() { + if (!ranSnippet) { + return $.notify('Tip: You can run the code snippets by clicking them', { + className: 'info', + position: 'b l' + }); + } + }, 30 * 1000); + $(document).on('click', '.prettyprint.runnable', runSnippet); + $(".prettyprint.auto-run").each(runSnippet); + return $(".prettyprint.auto-add").each(addCSS); + }; + + App = App || {}; + + mod = function(v, m) { + return (v < 0 ? m : 0) + v % m; + }; + + App.posChooser = function() { + var currPos, currType, hPos, mPos, open, p1, p2, p2s, positions, vPos, _i, _j, _len, _len1; + if (/MSIE (\d)/.test(window.navigator.userAgent) && parseInt(RegExp.$1, 10) < 8) { + return; + } + positions = []; + mPos = ['top', 'right', 'bottom', 'left']; + vPos = ['top', 'middle', 'bottom']; + hPos = ['left', 'center', 'right']; + for (_i = 0, _len = mPos.length; _i < _len; _i++) { + p1 = mPos[_i]; + p2s = __indexOf.call(vPos, p1) >= 0 ? hPos : vPos; + if (p1 === 'bottom' || p1 === 'left') { + p2s.reverse(); + } + for (_j = 0, _len1 = p2s.length; _j < _len1; _j++) { + p2 = p2s[_j]; + positions.push("" + p1 + " " + p2); + } + } + currPos = 'top left'; + currType = 'elem'; + open = function() { + var opts; + opts = { + position: currPos + }; + if (currType === 'elem') { + return $(".pos-chooser-demo").notify("" + currPos, opts); + } else { + return $.notify("" + currPos, opts); + } + }; + $(".pos-chooser").knob({ + stopper: false, + change: function(val) { + val = mod(val, positions.length); + currPos = positions[val]; + return open(); + } + }); + $(".pos-chooser").siblings().first().addClass(".pos-chooser-dial"); + return $(document).on('click', 'input[name=pos-type]', function() { + currType = $(this).val(); + return open(); + }); + }; + +}).call(this); diff --git a/docs/src/scripts/app.coffee b/docs/src/scripts/app.coffee new file mode 100644 index 0000000..df574b9 --- /dev/null +++ b/docs/src/scripts/app.coffee @@ -0,0 +1,29 @@ + +App = App or {} + +App.init = -> + + $.notify.defaults + className: 'success' + + App.codeRunner() + App.posChooser() + + # download links + $(document).on 'click', "a[data-download]", (e) -> + if $.compile + url = $(@).attr 'href' + name = $(@).attr('data-name') || 'lib' + $.compile.fetch(name, url).download(name) + ga 'send', 'event', 'download', name + e.preventDefault() + return false + return true + + mouseDemo = $ ".demo-mouse" + $('.summary').hover -> + mouseDemo.addClass "over" + , -> + mouseDemo.removeClass "over" + +$ App.init \ No newline at end of file diff --git a/docs/src/scripts/build-tool.coffee b/docs/src/scripts/build-tool.coffee new file mode 100644 index 0000000..3f01c9c --- /dev/null +++ b/docs/src/scripts/build-tool.coffee @@ -0,0 +1,184 @@ + +App = window.App = App or {} + +window.BuildController = ($scope) -> + + $scope.premadeStyles = [ + { + name: "bootstrap" + } + { + name: "metro" + css: true + global: true + test: (text) -> { + title: 'Email Notification' + text: 'You received an e-mail from your boss. You should read it right now!' + image: "" + } + } + ] + + $(".build-tool-loading").hide() + $(".build-tool-toggle").show() + + App.buildTool = $scope + + $scope.styles = [] + + $scope.addStyle = (code, premade) -> + $scope.styles.push { active: true, code, premade:premade } + + #use one of the examples + $scope.addStyle $(".happyblue-example").text() + + $scope.settings = { + minify: false + default: $scope.styles[0] + } + + $scope.loadStyle = -> + + style = $scope.premadeStyle + + return unless style + + baseUrl = "dist/styles/#{style.name}/notify-#{style.name}" + + $.ajax + url: "#{baseUrl}.js" + dataType: 'text' + success: (js) -> + if style.css + $.ajax + url: "#{baseUrl}.css" + dataType: 'text' + success: (css) -> + css = css.replace /(.+)$/mg, '"$1\\n"+' + $scope.addStyle "#{js}\n$.notify.insertCSS(\n#{css}\"\");", style + $scope.$digest() + else + $scope.addStyle js, style + $scope.$digest() + return + + #angular has loaded + $scope.toggle = -> + $(".build-tool-toggle").toggleClass('active') + $(".build-tool").toggle(400) + + elem = $(".build-tool-toggle").click $scope.toggle + + $scope.active = (scope, prop) -> + scope[prop] = !scope[prop] + # $scope.$digest() + + $scope.useDefault = (style) -> + $scope.settings.default = style + + $scope.delete = (i) -> + $scope.styles.splice i,1 + + getStyleName = (style) -> + m = style.code.match /\$\.notify\.addStyle\('(["\w-]+)'/ + unless m + m = style.code.match /\$\.notify\.addStyle\("(['\w-]+)"/ + unless m + return null + m[1] + + $scope.test = (event,style,global) -> + + testBtn = $(event.target) + contentText = testBtn.parent().parent().find('.code') + + code = style.code + + unless code + contentText.notify("No code", "error") + return + + name = getStyleName style + + unless name + contentText.notify("Style name not found", "error") + + if code isnt style.lastEval + try + eval(code) + style.lastEval = code + catch e + contentText.notify(e, "error") + return + + notifyStyle = $.notify.getStyle name + + unless notifyStyle + testBtn.notify("No style added", "error") + return + + classes = Object.keys notifyStyle.classes + rand = Math.floor Math.random()*classes.length + className = classes[rand] + + obj = if className is 'base' then 'no class' else "'#{className}'" + + if style.premade + obj = style.premade.test obj + + try + if global + $.notify(obj, {style:name, className }) + else + testBtn.notify(obj, {style:name, className }) + catch e + testBtn.notify(e, "error") + return + + $scope.build = -> + return if $scope.building + $scope.building = true + done = -> + ga 'send', 'event', 'download', 'notify-custom.js' + $scope.building = false + $scope.$digest() + + c = $.compile. + fetch('core', 'dist/notify.js'). + set('set-defaults', """ + $.notify.defaults({ + style: "#{getStyleName $scope.settings.default}" + }); + """) + + names = {} + styles = [] + $.each $scope.styles, (i,s) -> + return unless s.active + name = getStyleName s + return unless name + if names[name] + $.notify "Skipping style '#{name}' as it already exists", "warn" + return + names[name] = 1 + name = "style-#{i}-#{name}" + styles.push name + c.set name, s.code + + c.run('concat',{ + src: ['core','set-defaults'].concat(styles) + dest: 'result' + }) + + if $scope.settings.minify + c.run('uglify', { + src: 'result', + dest: 'result-min' + }). + download('result-min', 'notify-custom.min.js'). + get('result-min', done) + else + c.download('result', 'notify-custom.js'). + get('result', done) + + diff --git a/docs/src/scripts/code-runner.coffee b/docs/src/scripts/code-runner.coffee new file mode 100644 index 0000000..bb21a34 --- /dev/null +++ b/docs/src/scripts/code-runner.coffee @@ -0,0 +1,37 @@ + +App = App or {} + +App.codeRunner = -> + + prettyPrint() + + addCSS = (e) -> + pre = $(@) + $.notify.insertCSS pre.text() + + ranSnippet = false + + runSnippet = (e) -> + + if e and e.type is 'click' + ranSnippet = true + + pre = $(@) + pre.addClass 'running' + eval(pre.text()) + setTimeout -> + pre.removeClass 'running' + , 500 + null + + #show tip + setTimeout -> + unless ranSnippet + $.notify('Tip: You can run the code snippets by clicking them', {className:'info', position:'b l'}) + , 30*1000 + + + $(document).on('click', '.prettyprint.runnable', runSnippet) + + $(".prettyprint.auto-run").each(runSnippet) + $(".prettyprint.auto-add").each(addCSS) \ No newline at end of file diff --git a/docs/src/scripts/pos-chooser.coffee b/docs/src/scripts/pos-chooser.coffee new file mode 100644 index 0000000..b57f54a --- /dev/null +++ b/docs/src/scripts/pos-chooser.coffee @@ -0,0 +1,45 @@ + +App = App or {} + +mod = (v,m) -> (if v<0 then m else 0) + v%m + +App.posChooser = -> + + if /MSIE (\d)/.test(window.navigator.userAgent) and + parseInt(RegExp.$1,10) < 8 + return + + positions = [] + + mPos = ['top','right','bottom','left'] + vPos = ['top','middle','bottom'] + hPos = ['left','center','right'] + + for p1 in mPos + p2s = if p1 in vPos then hPos else vPos + p2s.reverse() if p1 in ['bottom','left'] + for p2 in p2s + positions.push "#{p1} #{p2}" + + currPos = 'top left' + currType = 'elem' + open = -> + opts = + position: currPos + if currType is 'elem' + $(".pos-chooser-demo").notify "#{currPos}", opts + else + $.notify "#{currPos}", opts + + $(".pos-chooser").knob + stopper: false + change: (val) -> + val = mod val,positions.length + currPos = positions[val] + open() + + $(".pos-chooser").siblings().first().addClass(".pos-chooser-dial") + + $(document).on 'click', 'input[name=pos-type]', -> + currType = $(@).val() + open() diff --git a/docs/src/scripts/vendor/jquery.knob.js b/docs/src/scripts/vendor/jquery.knob.js new file mode 100644 index 0000000..7d00d7a --- /dev/null +++ b/docs/src/scripts/vendor/jquery.knob.js @@ -0,0 +1,668 @@ +/*!jQuery Knob*/ +/** + * Downward compatible, touchable dial + * + * Version: 1.2.0 (15/07/2012) + * Requires: jQuery v1.7+ + * + * Copyright (c) 2012 Anthony Terrien + * Under MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Thanks to vor, eskimoblood, spiffistan, FabrizioC + */ +(function($) { + + /** + * Kontrol library + */ + "use strict"; + + /** + * Check canvas support + */ + var elem = document.createElement('canvas'); + if(!elem.getContext || !elem.getContext('2d')) + return $.fn.knob = $.noop; + + /** + * Definition of globals and core + */ + var k = {}, // kontrol + max = Math.max, + min = Math.min; + + k.c = {}; + k.c.d = $(document); + k.c.t = function (e) { + return e.originalEvent.touches.length - 1; + }; + + /** + * Kontrol Object + * + * Definition of an abstract UI control + * + * Each concrete component must call this one. + * + * k.o.call(this); + * + */ + k.o = function () { + var s = this; + + this.o = null; // array of options + this.$ = null; // jQuery wrapped element + this.i = null; // mixed HTMLInputElement or array of HTMLInputElement + this.g = null; // 2D graphics context for 'pre-rendering' + this.v = null; // value ; mixed array or integer + this.cv = null; // change value ; not commited value + this.x = 0; // canvas x position + this.y = 0; // canvas y position + this.$c = null; // jQuery canvas element + this.c = null; // rendered canvas context + this.t = 0; // touches index + this.isInit = false; + this.fgColor = null; // main color + this.pColor = null; // previous color + this.dH = null; // draw hook + this.cH = null; // change hook + this.eH = null; // cancel hook + this.rH = null; // release hook + + this.run = function () { + var cf = function (e, conf) { + var k; + for (k in conf) { + s.o[k] = conf[k]; + } + s.init(); + s._configure() + ._draw(); + }; + + if(this.$.data('kontroled')) return; + this.$.data('kontroled', true); + + this.extend(); + this.o = $.extend( + { + // Config + min : this.$.data('min') || 0, + max : this.$.data('max') || 100, + stopper : true, + readOnly : this.$.data('readonly'), + + // UI + cursor : (this.$.data('cursor') === true && 30) + || this.$.data('cursor') + || 0, + thickness : this.$.data('thickness') || 0.35, + lineCap : this.$.data('linecap') || 'butt', + width : this.$.data('width') || 200, + height : this.$.data('height') || 200, + displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), + displayPrevious : this.$.data('displayprevious'), + fgColor : this.$.data('fgcolor') || '#87CEEB', + inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB', + inline : false, + step : this.$.data('step') || 1, + + // Hooks + draw : null, // function () {} + change : null, // function (value) {} + cancel : null, // function () {} + release : null // function (value) {} + }, this.o + ); + + // routing value + if(this.$.is('fieldset')) { + + // fieldset = array of integer + this.v = {}; + this.i = this.$.find('input') + this.i.each(function(k) { + var $this = $(this); + s.i[k] = $this; + s.v[k] = $this.val(); + + $this.bind( + 'change' + , function () { + var val = {}; + val[k] = $this.val(); + s.val(val); + } + ); + }); + this.$.find('legend').remove(); + + } else { + // input = integer + this.i = this.$; + this.v = this.$.val(); + (this.v == '') && (this.v = this.o.min); + + this.$.bind( + 'change' + , function () { + s.val(s._validate(s.$.val())); + } + ); + } + + (!this.o.displayInput) && this.$.hide(); + + this.$c = $(''); + this.c = this.$c[0].getContext("2d"); + + this.$ + .wrap($('
')) + .before(this.$c); + + if (this.v instanceof Object) { + this.cv = {}; + this.copy(this.v, this.cv); + } else { + this.cv = this.v; + } + + this.$ + .bind("configure", cf) + .parent() + .bind("configure", cf); + + this._listen() + ._configure() + ._xy() + .init(); + + this.isInit = true; + + this._draw(); + + return this; + }; + + this._draw = function () { + + // canvas pre-rendering + var d = true, + c = document.createElement('canvas'); + + c.width = s.o.width; + c.height = s.o.height; + s.g = c.getContext('2d'); + + s.clear(); + + s.dH + && (d = s.dH()); + + (d !== false) && s.draw(); + + s.c.drawImage(c, 0, 0); + c = null; + }; + + this._touch = function (e) { + + var touchMove = function (e) { + + var v = s.xy2val( + e.originalEvent.touches[s.t].pageX, + e.originalEvent.touches[s.t].pageY + ); + + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + + s.change(s._validate(v)); + s._draw(); + }; + + // get touches index + this.t = k.c.t(e); + + // First touch + touchMove(e); + + // Touch events listeners + k.c.d + .bind("touchmove.k", touchMove) + .bind( + "touchend.k" + , function () { + k.c.d.unbind('touchmove.k touchend.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._mouse = function (e) { + + var mouseMove = function (e) { + var v = s.xy2val(e.pageX, e.pageY); + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.change(s._validate(v)); + s._draw(); + }; + + // First click + mouseMove(e); + + // Mouse events listeners + k.c.d + .bind("mousemove.k", mouseMove) + .bind( + // Escape key cancel current change + "keyup.k" + , function (e) { + if (e.keyCode === 27) { + k.c.d.unbind("mouseup.k mousemove.k keyup.k"); + + if ( + s.eH + && (s.eH() === false) + ) return; + + s.cancel(); + } + } + ) + .bind( + "mouseup.k" + , function (e) { + k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._xy = function () { + var o = this.$c.offset(); + this.x = o.left; + this.y = o.top; + return this; + }; + + this._listen = function () { + + if (!this.o.readOnly) { + this.$c + .bind( + "mousedown" + , function (e) { + e.preventDefault(); + s._xy()._mouse(e); + } + ) + .bind( + "touchstart" + , function (e) { + e.preventDefault(); + s._xy()._touch(e); + } + ); + this.listen(); + } else { + this.$.attr('readonly', 'readonly'); + } + + return this; + }; + + this._configure = function () { + + // Hooks + if (this.o.draw) this.dH = this.o.draw; + if (this.o.change) this.cH = this.o.change; + if (this.o.cancel) this.eH = this.o.cancel; + if (this.o.release) this.rH = this.o.release; + + if (this.o.displayPrevious) { + this.pColor = this.h2rgba(this.o.fgColor, "0.4"); + this.fgColor = this.h2rgba(this.o.fgColor, "0.6"); + } else { + this.fgColor = this.o.fgColor; + } + + return this; + }; + + this._clear = function () { + this.$c[0].width = this.$c[0].width; + }; + + this._validate = function(v) { + return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; + }; + + // Abstract methods + this.listen = function () {}; // on start, one time + this.extend = function () {}; // each time configure triggered + this.init = function () {}; // each time configure triggered + this.change = function (v) {}; // on change + this.val = function (v) {}; // on release + this.xy2val = function (x, y) {}; // + this.draw = function () {}; // on change / on release + this.clear = function () { this._clear(); }; + + // Utils + this.h2rgba = function (h, a) { + var rgb; + h = h.substring(1,7) + rgb = [parseInt(h.substring(0,2),16) + ,parseInt(h.substring(2,4),16) + ,parseInt(h.substring(4,6),16)]; + return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; + }; + + this.copy = function (f, t) { + for (var i in f) { t[i] = f[i]; } + }; + }; + + + /** + * k.Dial + */ + k.Dial = function () { + k.o.call(this); + + this.startAngle = null; + this.xy = null; + this.radius = null; + this.lineWidth = null; + this.cursorExt = null; + this.w2 = null; + this.PI2 = 2*Math.PI; + + this.extend = function () { + this.o = $.extend( + { + bgColor : this.$.data('bgcolor') || '#EEEEEE', + angleOffset : this.$.data('angleoffset') || 0, + angleArc : this.$.data('anglearc') || 360, + inline : true + }, this.o + ); + }; + + this.val = function (v) { + if (null != v) { + this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + this.v = this.cv; + this.$.val(this.v); + this._draw(); + } else { + return this.v; + } + }; + + this.xy2val = function (x, y) { + var a, ret; + + a = Math.atan2( + x - (this.x + this.w2) + , - (y - this.y - this.w2) + ) - this.angleOffset; + + if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) { + // if isset angleArc option, set to min if .5 under min + a = 0; + } else if (a < 0) { + a += this.PI2; + } + + ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc)) + + this.o.min; + + this.o.stopper + && (ret = max(min(ret, this.o.max), this.o.min)); + + return ret; + }; + + this.listen = function () { + // bind MouseWheel + var s = this, + mw = function (e) { + e.preventDefault(); + var ori = e.originalEvent + ,deltaX = ori.detail || ori.wheelDeltaX + ,deltaY = ori.detail || ori.wheelDeltaY + ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0); + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.val(v); + } + , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step}; + + this.$ + .bind( + "keydown" + ,function (e) { + var kc = e.keyCode; + + // numpad support + if(kc >= 96 && kc <= 105) { + kc = e.keyCode = kc - 48; + } + + kval = parseInt(String.fromCharCode(kc)); + + if (isNaN(kval)) { + + (kc !== 13) // enter + && (kc !== 8) // bs + && (kc !== 9) // tab + && (kc !== 189) // - + && e.preventDefault(); + + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + e.preventDefault(); + + var v = parseInt(s.$.val()) + kv[kc] * m; + + s.o.stopper + && (v = max(min(v, s.o.max), s.o.min)); + + s.change(v); + s._draw(); + + // long time keydown speed-up + to = window.setTimeout( + function () { m*=2; } + ,30 + ); + } + } + } + ) + .bind( + "keyup" + ,function (e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + s.val(s.$.val()); + } + } else { + // kval postcond + (s.$.val() > s.o.max && s.$.val(s.o.max)) + || (s.$.val() < s.o.min && s.$.val(s.o.min)); + } + + } + ); + + this.$c.bind("mousewheel DOMMouseScroll", mw); + this.$.bind("mousewheel DOMMouseScroll", mw) + }; + + this.init = function () { + + if ( + this.v < this.o.min + || this.v > this.o.max + ) this.v = this.o.min; + + this.$.val(this.v); + this.w2 = this.o.width / 2; + this.cursorExt = this.o.cursor / 100; + this.xy = this.w2; + this.lineWidth = this.xy * this.o.thickness; + this.lineCap = this.o.lineCap; + this.radius = this.xy - this.lineWidth / 2; + + this.o.angleOffset + && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); + + this.o.angleArc + && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc); + + // deg to rad + this.angleOffset = this.o.angleOffset * Math.PI / 180; + this.angleArc = this.o.angleArc * Math.PI / 180; + + // compute start and end angles + this.startAngle = 1.5 * Math.PI + this.angleOffset; + this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; + + var s = max( + String(Math.abs(this.o.max)).length + , String(Math.abs(this.o.min)).length + , 2 + ) + 2; + + this.o.displayInput + && this.i.css({ + 'width' : ((this.o.width / 2 + 4) >> 0) + 'px' + ,'height' : ((this.o.width / 3) >> 0) + 'px' + ,'position' : 'absolute' + ,'vertical-align' : 'middle' + ,'margin-top' : ((this.o.width / 3) >> 0) + 'px' + ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px' + ,'border' : 0 + ,'background' : 'none' + ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial' + ,'text-align' : 'center' + ,'color' : this.o.inputColor || this.o.fgColor + ,'padding' : '0px' + ,'-webkit-appearance': 'none' + }) + || this.i.css({ + 'width' : '0px' + ,'visibility' : 'hidden' + }); + }; + + this.change = function (v) { + this.cv = v; + this.$.val(v); + }; + + this.angle = function (v) { + return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min); + }; + + this.draw = function () { + + var c = this.g, // context + a = this.angle(this.cv) // Angle + , sat = this.startAngle // Start angle + , eat = sat + a // End angle + , sa, ea // Previous angles + , r = 1; + + c.lineWidth = this.lineWidth; + + c.lineCap = this.lineCap; + + this.o.cursor + && (sat = eat - this.cursorExt) + && (eat = eat + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.o.bgColor; + c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true); + c.stroke(); + + if (this.o.displayPrevious) { + ea = this.startAngle + this.angle(this.v); + sa = this.startAngle; + this.o.cursor + && (sa = ea - this.cursorExt) + && (ea = ea + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.pColor; + c.arc(this.xy, this.xy, this.radius, sa, ea, false); + c.stroke(); + r = (this.cv == this.v); + } + + c.beginPath(); + c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + c.arc(this.xy, this.xy, this.radius, sat, eat, false); + c.stroke(); + }; + + this.cancel = function () { + this.val(this.v); + }; + }; + + $.fn.dial = $.fn.knob = function (o) { + return this.each( + function () { + var d = new k.Dial(); + d.o = o; + d.$ = $(this); + d.run(); + } + ).parent(); + }; + +})(jQuery); \ No newline at end of file diff --git a/docs/src/scripts/vendor/prettify.js b/docs/src/scripts/vendor/prettify.js new file mode 100644 index 0000000..6f390e5 --- /dev/null +++ b/docs/src/scripts/vendor/prettify.js @@ -0,0 +1,33 @@ +!function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; +(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(b=r[a])?b:"0"<=a&&a<="7"?parseInt(e.substring(1),8):a==="u"||a==="x"?parseInt(e.substring(2),16):e.charCodeAt(1)}function g(e){if(e<32)return(e<16?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return e==="\\"||e==="-"||e==="]"||e==="^"?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),e=[],a= +b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,f=b.length;a122||(l<65||h>90||e.push([Math.max(65,h)|32,Math.min(l,90)|32]),l<97||h>122||e.push([Math.max(97,h)&-33,Math.min(l,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];f=[];for(a=0;ah[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(g(h[1])));c.push("]");return c.join("")}function s(e){for(var a=e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],f=0,h=0;f=2&&e==="["?a[f]=b(l):e!=="\\"&&(a[f]=l.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var x=0,m=!1,j=!1,k=0,c=a.length;k=5&&"lang-"===w.substring(0,5))&&!(t&&typeof t[1]==="string"))f=!1,w="src";f||(r[z]=w)}h=c;c+=z.length;if(f){f=t[1];var l=z.indexOf(f),B=l+f.length;t[2]&&(B=z.length-t[2].length,l=B-f.length);w=w.substring(5);H(j+h,z.substring(0,l),g,k);H(j+h+l,f,I(w,f),k);H(j+h+B,z.substring(B),g,k)}else k.push(j+h,w)}a.g=k}var b={},s;(function(){for(var g=a.concat(d),j=[],k={},c=0,i=g.length;c=0;)b[n.charAt(e)]=r;r=r[1];n=""+r;k.hasOwnProperty(n)||(j.push(r),k[n]=q)}j.push(/[\S\s]/);s=S(j)})();var x=d.length;return g}function v(a){var d=[],g=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&g.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),g.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,q])):d.push(["com", +/^#[^\n\r]*/,q,"#"]));a.cStyleComments&&(g.push(["com",/^\/\/[^\n\r]*/,q]),g.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));if(b=a.regexLiterals){var s=(b=b>1?"":"\n\r")?".":"[\\S\\s]";g.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+s+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+ +s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/, +q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d= +c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], +"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"], +O=[N,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],E=[E,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],P=[y,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], +Q=[y,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],W=[y,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],y=[y,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],R=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, +V=/\S/,X=v({keywords:[M,O,E,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",P,Q,y],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),F={};p(X,["default-code"]);p(C([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-", +/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);p(C([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/], +["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);p(v({keywords:M,hashComments:!0,cStyleComments:!0,types:R}),["c","cc","cpp","cxx","cyc","m"]);p(v({keywords:"null,true,false"}),["json"]);p(v({keywords:O,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:R}), +["cs"]);p(v({keywords:N,cStyleComments:!0}),["java"]);p(v({keywords:y,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(v({keywords:P,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);p(v({keywords:Q, +hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(v({keywords:E,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(v({keywords:W,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]); +p(C([],[["str",/^[\S\s]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,g){var b=document.createElement("div");b.innerHTML="
"+a+"
";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1}); +return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}\b/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); diff --git a/docs/src/styles/app.styl b/docs/src/styles/app.styl new file mode 100644 index 0000000..c507974 --- /dev/null +++ b/docs/src/styles/app.styl @@ -0,0 +1,164 @@ + +@import "nib" +@import "vendor/base.css" +@import "vendor/skeleton.css" +@import "vendor/layout.css" +@import "vendor/prettify.css" + +green = #080 +lightGreen = #D3F3D3 + +//global styles +h3 + text-decoration: underline +b + font-weight: bold +i + font-style: italic !important +input[type="radio"], +label[for] + cursor: pointer +.main + position: relative + margin-top: 100px + margin-bottom: 100px +.center + text-align: center +.left + text-align: left +.right + text-align: right +.italic + font-style: italic +.bold + font-weight: bold +.inline + display: inline +.sixteen.columns + margin-bottom: 50px +.section + margin-top: 20px + +//links - base customised +a, a:visited + color: green + outline: 0 + text-decoration: none +a + &:hover, + &:focus + color: darken(green, 50%) +p a, p a:visited + line-height: inherit + +//formatting +.indent1 + margin-left: 10px +.indent2 + margin-left: 20px + +//code +code + color: green + &.black + color: #181818 + +pre.prettyprint + word-wrap: break-word + font-family: 'Droid Sans Mono', Courier + border: none + transition: all 0.3s ease-out + padding: 10px + margin-bottom: 10px + &.runnable + border-left: green 1px solid + cursor: pointer + &:hover + background: whiteSmoke + &.running + background: lightGreen + +//positioning +.pos-chooser-dial + cursor: pointer + +.box.pos-chooser-demo + color: black + padding: 20px + +//api +.entry + margin-left: 10px + padding: 10px + &:hover + background: whiteSmoke + +//misc +.demo-mouse + relative: left 250px top 30px + transition: all 1s ease-out + &.over + top: -30px + left: 125px + +.box + color: green + font-weight: bold + border: green + padding: 3px + border-radius: 5px + +//build tool +.build-tool-toggle + margin: 20px + display: none + box-shadow: 1px 1px 30px 1px green + +.columns.build-tool + display: none + background: whiteSmoke + padding: 25px 25px 5px 25px + + input,textarea,button,select + margin-bottom: 5px + hr + margin-bottom: 15px + + select + display: inline + height: 32px + + .build-tool-style + padding: 3px + margin: 5px 0 + background: #ccc + border-radius: 3px + + .name + display: inline + .name,.code + width: 100% + box-sizing: border-box + .code + font-family: 'Droid Sans Mono', Courier + height: 215px + + + +//chris coyers clearfix +.clearfix:after + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + +.clearfix + display: inline-block; +/* start commented backslash hack \*/ +* html .clearfix + height: 1% +.clearfix + display: block + diff --git a/docs/src/styles/vendor/base.css b/docs/src/styles/vendor/base.css new file mode 100644 index 0000000..e8106ee --- /dev/null +++ b/docs/src/styles/vendor/base.css @@ -0,0 +1,267 @@ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Content +================================================== + #Reset & Basics + #Basic Styles + #Site Styles + #Typography + #Links + #Lists + #Images + #Buttons + #Forms + #Misc */ + + +/* #Reset & Basics (Inspired by E. Meyers) +================================================== */ + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; } + body { + line-height: 1; } + ol, ul { + list-style: none; } + blockquote, q { + quotes: none; } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; } + table { + border-collapse: collapse; + border-spacing: 0; } + + +/* #Basic Styles +================================================== */ + body { + background: #fff; + font: 14px/21px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #444; + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; + } + + +/* #Typography +================================================== */ + h1, h2, h3, h4, h5, h6 { + color: #181818; + font-family: 'Merriweather Sans', "Georgia", "Times New Roman", serif; + font-weight: normal; } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} + h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; } + h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; } + h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; } + h5 { font-size: 17px; line-height: 24px; } + h6 { font-size: 14px; line-height: 21px; } + .subheader { color: #777; } + + p { margin: 0 0 20px 0; } + p img { margin: 0; } + p.lead { font-size: 21px; line-height: 27px; color: #777; } + + em { font-style: italic; } + strong { font-weight: bold; color: #333; } + small { font-size: 80%; } + +/* Blockquotes */ + blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } + blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } + +/* #Lists +================================================== */ + ul, ol { margin-bottom: 20px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + ul ul, ul ol, + ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } + ul ul li, ul ol li, + ol ol li, ol ul li { margin-bottom: 6px; } + li { line-height: 18px; margin-bottom: 12px; } + ul.large li { line-height: 21px; } + li p { line-height: 21px; } + +/* #Images +================================================== */ + + img.scale-with-grid { + max-width: 100%; + height: auto; } + + +/* #Buttons +================================================== */ + + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + background: #eee; /* Old browsers */ + background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ + background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ + background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ + background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ + background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ + background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ + border: 1px solid #aaa; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #444; + display: inline-block; + font-size: 11px; + font-weight: bold; + text-decoration: none; + text-shadow: 0 1px rgba(255, 255, 255, .75); + cursor: pointer; + margin-bottom: 20px; + line-height: normal; + padding: 8px 10px; + font-family: 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } + + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover { + color: #222; + background: #ddd; /* Old browsers */ + background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ + background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ + background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ + background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ + background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ + background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ + border: 1px solid #888; + border-top: 1px solid #aaa; + border-left: 1px solid #aaa; } + + .button:active, + button:active, + button.active, + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active { + border: 1px solid #666; + background: #ccc; /* Old browsers */ + background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ + background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ + background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ + background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ + background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ + background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } + + button.disabled, + button[disabled="disabled"] { + opacity: 0.85; + } + + .button.full-width, + button.full-width, + input[type="submit"].full-width, + input[type="reset"].full-width, + input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; } + + /* Fix for odd Mozilla border & padding issues */ + button::-moz-focus-inner, + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + +/* #Forms +================================================== */ + + form { + margin-bottom: 20px; } + fieldset { + margin-bottom: 20px; } + input[type="text"], + input[type="password"], + input[type="email"], + textarea, + select { + border: 1px solid #ccc; + padding: 6px 4px; + outline: none; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + font: 13px 'Merriweather Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #777; + margin: 0; + width: 210px; + max-width: 100%; + display: block; + margin-bottom: 20px; + background: #fff; } + select { + padding: 0; } + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + textarea:focus { + border: 1px solid #aaa; + color: #444; + -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); + -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); + box-shadow: 0 0 3px rgba(0,0,0,.2); } + textarea { + min-height: 60px; } + label, + legend { + display: block; + font-weight: bold; + font-size: 13px; } + select { + width: 220px; } + input[type="checkbox"] { + display: inline; } + label span, + legend span { + font-weight: normal; + font-size: 13px; + color: #444; } + +/* #Misc +================================================== */ + .remove-bottom { margin-bottom: 0 !important; } + .half-bottom { margin-bottom: 10px !important; } + .add-bottom { margin-bottom: 20px !important; } + + diff --git a/docs/src/styles/vendor/layout.css b/docs/src/styles/vendor/layout.css new file mode 100644 index 0000000..b99f451 --- /dev/null +++ b/docs/src/styles/vendor/layout.css @@ -0,0 +1,58 @@ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + +/* Table of Content +================================================== + #Site Styles + #Page Styles + #Media Queries + #Font-Face */ + +/* #Site Styles +================================================== */ + +/* #Page Styles +================================================== */ + +/* #Media Queries +================================================== */ + + /* Smaller than standard 960 (devices and browsers) */ + @media only screen and (max-width: 959px) {} + + /* Tablet Portrait size to standard 960 (devices and browsers) */ + @media only screen and (min-width: 768px) and (max-width: 959px) {} + + /* All Mobile Sizes (devices and browser) */ + @media only screen and (max-width: 767px) {} + + /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ + @media only screen and (min-width: 480px) and (max-width: 767px) {} + + /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ + @media only screen and (max-width: 479px) {} + + +/* #Font-Face +================================================== */ +/* This is the proper syntax for an @font-face file + Just create a "fonts" folder at the root, + copy your FontName into code below and remove + comment brackets */ + +/* @font-face { + font-family: 'FontName'; + src: url('../fonts/FontName.eot'); + src: url('../fonts/FontName.eot?iefix') format('eot'), + url('../fonts/FontName.woff') format('woff'), + url('../fonts/FontName.ttf') format('truetype'), + url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); + font-weight: normal; + font-style: normal; } +*/ \ No newline at end of file diff --git a/docs/src/styles/vendor/prettify.css b/docs/src/styles/vendor/prettify.css new file mode 100644 index 0000000..d44b3a2 --- /dev/null +++ b/docs/src/styles/vendor/prettify.css @@ -0,0 +1 @@ +.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} \ No newline at end of file diff --git a/docs/src/styles/vendor/skeleton.css b/docs/src/styles/vendor/skeleton.css new file mode 100644 index 0000000..5db3d38 --- /dev/null +++ b/docs/src/styles/vendor/skeleton.css @@ -0,0 +1,242 @@ +/* +* Skeleton V1.2 +* Copyright 2011, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 6/20/2012 +*/ + + +/* Table of Contents +================================================== + #Base 960 Grid + #Tablet (Portrait) + #Mobile (Portrait) + #Mobile (Landscape) + #Clearing */ + + + +/* #Base 960 Grid +================================================== */ + + .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } + .container .column, + .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } + .row { margin-bottom: 20px; } + + /* Nested Column Classes */ + .column.alpha, .columns.alpha { margin-left: 0; } + .column.omega, .columns.omega { margin-right: 0; } + + /* Base Grid */ + .container .one.column, + .container .one.columns { width: 40px; } + .container .two.columns { width: 100px; } + .container .three.columns { width: 160px; } + .container .four.columns { width: 220px; } + .container .five.columns { width: 280px; } + .container .six.columns { width: 340px; } + .container .seven.columns { width: 400px; } + .container .eight.columns { width: 460px; } + .container .nine.columns { width: 520px; } + .container .ten.columns { width: 580px; } + .container .eleven.columns { width: 640px; } + .container .twelve.columns { width: 700px; } + .container .thirteen.columns { width: 760px; } + .container .fourteen.columns { width: 820px; } + .container .fifteen.columns { width: 880px; } + .container .sixteen.columns { width: 940px; } + + .container .one-third.column { width: 300px; } + .container .two-thirds.column { width: 620px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 60px; } + .container .offset-by-two { padding-left: 120px; } + .container .offset-by-three { padding-left: 180px; } + .container .offset-by-four { padding-left: 240px; } + .container .offset-by-five { padding-left: 300px; } + .container .offset-by-six { padding-left: 360px; } + .container .offset-by-seven { padding-left: 420px; } + .container .offset-by-eight { padding-left: 480px; } + .container .offset-by-nine { padding-left: 540px; } + .container .offset-by-ten { padding-left: 600px; } + .container .offset-by-eleven { padding-left: 660px; } + .container .offset-by-twelve { padding-left: 720px; } + .container .offset-by-thirteen { padding-left: 780px; } + .container .offset-by-fourteen { padding-left: 840px; } + .container .offset-by-fifteen { padding-left: 900px; } + + + +/* #Tablet (Portrait) +================================================== */ + + /* Note: Design for a width of 768px */ + + @media only screen and (min-width: 768px) and (max-width: 959px) { + .container { width: 768px; } + .container .column, + .container .columns { margin-left: 10px; margin-right: 10px; } + .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } + .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } + .alpha.omega { margin-left: 0; margin-right: 0; } + + .container .one.column, + .container .one.columns { width: 28px; } + .container .two.columns { width: 76px; } + .container .three.columns { width: 124px; } + .container .four.columns { width: 172px; } + .container .five.columns { width: 220px; } + .container .six.columns { width: 268px; } + .container .seven.columns { width: 316px; } + .container .eight.columns { width: 364px; } + .container .nine.columns { width: 412px; } + .container .ten.columns { width: 460px; } + .container .eleven.columns { width: 508px; } + .container .twelve.columns { width: 556px; } + .container .thirteen.columns { width: 604px; } + .container .fourteen.columns { width: 652px; } + .container .fifteen.columns { width: 700px; } + .container .sixteen.columns { width: 748px; } + + .container .one-third.column { width: 236px; } + .container .two-thirds.column { width: 492px; } + + /* Offsets */ + .container .offset-by-one { padding-left: 48px; } + .container .offset-by-two { padding-left: 96px; } + .container .offset-by-three { padding-left: 144px; } + .container .offset-by-four { padding-left: 192px; } + .container .offset-by-five { padding-left: 240px; } + .container .offset-by-six { padding-left: 288px; } + .container .offset-by-seven { padding-left: 336px; } + .container .offset-by-eight { padding-left: 384px; } + .container .offset-by-nine { padding-left: 432px; } + .container .offset-by-ten { padding-left: 480px; } + .container .offset-by-eleven { padding-left: 528px; } + .container .offset-by-twelve { padding-left: 576px; } + .container .offset-by-thirteen { padding-left: 624px; } + .container .offset-by-fourteen { padding-left: 672px; } + .container .offset-by-fifteen { padding-left: 720px; } + } + + +/* #Mobile (Portrait) +================================================== */ + + /* Note: Design for a width of 320px */ + + @media only screen and (max-width: 767px) { + .container { width: 300px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 300px; } + + /* Offsets */ + .container .offset-by-one, + .container .offset-by-two, + .container .offset-by-three, + .container .offset-by-four, + .container .offset-by-five, + .container .offset-by-six, + .container .offset-by-seven, + .container .offset-by-eight, + .container .offset-by-nine, + .container .offset-by-ten, + .container .offset-by-eleven, + .container .offset-by-twelve, + .container .offset-by-thirteen, + .container .offset-by-fourteen, + .container .offset-by-fifteen { padding-left: 0; } + + } + + +/* #Mobile (Landscape) +================================================== */ + + /* Note: Design for a width of 480px */ + + @media only screen and (min-width: 480px) and (max-width: 767px) { + .container { width: 420px; } + .container .columns, + .container .column { margin: 0; } + + .container .one.column, + .container .one.columns, + .container .two.columns, + .container .three.columns, + .container .four.columns, + .container .five.columns, + .container .six.columns, + .container .seven.columns, + .container .eight.columns, + .container .nine.columns, + .container .ten.columns, + .container .eleven.columns, + .container .twelve.columns, + .container .thirteen.columns, + .container .fourteen.columns, + .container .fifteen.columns, + .container .sixteen.columns, + .container .one-third.column, + .container .two-thirds.column { width: 420px; } + } + + +/* #Clearing +================================================== */ + + /* Self Clearing Goodness */ + .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } + + /* Use clearfix class on parent to clear nested columns, + or wrap each row of columns in a
*/ + .clearfix:before, + .clearfix:after, + .row:before, + .row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + .row:after, + .clearfix:after { + clear: both; } + .row, + .clearfix { + zoom: 1; } + + /* You can also use a
to clear columns */ + .clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; + } diff --git a/docs/src/views/index.jade b/docs/src/views/index.jade new file mode 100644 index 0000000..1c0c199 --- /dev/null +++ b/docs/src/views/index.jade @@ -0,0 +1,86 @@ +!!! 5 +html(lang='en') + + dev = env == 'dev' + min = dev ? '' : '.min' + + head + meta(charset='utf-8') + title Notify.js + meta(name='description', content='Notify.js - A simple, versatile notification library') + meta(name='author', content='Jaime Pillora ') + meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1') + //- CSS + link(rel='stylesheet', href='docs/css/app.css') + link(href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800', rel='stylesheet', type='text/css') + + //if lt IE 9 + script(src='http://html5shim.googlecode.com/svn/trunk/html5.js') + + body + + a(href="https://github.com/jpillora/notifyjs") + img(style="position: absolute; top: 0; right: 0; border: 0;", + src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png", + alt="Fork me on GitHub") + + .main.container + + .eight.columns + + h1.title Notify.js + + .eight.columns.right + span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&type=follow", + allowtransparency="true",frameborder="0",scrolling="0",width="130",height="20") + span: iframe(src="http://ghbtns.com/github-btn.html?user=jpillora&repo=notifyjs&type=watch&count=true", + allowtransparency="true",frameborder="0",scrolling="0",width="80",height="20") + span + a.twitter-share-button(href='https://twitter.com/share', data-url='http://notifyjs.com', data-text='Notify.js - A simple, versatile notification library', data-hashtags='notifyjs') Tweet + script. + !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); + + hr + + include sections/summary + include sections/download + include sections/usage + include sections/notification-styles + include sections/positioning + include sections/api + include sections/options + include sections/styling + include sections/contributing + + //- main scripts + script(src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery#{min}.js") + script(src="dist/notify#{min}.js") + script(src="dist/styles/bootstrap/notify-bootstrap.js") + script(src="docs/js/app.js") + + //- build tool scripts + script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/compile.js") + script(defered, src="#{false ? '../' : 'http://jpillora.com/'}compilejs/dist/tasks/compile.uglify.js") + script(defered, src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js") + + script. + //async fonts + WebFontConfig = { google: { families: [ 'Droid+Sans+Mono::latin' ] } }; + (function() { + var wf = document.createElement('script'); + wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; + wf.type = 'text/javascript'; + wf.async = 'true'; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(wf, s); + })(); + //ga + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-38709761-6', 'notifyjs.com'); + ga('send', 'pageview'); + + diff --git a/docs/src/views/sections/api.jade b/docs/src/views/sections/api.jade new file mode 100644 index 0000000..a8fe14a --- /dev/null +++ b/docs/src/views/sections/api.jade @@ -0,0 +1,86 @@ +//- ==================================== +//- API +//- ==================================== +.sixteen.columns + h3 API + + .entry + h5 + code.black $.notify( + code string|object + code.black , [ + code options + code.black ]) + p.indent1 + code string|object + | - global notification data + br + code options + | - an options object or class name string + + .entry + h5 + code.black $.notify( + code element + code.black , + code string|object + code.black , [ + code options + code.black ]) + p.indent1 + code element + | - a jquery element + br + code string|object + | - element notification data + br + code options + | - an options object or class name string + + .entry + h5 + code.black $( + code selector + code.black ).notify( + code string|object + code.black , [ + code options + code.black ]) + p.indent1 + code selector + | - jquery selector + br + code string|object + | - element notification data + br + code options + | - an options object or class name string + + + .entry + h5 + code.black $.notify.addStyle( + code styleName + code.black , + code styleDefinition + code.black ) + p.indent1 + code styleName + | - string (the + b style + | option references this name) + br + | + code styleDefinition + | - style definition object (see + b Styling + | below) + + .entry + h5 + code.black $.notify.defaults( + code options + code.black ) + p.indent1 + code options + | - an options object (updates the defaults listed below) diff --git a/docs/src/views/sections/contributing.jade b/docs/src/views/sections/contributing.jade new file mode 100644 index 0000000..d1d4abb --- /dev/null +++ b/docs/src/views/sections/contributing.jade @@ -0,0 +1,39 @@ +//- ==================================== +//- CONTRIBUTING +//- ==================================== +.sixteen.columns + h3 Contributing More Styles + + p + | Contributing more styles is easy! + ol + li. + Click this link + li Sign into GitHub (if you're not already) + li Click 'Fork' + li Enter your new style + li Click 'Commit New File' + li Click 'Send Pull Request'! + + p + | To get people started with some styles ideas, checkout this + a(href="http://mac.appstorm.net/roundups/utilities-roundups/36-sweet-growl-styles-to-keep-your-notifications-snappy/", target="_blank") post on various Growl styles + | . + + p.italic + | Note: If you wish to contribute to the library by fixing bugs or adding features, + | see the + b src + | folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript. + | I'm using + a(href="https://gruntjs.com", target="_blank") Grunt + | to compile, minify and concat the builds, you can do so with: + ol + li + | Fork + a(href="https://github.com/jpillora/notifyjs") https://github.com/jpillora/notifyjs + li: code cd notifyjs + li: code npm install -g grunt-cli + li: code npm install + li: code grunt + li Pull-request ! diff --git a/docs/src/views/sections/download.jade b/docs/src/views/sections/download.jade new file mode 100644 index 0000000..52e7166 --- /dev/null +++ b/docs/src/views/sections/download.jade @@ -0,0 +1,67 @@ +//- ==================================== +//- DOWNLOAD +//- ==================================== +.eight.columns + h3 Download + + p + | Download pre-packaged with the bootstrap notification style: + br + a(href="dist/notify-combined.min.js", data-download, data-name="notify.min") + button Download notify.min.js + + a(href="dist/notify-combined.js", data-download, data-name="notify") + button Download notify.js + + p + | Or, create a custom build with a different style + br + button(disabled="disabled").build-tool-loading + | Loading... + button.build-tool-toggle + | Build a custom notify.js + +.sixteen.columns.build-tool(ng-app,ng-controller="BuildController") + + p.center + | Notify.js Core + button.active(disabled="disabled") Include + + hr + + p + span.bold Styles + br + + .build-tool-style(ng-repeat="style in styles") + + div + textarea.code(ng-model="style.code") + + div.right + button(ng-click="active(style,'active')", ng-class="style.active && 'active'") Include + button(ng-click="useDefault(style)", ng-class="settings.default == style && 'active'") Default + button.test(ng-click="test($event,style,false)") Test Element + button.test(ng-click="test($event,style,true)") Test Global + button(ng-click="delete($index)") Delete + + .build-tool-controls.center + + button(ng-click="addStyle()") Add Style + select(ng-options="p.name for p in premadeStyles", ng-model="premadeStyle") + button(ng-click="loadStyle()") Load Style + span.italic Contribute more styles ! + + hr + + p.center + | Minify + button(ng-click="active(settings,'minify')", ng-class="settings.minify && 'active'") Minify this build + + hr + + p.center + button(ng-click="build()", ng-bind="building && 'Building...' || 'Download this build'") + span.italic.indent2 + | Made with + a(href="https://github.com/jpillora/compilejs",target="_blank") Compile.js diff --git a/docs/src/views/sections/notification-styles.jade b/docs/src/views/sections/notification-styles.jade new file mode 100644 index 0000000..6c4489c --- /dev/null +++ b/docs/src/views/sections/notification-styles.jade @@ -0,0 +1,31 @@ +//- ==================================== +//- USAGE +//- ==================================== +.sixteen.columns + h4 Notification Styles + + p. + Each style may define a set of classes to use to substyle the notification. + The pre-packaged version includes a bootstrap notification style (see more below in Styling). + These classes include: + + div + span Success + pre.prettyprint.runnable.indent1 + | $.notify("Access granted", "success"); + span Info + pre.prettyprint.runnable.indent1 + | $.notify("Do not press this button", "info"); + span Warning + pre.prettyprint.runnable.indent1 + | $.notify("Warning: Self-destruct in 3.. 2..", "warn"); + span Error + pre.prettyprint.runnable.indent1 + | $.notify("BOOM!", "error"); + + p.italic(style="margin-top:10px") + | Note: This page has set the default class to + code "success" + | with + code $.notify.defaults({ className: "success" }); + | . diff --git a/docs/src/views/sections/options.jade b/docs/src/views/sections/options.jade new file mode 100644 index 0000000..f1ce820 --- /dev/null +++ b/docs/src/views/sections/options.jade @@ -0,0 +1,42 @@ +//- ==================================== +//- OPTIONS +//- ==================================== +.sixteen.columns + h3 Options + + p + | The options object listed above are in the form below. + | This object below is the actual used to check option + | validity and set defaults. + + pre.prettyprint. + { + // whether to hide the notification on click + clickToHide: true, + // whether to auto-hide the notification + autoHide: true, + // if autoHide, hide after milliseconds + autoHideDelay: 5000, + // show the arrow pointing at the element + arrowShow: true, + // arrow size in pixels + arrowSize: 5, + // default positions + elementPosition: 'bottom left', + globalPosition: 'top right', + // default style + style: 'bootstrap', + // default class (string or [string]) + className: 'error', + // show animation + showAnimation: 'slideDown', + // show animation duration + showDuration: 400, + // hide animation + hideAnimation: 'slideUp', + // hide animation duration + hideDuration: 200, + // padding between element and notification + gap: 2 + } + diff --git a/docs/src/views/sections/positioning.jade b/docs/src/views/sections/positioning.jade new file mode 100644 index 0000000..aefbf44 --- /dev/null +++ b/docs/src/views/sections/positioning.jade @@ -0,0 +1,55 @@ + +//- ==================================== +//- POSITIONING +//- ==================================== +.sixteen.columns(id="position") + h3 Positioning + + p + | Element notifications and Global notifications can + | be vertically repositioned to: + code "top" + | , + code "middle" + | or + code "bottom" + | and horozontally repositioned to: + code "left" + | , + code "center" + | or + code "right" + | . + + p: pre.prettyprint.runnable + | $(".pos-demo").notify( + | "I'm left of the box", + | { position:"left" } + | ); + + p.center + | We can position the notification around this + span.box.pos-demo box + + p(style='padding-top: 30px') Use this positioning tool to see all possible position combinations + + div(style="padding: 30px;") + label.inline(for="pos-elem") Element + input(type="radio", id="pos-elem", value="elem", name="pos-type", checked="checked") + label.inline(for="pos-glob") Global + input(type="radio", id="pos-glob", value="glob", name="pos-type") + + div(style="margin-left: 60px") + input.pos-chooser(data-thickness=".3", + data-width='100', + data-height='100', + data-max="12", + data-cursor="true", + data-fgColor='#080', + data-displayInput="false", + data-angleOffset='-15', + data-linecap='round') + p.center + span An awesome cool + span.box.pos-chooser-demo larrrggggeeee box + diff --git a/docs/src/views/sections/styling.jade b/docs/src/views/sections/styling.jade new file mode 100644 index 0000000..ffe607a --- /dev/null +++ b/docs/src/views/sections/styling.jade @@ -0,0 +1,255 @@ +//- ==================================== +//- STYLING +//- ==================================== +.sixteen.columns + + .section + + h3 Custom Styling Guide + + p + | You can add your own styles to Notify.js with the + code $.notify.addStyle + | method. See + a(data-highlight) API + | . + + p Style definition objects are in the form: + + pre.prettyprint. + { + //required html representing each notification + html: "", + //optional object to be converted to css + classes: { + <className>: { + <propertyName>: <value> + }, + <className>: { + ... + }, + ... + }, + //optional css to be inserted onto the page + css: "" + } + + p + h5.inline html + | - If you only have HTML element that you need to modify per + | notification then you should give this element an attribute of + code data-notify-text + | or + code data-notify-html + | . Use + code data-notify-html + | if you wish to display arbitrary HTML inside the notification, + | otherwise, use + code data-notify-text + | as it is more secure. + br + | Otherwise, if you wish to modify multiple HTML elements per + | notification then you'll need to give each element one of the two + | attributes above + b as well as a value + | . For an example of this see the Advanced Example below. + + p + h5.inline classes + | - This object will be used to construct css. It must be in the form described above and there is an example below. + p + h5.inline css + | - This string is simply raw css. Use this property if you want to keep your style definition inside + | your js files. + + + .section + h4 Class naming convention + p. + When each notification is constructed, it's container + (outer most element defined in your style html) will automatically + apply the class: + p + code notifyjs-<style name>-base + p + | When you use the class name option ( + code className + | ) the class: + p + code notifyjs-<style name>-<class name> + p. + will be applied. So if you define your styles in an external CSS file or in the style's css + property, you must define your CSS rules using this naming convention. + + .section + + h4 Simple Example + + p If you were to define the style: + pre.prettyprint.auto-run.happyblue-example. + $.notify.addStyle('happyblue', { + html: "<div>☺<span data-notify-text/>☺</div>", + classes: { + base: { + "white-space": "nowrap", + "background-color": "lightblue", + "padding": "5px" + }, + superblue: { + "color": "white", + "background-color": "blue" + } + } + }); + + p + | Upon running this code, the + code classes + | object in this example will be converted the following css: + pre.prettyprint.lang-css. + .notifyjs-happyblue-base { + white-space: nowrap; + background-color: lightblue; + padding: 5px; + } + .notifyjs-happyblue-superblue { + color: white; + background-color: blue; + } + p:i You can confirm this now by inspecting the DOM (look for the tagged style element in the head) + + p You can now use your new style with: + pre.prettyprint.runnable. + $.notify('hello !!', { + style: 'happyblue' + }); + + p + | and you can use the + code superblue + | class with: + pre.prettyprint.runnable. + $.notify('HELLO !!!!', { + style: 'happyblue', + className: 'superblue' + }); + + .section + + h4 Advanced Example + + p Say you wanted to use buttons in your notifications then you could do something like: + + pre.prettyprint.auto-run.button-js-example. + //add a new style 'foo' + $.notify.addStyle('foo', { + html: + "<div>" + + "<div class='clearfix'>" + + "<div class='title' data-notify-html='title'/>" + + "<div class='buttons'>" + + "<button class='no'>Cancel</button>" + + "<button class='yes' data-notify-text='button'></button>" + + "</div>" + + "</div>" + + "</div>" + }); + + //listen for click events from this style + $(document).on('click', '.notifyjs-foo-base .no', function() { + //programmatically trigger propogating hide event + $(this).trigger('notify-hide'); + }); + $(document).on('click', '.notifyjs-foo-base .yes', function() { + //show button text + alert($(this).text() + " clicked!"); + //hide notification + $(this).trigger('notify-hide'); + }); + + p + | Notice there is no + code classes + | property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead: + p.italic + | Note: you could also convert this CSS code to a JavaScript string and use it with the + code css + | property. It's not very readable though it's better for distribution. + + pre.prettyprint.auto-add.foo-css-example.lang-css. + + .notifyjs-foo-base { + opacity: 0.85; + width: 200px; + background: #F5F5F5; + padding: 5px; + border-radius: 10px; + } + + .notifyjs-foo-base .title { + width: 100px; + float: left; + margin: 10px 0 0 10px; + text-align: right; + } + + .notifyjs-foo-base .buttons { + width: 70px; + float: right; + font-size: 9px; + padding: 5px; + margin: 2px; + } + + .notifyjs-foo-base button { + font-size: 9px; + padding: 5px; + margin: 2px; + width: 60px; + } + + p You can now use this style with: + + pre.prettyprint.runnable. + $.notify({ + title: 'Would you like some Foo ?', + button: 'Confirm' + }, { + style: 'foo', + autoHide: false, + clickToHide: false + }); + + .section + + h4 Extra Example + + p. + If using the above methods still don't provide you + with what you need then you can, pass jQuery objects + straight into the notification (provided that the + element has the data-notify-html attribute): + + pre.prettyprint.runnable. + + var h5 = $("<h5/>").append("You MUST have some Foo !") + + $.notify({ + title: h5, + button: 'YES !' + }, { + style: 'foo', + autoHide: false, + clickToHide: false + }); + + .section + + h4 Style List + + p + ul.square + li: a(href="https://github.com/jpillora/notifyjs/tree/master/dist/styles/bootstrap", target="_blank") bootstrap + ul.square + li: a(href="https://github.com/jpillora/notifyjs/tree/master/dist/styles/metro", target="_blank") metro + diff --git a/docs/src/views/sections/summary.jade b/docs/src/views/sections/summary.jade new file mode 100644 index 0000000..47b5b1a --- /dev/null +++ b/docs/src/views/sections/summary.jade @@ -0,0 +1,15 @@ +//- ==================================== +//- SUMMARY +//- ==================================== +.eight.columns.summary + h3 Summary + p + | Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. + | The javascript code snippets in this documentation with the + code green + | edge are runnable by clicking them. + + p: pre.prettyprint.runnable + | $.notify("Hello World"); + + img.demo-mouse(src='docs/img/pointer.png') \ No newline at end of file diff --git a/docs/src/views/sections/usage.jade b/docs/src/views/sections/usage.jade new file mode 100644 index 0000000..ae402e8 --- /dev/null +++ b/docs/src/views/sections/usage.jade @@ -0,0 +1,31 @@ + +//- ==================================== +//- USAGE +//- ==================================== +.sixteen.columns + h3 Basic Usage + +.eight.columns + h4 Element Notifications + + p You can place notifications on any element: + + p: pre.prettyprint.runnable + | $(".elem-demo").notify("Hello Box"); + + p.center + | Like this + span.box.elem-demo box + +.eight.columns + h4 Global Notifications + + p + | If you don't specify an element, notification + | will appear in the top left (unless you specify a + | different position - See + a(data-highlight) Positioning + | ) + + p: pre.prettyprint.runnable + | $.notify("I'm over here !"); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f40131d --- /dev/null +++ b/index.html @@ -0,0 +1,473 @@ + + + + + Notify.js + + + + + + + Fork me on GitHub +
+
+

Notify.js

+
+
+ + +
+
+
+

Summary

+

+ Notify.js is a jQuery plugin to provide simple yet fully customisable notifications. + The javascript code snippets in this documentation with the green edge are runnable by clicking them. +

+

+ 

$.notify("Hello World");
+

+
+
+

Download

+

Download pre-packaged with the bootstrap notification style:
+ +

+

Or, create a custom build with a different style
+ + +

+
+
+

Notify.js Core + +

+
+

Styles
+

+
+ +
+
+ + + + + +
+
+
+ + + Contribute more styles ! +
+

+
+

Minify + +

+
+

+ Made with Compile.js +

+
+
+

Basic Usage

+
+
+

Element Notifications

+

You can place notifications on any element:

+

+ 

$(".elem-demo").notify("Hello Box");
+

+

Like this box

+
+
+

Global Notifications

+

+ + If you don't specify an element, notification + will appear in the top left (unless you specify a + different position - See Positioning) +

+

+ 

$.notify("I'm over here !");
+

+
+
+

Notification Styles

+

+ Each style may define a set of classes to use to substyle the notification. + The pre-packaged version includes a bootstrap notification style (see more below in Styling). + These classes include: + +

+
Success + 
$.notify("Access granted", "success");
Info + 
$.notify("Do not press this button", "info");
Warning + 
$.notify("Warning: Self-destruct in 3.. 2..", "warn");
Error + 
$.notify("BOOM!", "error");
+
+

Note: This page has set the default class to"success" with$.notify.defaults({ className: "success" });.

+
+
+

Positioning

+

+ Element notifications and Global notifications can + be vertically repositioned to: "top", "middle" or "bottom" and horozontally repositioned to: "left", "center" or "right" . +

+

+ 

$(".pos-demo").notify(
+  "I'm left of the box", 
+  { position:"left" }
+);
+

+

We can position the notification around this box

+

Use this positioning tool to see all possible position combinations

+
+ + + + +
+
+ +
+

An awesome cool larrrggggeeee box

+
+
+

API

+
+
$.notify( string|object, [ options ])
+

string|object - global notification data
options - an options object or class name string

+
+
+
$.notify( element, string|object, [ options ])
+

element - a jquery element
string|object - element notification data
options - an options object or class name string

+
+
+
$( selector ).notify( string|object, [ options ])
+

selector - jquery selector
string|object - element notification data
options - an options object or class name string

+
+
+
$.notify.addStyle( styleName, styleDefinition )
+

styleName - string (the style option references this name)
styleDefinition - style definition object (see Styling below)

+
+
+
$.notify.defaults( options )
+

options - an options object (updates the defaults listed below)

+
+
+
+

Options

+

+ + The options object listed above are in the form below. + This object below is the actual used to check option + validity and set defaults. +

+ 
{
+  // whether to hide the notification on click
+  clickToHide: true,
+  // whether to auto-hide the notification
+  autoHide: true,
+  // if autoHide, hide after milliseconds
+  autoHideDelay: 5000,
+  // show the arrow pointing at the element
+  arrowShow: true,
+  // arrow size in pixels
+  arrowSize: 5,
+  // default positions
+  elementPosition: 'bottom left',
+  globalPosition: 'top right',
+  // default style
+  style: 'bootstrap',
+  // default class (string or [string])
+  className: 'error',
+  // show animation
+  showAnimation: 'slideDown',
+  // show animation duration
+  showDuration: 400,
+  // hide animation
+  hideAnimation: 'slideUp',
+  // hide animation duration
+  hideDuration: 200,
+  // padding between element and notification
+  gap: 2
+}
+
+
+
+
+

Custom Styling Guide

+

You can add your own styles to Notify.js with the$.notify.addStyle method. See API.

+

Style definition objects are in the form:

+ 
{
+  //required html representing each notification 
+  html: "",
+  //optional object to be converted to css
+  classes: {
+    <className>: {
+      <propertyName>: <value> 
+    },
+    <className>: {
+      ...
+    },
+    ...
+  },
+  //optional css to be inserted onto the page
+  css: ""
+}
+
+

+

html
- If you only have HTML element that you need to modify per + notification then you should give this element an attribute of data-notify-text or data-notify-html. Use data-notify-html if you wish to display arbitrary HTML inside the notification, + otherwise, use data-notify-text as it is more secure.
Otherwise, if you wish to modify multiple HTML elements per + notification then you'll need to give each element one of the two + attributes above as well as a value. For an example of this see the Advanced Example below. +

+

+

classes
- This object will be used to construct css. It must be in the form described above and there is an example below. +

+

+

css
- This string is simply raw css. Use this property if you want to keep your style definition inside + your js files. +

+
+
+

Class naming convention

+

+ When each notification is constructed, it's container + (outer most element defined in your style html) will automatically + apply the class: +

+

notifyjs-<style name>-base

+

+ + When you use the class name option (className) the class: +

+

notifyjs-<style name>-<class name>

+

+ will be applied. So if you define your styles in an external CSS file or in the style's css + property, you must define your CSS rules using this naming convention. + +

+
+
+

Simple Example

+

If you were to define the style:

+ 
$.notify.addStyle('happyblue', {
+  html: "<div>☺<span data-notify-text/>☺</div>",
+  classes: {
+    base: {
+      "white-space": "nowrap",
+      "background-color": "lightblue",
+      "padding": "5px"
+    },
+    superblue: {
+      "color": "white",
+      "background-color": "blue"
+    }
+  }
+});
+
+

Upon running this code, the classes object in this example will be converted the following css:

+ 
.notifyjs-happyblue-base {
+  white-space: nowrap;
+  background-color: lightblue;
+  padding: 5px;
+}
+.notifyjs-happyblue-superblue {
+  color: white;
+  background-color: blue;
+}
+ You can confirm this now by inspecting the DOM (look for the tagged style element in the head) +

You can now use your new style with:

+ 
$.notify('hello !!', {
+  style: 'happyblue'
+});
+
+

+ + and you can use the superblue class with: +

+ 
$.notify('HELLO !!!!', {
+  style: 'happyblue',
+  className: 'superblue'
+});
+
+
+
+

Advanced Example

+

Say you wanted to use buttons in your notifications then you could do something like:

+ 
//add a new style 'foo'
+$.notify.addStyle('foo', {
+  html: 
+    "<div>" +
+      "<div class='clearfix'>" +
+        "<div class='title' data-notify-html='title'/>" +
+        "<div class='buttons'>" +
+          "<button class='no'>Cancel</button>" +
+          "<button class='yes' data-notify-text='button'></button>" +
+        "</div>" +
+      "</div>" +
+    "</div>"
+});
+
+//listen for click events from this style
+$(document).on('click', '.notifyjs-foo-base .no', function() {
+  //programmatically trigger propogating hide event
+  $(this).trigger('notify-hide');
+});
+$(document).on('click', '.notifyjs-foo-base .yes', function() {
+  //show button text
+  alert($(this).text() + " clicked!");
+  //hide notification
+  $(this).trigger('notify-hide');
+});
+
+

+ + Notice there is no classes property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead: +

+

Note: you could also convert this CSS code to a JavaScript string and use it with the css property. It's not very readable though it's better for distribution.

+ 
.notifyjs-foo-base {
+  opacity: 0.85;
+  width: 200px;
+  background: #F5F5F5;
+  padding: 5px;
+  border-radius: 10px;
+}
+
+.notifyjs-foo-base .title {
+  width: 100px;
+  float: left;
+  margin: 10px 0 0 10px;
+  text-align: right;
+}
+
+.notifyjs-foo-base .buttons {
+  width: 70px;
+  float: right;
+  font-size: 9px;
+  padding: 5px;
+  margin: 2px;
+}
+
+.notifyjs-foo-base button {
+  font-size: 9px;
+  padding: 5px;
+  margin: 2px;
+  width: 60px;
+}
+
+

You can now use this style with:

+ 
$.notify({
+  title: 'Would you like some Foo ?',
+  button: 'Confirm'
+}, { 
+  style: 'foo',
+  autoHide: false,
+  clickToHide: false
+});
+
+
+
+

Extra Example

+

+ If using the above methods still don't provide you + with what you need then you can, pass jQuery objects + straight into the notification (provided that the + element has the data-notify-html attribute): + +

+ 
var h5 = $("<h5/>").append("You MUST have some Foo !")
+
+$.notify({
+  title: h5,
+  button: 'YES !'
+}, { 
+  style: 'foo',
+  autoHide: false,
+  clickToHide: false
+});
+
+
+
+

Style List

+

+

+ +

+
+
+
+

Contributing More Styles

+

+ + Contributing more styles is easy! +

    +
  1. Click this link
    2. +
  2. Sign into GitHub (if you're not already)
    3. +
  3. Click 'Fork'
    4. +
  4. Enter your new style
    5. +
  5. Click 'Commit New File'
    6. +
  6. Click 'Send Pull Request'!
    7. +
+

+

To get people started with some styles ideas, checkout this post on various Growl styles.

+

+ Note: If you wish to contribute to the library by fixing bugs or adding features, + see the src folder. Also, the source is in CoffeeScript, however, new styles can be either JavaScript or CoffeeScript. + I'm using Grunt to compile, minify and concat the builds, you can do so with: +

    +
  1. Fork https://github.com/jpillora/notifyjs
    2. +
  2. cd notifyjs
    3. +
  3. npm install -g grunt-cli
    4. +
  4. npm install
    5. +
  5. grunt
    6. +
  6. Pull-request !
    7. +
+

+
+
+ + + + + + + + + + \ No newline at end of file