From 09c1d2ae3cec8745ba5dbe6bf67c7df06c25f0cf Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Mon, 20 Jan 2014 15:28:49 -0600 Subject: [PATCH 1/4] nav-fixes pushed took a lot of code from pl-php, but the iframes are working better than ever. ignoring lineage and annotatations, some of the recent polish. just trying to get the most basic iframe navigation running. I suspect this has never been perfect, not in file:// or localhost. --- Gruntfile.js | 3 +- builder/patternlab.js | 52 +- public/data/annotations.js | 109 +++ public/styleguide/css/prism.css | 112 +++ public/styleguide/css/static.css | 401 ---------- public/styleguide/css/static.scss | 4 +- public/styleguide/css/styleguide.css | 725 ++++++++---------- public/styleguide/css/styleguide.scss | 629 ++++++++------- public/styleguide/js/annotations-pattern.js | 212 +++++ public/styleguide/js/annotations-viewer.js | 138 ++++ public/styleguide/js/code-pattern.js | 79 ++ public/styleguide/js/code-viewer.js | 161 ++++ public/styleguide/js/legacy/data-saver.js | 169 ++++ public/styleguide/js/legacy/jquery.js | 4 + public/styleguide/js/legacy/styleguide.js | 531 +++++++++++++ public/styleguide/js/legacy/url-handler.js | 182 +++++ public/styleguide/js/postmessage.js | 78 ++ public/styleguide/js/prism.js | 7 + public/styleguide/js/styleguide.js | 146 +--- public/styleguide/js/url-handler.js | 42 +- source/Thumbs.db | Bin 0 -> 6144 bytes source/_data/annotations.js | 109 +++ source/_patternlab-files/index.mustache | 80 +- .../partials/ishControls.mustache | 14 +- .../pattern-header-footer/footer.html | 57 +- .../pattern-header-footer/header.html | 23 +- source/_patternlab-files/styleguide.mustache | 129 ++-- source/_patternlab-files/viewall.mustache | 126 ++- source/favicon.ico | Bin 0 -> 32988 bytes 29 files changed, 2871 insertions(+), 1451 deletions(-) create mode 100644 public/data/annotations.js create mode 100644 public/styleguide/css/prism.css create mode 100644 public/styleguide/js/annotations-pattern.js create mode 100644 public/styleguide/js/annotations-viewer.js create mode 100644 public/styleguide/js/code-pattern.js create mode 100644 public/styleguide/js/code-viewer.js create mode 100644 public/styleguide/js/legacy/data-saver.js create mode 100644 public/styleguide/js/legacy/jquery.js create mode 100644 public/styleguide/js/legacy/styleguide.js create mode 100644 public/styleguide/js/legacy/url-handler.js create mode 100644 public/styleguide/js/postmessage.js create mode 100644 public/styleguide/js/prism.js create mode 100644 source/Thumbs.db create mode 100644 source/_data/annotations.js create mode 100644 source/favicon.ico diff --git a/Gruntfile.js b/Gruntfile.js index da3a171ef..b4a6a0215 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -11,7 +11,8 @@ module.exports = function(grunt) { { expand: true, cwd: './source/css/', src: 'style.css', dest: './public/css/' }, { expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' }, { expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'}, - { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'} + { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'}, + { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' } ] } }, diff --git a/builder/patternlab.js b/builder/patternlab.js index 2d28a17e5..9192ad72a 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -6,7 +6,7 @@ var oPattern = function(name, subdir, filename, data){ this.filename = filename; this.data = data; this.template = ''; - this.patternOutput = ''; + this.patternPartial = ''; this.patternName = ''; //this is the display name for the ui this.patternLink = ''; this.patternGroup = name.substring(name.indexOf('-') + 1, name.indexOf('-', 4) + 1 - name.indexOf('-') + 1); @@ -91,11 +91,17 @@ module.exports = function(grunt) { currentPattern.template = grunt.file.read(abspath); //render the pattern. pass partials object just in case. - currentPattern.patternOutput = mustache.render(currentPattern.template, patternlab.data, patternlab.partials); + currentPattern.patternPartial = mustache.render(currentPattern.template, patternlab.data, patternlab.partials); //write the compiled template to the public patterns directory flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html'; - grunt.file.write('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternOutput + patternlab.footer); + + //add footer info before writing + console.log(currentPattern); + var currentPatternFooter = mustache.render(patternlab.footer, currentPattern); + console.log(currentPatternFooter); + + grunt.file.write('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + currentPatternFooter); currentPattern.patternLink = flatPatternPath; //add as a partial in case this is referenced later. convert to syntax needed by existing patterns @@ -126,12 +132,17 @@ module.exports = function(grunt) { currentPattern.template = grunt.file.read(abspath); //render the pattern. pass partials object just in case. - currentPattern.patternOutput = mustache.render(currentPattern.template, currentPattern.data, patternlab.partials); + currentPattern.patternPartial = mustache.render(currentPattern.template, currentPattern.data, patternlab.partials); grunt.log.writeln('template compiled with data!'); //write the compiled template to the public patterns directory flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html'; - grunt.file.write('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternOutput + patternlab.footer); + + //add footer info before writing + var currentPatternFooter = mustache.render(patternlab.footer, currentPattern); + + grunt.file.write('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + currentPatternFooter); + currentPattern.patternLink = flatPatternPath; //done @@ -187,13 +198,19 @@ module.exports = function(grunt) { navSubItem.patternPartial = bucketName + "-" + navSubItemName; //if it is flat - we should not add the pattern to patternPaths - if(flatPatternItem){ - //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); + //EXPERIMENT: ADD THESE ANYWAYS. COMMENTING OUT THE IF STATEMENT + // if(flatPatternItem){ + // //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); - //add the navItem to patternItems - bucket.patternItems.push(navSubItem); + // //add the navItem to patternItems + // bucket.patternItems.push(navSubItem); - } else{ + + // //EXPERIMENT: ADD THESE ANYWAYS + + + + // } else{ //add the more complex nav items bucket.navItems.push(navItem); bucket.navItemsIndex.push(navItemName); @@ -202,7 +219,7 @@ module.exports = function(grunt) { //add to patternPaths patternlab.patternPaths[bucketName][navSubItemName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - } + // EXPERIMENT} //add the bucket. patternlab.buckets.push(bucket); @@ -233,12 +250,13 @@ module.exports = function(grunt) { } //if it is flat - we should not add the pattern to patternPaths - if(flatPatternItem){ - //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); + //EXPERIMENT: ADD THESE ANYWAYS. COMMENTING OUT THE IF STATEMENT + // if(flatPatternItem){ + // //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); - //add the navItem to patternItems - bucket.patternItems.push(navSubItem); - } else{ + // //add the navItem to patternItems + // bucket.patternItems.push(navSubItem); + // } else{ //check to see if navItem exists var navItemIndex = bucket.navItemsIndex.indexOf(navItemName); if(navItemIndex === -1){ @@ -261,7 +279,7 @@ module.exports = function(grunt) { //add to patternPaths patternlab.patternPaths[bucketName][navSubItemName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - } + //EXPERIMENT } //check to see if this bucket has a View All yet. If not, add it. diff --git a/public/data/annotations.js b/public/data/annotations.js new file mode 100644 index 000000000..fc8209531 --- /dev/null +++ b/public/data/annotations.js @@ -0,0 +1,109 @@ +var comments = { +"comments" : [ + { + "el": "header[role=banner]", + "title" : "Masthead", + "comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests." + }, + { + "el": ".logo", + "title" : "Logo", + "comment": "The logo image is an SVG file, which ensures that the logo displays crisply even on high resolution displays. A PNG fallback is provided for browsers that don't support SVG images.

Further reading: Optimizing Web Experiences for High Resolution Screens

" + }, + { + "el": "#nav", + "title" : "Navigation", + "comment": "

Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. Bagcheck and Contents Magazine add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, ESPN's mobile navigation overlays the main content of the page.

The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.

See also: Responsive Navigation Patterns

" + }, + { + "el": "input[type=search]", + "title" : "Search", + "comment": "

Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the Burton and Yelp mobile sites for great examples of experiences that prioritize search.

We're also using the HTML5 search input type, which is great for mobile devices that can bring up the appropriate virtual keyboard for many smartphones. And like the main header navigation, we're hiding the search form on small screens to save space. Clicking the search anchor toggles the form.

" + }, + { + "el": "#product-img nav", + "title" : "Image Navigation", + "comment": "

Instead of providing bullets, pagination or text-based image navigation, it's good e-commerce practice to show a preview of the various product views. By default the images simply link through to their larger counterparts, and if adequate javascript support exists, the images get loaded into the main image container.

" + }, + { + "el": "#img-container", + "title" : "Product Image", + "comment": "

The product image is the focal point of the page for good reason. It's typically what the user is there to see. The default markup simply includes the main product image, but that gets replaced with an image gallery if adequate javascript support exists.

We're also using Modernizr to detect if the browser supports touch events and if it does, we load in an excellent lightweight script called Swipe.js to create a touch-friendly image carousel. This allows users to swipe between product photos in a touch-friendly way. Because gestures are invisible, they might get overlooked, but clicking on the image navigation thumbnails animates the slideshow and hints to the user gestural interaction is available.

" + }, + { + "el": ".product-main header", + "title" : "Product Overview", + "comment": "The product overview appears in the markup before the image container in order to provide the user with the product name, how much it costs and how popular it is. Providing this information as soon as possible can help the user determine whether or not this is the product they're looking for without having to wait for the rest of the page to load." + }, + { + "el": ".star", + "title" : "Rating Stars", + "comment": "

We're using HTML special characters to display the product rating stars. We're using HTML characters instead of images to reduce the amount of images we're requesting and also maintaining crispness on high resolution screens. Not every device supports HTML special characters (Blackberry <=5.0 for example), but support is strong enough and the benefits are many.

See also: Optimizing Web Experiences for High Resolution Screens

" + }, + { + "el": ".review-count", + "title" : "Review Count", + "comment": "This is a simple anchor link that points to the review section of the page. This may seem like a small detail, but consider a mobile use case. Users can be in stores looking at the physical product, and 79% of smartphone consumers use their phones to help with shopping. They might be interested in buying in-store but turn to their phones to verify its popularity and quality. Making it easy for uses to read product reviews on small screens can help drive more sales, both online and offline.

While not incorporated yet, it would be easy to load the reviews for small screens on demand, thereby saving a step.

" + }, + { + "el": ".qty-field", + "title" : "Quantity Field", + "comment": "We're using the HTML5 number input type, which brings up the appropriate virtual keyboard for many mobile browsers. To increase usability, the input labels are using the \"for\" attribute, which focuses the cursor in the form field when clicked. However, iOS doesn't honor \"for\" default functionality, so we're adding \"cursor: pointer\" to the labels to get Mobile Safari to behave properly." + }, + { + "el": ".size-field", + "title" : "Size Dropdown", + "comment": "We're using a basic select menu to choose the size, which is commonplace for any e-commerce site. Select menus can be especially difficult to style and can vary greatly in behavior between platforms. Keep this in mind when creating " + }, + { + "el": ".submit-form", + "title" : "Add to Cart button", + "comment": "The add to cart button is the primary user action on the page. That's why it's large and in charge and very prominently placed on the page. The button is using box-shadows and rounded corners to create an attractive button that will hopefully get plenty of clicks." + }, + { + "el": ".share-btn", + "title" : "Share button", + "comment": "It seems like everything has a share button on it these days. And for good reason. Sharing content and products on social networks can be a great way to increase exposure. However, tacking on tons of social widgets adds a lot of overhead, which can be extremely detrimental to the site's performance. Including a simple share link that loads the heavy widgets only when requested is one way to keep pages fast and social. Check out Target's mobile site for an example of a site that isolates share functionality in a separate page fragment." + }, + { + "el": ".find-nearby", + "title" : "Geolocation", + "comment": "One of the most important aspects of the mobile context is location. We carry our mobile devices with us everywhere. Using geolocation we can tap into the user's location to deliver an enhanced experience. In this case we're giving them a chance to check out what stores nearby might sell this product. The geolocation API is well supported in mobile browsers as well as desktop browsers. We're using Modernizr to detect for geolocation support and if its support, we ask the user for their latitude and longitude. If the browser does not support geolocation, the default experience could take the user to a simple web form asking for a ZIP code. Check out Tiffany's mobile site store locator for an example of geolocation in action." + }, + { + "el": "#p-desc", + "title" : "Product Description", + "comment": "A product description is an essential part of any e-commerce experience. Descriptions offer tangible details that inform and persuade, and the tone can help support the physical product. Provide relevant information clearly and concisely. Check out the Android design guide for some tips on how to keep copy short and extremely effective." + }, + { + "el": "#related-products", + "title" : "Related Products", + "comment": "

Related products are obviously an important aspect of e-commerce sites as they drive awareness of other similar products and can lead to more purchases. However, including a lot of auxiliary content can bog down the site performance, which is especially crucial on mobile. On slow connections, the presence of this extra content might slow down the user experience enough that the user gives up.

We're handling the issue by conditionally loading the auxiliary content.

By default, the related item link simply clicks through to an HTML fragment containing the related products. The content is still accessible, even on devices with poor or no javascript support. When the user clicks on the related products on small screens, the content gets dynamically loaded inline and the link becomes a toggler for the content. Once the experience reaches a certain width breakpoint, we then load in the content. However, screen size != fast connection, so we should keep our eyes on the emerging navigator.connection to better gauge real connection speed.

See also: An Ajax-Include Pattern for Modular Content

All these wonderful t-shirts are retired/rejected Busted Tees, graciously donated to this demo by Will Schneider.

" + }, + { + "el": "#reviews", + "title" : "Reviews", + "comment": "Reviews are incredibly influential on a user's decision to purchase a product or pass on it. Also, because we carry our mobile phones with us everywhere, we use them to inform our in-store purchased. 70% of smartphone owners use them while in brick and mortar stores, and often times they're looking for reviews to give them the green light to buy.

Only the primary product content gets loaded by default, and the reviews exist as their own separate HTML fragment. The reviews remain accessible and don't get loaded until we conditionally load them when the screen is large enough or small screen users click the reviews link. This keeps things nimble while still providing access to the valuable reviews.

See also: An Ajax-Include Pattern for Modular Content

" + }, + { + "el": "#p-reviews .btn", + "title" : "More Reviews Button", + "comment": "

All reviews aren't loaded by default in order to keep the site performance in top shape. Ultimately, this button could be replaced with a lazy-loading solution to remove the need for the button.

" + }, + { + "el": ".footer .nav", + "title" : "Footer Nav", + "comment": "

Repetition of elements isn't a bad thing, especially with potentially long scrolling pages on mobile. Providing access to the main site navigation is a good way for the user to jump off to another section and avoids leaving them with a dead end. Also, some mobile sites like Bagcheck and Contents Magazine keep the primary navigation at the footer and simply link to it with an anchor in the header. That way the nav stays accessible but the focus stays on on the core page content.

" + }, + { + "el": ".tel", + "title" : "Customer Service Number", + "comment": "

We sometimes forget that mobile phones can make phone calls. Whether a user is having trouble with the site or simply has some questions about the product he's about to buy, it's a smart decision to provide a clickable phone number to facilitate that call. What happens when desktops and other non-phone devices click on the tel link? Well, some devices (like iPads and other tablets) ask the user if they'd like to add the number to their contact list, other desktops open 3rd party VoIP programs like Skype, and others simply give an error message.

" + }, + { + "el": ".top", + "title" : "Back to Top Link", + "comment": "

Back to top links are simple yet underrated. They provide users with an easy way back up to the top of the page with minimum effort. This is especially helpful on mobile devices, which tend to have long scrolling pages.

We're using an HTML character for the back to top arrow in order to reduce image elements and keep things looking crisp on high res displays.

" + } +] +}; \ No newline at end of file diff --git a/public/styleguide/css/prism.css b/public/styleguide/css/prism.css new file mode 100644 index 000000000..0b78bd0c4 --- /dev/null +++ b/public/styleguide/css/prism.css @@ -0,0 +1,112 @@ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + text-shadow: 0 1px rgba(0,0,0,0.3); + font-family: Consolas, Monaco, 'Andale Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #272822; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol { + color: #f92672; +} + +.token.boolean, +.token.number{ + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.builtin { + color: #a6e22e; +} + + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value +{ + color: #e6db74; +} + + +.token.keyword{ +color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important { + font-weight: bold; +} + +.token.entity { + cursor: help; +} diff --git a/public/styleguide/css/static.css b/public/styleguide/css/static.css index 4eaaca793..e69de29bb 100644 --- a/public/styleguide/css/static.css +++ b/public/styleguide/css/static.css @@ -1,401 +0,0 @@ -@charset "UTF-8"; -/* -colors -red: $orange; rgb(229,24,55) -gray: #808080; -*/ -/************Reset**************/ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html, body, div, object, iframe, fieldset { - margin: 0; - padding: 0; - border: 0; -} - -ol, ul { - list-style: none; - margin: 0; - padding: 0; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -header, footer, nav, section, article, hgroup, figure { - display: block; -} - -legend { - display: none; -} - -/************End Reset**************/ -/************Global**************/ -body { - background: #fff; - color: #000; - font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; - padding: 0; - -webkit-text-size-adjust: 100%; - border-top: 20px solid black; - border-bottom: 20px solid black; -} - -a { - color: #808080; - text-decoration: none; -} - -a:hover, a:focus { - color: #bededf; -} - -p { - margin: 0 0 1em; -} - -img, object, video { - max-width: 100%; - border: 0; -} - -a img { - border: 0; - outline: 0; -} - -h1 { - font-size: 3em; - line-height: 1; - letter-spacing: -0.02em; - margin-bottom: 0.2em; -} - -h2 { - font-size: 2em; - line-height: 1.1; - margin-bottom: 0.2em; -} - -h3 { - font-weight: normal; - line-height: 1.1; - padding-bottom: 0.4em; - border-bottom: 1px solid #cccccc; -} - -h1 a, h2 a, h3 a { - display: block; - color: #000; -} - -h1 a:hover, h2 a:hover, h3 a:hover { - color: #bededf; -} - -blockquote { - border-left: 0.5em solid #dddddd; - padding-left: 1em; - margin-left: 1em; -} - -small { - color: #bededf; -} - -input[type=search] { - -webkit-appearance: none; - border-radius: 0; -} - -::-webkit-input-placeholder { - color: #808080; -} - -:-moz-placeholder { - color: #808080; -} - -/************End Global**************/ -/************Classes**************/ -.inactive { - color: #ddd; -} - -/************End Classes**************/ -/************Structure**************/ -.container { - max-width: 60em; - margin: 0 auto; - padding: 0 1em; - overflow: hidden; -} - -[role=main] { - padding-bottom: 1em; -} - -/*Footer*/ -[role=contentinfo] { - color: #fff; - background: #000; - margin: 0 -1em; - position: relative; - z-index: 2; - /*End Footer*/ - /*Grid*/ - /*Fluid*/ - /*Homepage*/ - /*Patterns*/ - /*Blog*/ - /*Blog Header*/ - /*Posts*/ - /* Sidebar */ -} -[role=contentinfo] > div { - max-width: 60em; - padding: 0 1em; - margin: 0 auto; - overflow: hidden; -} -[role=contentinfo] .grid { - margin: 0 -1em; - overflow: hidden; -} -[role=contentinfo] .grid:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -[role=contentinfo] .grid > h2 { - margin-left: 0.45em; -} -[role=contentinfo] .grid > section { - padding: 1em 1em 0.5em; -} -[role=contentinfo] .grid > section:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -[role=contentinfo] .grid ul { - overflow: hidden; -} -[role=contentinfo] .grid ul li { - margin-bottom: 0.3em; -} -[role=contentinfo] .featured:after { - content: "*"; - color: #bededf; -} -[role=contentinfo] .fluid { - display: block; - margin: 0 auto; - max-width: 40em; -} -[role=contentinfo] .home h1 { - margin-bottom: 0.2em; -} -[role=contentinfo] .intro { - font-size: 1.8em; - line-height: 1.2; - margin: 0 auto; -} -[role=contentinfo] .intro a:hover, [role=contentinfo] .intro a:focus { - color: #000; - border-bottom-color: #000; -} -[role=contentinfo] .ani { - position: relative; - height: 15em; - margin: 1em 0 0; - width: 100%; - z-index: 0; -} -[role=contentinfo] .ani div { - width: 100%; -} -[role=contentinfo] .ani div b { - display: block; - position: absolute; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; - background: rgba(229, 24, 55, 0.22); -} -[role=contentinfo] .mod { - padding: 1em; -} -[role=contentinfo] .pattern { - background: #f7f7f7; - border-bottom: 1px solid gray; - margin-bottom: 1em; - overflow: hidden; -} -[role=contentinfo] .pattern-description h1 { - font-size: 3.4em; - margin-bottom: 0.5em; -} -[role=contentinfo] .pattern-description { - max-width: 40em; - margin: 0 auto; -} -[role=contentinfo] .pattern-description ul, [role=contentinfo] .pattern-description ol { - margin-bottom: 2em; -} -[role=contentinfo] .pattern-description li { - margin-bottom: 1em; -} -[role=contentinfo] .blog .container { - max-width: 62em; -} -[role=contentinfo] .blog header[role=banner] { - overflow: hidden; - margin-bottom: 2em; - padding: 2em 0 1em; - border-bottom: 1px solid black; -} -[role=contentinfo] .blog-logo { - font-weight: normal; - font-size: 1.2em; - margin: 0 0 1em; -} -[role=contentinfo] .blog-logo img { - width: 3.3em; -} -[role=contentinfo] .blog-logo a { - color: #000; -} -[role=contentinfo] .search-form { - width: 100%; - margin-bottom: 1em; -} -[role=contentinfo] .search-field { - width: 100%; - padding: 0.5em 0; - border: 0; - border-bottom: 1px solid gray; - outline: none; -} -[role=contentinfo] .search-field:focus { - background: #bededf; - color: #fff; -} -[role=contentinfo] .search-field:focus::-webkit-input-placeholder { - color: #fff; -} -[role=contentinfo] .search-field:focus :-moz-placeholder { - color: #fff; -} -[role=contentinfo] .blog .nav { - clear: both; -} -[role=contentinfo] .blog .nav a { - display: block; - font-weight: bold; - color: #000; -} -[role=contentinfo] .blog .nav a:hover { - color: #bededf; -} -[role=contentinfo] .posts ol > li { - padding-bottom: 1em; - border-bottom: 1px solid #cccccc; - margin-bottom: 1em; - overflow: hidden; -} -[role=contentinfo] .posts h2 { - font-size: 1.4em; - margin: 0.28em 0 0.1em; - font-weight: normal; -} -[role=contentinfo] .posts h2 a { - color: #000; -} -[role=contentinfo] .posts h2 a:hover, [role=contentinfo] .posts h2 a:focus { - color: #bededf; -} -[role=contentinfo] .permalink { - display: block; - font-size: 0.8em; - margin-bottom: 1.2em; -} -[role=contentinfo] .post-body a { - border-bottom: 1px solid #cccccc; -} -[role=contentinfo] .posts blockquote { - margin: 0 0 1em; - color: #666; - border-left: 0.25em solid #cccccc; - padding-left: 1em; -} -[role=contentinfo] .tags { - float: left; -} -[role=contentinfo] .tags li { - display: inline-block; - font-size: 0.8em; - margin-right: 0.5em; -} -[role=contentinfo] .posts ol > li .tags a, [role=contentinfo] .permalink { - color: #ccc; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -[role=contentinfo] .posts ol > li:hover .tags a, [role=contentinfo] .posts ol > li:hover .permalink { - color: #808080; -} -[role=contentinfo] .blog-nav { - text-align: center; - overflow: hidden; - padding: 1em 0; -} -[role=contentinfo] .posts .blog-nav a { - border: 0; -} -[role=contentinfo] .nav-next { - float: right; -} -[role=contentinfo] .nav-prev { - float: left; -} -[role=contentinfo] .sidebar { - font-size: 0.8em; - padding-bottom: 1.4em; -} -[role=contentinfo] .sidebar div { - margin-bottom: 2em; -} -[role=contentinfo] .sidebar h3 { - font-weight: bold; - font-size: 0.9em; - line-height: 1; - border-bottom: 1px solid black; -} -[role=contentinfo] .sidebar a { - color: #808080; -} -[role=contentinfo] .sidebar a:hover, [role=contentinfo] .sidebar a:focus { - color: #bededf; -} -[role=contentinfo] .top { - clear: both; - display: block; - padding: 1em 0; -} -[role=contentinfo] .top:before { - content: '▲'; -} diff --git a/public/styleguide/css/static.scss b/public/styleguide/css/static.scss index 4a34269cb..a22d5d744 100644 --- a/public/styleguide/css/static.scss +++ b/public/styleguide/css/static.scss @@ -1,4 +1,3 @@ -@charset "UTF-8"; /* colors red: $orange; rgb(229,24,55) @@ -140,6 +139,7 @@ input[type=search] { padding: 0 1em; margin: 0 auto; overflow: hidden; + } } /*End Footer*/ @@ -401,4 +401,4 @@ input[type=search] { .top:before { content: '▲'; } -} \ No newline at end of file + diff --git a/public/styleguide/css/styleguide.css b/public/styleguide/css/styleguide.css index e320709a4..40ec4a27f 100644 --- a/public/styleguide/css/styleguide.css +++ b/public/styleguide/css/styleguide.css @@ -1,6 +1,6 @@ /*------------------------------------*\ - $STYLE GUIDE CONTAINER STYLES - \*------------------------------------*/ + $STYLE GUIDE CONTAINER STYLES +\*------------------------------------*/ /** * NOTE: These styles are specific to the style guide container and should not be modified. * Use style.scss for all content styles that don't pertain to the style guide container. @@ -8,8 +8,8 @@ * Second note: Any important declarations are to prevent brand styles from overriding style guide */ /*------------------------------------*\ - $CONTENTS - \*------------------------------------*/ + $CONTENTS +\*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Font @@ -35,8 +35,8 @@ * -----Code View */ /*------------------------------------*\ - $STYLE GUIDE VARIABLES - \*------------------------------------*/ + $STYLE GUIDE VARIABLES +\*------------------------------------*/ /*Fonts*/ /* Style Guide Interface Colors */ /* Typography */ @@ -44,26 +44,20 @@ /* Dimensions */ /* Breakpoints */ /*------------------------------------*\ - $STYLE GUIDE MIXINS - \*------------------------------------*/ + $STYLE GUIDE MIXINS +\*------------------------------------*/ /*------------------------------------*\ - $STYLE GUIDE INTERFACE - \*------------------------------------*/ -html, body { + $STYLE GUIDE INTERFACE +\*------------------------------------*/ +#patternlab-html, #patternlab-body { margin: 0; padding: 0; background: #dddddd; - -webkit-text-size-adjust: 100%; -} - -html#pattern-frame { - background: #fff; -} + -webkit-text-size-adjust: 100%; } .sg-nav-wrapper { overflow: hidden; - background: #dddddd; -} + background: #dddddd; } .is-vishidden { position: absolute !important; @@ -72,11 +66,10 @@ html#pattern-frame { height: 1px; padding: 0; border: 0; - clip: rect(1px, 1px, 1px, 1px); -} + clip: rect(1px, 1px, 1px, 1px); } /*------------------------------------*\ -$STYLE GUIDE HEADER + $STYLE GUIDE HEADER \*------------------------------------*/ /* Header */ .sg-header { @@ -91,60 +84,50 @@ $STYLE GUIDE HEADER width: 100%; -webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); -} -.sg-header * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.sg-header ul, .sg-header ol { - padding: 0; - margin: 0; -} -.sg-header li { - list-style: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} -.sg-header a { - font-size: 70%; - color: gray; - text-decoration: none; - display: block; - line-height: 1; - padding: 1em; - -webkit-transition: background 0.15s ease-out; - -moz-transition: background 0.15s ease-out; - -ms-transition: background 0.15s ease-out; - -o-transition: background 0.15s ease-out; - transition: background 0.15s ease-out; - -webkit-transition: color 0.15s ease-out; - -moz-transition: color 0.15s ease-out; - -ms-transition: color 0.15s ease-out; - -o-transition: color 0.15s ease-out; - transition: color 0.15s ease-out; -} -.sg-header a:hover, .sg-header a:focus, .sg-header a.active { - color: white; - background: rgba(255, 255, 255, 0.05); -} -.sg-header ol li ol li ol li a { - padding-left: 2em; - text-transform: capitalize; -} + box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); } + .sg-header * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .sg-header ul, .sg-header ol { + padding: 0; + margin: 0; } + .sg-header li { + list-style: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } + .sg-header a { + font-size: 70%; + color: gray; + text-decoration: none; + display: block; + line-height: 1; + padding: 1em; + -webkit-transition: background 0.15s ease-out; + -moz-transition: background 0.15s ease-out; + -ms-transition: background 0.15s ease-out; + -o-transition: background 0.15s ease-out; + transition: background 0.15s ease-out; + -webkit-transition: color 0.15s ease-out; + -moz-transition: color 0.15s ease-out; + -ms-transition: color 0.15s ease-out; + -o-transition: color 0.15s ease-out; + transition: color 0.15s ease-out; } + .sg-header a:hover, .sg-header a:focus, .sg-header a.active { + color: white; + background: rgba(255, 255, 255, 0.05); } + .sg-header ol li ol li ol li a { + padding-left: 2em; + text-transform: none; } /* Navigation */ .sg-header .sg-nav-toggle { padding: 1em; border-bottom: 1px solid rgba(0, 0, 0, 0); position: relative; - z-index: 2; -} -@media all and (min-width: 44em) { - .sg-header .sg-nav-toggle { - display: none; - } -} + z-index: 2; } + @media all and (min-width: 44em) { + .sg-header .sg-nav-toggle { + display: none; } } @media all and (max-width: 44em) { .sg-nav-container { @@ -154,68 +137,46 @@ $STYLE GUIDE HEADER -moz-transition: max-height 0.5s ease-out; -ms-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out; - transition: max-height 0.5s ease-out; - } - .sg-nav-container.active { - max-height: 50em; - } -} + transition: max-height 0.5s ease-out; } + .sg-nav-container.active { + max-height: 50em; } } .sg-nav { z-index: 1; margin: 0; padding: 0; - list-style: none; -} -@media all and (min-width: 44em) { - .sg-nav > li { - border-bottom: 0; - border-right: 1px solid rgba(255, 255, 255, 0.05); - float: left; - position: relative; - } - .sg-nav > li > ol { - position: absolute; - top: 2em; - left: 0; - } -} - -.sg-nav-Pages ol { - width: 24em; -} -.sg-nav-Pages li { - float: left; - width: 50%; -} + list-style: none; } + @media all and (min-width: 44em) { + .sg-nav > li { + border-bottom: 0; + border-right: 1px solid rgba(255, 255, 255, 0.05); + float: left; + position: relative; } + .sg-nav > li > ol { + position: absolute; + top: 2em; + left: 0; } } /* Accordion */ .sg-acc-handle:after { content: ' +'; float: right; - font-size: 70%; -} -@media all and (min-width: 44em) { - .sg-acc-handle:after { - float: none; - } -} + font-size: 70%; } + @media all and (min-width: 44em) { + .sg-acc-handle:after { + float: none; } } .sg-acc-handle.active { color: white; - background: rgba(255, 255, 255, 0.05); -} -.sg-acc-handle.active:after { - content: ' -'; -} + background: rgba(255, 255, 255, 0.05); } + .sg-acc-handle.active:after { + content: ' -'; } .sg-acc-handle.sg-icon:after { - content: ""; -} + content: ""; } .sg-header .sg-icon { width: auto; font-size: 1rem; - padding: 0.5rem 1rem; -} + padding: 0.5rem 1rem; } .sg-acc-panel { overflow: hidden; @@ -226,16 +187,13 @@ $STYLE GUIDE HEADER -moz-transition: max-height 0.5s ease-out; -ms-transition: max-height 0.5s ease-out; -o-transition: max-height 0.5s ease-out; - transition: max-height 0.5s ease-out; -} -.sg-acc-panel.active { - max-height: 50em; -} -.sg-acc-panel.sg-right { - position: absolute; - left: auto; - right: 0; -} + transition: max-height 0.5s ease-out; } + .sg-acc-panel.active { + max-height: 50em; } + .sg-acc-panel.sg-right { + position: absolute; + left: auto; + right: 0; } /* Controls (sizing, view mode) */ .sg-controls { @@ -243,187 +201,147 @@ $STYLE GUIDE HEADER position: absolute; top: 0; right: 0; - z-index: 2; -} -.sg-controls .sg-acc-panel.active { - max-height: 17em; -} -.sg-controls .sg-nav-phases .sg-acc-panel { - min-width: 0; -} -.sg-controls .sg-nav-phases .sg-acc-panel.active { - max-height: none; -} + z-index: 2; } + .sg-controls .sg-acc-panel.active { + max-height: 17em; } + .sg-controls .sg-nav-phases .sg-acc-panel { + min-width: 0; } + .sg-controls .sg-nav-phases .sg-acc-panel.active { + max-height: none; } .sg-control-trigger { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} -@media all and (min-width: 44em) { - .sg-control-trigger { - border: 0; - } -} -@media all and (min-width: 65em) { - .sg-control-trigger { - float: left; - width: 6em; - } -} + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } + @media all and (min-width: 44em) { + .sg-control-trigger { + border: 0; } } + @media all and (min-width: 65em) { + .sg-control-trigger { + float: left; + width: 6em; } } @media all and (min-width: 44em) { .sg-control > li { float: left; border-bottom: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); - } -} + border-left: 1px solid rgba(255, 255, 255, 0.05); } } .sg-control > li { - float: left; -} + float: left; } .sg-control .sg-input { padding: 0.1em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} -.sg-control .sg-input:active, .sg-control .sg-input:focus { - outline: 0; - background: #f7f7f7; - color: #000; -} + transition: all 0.2s ease-out; } + .sg-control .sg-input:active, .sg-control .sg-input:focus { + outline: 0; + background: #f7f7f7; + color: #000; } @media all and (max-width: 65em) { .sg-quarter { float: left; width: 25%; border-left: 1px solid rgba(255, 255, 255, 0.05); - text-align: center; - } - .sg-quarter:first-child { - border-left: 0; - } -} + text-align: center; } + .sg-quarter:first-child { + border-left: 0; } } @media all and (max-width: 65em) { .sg-half { float: left; width: 50%; border-left: 1px solid rgba(255, 255, 255, 0.05); - text-align: center; - } - .sg-half:nth-child(odd) { - border-left: 0; - } -} + text-align: center; } + .sg-half:nth-child(odd) { + border-left: 0; } } .sg-current-size { font-size: 70%; color: gray; - padding: 0.8em 0.95em; -} -.sg-current-size:hover .sg-input { - background: #f7f7f7; - color: #000; -} -@media all and (min-width: 65em) { - .sg-current-size { - float: left; - } -} + padding: 0.8em 0.95em; } + .sg-current-size:hover .sg-input { + background: #f7f7f7; + color: #000; } + @media all and (min-width: 65em) { + .sg-current-size { + float: left; } } .sg-size-options { - max-width: 10em; -} -@media all and (min-width: 65em) { - .sg-size-options { - position: static; - max-height: none; - max-width: none; - } - .sg-size-options li { - float: left; - border: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); - } -} + max-width: 10em; } + @media all and (min-width: 65em) { + .sg-size-options { + position: static; + max-height: none; + max-width: none; } + .sg-size-options > li { + float: left; + border: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); } } #sg-form { margin: 0; border: 0; - padding: 0; -} + padding: 0; } .sg-input { margin: -2px 0 0 0; padding: 0; - border: 1px solid #222222; + border: 1px solid #222; background-color: #222; color: gray; width: 35px; - text-align: right; -} + text-align: right; } .sg-input-active { background-color: #fff; - color: #000; -} + color: #000; } .sg-view { - position: relative; -} -.sg-view > ul { - position: absolute; - top: 2em; - left: 0; -} + position: relative; } + .sg-view > ul { + position: absolute; + top: 2em; + left: 0; } .sg-checkbox:before { display: inline-block; - margin-right: 0.4em; -} + margin-right: 0.4em; } /*------------------------------------*\ - $STYLE GUIDE VIEWPORT - \*------------------------------------*/ + $STYLE GUIDE VIEWPORT +\*------------------------------------*/ /* Viewport */ #sg-vp-wrap { text-align: center; - width: 100%; -} -@media all and (min-width: 44em) { - #sg-vp-wrap { - position: fixed; - top: 2em; - bottom: 0; - left: 0; - right: 0; - z-index: 0; - } -} -#sg-vp-wrap.wrap-animate { - -webkit-transition: left 0.3s ease-out; - -moz-transition: left 0.3s ease-out; - -ms-transition: left 0.3s ease-out; - -o-transition: left 0.3s ease-out; - transition: left 0.3s ease-out; -} + width: 100%; } + @media all and (min-width: 44em) { + #sg-vp-wrap { + position: fixed; + top: 2em; + bottom: 0; + left: 0; + right: 0; + z-index: 0; } } + #sg-vp-wrap.wrap-animate { + -webkit-transition: left 0.3s ease-out; + -moz-transition: left 0.3s ease-out; + -ms-transition: left 0.3s ease-out; + -o-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; } #sg-viewport { border: 0; x-margin: 0 auto; height: 100%; - width: 100%; -} -#sg-viewport.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; -} + width: 100%; } + #sg-viewport.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; } #sg-cover { width: 100%; @@ -431,29 +349,25 @@ $STYLE GUIDE HEADER display: none; position: absolute; z-index: 20; - cursor: col-resize; -} + cursor: col-resize; } #sg-gen-container { height: 100%; text-align: center; - margin: 0 auto; -} -#sg-gen-container.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; -} + margin: 0 auto; } + #sg-gen-container.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; } #sg-rightpull-container { width: 10px; float: right; margin: 0; height: 100%; - cursor: col-resize; -} + cursor: col-resize; } #sg-rightpull { margin: 0; @@ -464,194 +378,208 @@ $STYLE GUIDE HEADER -moz-transition: background 0.2s ease-out; -ms-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; -} -#sg-rightpull:hover { - background: #666; -} -#sg-rightpull:active { - cursor: col-resize; - background: #444; -} + transition: background 0.2s ease-out; } + #sg-rightpull:hover { + background: #666; } + #sg-rightpull:active { + cursor: col-resize; + background: #444; } .vp-animate { -webkit-transition: width 0.8s ease-out; -moz-transition: width 0.8s ease-out; -ms-transition: width 0.8s ease-out; -o-transition: width 0.8s ease-out; - transition: width 0.8s ease-out; -} + transition: width 0.8s ease-out; } /*------------------------------------*\ - $STYLE GUIDE CONTENT - \*------------------------------------*/ + $STYLE GUIDE CONTENT +\*------------------------------------*/ +/* Section Pattern */ +.sg-pattern { + margin-bottom: 2em; + overflow: hidden; } + /* Section Head */ -.sg-head { +.sg-pattern-head { margin: 2em 0; font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; font-size: 70%; font-weight: normal; padding: 1em 0; -} -.sg-head a { - display: block; - border-bottom: 1px solid #222222; - color: #222; - text-decoration: none; -} -.sg-head a:hover { - color: gray; - border-bottom-color: gray; -} - -/* Section Pattern */ -.sg-pattern { - margin-bottom: 2em; - padding: 0 1em; - overflow: hidden; -} - -/* Section Sub-head */ -.sg-sub a:link { - color: gray; - border-bottom-color: gray; -} -.sg-sub a:link:hover { - color: #222222; - border-bottom-color: #222222; -} + border-bottom: 1px solid gray; } + .sg-pattern-head a { + display: block; + color: gray; + text-decoration: none; + cursor: pointer; } + .sg-pattern-head a:hover { + color: #222222; } /* Clean View */ .sg-clean .sg-main { - padding: 0; -} + padding: 0; } .sg-code, .sg-annotations { clear: both; background: #dddddd; color: #222222; - padding: 1em; - margin: 1em 0; -} - -.sg-code { - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; + padding: 1em 0.5em; + margin: 1em 0; } + .sg-code a, .sg-annotations a { + text-decoration: underline; } + +.sg-code pre { + white-space: -moz-pre-line; + white-space: -pre-line; + white-space: -o-pre-line; word-wrap: break-word; - white-space: pre-wrap; -} + white-space: pre-line; + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 0.5em; } + +.sg-code-contains { + margin-bottom: 1rem; + font-size: 85%; + color: gray; } + .sg-code-contains code { + padding: 0.2em; + background: rgba(0, 0, 0, 0.3); + color: #f7f7f7; + position: relative; + top: -2px; } + +.sg-code-head { + color: gray; + font-size: 1em; } .demo { overflow: hidden; - margin-bottom: 1rem; -} + margin-bottom: 1rem; } .demo .gi, .demo .demo-block { background: #dddddd; color: gray; text-align: center; margin-bottom: 0.5em; - padding: 1em !important; -} -.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { - color: #dddddd; - background: gray; -} -.demo .gi .gi, .demo .demo-block .gi { - background: rgba(0, 0, 0, 0.1); - color: #dddddd; -} -.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { - background: rgba(0, 0, 0, 0.3); -} + padding: 1em !important; } + .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { + color: #dddddd; + background: gray; } + .demo .gi .gi, .demo .demo-block .gi { + background: rgba(0, 0, 0, 0.1); + color: #dddddd; } + .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { + background: rgba(0, 0, 0, 0.3); } .demo-animate { background: #dddddd; padding: 1em; margin-bottom: 1em; - text-align: center; -} + text-align: center; } .animate-move { - position: relative; -} -.animate-move .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: gray; -} -.animate-move:hover > .demo-shape { - left: 100%; - margin-left: -20px; -} + position: relative; } + .animate-move .demo-shape { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + background: gray; } + .animate-move:hover > .demo-shape { + left: 100%; + margin-left: -20px; } .sg-colors { - overflow: hidden; -} -.sg-colors li { - overflow: hidden; - border: 1px solid #dddddd; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; -} -@media all and (min-width: 30em) { + overflow: hidden; } .sg-colors li { - float: left; - width: 5em; - } -} + overflow: hidden; + border: 1px solid #dddddd; + padding: 0.3em; + margin: 0 0.2em 0.2em 0; } + @media all and (min-width: 30em) { + .sg-colors li { + float: left; + width: 5em; } } .sg-swatch { display: block; height: 1.5em; - width: 50%; -} -@media all and (max-width: 30em) { - .sg-swatch { - float: left; - margin-right: 0.3em; - } -} -@media all and (min-width: 30em) { - .sg-swatch { - width: 100%; - height: 4em; - margin-bottom: 0.2em; - } -} + width: 50%; } + @media all and (max-width: 30em) { + .sg-swatch { + float: left; + margin-right: 0.3em; } } + @media all and (min-width: 30em) { + .sg-swatch { + width: 100%; + height: 4em; + margin-bottom: 0.2em; } } .sg-label { - line-height: 1; -} + line-height: 1; } -#comment-container { +#sg-annotation-container { position: fixed; bottom: 0; left: 0; z-index: 99; width: 100%; - padding: 1em; - background: red; -} + padding: 1em; } + +/* Annotations */ +#sg-annotation-container, #sg-code-container { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; + font-size: 90%; + background: #222222; + color: gray; + position: fixed; + top: auto; + padding: 1rem 1rem 4rem; + bottom: 0; + left: 0; + width: 100%; + z-index: 2; + -webkit-transition: bottom 0.3s ease-out; + -moz-transition: bottom 0.3s ease-out; + -webkit-transition: bottom 0.3s ease-out; + -ms-transition: bottom 0.3s ease-out; + -o-transition: bottom 0.3s ease-out; + transition: bottom 0.3s ease-out; } + #sg-annotation-container a, #sg-code-container a { + color: #dddddd; } + +#sg-code-container pre { + max-height: 300px; + padding: 0 1em; } + +#sg-code-container .with-css pre { + max-height: 200px; } + +#sg-annotation-close-btn, #sg-code-close-btn { + color: #fff; + position: absolute; + top: 1em; + right: 1em; + text-transform: uppercase; + text-decoration: none; + text-align: right; } + +.has-comment, .has-comment a { + cursor: help !important; } @font-face { font-family: 'icons'; src: url("../assets/icons.eot"); src: url("../assets/icons.eot?#iefix") format("embedded-opentype"), url("../assets/icons.woff") format("woff"), url("../assets/icons.ttf") format("truetype"), url("../assets/icons.svg#icons") format("svg"); font-weight: normal; - font-style: normal; -} - -/* Use the following CSS code if you want to have a class per icon */ -/* -Instead of a list of all class selectors, -you can use the generic selector below, but it's slower: -[class*="icon-"] { - */ + font-style: normal; } + +/* Pattern Lab icon fonts */ .icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .sg-header .sg-nav-toggle, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye { font-family: 'icons'; speak: none; @@ -660,37 +588,28 @@ you can use the generic selector below, but it's slower: font-variant: normal; text-transform: none; line-height: 1; - -webkit-font-smoothing: antialiased; -} + -webkit-font-smoothing: antialiased; } .icon-reload:before { - content: "\e002"; -} + content: "\e002"; } .icon-cog:before { - content: "\e000"; -} + content: "\e000"; } .icon-minus:before { - content: "\e003"; -} + content: "\e003"; } .icon-plus:before { - content: "\e004"; -} + content: "\e004"; } .icon-menu:before, .sg-header .sg-nav-toggle:before { - content: "\e005"; -} + content: "\e005"; } .icon-checkbox-unchecked:before, .sg-checkbox:before { - content: "\e006"; -} + content: "\e006"; } .icon-checkbox-checked:before, .sg-checkbox.active:before { - content: "\e007"; -} + content: "\e007"; } .icon-eye:before { - content: "\e001"; -} + content: "\e001"; } diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss index 7530207ee..5b4cd6d07 100644 --- a/public/styleguide/css/styleguide.scss +++ b/public/styleguide/css/styleguide.scss @@ -1,7 +1,6 @@ -@charset "UTF-8"; /*------------------------------------*\ - $STYLE GUIDE CONTAINER STYLES - \*------------------------------------*/ + $STYLE GUIDE CONTAINER STYLES +\*------------------------------------*/ /** * NOTE: These styles are specific to the style guide container and should not be modified. * Use style.scss for all content styles that don't pertain to the style guide container. @@ -11,8 +10,8 @@ /*------------------------------------*\ - $CONTENTS - \*------------------------------------*/ + $CONTENTS +\*------------------------------------*/ /** * STYLE GUIDE VARIABLES------------------Declarations of Sass variables * -----Font @@ -43,59 +42,59 @@ /*------------------------------------*\ - $STYLE GUIDE VARIABLES - \*------------------------------------*/ - /*Fonts*/ - $sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif; + $STYLE GUIDE VARIABLES +\*------------------------------------*/ +/*Fonts*/ +$sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif; - /* Style Guide Interface Colors */ - $sg-primary : #222; - $sg-secondary : #808080; - $sg-tertiary : #ddd; - $sg-quaternary : #fff; - $sg-quinary : #f7f7f7; - $sg-tint : rgba(255,255,255,0.05); - $sg-tint-2 : rgba(255,255,255,0.25); - $sg-tone : rgba(0,0,0,0.1); - $sg-tone-2 : rgba(0,0,0,0.3); +/* Style Guide Interface Colors */ +$sg-primary : #222; +$sg-secondary : #808080; +$sg-tertiary : #ddd; +$sg-quaternary : #fff; +$sg-quinary : #f7f7f7; +$sg-tint : rgba(255,255,255,0.05); +$sg-tint-2 : rgba(255,255,255,0.25); +$sg-tone : rgba(0,0,0,0.1); +$sg-tone-2 : rgba(0,0,0,0.3); - /* Typography */ - $sg-font-size-norm : 100%; - $sg-font-size-sm : 70%; - $sg-font-size-large : 120%; +/* Typography */ +$sg-font-size-norm : 100%; +$sg-font-size-sm : 70%; +$sg-font-size-large : 120%; - /* Defaults */ - $sg-space : 1em; - $sg-doublespace : $sg-space*2; - $sg-pad : 1em; - $sg-halfpad : $sg-pad/2; +/* Defaults */ +$sg-space : 1em; +$sg-doublespace : $sg-space*2; +$sg-pad : 1em; +$sg-pad-half : $sg-pad/2; - /* Dimensions */ - $offset-top: 2em; +/* Dimensions */ +$offset-top: 2em; - /* Breakpoints */ - $sg-bp-small : 24em; - $sg-bp-small-2 : 30em; - $sg-bp-med : 44em; - $sg-bp-large : 65em; - $sg-bp-xl : 80em; +/* Breakpoints */ +$sg-bp-small : 24em; +$sg-bp-small-2 : 30em; +$sg-bp-med : 44em; +$sg-bp-large : 65em; +$sg-bp-xl : 80em; - $animate-quick: 0.2s; +$animate-quick: 0.2s; /*------------------------------------*\ - $STYLE GUIDE MIXINS - \*------------------------------------*/ - @mixin sg-transition($transition-property, $transition-time, $method) { - -webkit-transition: $transition-property $transition-time $method; - -moz-transition: $transition-property $transition-time $method; - -ms-transition: $transition-property $transition-time $method; - -o-transition: $transition-property $transition-time $method; - transition: $transition-property $transition-time $method; - } + $STYLE GUIDE MIXINS +\*------------------------------------*/ +@mixin sg-transition($transition-property, $transition-time, $method) { + -webkit-transition: $transition-property $transition-time $method; + -moz-transition: $transition-property $transition-time $method; + -ms-transition: $transition-property $transition-time $method; + -o-transition: $transition-property $transition-time $method; + transition: $transition-property $transition-time $method; +} @@ -103,40 +102,36 @@ /*------------------------------------*\ - $STYLE GUIDE INTERFACE - \*------------------------------------*/ - - html, body { - margin: 0; - padding: 0; - background: $sg-tertiary; - -webkit-text-size-adjust: 100%; - } + $STYLE GUIDE INTERFACE +\*------------------------------------*/ - html#pattern-frame { - background: #fff; - } +#patternlab-html, #patternlab-body { + margin: 0; + padding: 0; + background: $sg-tertiary; + -webkit-text-size-adjust: 100%; +} - .sg-nav-wrapper { - overflow: hidden; - background: $sg-tertiary; - } +.sg-nav-wrapper { + overflow: hidden; + background: $sg-tertiary; +} - .is-vishidden { - position: absolute !important; - overflow: hidden; - width: 1px; - height: 1px; - padding: 0; - border: 0; - clip: rect(1px, 1px, 1px, 1px); - } +.is-vishidden { + position: absolute !important; + overflow: hidden; + width: 1px; + height: 1px; + padding: 0; + border: 0; + clip: rect(1px, 1px, 1px, 1px); +} /*------------------------------------*\ -$STYLE GUIDE HEADER + $STYLE GUIDE HEADER \*------------------------------------*/ /* Header */ .sg-header { @@ -155,9 +150,9 @@ $STYLE GUIDE HEADER box-shadow: inset 0 1px 0 #5f6164,inset 0 -1px 0 #2e2f2f,0 1px 3px rgba(0,0,0,0.3); * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } ul, ol { @@ -185,12 +180,28 @@ $STYLE GUIDE HEADER } } - ol li ol li ol li a{ - padding-left: 2em; - text-transform: capitalize; - } + ol{ + li{ + ol{ + li{ + ol{ + li{ + //3rd level nav item + a { + padding-left: 2em; + text-transform: none; + } + } + } + } + } + } + } + } + + /* Navigation */ .sg-header .sg-nav-toggle { @extend .icon-menu; @@ -239,16 +250,6 @@ $STYLE GUIDE HEADER } } -.sg-nav-Pages { - ol { - width: 24em; - } - li { - float: left; - width: 50%; - } -} - /* Accordion */ .sg-acc-handle { &:after { @@ -311,11 +312,11 @@ $STYLE GUIDE HEADER } .sg-nav-phases .sg-acc-panel { - min-width: 0; - - &.active { - max-height: none; - } + min-width: 0; + + &.active { + max-height: none; + } } } @@ -353,10 +354,10 @@ $STYLE GUIDE HEADER .sg-input { padding: 0.1em; -webkit-transition: all $animate-quick ease-out; - -moz-transition: all $animate-quick ease-out; - -ms-transition: all $animate-quick ease-out; - -o-transition: all $animate-quick ease-out; - transition: all $animate-quick ease-out; + -moz-transition: all $animate-quick ease-out; + -ms-transition: all $animate-quick ease-out; + -o-transition: all $animate-quick ease-out; + transition: all $animate-quick ease-out; &:active, &:focus { outline: 0; @@ -393,21 +394,21 @@ $STYLE GUIDE HEADER } .sg-current-size { - font-size: 70%; - color: $sg-secondary; - padding: 0.8em 0.95em; + font-size: 70%; + color: $sg-secondary; + padding: 0.8em 0.95em; - &:hover { - .sg-input { - background: $sg-quinary; - color: #000; + &:hover { + .sg-input { + background: $sg-quinary; + color: #000; + } } - } - @media all and (min-width: $sg-bp-large) { - float: left; + @media all and (min-width: $sg-bp-large) { + float: left; + } } -} .sg-size-options { max-width: 10em; @@ -417,7 +418,7 @@ $STYLE GUIDE HEADER max-height: none; max-width: none; - li { + > li { float: left; border: 0; border-left: 1px solid $sg-tint; @@ -472,158 +473,149 @@ $STYLE GUIDE HEADER /*------------------------------------*\ - $STYLE GUIDE VIEWPORT - \*------------------------------------*/ - - /* Viewport */ - #sg-vp-wrap { - text-align: center; - width: 100%; - - @media all and (min-width: $sg-bp-med) { - position: fixed; - top: $offset-top; - bottom: 0; - left: 0; - right: 0; - z-index: 0; - } + $STYLE GUIDE VIEWPORT +\*------------------------------------*/ - &.wrap-animate { - -webkit-transition: left 0.3s ease-out; - -moz-transition: left 0.3s ease-out; - -ms-transition: left 0.3s ease-out; - -o-transition: left 0.3s ease-out; - transition: left 0.3s ease-out; - } +/* Viewport */ +#sg-vp-wrap { + text-align: center; + width: 100%; + @media all and (min-width: $sg-bp-med) { + position: fixed; + top: $offset-top; + bottom: 0; + left: 0; + right: 0; + z-index: 0; } - #sg-viewport { - border: 0; - x-margin: 0 auto; - height: 100%; - width: 100%; - - &.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; - } + &.wrap-animate { + -webkit-transition: left 0.3s ease-out; + -moz-transition: left 0.3s ease-out; + -ms-transition: left 0.3s ease-out; + -o-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; } - #sg-cover { - width: 100%; - height: 100%; - display: none; - position: absolute; - z-index: 20; - cursor: col-resize; - } +} - #sg-gen-container { - height: 100%; - text-align: center; - margin: 0 auto; +#sg-viewport { + border: 0; + x-margin: 0 auto; + height: 100%; + width: 100%; - &.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; - } + &.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; } +} - #sg-rightpull-container { - width: 10px; - float: right; - margin: 0; - height: 100%; - cursor: col-resize; +#sg-cover { + width: 100%; + height: 100%; + display: none; + position: absolute; + z-index: 20; + cursor: col-resize; +} + +#sg-gen-container { + height: 100%; + text-align: center; + margin: 0 auto; + -webkit-overflow-scrolling: touch; + overflow: scroll; + + &.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; } +} - #sg-rightpull { - margin: 0; - width: 10px; - height: 100%; - background: #999; - -webkit-transition: background $animate-quick ease-out; - -moz-transition: background $animate-quick ease-out; - -ms-transition: background $animate-quick ease-out; - -o-transition: background $animate-quick ease-out; - transition: background $animate-quick ease-out; +#sg-rightpull-container { + width: 10px; + float: right; + margin: 0; + height: 100%; + cursor: col-resize; +} - &:hover { - background: #666; - } +#sg-rightpull { + margin: 0; + width: 10px; + height: 100%; + background: #999; + -webkit-transition: background $animate-quick ease-out; + -moz-transition: background $animate-quick ease-out; + -ms-transition: background $animate-quick ease-out; + -o-transition: background $animate-quick ease-out; + transition: background $animate-quick ease-out; - &:active { - cursor: col-resize; - background: #444; - } + &:hover { + background: #666; } - .vp-animate { - -webkit-transition: width 0.8s ease-out; - -moz-transition: width 0.8s ease-out; - -ms-transition: width 0.8s ease-out; - -o-transition: width 0.8s ease-out; - transition: width 0.8s ease-out; + &:active { + cursor: col-resize; + background: #444; } +} + +.vp-animate { + -webkit-transition: width 0.8s ease-out; + -moz-transition: width 0.8s ease-out; + -ms-transition: width 0.8s ease-out; + -o-transition: width 0.8s ease-out; + transition: width 0.8s ease-out; +} /*------------------------------------*\ - $STYLE GUIDE CONTENT - \*------------------------------------*/ + $STYLE GUIDE CONTENT +\*------------------------------------*/ - /* Section Head */ - .sg-head { - margin: $sg-doublespace 0; - font-family: $sg-font; - font-size: $sg-font-size-sm; - font-weight: normal; - padding: $sg-pad 0; - - a { - display: block; - border-bottom: 1px solid $sg-primary; - color: #222; - text-decoration: none; - - &:hover { - color: $sg-secondary; - border-bottom-color: $sg-secondary; - } - } - } +/* Section Pattern */ +.sg-pattern { + margin-bottom: $sg-doublespace; + overflow: hidden; +} - /* Section Pattern */ - .sg-pattern { - margin-bottom: $sg-doublespace; - padding: 0 $sg-pad; - overflow: hidden; - } +/* Section Head */ +.sg-pattern-head { + margin: $sg-doublespace 0; + font-family: $sg-font; + font-size: $sg-font-size-sm; + font-weight: normal; + padding: $sg-pad 0; + border-bottom: 1px solid $sg-secondary; - /* Section Sub-head */ - .sg-sub a:link { + a { + display: block; color: $sg-secondary; - border-bottom-color: $sg-secondary; + text-decoration: none; + cursor: pointer; + &:hover { color: $sg-primary; - border-bottom-color: $sg-primary; } } +} - /* Clean View */ - .sg-clean .sg-main { - padding: 0; - } +/* Clean View */ +.sg-clean .sg-main { + padding: 0; +} // Code View Blocks @@ -631,16 +623,43 @@ $STYLE GUIDE HEADER clear: both; background: $sg-tertiary; color: $sg-primary; - padding: $sg-pad; + padding: $sg-pad $sg-pad-half; margin: $sg-space 0; + + a { + text-decoration: underline; + } } .sg-code { - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; - white-space: pre-wrap; + pre { + white-space: -moz-pre-line; + white-space: -pre-line; + white-space: -o-pre-line; + word-wrap: break-word; + white-space: pre-line; + border: 1px solid $sg-tone; + padding: $sg-pad-half; + } +} + +.sg-code-contains { + margin-bottom: 1rem; + font-size: 85%; + color: $sg-secondary; + + code { + padding: 0.2em; + background: $sg-tone-2; + color: $sg-quinary; + position: relative; + top: -2px; + } +} + +.sg-code-head { + color: $sg-secondary; + font-size: 1em; } // Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles @@ -652,7 +671,7 @@ $STYLE GUIDE HEADER background: $sg-tertiary; color: $sg-secondary; text-align: center; - margin-bottom: $sg-halfpad; + margin-bottom: $sg-pad-half; padding: 1em !important; &:nth-of-type(2n) { @@ -739,14 +758,65 @@ $STYLE GUIDE HEADER } //Annotation -#comment-container { +#sg-annotation-container { position: fixed; bottom: 0; left: 0; z-index: 99; width: 100%; padding: $sg-pad; - background: red; +} + + +/* Annotations */ +#sg-annotation-container, #sg-code-container { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: $sg-font; + font-size: 90%; + background: $sg-primary; + color: $sg-secondary; + position: fixed; + top: auto; + padding: 1rem 1rem 4rem; + bottom: 0; + left: 0; + width: 100%; + z-index: 2; + -webkit-transition: bottom 0.3s ease-out; + -moz-transition: bottom 0.3s ease-out; + -webkit-transition: bottom 0.3s ease-out; + -ms-transition: bottom 0.3s ease-out; + -o-transition: bottom 0.3s ease-out; + transition: bottom 0.3s ease-out; + + a { + color: $sg-tertiary; + } +} + +#sg-code-container pre { + max-height: 300px; + padding: 0 1em; +} + +#sg-code-container .with-css pre { + max-height: 200px; +} + +#sg-annotation-close-btn, #sg-code-close-btn { + color: #fff; + position: absolute; + top: 1em; + right: 1em; + text-transform: uppercase; + text-decoration: none; + text-align: right; +} + +.has-comment, .has-comment a { + cursor: help !important; } // Icon Font @@ -755,50 +825,45 @@ $STYLE GUIDE HEADER font-family: 'icons'; src:url('../assets/icons.eot'); src:url('../assets/icons.eot?#iefix') format('embedded-opentype'), - url('../assets/icons.woff') format('woff'), - url('../assets/icons.ttf') format('truetype'), - url('../assets/icons.svg#icons') format('svg'); + url('../assets/icons.woff') format('woff'), + url('../assets/icons.ttf') format('truetype'), + url('../assets/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal; } -/* Use the following CSS code if you want to have a class per icon */ -/* -Instead of a list of all class selectors, -you can use the generic selector below, but it's slower: -[class*="icon-"] { - */ - .icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .icon-checkbox-checked, .icon-eye { - font-family: 'icons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - } - .icon-reload:before { - content: "\e002"; - } - .icon-cog:before { - content: "\e000"; - } - .icon-minus:before { - content: "\e003"; - } - .icon-plus:before { - content: "\e004"; - } - .icon-menu:before { - content: "\e005"; - } - .icon-checkbox-unchecked:before { - content: "\e006"; - } - .icon-checkbox-checked:before { - content: "\e007"; - } - .icon-eye:before { - content: "\e001"; - } \ No newline at end of file +/* Pattern Lab icon fonts */ +.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .icon-checkbox-checked, .icon-eye { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-reload:before { + content: "\e002"; +} +.icon-cog:before { + content: "\e000"; +} +.icon-minus:before { + content: "\e003"; +} +.icon-plus:before { + content: "\e004"; +} +.icon-menu:before { + content: "\e005"; +} +.icon-checkbox-unchecked:before { + content: "\e006"; +} +.icon-checkbox-checked:before { + content: "\e007"; +} +.icon-eye:before { + content: "\e001"; +} diff --git a/public/styleguide/js/annotations-pattern.js b/public/styleguide/js/annotations-pattern.js new file mode 100644 index 000000000..1855c7137 --- /dev/null +++ b/public/styleguide/js/annotations-pattern.js @@ -0,0 +1,212 @@ +/*! + * Annotations Support for Patterns - v0.3 + * + * Copyright (c) 2013 Dave Olsen, http://dmolsen.com + * Licensed under the MIT license + * + */ + +var annotationsPattern = { + + commentsOverlayActive: false, + commentsOverlay: false, + commentsOverlayElement: "", + commentsEmbeddedActive: false, + commentsEmbedded: false, + + /** + * add an onclick handler to each element in the pattern that has an annotation + */ + showComments: function() { + + // make sure this only added when we're on a pattern specific view + var body = document.getElementsByTagName("body"); + if (!body[0].classList.contains("sg-pattern-list")) { + for (comment in comments.comments) { + var item = comments.comments[comment]; + var els = document.querySelectorAll(item.el); + for (var i = 0; i < els.length; ++i) { + els[i].onclick = (function(item) { + return function(e) { + e.preventDefault(); + e.stopPropagation(); + var obj = {}; + + if (annotationsPattern.commentsOverlayActive && !annotationsPattern.commentsOverlay) { + + // if this is for an overlay and comments overlay is false set the payload to turn the overlay on + annotationsPattern.commentsOverlay = true; + obj = { "commentOverlay": "on", "swapOverlay": false, "el": item.el, "title": item.title, "comment": item.comment }; + + } else if (annotationsPattern.commentsOverlayActive && annotationsPattern.commentsOverlay) { + + if (item.el == annotationsPattern.commentsOverlayElement) { + + // if the last element was clicked again turn off the overlay + annotationsPattern.commentsOverlay = false; + obj = { "commentOverlay": "off" }; + + } else { + + // if an element was clicked on while the overlay was already on swap it + obj = { "commentOverlay": "on", "swapOverlay": true, "el": item.el, "title": item.title, "comment": item.comment }; + + } + + } + + annotationsPattern.commentsOverlayElement = item.el; + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + parent.postMessage(obj,targetOrigin); + + } + })(item); + } + } + } + + }, + + /** + * embed a comment by building the sg-annotations div (if necessary) and building an sg-annotation div + * @param {Object} element to check the parent node of + * @param {String} the title of the comment + * @param {String} the comment HTML + */ + embedComments: function (el,title,comment) { + + // build the annotation div and add the content to it + var annotationDiv = document.createElement("div"); + annotationDiv.classList.add("sg-annotation"); + + var h3 = document.createElement("h3"); + var p = document.createElement("p"); + h3.innerHTML = title; + p.innerHTML = comment; + + annotationDiv.appendChild(h3); + annotationDiv.appendChild(p); + + // find the parent element to attach things to + var parentEl = annotationsPattern.findParent(el); + + // see if a child with the class annotations exists + var els = parentEl.getElementsByClassName("sg-annotations"); + if (els.length > 0) { + els[0].appendChild(annotationDiv); + } else { + var annotationsDiv = document.createElement("div"); + annotationsDiv.classList.add("sg-annotations"); + annotationsDiv.appendChild(annotationDiv); + parentEl.appendChild(annotationsDiv); + } + + }, + + /** + * recursively find the parent of an element to see if it contains the sg-pattern class + * @param {Object} element to check the parent node of + */ + findParent: function(el) { + + if (el.parentNode.classList.contains("sg-pattern")) { + return el.parentNode; + } else { + var parentEl = annotationsPattern.findParent(el.parentNode); + } + + return parentEl; + + }, + + /** + * toggle the annotation feature on/off + * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage + * @param {Object} event info + */ + receiveIframeMessage: function(event) { + + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { + return; + } + + if (event.data.commentToggle != undefined) { + + // if this is an overlay make sure it's active for the onclick event + annotationsPattern.commentsOverlayActive = false; + annotationsPattern.commentsEmbeddedActive = false; + + // see which flag to toggle based on if this is a styleguide or view-all page + var body = document.getElementsByTagName("body"); + if ((event.data.commentToggle == "on") && (body[0].classList.contains("sg-pattern-list"))) { + annotationsPattern.commentsEmbeddedActive = true; + } else if (event.data.commentToggle == "on") { + annotationsPattern.commentsOverlayActive = true; + } + + // if comments overlay is turned off make sure to remove the has-comment class and pointer + if (!annotationsPattern.commentsOverlayActive) { + var els = document.querySelectorAll(".has-comment"); + for (var i = 0; i < els.length; i++) { + els[i].classList.remove("has-comment"); + } + } + + // if comments embedding is turned off make sure to hide the annotations div + if (!annotationsPattern.commentsEmbeddedActive) { + var els = document.getElementsByClassName("sg-annotations"); + for (var i = 0; i < els.length; i++) { + els[i].style.display = "none"; + } + } + + // if comments overlay is turned on add the has-comment class and pointer + if (annotationsPattern.commentsOverlayActive) { + + for (comment in comments.comments) { + var item = comments.comments[comment]; + var els = document.querySelectorAll(item.el); + for (var i = 0; i < els.length; i++) { + els[i].classList.add("has-comment"); + } + } + + } else if (annotationsPattern.commentsEmbeddedActive && !annotationsPattern.commentsEmbedded) { + + // if comment embedding is turned on and comments haven't been embedded yet do it + for (comment in comments.comments) { + var item = comments.comments[comment]; + var els = document.querySelectorAll(item.el); + if (els.length > 0) { + annotationsPattern.embedComments(els[0],item.title,item.comment); + } + annotationsPattern.commentsEmbedded = true; + } + + } else if (annotationsPattern.commentsEmbeddedActive && annotationsPattern.commentsEmbedded) { + + // if comment embedding is turned on and comments have been embedded simply display them + var els = document.getElementsByClassName("sg-annotations"); + for (var i = 0; i < els.length; ++i) { + els[i].style.display = "block"; + } + + } + + } + + } + +}; + +// add the onclick handlers to the elements that have an annotations +annotationsPattern.showComments(); +window.addEventListener("message", annotationsPattern.receiveIframeMessage, false); + +// before unloading the iframe make sure any active overlay is turned off/closed +window.onbeforeunload = function() { + var obj = { "commentOverlay": "off" }; + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + parent.postMessage(obj,targetOrigin); +}; \ No newline at end of file diff --git a/public/styleguide/js/annotations-viewer.js b/public/styleguide/js/annotations-viewer.js new file mode 100644 index 000000000..ea0fbea09 --- /dev/null +++ b/public/styleguide/js/annotations-viewer.js @@ -0,0 +1,138 @@ +/*! + * Annotations Support for the Viewer - v0.3 + * + * Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com + * Licensed under the MIT license + * + */ + +var annotationsViewer = { + + commentsActive: false, + sw: document.documentElement.clientWidth, + breakpoint: 650, + + onReady: function() { + + $('body').addClass('comments-ready'); + $('#sg-t-annotations').click(function(e) { + + e.preventDefault(); + + // make sure the code view overlay is off + $('#sg-t-code').removeClass('active'); + codeViewer.codeActive = false; + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "off" },targetOrigin); + codeViewer.slideCode(999); + + annotationsViewer.toggleComments(); + annotationsViewer.commentContainerInit(); + + }); + + }, + + toggleComments: function() { + + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + $('#sg-t-annotations').toggleClass('active'); + + if (!annotationsViewer.commentsActive) { + + annotationsViewer.commentsActive = true; + document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "on" },targetOrigin); + + } else { + + annotationsViewer.commentsActive = false; + document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "off" },targetOrigin); + annotationsViewer.slideComment(999); + + } + + }, + + commentContainerInit: function() { + + if (document.getElementById("sg-annotation-container") == undefined) { + $('').html('Close

Annotation Title

Here is some comment text
').appendTo('body').css('bottom',-$(document).outerHeight()); + } + + if (annotationsViewer.sw < annotationsViewer.breakpoint) { + $('#sg-annotation-container').hide(); + } else { + $('#sg-annotation-container').show(); + } + + $('body').delegate('#sg-annotation-close-btn','click',function(e) { + annotationsViewer.slideComment($('#sg-annotation-container').outerHeight()); + return false; + }); + + }, + + slideComment: function(pos) { + + $('#sg-annotation-container').show(); + + if (annotationsViewer.sw > annotationsViewer.breakpoint) { + $('#sg-annotation-container').css('bottom',-pos); + } else { + var offset = $('#sg-annotation-container').offset().top; + $('html,body').animate({scrollTop: offset}, 500); + } + + }, + + updateComment: function(el,title,msg) { + var $container = $('#sg-annotation-container'), + $title = $('#sg-annotation-title'), + $text = $('#sg-annotation-text'); + $title.text(title); + $text.html(msg); + annotationsViewer.slideComment(0); + }, + + /** + * toggle the comment pop-up based on a user clicking on the pattern + * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage + * @param {Object} event info + */ + receiveIframeMessage: function(event) { + + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { + return; + } + + if (event.data.commentOverlay != undefined) { + if (event.data.commentOverlay == "on") { + + annotationsViewer.updateComment(event.data.el,event.data.title,event.data.comment); + + } else { + annotationsViewer.slideComment($('#sg-annotation-container').outerHeight()); + } + } + + } + +} + +$(document).ready(function() { annotationsViewer.onReady(); }); +window.addEventListener("message", annotationsViewer.receiveIframeMessage, false); + +// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate +$('#sg-viewport').load(function() { + if (annotationsViewer.commentsActive) { + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "on" },targetOrigin); + } +}); + +// no idea why this has to be outside. there's something funky going on with the JS pattern +$('#sg-view li a').click(function() { + $(this).parent().parent().removeClass('active'); + $(this).parent().parent().parent().parent().removeClass('active'); +}); diff --git a/public/styleguide/js/code-pattern.js b/public/styleguide/js/code-pattern.js new file mode 100644 index 000000000..96bfd4ff8 --- /dev/null +++ b/public/styleguide/js/code-pattern.js @@ -0,0 +1,79 @@ +/*! + * Code View Support for Patterns - v0.3 + * + * Copyright (c) 2013 Dave Olsen, http://dmolsen.com + * Licensed under the MIT license + * + */ + +var codePattern = { + + codeOverlayActive: false, + codeEmbeddedActive: false, + + /** + * toggle the annotation feature on/off + * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage + * @param {Object} event info + */ + receiveIframeMessage: function(event) { + + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { + return; + } + + if (event.data.codeToggle != undefined) { + + // if this is an overlay make sure it's active for the onclick event + codePattern.codeOverlayActive = false; + codePattern.codeEmbeddedActive = false; + + // see which flag to toggle based on if this is a styleguide or view-all page + var body = document.getElementsByTagName("body"); + if ((event.data.codeToggle == "on") && (body[0].classList.contains("sg-pattern-list"))) { + codePattern.codeEmbeddedActive = true; + } else if (event.data.codeToggle == "on") { + codePattern.codeOverlayActive = true; + } + + // if comments embedding is turned off make sure to hide the annotations div + if (!codePattern.codeEmbeddedActive && (body[0].classList.contains("sg-pattern-list"))) { + var els = document.getElementsByClassName("sg-code"); + for (var i = 0; i < els.length; i++) { + els[i].style.display = "none"; + } + } + + // if comments overlay is turned on add the has-comment class and pointer + if (codePattern.codeOverlayActive) { + + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + obj = { "codeOverlay": "on", "lineage": lineage, "html": document.getElementById("sg-pattern-html").textContent, "css": document.getElementById("sg-pattern-css").textContent }; + parent.postMessage(obj,targetOrigin); + + } else if (codePattern.codeEmbeddedActive) { + + // if code embedding is turned on simply display them + var els = document.getElementsByClassName("sg-code"); + for (var i = 0; i < els.length; ++i) { + els[i].style.display = "block"; + } + + } + + } + + } + +}; + +// add the onclick handlers to the elements that have an annotations +window.addEventListener("message", codePattern.receiveIframeMessage, false); + +// before unloading the iframe make sure any active overlay is turned off/closed +window.onbeforeunload = function() { + var obj = { "codeOverlay": "off" }; + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + parent.postMessage(obj,targetOrigin); +}; \ No newline at end of file diff --git a/public/styleguide/js/code-viewer.js b/public/styleguide/js/code-viewer.js new file mode 100644 index 000000000..edb716944 --- /dev/null +++ b/public/styleguide/js/code-viewer.js @@ -0,0 +1,161 @@ +/*! + * Code View Support for the Viewer - v0.1 + * + * Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com + * Licensed under the MIT license + * + */ + +var codeViewer = { + + codeActive: false, + sw: document.documentElement.clientWidth, + breakpoint: 650, + + onReady: function() { + + $('body').addClass('code-ready'); + $('#sg-t-code').click(function(e) { + e.preventDefault(); + + // make sure the annotations overlay is off + $('#sg-t-annotations').removeClass('active'); + annotationsViewer.commentsActive = false; + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "off" },targetOrigin); + annotationsViewer.slideComment(999); + + codeViewer.toggleCode(); + codeViewer.codeContainerInit(); + + }); + + }, + + toggleCode: function() { + + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + $('#sg-t-code').toggleClass('active'); + + if (!codeViewer.codeActive) { + + codeViewer.codeActive = true; + document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "on" },targetOrigin); + + } else { + + codeViewer.codeActive = false; + document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "off" },targetOrigin); + codeViewer.slideCode(999); + + } + + }, + + codeContainerInit: function() { + + if (document.getElementById("sg-code-container") == undefined) { + $('').html('Close

HTML

').appendTo('body').css('bottom',-$(document).outerHeight()); + } + + if (codeViewer.sw < codeViewer.breakpoint) { + $('#sg-code-container').hide(); + } else { + $('#sg-code-container').show(); + } + + $('body').delegate('#sg-code-close-btn','click',function(e) { + codeViewer.slideCode($('#sg-code-container').outerHeight()); + return false; + }); + + }, + + slideCode: function(pos) { + + $('#sg-code-container').show(); + + if (codeViewer.sw > codeViewer.breakpoint) { + $('#sg-code-container').css('bottom',-pos); + } else { + var offset = $('#sg-code-container').offset().top; + $('html,body').animate({scrollTop: offset}, 500); + } + + }, + + updateCode: function(lineage,html,css) { + + // draw lineage + if (lineage.length != 0) { + $("#sg-code-lineage").css("display","block"); + var i = 0; + var lineageList = ""; + for (pattern in lineage) { + lineageList += (i == 0) ? "" : ", "; + lineageList += ""+lineage[pattern]["lineagePattern"]+""; + i++; + } + + $("#sg-code-lineage-fill").html(lineageList); + + $('#sg-code-lineage-fill a').on("click", function(e){ + e.preventDefault(); + document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin); + }); + } + + // draw html + $("#sg-code-html-fill").text(html); + Prism.highlightElement(document.getElementById("sg-code-html-fill")); + + // draw CSS + if (css.indexOf("{{ patternCSS }}") == -1) { + $("#sg-code-html").addClass("with-css"); + $("#sg-code-css").css("display","block"); + $("#sg-code-css-fill").text(css); + Prism.highlightElement(document.getElementById("sg-code-css-fill")); + } + + codeViewer.slideCode(0); + + }, + + /** + * toggle the comment pop-up based on a user clicking on the pattern + * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage + * @param {Object} event info + */ + receiveIframeMessage: function(event) { + + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { + return; + } + + if (event.data.codeOverlay != undefined) { + if (event.data.codeOverlay == "on") { + + codeViewer.updateCode(event.data.lineage,event.data.html,event.data.css); + + } else { + + codeViewer.slideCode($('#sg-code-container').outerHeight()); + + } + } + + } + +} + +$(document).ready(function() { codeViewer.onReady(); }); +window.addEventListener("message", codeViewer.receiveIframeMessage, false); + +// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate +$('#sg-viewport').load(function() { + if (codeViewer.codeActive) { + var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; + document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "on" },targetOrigin); + } +}); diff --git a/public/styleguide/js/legacy/data-saver.js b/public/styleguide/js/legacy/data-saver.js new file mode 100644 index 000000000..e354e1e79 --- /dev/null +++ b/public/styleguide/js/legacy/data-saver.js @@ -0,0 +1,169 @@ +/*! + * jQuery Cookie Plugin v1.3 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2011, Klaus Hartl + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://www.opensource.org/licenses/mit-license.php + * http://www.opensource.org/licenses/GPL-2.0 + */ +(function ($, document, undefined) { + + var pluses = /\+/g; + + function raw(s) { + return s; + } + + function decoded(s) { + return decodeURIComponent(s.replace(pluses, ' ')); + } + + var config = $.cookie = function (key, value, options) { + + // write + if (value !== undefined) { + options = $.extend({}, config.defaults, options); + + if (value === null) { + options.expires = -1; + } + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setDate(t.getDate() + days); + } + + value = config.json ? JSON.stringify(value) : String(value); + + return (document.cookie = [ + encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // read + var decode = config.raw ? raw : decoded; + var cookies = document.cookie.split('; '); + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + if (decode(parts.shift()) === key) { + var cookie = decode(parts.join('=')); + return config.json ? JSON.parse(cookie) : cookie; + } + } + + return null; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) !== null) { + $.cookie(key, null, options); + return true; + } + return false; + }; + +})(jQuery, document); + +/*! + * Data Saver - v0.1 + * + * Copyright (c) 2013 Dave Olsen, http://dmolsen.com + * Licensed under the MIT license + */ + +var DataSaver = { + + // the name of the cookie to store the data in + cookieName: "patternlab", + + /** + * Add a given value to the cookie + * @param {String} the name of the key + * @param {String} the value + */ + addValue: function (name,val) { + var cookieVal = $.cookie(this.cookieName); + if ((cookieVal == null) || (cookieVal == "")) { + cookieVal = name+"~"+val; + } else { + cookieVal = cookieVal+"|"+name+"~"+val; + } + $.cookie(this.cookieName,cookieVal); + }, + + /** + * Update a value found in the cookie. If the key doesn't exist add the value + * @param {String} the name of the key + * @param {String} the value + */ + updateValue: function (name,val) { + if (this.findValue(name)) { + var updateCookieVals = ""; + var cookieVals = $.cookie(this.cookieName).split("|"); + for (var i = 0; i < cookieVals.length; i++) { + var fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] == name) { + fieldVals[1] = val; + } + if (i > 0) { + updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; + } else { + updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; + } + } + $.cookie(this.cookieName,updateCookieVals); + } else { + this.addValue(name,val); + } + }, + + /** + * Remove the given key + * @param {String} the name of the key + */ + removeValue: function (name) { + var updateCookieVals = ""; + var cookieVals = $.cookie(this.cookieName).split("|"); + var k = 0; + for (var i = 0; i < cookieVals.length; i++) { + var fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] != name) { + if (k == 0) { + updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; + } else { + updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; + } + k++; + } + } + $.cookie(this.cookieName,updateCookieVals); + }, + + /** + * Find the value using the given key + * @param {String} the name of the key + * + * @return {String} the value of the key or false if the value isn't found + */ + findValue: function (name) { + if ($.cookie(this.cookieName)) { + var cookieVals = $.cookie(this.cookieName).split("|"); + var k = 0; + for (var i = 0; i < cookieVals.length; i++) { + var fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] == name) { + return fieldVals[1]; + } + } + } + return false; + } + +}; diff --git a/public/styleguide/js/legacy/jquery.js b/public/styleguide/js/legacy/jquery.js new file mode 100644 index 000000000..50d1b22f2 --- /dev/null +++ b/public/styleguide/js/legacy/jquery.js @@ -0,0 +1,4 @@ +/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st(" -
-
-
+ + + Pattern Lab + + + + + + + +> + + + + + +
+
+
+ +
+
- - - - {{> patternPaths }} - {{> viewAllPaths }} - - {{> websockets }} - - - +
+ + + + + {{> patternPaths }} + {{> viewAllPaths }} + + {{> websockets }} + + + + + \ No newline at end of file diff --git a/source/_patternlab-files/partials/ishControls.mustache b/source/_patternlab-files/partials/ishControls.mustache index 1527c1750..c2947f625 100644 --- a/source/_patternlab-files/partials/ishControls.mustache +++ b/source/_patternlab-files/partials/ishControls.mustache @@ -17,16 +17,22 @@
  • Random
  • Disco
  • Hay!
    • +
  • + MQ + +
    • - diff --git a/source/_patternlab-files/pattern-header-footer/footer.html b/source/_patternlab-files/pattern-header-footer/footer.html index 0e6bb20f4..645c5a78d 100644 --- a/source/_patternlab-files/pattern-header-footer/footer.html +++ b/source/_patternlab-files/pattern-header-footer/footer.html @@ -7,48 +7,23 @@ + + + + + + + + + diff --git a/source/_patternlab-files/pattern-header-footer/header.html b/source/_patternlab-files/pattern-header-footer/header.html index 54b99307e..54a44f354 100644 --- a/source/_patternlab-files/pattern-header-footer/header.html +++ b/source/_patternlab-files/pattern-header-footer/header.html @@ -5,13 +5,30 @@ + + + + + + + + + + - - - + + + + \ No newline at end of file diff --git a/source/_patternlab-files/styleguide.mustache b/source/_patternlab-files/styleguide.mustache index 96040ec84..a3c7e437f 100644 --- a/source/_patternlab-files/styleguide.mustache +++ b/source/_patternlab-files/styleguide.mustache @@ -1,70 +1,65 @@ - - - Style Guide - - - - - - + + + Pattern Lab Style Guide + + + + + + + + +
    + + + + +
    - -
    - - -
    - {{# partials }} -
    -

    {{ patternName }}

    - {{{ patternOutput }}} -
    - {{/ partials }} -
    -
    - - + + + + + + + + \ No newline at end of file diff --git a/source/_patternlab-files/viewall.mustache b/source/_patternlab-files/viewall.mustache index 955ea62a2..5c2dc88ce 100644 --- a/source/_patternlab-files/viewall.mustache +++ b/source/_patternlab-files/viewall.mustache @@ -1,73 +1,65 @@ - - Style Guide for a Specific Pattern Sub-Type - - - - - - - - -
    - - -
    - {{# partials }} -
    -

    {{ patternName }}

    - {{{ patternPartial }}} -
    - {{/ partials }} -
    - -
    - + + + + - } - window.addEventListener("message", receiveIframeMessage, false); - - - + \ No newline at end of file diff --git a/source/favicon.ico b/source/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..eee4aa78fdf0366fc7278096cdafb710d2dbb49c GIT binary patch literal 32988 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 literal 0 HcmV?d00001 From 83921911743f24d2bbd87c1869f5305a747cf657 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Mon, 20 Jan 2014 15:29:13 -0600 Subject: [PATCH 2/4] removing console.logs --- builder/patternlab.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 9192ad72a..7ea3eb405 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -97,9 +97,7 @@ module.exports = function(grunt) { flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html'; //add footer info before writing - console.log(currentPattern); var currentPatternFooter = mustache.render(patternlab.footer, currentPattern); - console.log(currentPatternFooter); grunt.file.write('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + currentPatternFooter); currentPattern.patternLink = flatPatternPath; From 05bc6c9996a6fbfe97bf2ad7b5a107cbde8b525b Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 21 Jan 2014 00:01:39 -0600 Subject: [PATCH 3/4] fixed iframes navigation was missing hyphens in data that eventually translated to the data- iframe posting --- builder/patternlab.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 7ea3eb405..fd0de7090 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -193,7 +193,7 @@ module.exports = function(grunt) { //assume the navSubItem does not exist. var navSubItem = new oNavSubItem(navSubItemName); navSubItem.patternPath = pattern.patternLink; - navSubItem.patternPartial = bucketName + "-" + navSubItemName; + navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name //if it is flat - we should not add the pattern to patternPaths //EXPERIMENT: ADD THESE ANYWAYS. COMMENTING OUT THE IF STATEMENT @@ -216,7 +216,7 @@ module.exports = function(grunt) { navItem.navSubItemsIndex.push(navSubItemName); //add to patternPaths - patternlab.patternPaths[bucketName][navSubItemName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); + patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); // EXPERIMENT} //add the bucket. @@ -239,7 +239,7 @@ module.exports = function(grunt) { //assume the navSubItem does not exist. var navSubItem = new oNavSubItem(navSubItemName); navSubItem.patternPath = pattern.patternLink; - navSubItem.patternPartial = bucketName + "-" + navSubItemName; + navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name //test whether the pattern struture is flat or not - usually due to a template or page var flatPatternItem = false; @@ -275,7 +275,7 @@ module.exports = function(grunt) { } //add to patternPaths - patternlab.patternPaths[bucketName][navSubItemName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); + patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); //EXPERIMENT } From 63029d9e6f5d1e4b6a171e100bc9e5c923d421d9 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 21 Jan 2014 01:23:52 -0600 Subject: [PATCH 4/4] prepping for release. fixed #1. removed old code. updated changelog. added banner. fixes#9 --- CHANGELOG | 13 +- Gruntfile.js | 12 +- builder/patternlab.js | 50 +- package.json | 15 +- public/styleguide/js/legacy/data-saver.js | 169 ------- public/styleguide/js/legacy/jquery.js | 4 - public/styleguide/js/legacy/styleguide.js | 531 --------------------- public/styleguide/js/legacy/url-handler.js | 182 ------- 8 files changed, 63 insertions(+), 913 deletions(-) delete mode 100644 public/styleguide/js/legacy/data-saver.js delete mode 100644 public/styleguide/js/legacy/jquery.js delete mode 100644 public/styleguide/js/legacy/styleguide.js delete mode 100644 public/styleguide/js/legacy/url-handler.js diff --git a/CHANGELOG b/CHANGELOG index 67445ebdb..36748fa97 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,7 +1,16 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. +PL-node-v0.1.0 + - FIX: Links to patterns did not work when visited from a server + - FIX: Patterns with hyphens in the name were breaking the iframe messaging + - FIX: Added stlyeguide/js files that were ignored at one point + - FIX: Watch _data/*.json files too + - FIX: Copy images, in an attempt to exclude files like Thumbs.db + - FIX: Typos in CHANGELOG + - ADD: A banner to patternlab.js + PL-node-v0.0.5 - - FIX: type in organisms global header + - FIX: typo in organisms global header - FIX: flat-structured pattern items rendered as if they had sub-menus #4 - ADD: Load all grunt tasks using matchdep - THX: thanks to @colynb for the typo heads up @@ -21,4 +30,4 @@ PL-node-v0.0.2 - FIX: Grunt watching styleguide scss PL-node-v0.0.1 - - Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build a atomic design-drive website. \ No newline at end of file + - Minimum Viable Product! At this point, I feel you could use Pattern Lab Node to build an atomic design-driven website. \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index b4a6a0215..b85869474 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,16 @@ module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), clean: ['./public/patterns'], + concat: { + options: { + stripBanners: true, + banner: '/* \n * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> \n * \n * <%= pkg.author %>, and the web community.\n * Licensed under the <%= pkg.license %> license. \n * \n * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. \n *\n */\n\n', + }, + dist: { + src: './builder/patternlab.js', + dest: './builder/patternlab.js' + } + }, copy: { main: { files: [ @@ -64,5 +74,5 @@ module.exports = function(grunt) { grunt.task.loadTasks('./builder/'); //if you choose to use scss, or any preprocessor, you can add it here - grunt.registerTask('default', ['clean', 'patternlab', /*'sass',*/ 'copy']); + grunt.registerTask('default', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); }; \ No newline at end of file diff --git a/builder/patternlab.js b/builder/patternlab.js index fd0de7090..7baedf008 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,3 +1,13 @@ +/* + * patternlab-node - v0.1.0 - 2014-01-21 + * + * Brian Muenzenmeyer, and the web community. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * + */ + var path = require('path'); var oPattern = function(name, subdir, filename, data){ @@ -196,20 +206,15 @@ module.exports = function(grunt) { navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name //if it is flat - we should not add the pattern to patternPaths - //EXPERIMENT: ADD THESE ANYWAYS. COMMENTING OUT THE IF STATEMENT - // if(flatPatternItem){ - // //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); + if(flatPatternItem){ - // //add the navItem to patternItems - // bucket.patternItems.push(navSubItem); - - - // //EXPERIMENT: ADD THESE ANYWAYS - + bucket.patternItems.push(navSubItem); + + //add to patternPaths + patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); + } else{ - // } else{ - //add the more complex nav items bucket.navItems.push(navItem); bucket.navItemsIndex.push(navItemName); navItem.navSubItems.push(navSubItem); @@ -217,13 +222,13 @@ module.exports = function(grunt) { //add to patternPaths patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - // EXPERIMENT} + + } //add the bucket. patternlab.buckets.push(bucket); patternlab.bucketIndex.push(bucketName); - //done } else{ @@ -248,13 +253,15 @@ module.exports = function(grunt) { } //if it is flat - we should not add the pattern to patternPaths - //EXPERIMENT: ADD THESE ANYWAYS. COMMENTING OUT THE IF STATEMENT - // if(flatPatternItem){ - // //grunt.log.writeln('flat source structure found for ' + navItemName + " " + bucketName); + if(flatPatternItem){ + + //add the navItem to patternItems + bucket.patternItems.push(navSubItem); + + //add to patternPaths + patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - // //add the navItem to patternItems - // bucket.patternItems.push(navSubItem); - // } else{ + } else{ //check to see if navItem exists var navItemIndex = bucket.navItemsIndex.indexOf(navItemName); if(navItemIndex === -1){ @@ -274,11 +281,10 @@ module.exports = function(grunt) { navItem.navSubItemsIndex.push(navSubItemName); } - //add to patternPaths + // just add to patternPaths patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - //EXPERIMENT } - + } //check to see if this bucket has a View All yet. If not, add it. // var navItem = bucket.navItems[navItemIndex]; diff --git a/package.json b/package.json index c6702eab4..3894e2ffa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "patternlab-node", - "version": "0.0.5", + "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", + "version": "0.1.0", "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-nodeunit": "~0.1.2", @@ -9,6 +10,16 @@ "grunt-contrib-copy": "~0.4.0", "grunt-contrib-jshint": "~0.4.0", "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-concat": "~0.3.0", "matchdep": "~0.3.0" - } + }, + "keywords": [ + "Pattern Lab", + "Atomic Web Design", + "Node", + "Grunt", + "Javascript" + ], + "author": "Brian Muenzenmeyer", + "license": "MIT" } diff --git a/public/styleguide/js/legacy/data-saver.js b/public/styleguide/js/legacy/data-saver.js deleted file mode 100644 index e354e1e79..000000000 --- a/public/styleguide/js/legacy/data-saver.js +++ /dev/null @@ -1,169 +0,0 @@ -/*! - * jQuery Cookie Plugin v1.3 - * https://github.com/carhartl/jquery-cookie - * - * Copyright 2011, Klaus Hartl - * Dual licensed under the MIT or GPL Version 2 licenses. - * http://www.opensource.org/licenses/mit-license.php - * http://www.opensource.org/licenses/GPL-2.0 - */ -(function ($, document, undefined) { - - var pluses = /\+/g; - - function raw(s) { - return s; - } - - function decoded(s) { - return decodeURIComponent(s.replace(pluses, ' ')); - } - - var config = $.cookie = function (key, value, options) { - - // write - if (value !== undefined) { - options = $.extend({}, config.defaults, options); - - if (value === null) { - options.expires = -1; - } - - if (typeof options.expires === 'number') { - var days = options.expires, t = options.expires = new Date(); - t.setDate(t.getDate() + days); - } - - value = config.json ? JSON.stringify(value) : String(value); - - return (document.cookie = [ - encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), - options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE - options.path ? '; path=' + options.path : '', - options.domain ? '; domain=' + options.domain : '', - options.secure ? '; secure' : '' - ].join('')); - } - - // read - var decode = config.raw ? raw : decoded; - var cookies = document.cookie.split('; '); - for (var i = 0, l = cookies.length; i < l; i++) { - var parts = cookies[i].split('='); - if (decode(parts.shift()) === key) { - var cookie = decode(parts.join('=')); - return config.json ? JSON.parse(cookie) : cookie; - } - } - - return null; - }; - - config.defaults = {}; - - $.removeCookie = function (key, options) { - if ($.cookie(key) !== null) { - $.cookie(key, null, options); - return true; - } - return false; - }; - -})(jQuery, document); - -/*! - * Data Saver - v0.1 - * - * Copyright (c) 2013 Dave Olsen, http://dmolsen.com - * Licensed under the MIT license - */ - -var DataSaver = { - - // the name of the cookie to store the data in - cookieName: "patternlab", - - /** - * Add a given value to the cookie - * @param {String} the name of the key - * @param {String} the value - */ - addValue: function (name,val) { - var cookieVal = $.cookie(this.cookieName); - if ((cookieVal == null) || (cookieVal == "")) { - cookieVal = name+"~"+val; - } else { - cookieVal = cookieVal+"|"+name+"~"+val; - } - $.cookie(this.cookieName,cookieVal); - }, - - /** - * Update a value found in the cookie. If the key doesn't exist add the value - * @param {String} the name of the key - * @param {String} the value - */ - updateValue: function (name,val) { - if (this.findValue(name)) { - var updateCookieVals = ""; - var cookieVals = $.cookie(this.cookieName).split("|"); - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { - fieldVals[1] = val; - } - if (i > 0) { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } - } - $.cookie(this.cookieName,updateCookieVals); - } else { - this.addValue(name,val); - } - }, - - /** - * Remove the given key - * @param {String} the name of the key - */ - removeValue: function (name) { - var updateCookieVals = ""; - var cookieVals = $.cookie(this.cookieName).split("|"); - var k = 0; - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] != name) { - if (k == 0) { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } - k++; - } - } - $.cookie(this.cookieName,updateCookieVals); - }, - - /** - * Find the value using the given key - * @param {String} the name of the key - * - * @return {String} the value of the key or false if the value isn't found - */ - findValue: function (name) { - if ($.cookie(this.cookieName)) { - var cookieVals = $.cookie(this.cookieName).split("|"); - var k = 0; - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { - return fieldVals[1]; - } - } - } - return false; - } - -}; diff --git a/public/styleguide/js/legacy/jquery.js b/public/styleguide/js/legacy/jquery.js deleted file mode 100644 index 50d1b22f2..000000000 --- a/public/styleguide/js/legacy/jquery.js +++ /dev/null @@ -1,4 +0,0 @@ -/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("