├── .gitignore
├── .travis.yml
├── bs.js
├── client.js
├── diffs
    └── 1.html
├── example.js
├── examples
    ├── inline.js
    ├── inline.restrictions.js
    ├── manual.js
    └── use.js
├── gulpfile.example.js
├── index.js
├── lib
    ├── config.js
    ├── default-config.js
    ├── html-injector.js
    ├── injector.js
    └── utils.js
├── lodash.custom.js
├── package.json
├── readme.md
├── test
    ├── compare.doms.js
    ├── compare.restrict.js
    ├── fixtures
    │   ├── css
    │   │   └── blog.css
    │   ├── dom1.html
    │   ├── dom2.html
    │   ├── index.html
    │   ├── store-product-alt.html
    │   ├── store-product.html
    │   ├── store-product.php
    │   ├── web-starter-kit-styleguide-modified.html
    │   └── web-starter-kit-styleguide.html
    └── init.js
└── ui
    ├── client.js
    ├── html-injector.directive.html
    └── html-injector.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | /lodash.custom.min.js
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - node
4 | 


--------------------------------------------------------------------------------
/bs.js:
--------------------------------------------------------------------------------
 1 | var browserSync = require("browser-sync");
 2 | var htmlInjector = require("./index");
 3 | 
 4 | browserSync.use(htmlInjector, {
 5 |     files: "test/fixtures/*.html",
 6 |     excludedTags: ["BODY"]
 7 | });
 8 | browserSync({
 9 |     logLevel: "debug",
10 |     server: "test/fixtures",
11 |     open: false
12 | });
13 | 
14 | 


--------------------------------------------------------------------------------
/client.js:
--------------------------------------------------------------------------------
  1 | 
  2 | ;(function (window, bs) {
  3 | 
  4 |     var socket = bs.socket;
  5 | 
  6 |     socket.on("connection", function () {
  7 | 
  8 |         socket.emit("client:url", {
  9 |             url: getUrl()
 10 |         });
 11 |     });
 12 | 
 13 |     socket.on("html:inject", function (data) {
 14 | 
 15 |         var elem, parent;
 16 | 
 17 |         if (data.url !== getUrl()) {
 18 |             return;
 19 |         }
 20 | 
 21 |         if (data.restrictions === "html") {
 22 |             var elems = document.getElementsByTagName(data.tagName);
 23 |             elem = elems[data.index];
 24 |             updateElement(elem);
 25 |         } else {
 26 |             if (data.restrictions.match(/^#/)) {
 27 |                 parent = document.getElementById(data.restrictions.slice(1));
 28 |                 if (parent) {
 29 |                     if (data.tagName === "BODY") {
 30 |                         updateElement(parent);
 31 |                     } else {
 32 |                         updateElement(parent.getElementsByTagName(data.tagName)[data.index]);
 33 |                     }
 34 |                 }
 35 |             } else {
 36 |                 parent = document.querySelectorAll(data.restrictions);
 37 |                 if (parent.length) {
 38 |                     if (data.tagName === "BODY") {
 39 |                         updateElement(parent[0]);
 40 |                     } else {
 41 |                         updateElement(parent[0].getElementsByTagName(data.tagName)[data.index]);
 42 |                     }
 43 |                 }
 44 |             }
 45 |         }
 46 | 
 47 |         function updateElement(elem) {
 48 | 
 49 |             if (elem) {
 50 | 
 51 |                 switch (data.diff.type) {
 52 | 
 53 |                     case "attribute":
 54 |                         updateAttrs(elem, data);
 55 |                         break;
 56 |                     default:
 57 |                         updateElemHtml(elem, data.html);
 58 |                         break;
 59 | 
 60 |                 }
 61 |             }
 62 |         }
 63 |     });
 64 | 
 65 |     function updateElemHtml (elem, html) {
 66 |         elem.innerHTML     = html;
 67 |     }
 68 | 
 69 |     function updateText (elem, text) {
 70 |         elem.innerText = text;
 71 |     }
 72 | 
 73 |     function updateAttrs (elem, data) {
 74 | 
 75 |         var oldAttrs = elem.attributes;
 76 |         var name;
 77 |         var index;
 78 | 
 79 |         // Remove any ol attrs that don't exist on new element
 80 |         for (index = oldAttrs.length - 1; index >= 0; --index) {
 81 |             name = oldAttrs[index].nodeName;
 82 |             if (!data.attrs[name]) {
 83 |                 elem.removeAttribute(name);
 84 |             }
 85 |         }
 86 | 
 87 |         /**
 88 |          * Compare
 89 |          */
 90 |         for (var key in data.attrs) {
 91 | 
 92 |             if (oldAttrs[key]) { // existing attr
 93 | 
 94 |                 if (oldAttrs[key] !== data.attrs[key]) {
 95 |                     elem.setAttribute(key, data.attrs[key]);
 96 |                 }
 97 |             }
 98 | 
 99 |             if (!oldAttrs[key])  {
100 |                 elem.setAttribute(key, data.attrs[key]);
101 |             }
102 |         }
103 |     }
104 | 
105 |     function getUrl () {
106 |         return [location.protocol, "//", location.host, location.pathname, location.search].join("");
107 |     }
108 | 
109 | })(window, window.___browserSync___);
110 | 


--------------------------------------------------------------------------------
/diffs/1.html:
--------------------------------------------------------------------------------
1 | undefined


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
 1 | var browserSync  = require("browser-sync").create();
 2 | 
 3 | browserSync.init({
 4 |     server:  ["test/fixtures"],
 5 |     files:   ["test/fixtures/css/**"],
 6 |     plugins: [
 7 |         {
 8 |             module: __dirname,
 9 |             options: {
10 |                 files: 'test/fixtures/*.html'
11 |             }
12 |         }
13 |     ]
14 | });
15 | 


--------------------------------------------------------------------------------
/examples/inline.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Install:
 4 |  *      npm install browser-sync bs-html-injector
 5 |  *
 6 |  * Run:
 7 |  *      node <yourfile.js>
 8 |  *
 9 |  * This example will create a server & use the `app` directory as the root
10 |  *
11 |  *  1. Watch all css files and inject when they change
12 |  *  2. Watch HTML files and inject the difference when they change
13 |  *
14 |  */
15 | 
16 | var browserSync  = require("browser-sync").create();
17 | 
18 | browserSync.init({
19 |     server:  ["app"],
20 |     files:   ["app/css/**"],
21 |     plugins: [
22 |         {
23 |             module: "bs-html-injector",
24 |             options: {
25 |                 files: ["app/*.html"]
26 |             }
27 |         }
28 |     ]
29 | });
30 | 


--------------------------------------------------------------------------------
/examples/inline.restrictions.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Install:
 4 |  *      npm install browser-sync bs-html-injector
 5 |  *
 6 |  * Run:
 7 |  *      node <yourfile.js>
 8 |  *
 9 |  * This example will create a server & use the `app` directory as the root
10 |  *
11 |  *  1. Watch all css files and inject when they change
12 |  *  2. Watch HTML files and inject the differences within your restrictions
13 |  *
14 |  */
15 | 
16 | var browserSync  = require("browser-sync").create();
17 | 
18 | browserSync.init({
19 |     server:  ["app"],
20 |     files:   ["app/css/**"],
21 |     plugins: [
22 |         {
23 |             module: "bs-html-injector",
24 |             options: {
25 |                 files: ["app/*.html"],
26 |                 restrictions: ["#blog-header"]
27 |             }
28 |         }
29 |     ]
30 | });
31 | 


--------------------------------------------------------------------------------
/examples/manual.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Install:
 4 |  *      npm install browser-sync bs-html-injector
 5 |  *
 6 |  * Run:
 7 |  *      node <yourfile.js>
 8 |  *
 9 |  * This example will create a server & use the `app` directory as the root
10 |  *
11 |  *  1. Watch all css files and inject when they change
12 |  *  2. Watch HTML files and inject the difference when they change
13 |  *
14 |  */
15 | 
16 | var browserSync  = require("browser-sync").create();
17 | var htmlInjector = require("bs-html-injector");
18 | 
19 | /**
20 |  * Register the plugin
21 |  */
22 | browserSync.use(htmlInjector);
23 | 
24 | /**
25 |  * Watch *.html files and trigger injection when they change
26 |  */
27 | browserSync.watch("app/*.html").on("change", function () {
28 |     htmlInjector();
29 | });
30 | 
31 | /**
32 |  * Run the Server
33 |  */
34 | browserSync.init({
35 |     server:  ["app"],
36 |     files:   ["app/css/**"]
37 | });
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/examples/use.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Install:
 4 |  *      npm install browser-sync bs-html-injector
 5 |  *
 6 |  * Run:
 7 |  *      node <yourfile.js>
 8 |  *
 9 |  * This example will create a server & use the `app` directory as the root
10 |  *
11 |  *  1. Watch all css files and inject when they change
12 |  *  2. Watch HTML files and inject the difference when they change
13 |  *
14 |  */
15 | 
16 | var browserSync  = require("browser-sync").create();
17 | var htmlInjector = require("bs-html-injector");
18 | 
19 | /**
20 |  * Register the plugin
21 |  */
22 | browserSync.use(htmlInjector, {
23 |     files: "app/*.html"
24 | });
25 | 
26 | /**
27 |  * Run the Server
28 |  */
29 | browserSync.init({
30 |     server:  ["app"],
31 |     files:   ["app/css/**"]
32 | });
33 | 


--------------------------------------------------------------------------------
/gulpfile.example.js:
--------------------------------------------------------------------------------
 1 | var gulp         = require("gulp");
 2 | var browserSync  = require("/Users/shakyshane/Sites/os-browser-sync");
 3 | var htmlInjector = require("./index");
 4 | 
 5 | /**
 6 |  * Start BrowserSync
 7 |  */
 8 | gulp.task("browser-sync", function () {
 9 |     browserSync.use(htmlInjector);
10 |     browserSync({
11 |         logLevel: "silent",
12 |         server: "test/fixtures",
13 |         open: false
14 |     });
15 | });
16 | 
17 | /**
18 |  * Default task, inject HTML when the files change
19 |  */
20 | gulp.task("default", ["browser-sync"], function () {
21 |     gulp.watch("test/fixtures/*.html", htmlInjector);
22 | });


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * HTML Injector
  4 |  *  - a BrowserSync.io plugin.
  5 |  *
  6 |  */
  7 | 
  8 | var events       = require('events');
  9 | var emitter      = new events.EventEmitter();
 10 | var request      = require('request');
 11 | var debug        = require('debug')('bs-html-injector');
 12 | var createDom    = require("./lib/injector").createDom;
 13 | 
 14 | var HtmlInjector = require("./lib/html-injector");
 15 | var config       = require("./lib/config");
 16 | var _            = require("./lodash.custom");
 17 | 
 18 | /**
 19 |  * ON/OFF flag
 20 |  * @type {boolean}
 21 |  */
 22 | var enabled = true;
 23 | 
 24 | /**
 25 |  * Instance of HTML Injector
 26 |  */
 27 | var instance;
 28 | 
 29 | /**
 30 |  * Main export, can be called when BrowserSync is running.
 31 |  * @returns {*}
 32 |  */
 33 | module.exports = function () {
 34 |     if (instance) {
 35 |         return emitter.emit(config.PLUGIN_EVENT);
 36 |     }
 37 | };
 38 | 
 39 | /**
 40 |  * @param {Object} opts
 41 |  * @param {BrowserSync} bs
 42 |  */
 43 | module.exports["plugin"] = function (opts, bs) {
 44 | 
 45 |     opts = opts || {};
 46 | 
 47 |     var logger       = bs.getLogger(config.PLUGIN_NAME).info("Running...");
 48 | 
 49 |     if (typeof opts.logLevel !== "undefined") {
 50 |         logger.setLevel(opts.logLevel);
 51 |     }
 52 | 
 53 |     var htmlInjector = instance = new HtmlInjector(opts, logger, bs);
 54 |     var opts         = htmlInjector.opts;
 55 |     var clients      = bs.io.of(bs.options.getIn(["socket", "namespace"]));
 56 | 
 57 |     if (bs.ui) {
 58 |         addUiEvents();
 59 |     }
 60 | 
 61 |     /**
 62 |      * Add UI events if running
 63 |      */
 64 |     function addUiEvents () {
 65 | 
 66 |         var ui = bs.io.of(bs.ui.config.getIn(["socket", "namespace"]));
 67 | 
 68 |         bs.ui.listen(config.PLUGIN_NAME, {
 69 |             "restriction:add": function (data) {
 70 |                 opts.restrictions = _.uniq(opts.restrictions.concat([data]));
 71 |                 updateOptions(opts);
 72 |             },
 73 |             "restriction:remove": function (data) {
 74 |                 opts.restrictions = _.without(opts.restrictions, data);
 75 |                 updateOptions(opts);
 76 |             }
 77 |         });
 78 | 
 79 |         function updateOptions (opts) {
 80 |             bs.events.emit("plugins:opts", {
 81 |                 name: config.PLUGIN_NAME,
 82 |                 opts: opts
 83 |             });
 84 |             ui.emit("options:update", {
 85 |                 name: config.PLUGIN_NAME,
 86 |                 opts: bs.getUserPlugin(config.PLUGIN_NAME).opts
 87 |             });
 88 |         }
 89 |     }
 90 | 
 91 |     enabled = htmlInjector.opts.enabled;
 92 | 
 93 |     /**
 94 |      * Configure event
 95 |      */
 96 |     bs.events.on("plugins:configure", function (data) {
 97 | 
 98 |         if (data.name !== config.PLUGIN_NAME) {
 99 |             return;
100 |         }
101 | 
102 |         var msg = "{cyan:Enabled";
103 | 
104 |         if (!data.active) {
105 |             msg = "{yellow:Disabled";
106 |         } else {
107 |             clients.emit("browser:reload");
108 |         }
109 | 
110 |         logger.info(msg);
111 | 
112 |         enabled = data.active;
113 |     });
114 | 
115 |     /**
116 |      * File changed event
117 |      */
118 |     bs.events.on("file:changed", fileChangedEvent);
119 | 
120 |     /**
121 |      * Internal event
122 |      */
123 |     emitter.on(config.PLUGIN_EVENT, pluginEvent);
124 | 
125 |     /**
126 |      * Socket Connection event
127 |      */
128 |     clients.on("connection", handleSocketConnection);
129 | 
130 |     /**
131 |      * Catch the above ^
132 |      */
133 |     function handleSocketConnection (client) {
134 |         client.on("client:url", handleUrlEvent);
135 |     }
136 | 
137 |     function getRequestOptions(url) {
138 |         return {
139 |             url: url,
140 |             headers: {
141 |                 "Accept": "text/html"
142 |             }
143 |         }
144 |     }
145 | 
146 |     /**
147 |      * @param data
148 |      */
149 |     function handleUrlEvent (data) {
150 | 
151 |         if (!enabled) {
152 | 
153 |             return;
154 |         }
155 | 
156 |         request(getRequestOptions(data.url), function (error, response, body) {
157 | 
158 |             logger.debug("Stashing: {magenta:%s", data.url);
159 | 
160 |             if (!error && response.statusCode == 200) {
161 |                 htmlInjector.cache[data.url] = createDom(body);
162 |             }
163 |         });
164 |     }
165 | 
166 |     function fileChangedEvent (data) {
167 | 
168 |         if (!_.isUndefined(data.event) && data.event !== "change") {
169 |             return;
170 |         }
171 | 
172 |         if (!enabled) {
173 | 
174 |             if (opts.handoff && data._origin !== config.PLUGIN_NAME) {
175 |                 data.namespace = "core";
176 |                 data._origin = config.PLUGIN_NAME;
177 |                 bs.events.emit("file:changed", data);
178 |             }
179 | 
180 |             return;
181 |         }
182 | 
183 |         if (data.namespace !== config.PLUGIN_NAME) {
184 |             debug('Ignoring file change to ', data.path);
185 |             return;
186 |         }
187 | 
188 |         debug('Responding to file change event', data.namespace);
189 | 
190 |         requestNew(opts);
191 |     }
192 | 
193 |     function pluginEvent () {
194 | 
195 |         if (!htmlInjector.hasCached()) {
196 |             return;
197 |         }
198 | 
199 |         doNewRequest();
200 |     }
201 | 
202 |     function doNewRequest() {
203 | 
204 |         if (!enabled || !htmlInjector.hasCached()) {
205 |             return;
206 |         }
207 | 
208 |         logger.debug("Getting new HTML from: {magenta:%s} urls", Object.keys(htmlInjector.cache).length);
209 | 
210 |         requestNew(opts);
211 |     }
212 |     /**
213 |      * Request new version of Dom
214 |      * @param {String} url
215 |      * @param {Object} opts - plugin options
216 |      */
217 |     function requestNew (opts) {
218 | 
219 |         // Remove any
220 |         var sockets = bs.io.of(bs.options.getIn(["socket", "namespace"])).sockets;
221 |         var valid = Object.keys(sockets).map(function (key) {
222 |             return sockets[key].handshake.headers.referer;
223 |         });
224 | 
225 |         logger.debug("Cache items: {yellow:%s", Object.keys(htmlInjector.cache).length);
226 | 
227 |         Object.keys(htmlInjector.cache).forEach(function (url) {
228 | 
229 |             if (valid.indexOf(url) === -1) {
230 |                 delete htmlInjector.cache[url];
231 |                 return;
232 |             }
233 | 
234 |             debug("requesting %s", url);
235 | 
236 |             request(getRequestOptions(url), function (error, response, body) {
237 | 
238 |                 if (!error && response.statusCode == 200) {
239 | 
240 |                     var tasks = htmlInjector.process(body, htmlInjector.cache[url], url, opts);
241 | 
242 |                     if (tasks.length) {
243 |                         debug("%s tasks returned", tasks.length);
244 |                         tasks.forEach(function (task) {
245 |                             debug("Task: TAG: %s, INDEX: %s", task.tagName, task.index);
246 |                             clients.emit(config.CLIENT_EVENT, task);
247 |                         });
248 |                     } else {
249 |                         debug("0 tasks returned, reloading instead");
250 |                         clients.emit("browser:reload");
251 |                     }
252 |                 }
253 |             });
254 |         });
255 |     }
256 | };
257 | 
258 | /**
259 |  * Client JS hook
260 |  * @returns {String}
261 |  */
262 | module.exports.hooks = {
263 |     "client:js": require("fs").readFileSync(__dirname + "/client.js", "utf-8")
264 | };
265 | 
266 | /**
267 |  * Plugin name.
268 |  * @type {string}
269 |  */
270 | module.exports["plugin:name"] = config.PLUGIN_NAME;
271 | 
272 | 


--------------------------------------------------------------------------------
/lib/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     PLUGIN_NAME:  "HTML Injector",
3 |     PLUGIN_EVENT: "plugin:html:inject",
4 |     CLIENT_EVENT: "html:inject"
5 | }


--------------------------------------------------------------------------------
/lib/default-config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @module bs-html-injector.options
 3 |  * Default configuration. Everything here can be overridden
 4 |  */
 5 | module.exports = {
 6 |     /**
 7 |      *
 8 |      * Define which tags are ignored by default.
 9 |      *
10 |      * @property excludedTags
11 |      * @type Array
12 |      * @default ["HTML", "HEAD"]
13 |      */
14 |     excludedTags: ["HTML", "HEAD"],
15 |     /**
16 |      * Log Level (inherits from browserSync initially, but can be overridden)
17 |      */
18 |     logLevel: undefined,
19 |     /**
20 |      * Handoff - when plugin is disabled, should the file-watching be handed
21 |      * off to core?
22 |      */
23 |     handoff: true,
24 |     /**
25 |      * Narrow down the working target
26 |      */
27 |     restrictions: []
28 | };


--------------------------------------------------------------------------------
/lib/html-injector.js:
--------------------------------------------------------------------------------
  1 | var defaults     = require("./default-config");
  2 | var _            = require("../lodash.custom");
  3 | var compareDoms  = require("./injector").compareDoms;
  4 | var createDom    = require("./injector").createDom;
  5 | var utils        = require("./utils");
  6 | 
  7 | /**
  8 |  * @param opts
  9 |  * @constructor
 10 |  */
 11 | var HtmlInjector = function (opts) {
 12 | 
 13 |     var html = this;
 14 | 
 15 |     if (!(html instanceof HtmlInjector)) {
 16 |         return new HtmlInjector(opts);
 17 |     }
 18 | 
 19 |     html.opts = _.assign({}, defaults, opts);
 20 |     html.cache = {};
 21 |     html.emitCount = 0;
 22 | 
 23 |     if (_.isUndefined(html.opts.enabled)) {
 24 |         html.opts.enabled = true;
 25 |     }
 26 | 
 27 |     /**
 28 |      * @returns {Number}
 29 |      */
 30 |     html.hasCached = function () {
 31 |         return Object.keys(html.cache).length;
 32 |     };
 33 | 
 34 |     return html;
 35 | };
 36 | 
 37 | module.exports = HtmlInjector;
 38 | 
 39 | /**
 40 |  * Collate tasks
 41 |  * @param parent
 42 |  * @param diffs
 43 |  * @param restrictions
 44 |  * @param currentUrl
 45 |  */
 46 | HtmlInjector.prototype.getTasks = function (parent, diffs, restrictions, currentUrl) {
 47 | 
 48 |     var tasks = [];
 49 | 
 50 |     diffs.forEach(function (item) {
 51 | 
 52 |         item.diff.type = item.diff.type || "node";
 53 | 
 54 |         var element = getElement(parent, item);
 55 | 
 56 |         if (element && element.domNode) {
 57 | 
 58 |             if (item.diff.type) {
 59 | 
 60 |                 var obj = {
 61 |                     tagName:  item.tagName,
 62 |                     index:    item.index,
 63 |                     cssText:  element.domNode.style.cssText,
 64 |                     attrs:    element.attrs,
 65 |                     diff:     item.diff,
 66 |                     url:      currentUrl,
 67 |                     restrictions: restrictions
 68 |                 };
 69 | 
 70 |                 switch (item.diff.type) {
 71 | 
 72 |                     case 'attribute':
 73 |                         // no-op, use default obj
 74 |                         break;
 75 | 
 76 |                     default:
 77 |                         obj.html = element.domNode.innerHTML;
 78 |                         break;
 79 |                 }
 80 | 
 81 |                 tasks.push(obj);
 82 |             }
 83 |         }
 84 |     });
 85 | 
 86 |     if (tasks.length) {
 87 |         return tasks;
 88 |     }
 89 | 
 90 |     return [];
 91 | };
 92 | 
 93 | /**
 94 |  * @param item1
 95 |  * @param item2
 96 |  * @param url
 97 |  * @param opts
 98 |  */
 99 | HtmlInjector.prototype.process = function (item1, item2, url, opts) {
100 | 
101 |     var html    = this;
102 |     var results = html.getDiffs(item1, item2, opts);
103 |     var out     = [];
104 | 
105 |     if (results.length) {
106 |         results.forEach(function (result) {
107 |             out = out.concat(html.getTasks(result.parent, result.diffs, result.restriction, url));
108 |         });
109 |         html.cache[url] = createDom(item1);
110 |     }
111 | 
112 |     return out;
113 | };
114 | 
115 | /**
116 |  * @param {string|object} item1
117 |  * @param {string|object} item2
118 |  * @param opts
119 |  * @returns {*}
120 |  */
121 | HtmlInjector.prototype.getDiffs = function (item1, item2, opts) {
122 |     /**
123 |      * @param newDom
124 |      * @param item2
125 |      * @param [opts]
126 |      * @returns {*}
127 |      */
128 | 
129 |     opts = opts || {};
130 | 
131 |     if (_.isString(item2)) {
132 |         item2 = createDom(item2);
133 |     }
134 | 
135 |     var newDom  = createDom(item1);
136 |     var results = compareDoms(item2, newDom, opts);
137 | 
138 |     if (results.length) {
139 |         results = results.map(function (result) {
140 |             result.diffs = utils.removeDupes(result.diffs);
141 |             result.diffs = utils.removeExcluded(result.diffs, opts.excludedTags);
142 |             return result;
143 |         });
144 |     }
145 | 
146 |     return results;
147 | };
148 | 
149 | module.exports.getDiffs = HtmlInjector.prototype.getDiffs;
150 | 
151 | /**
152 |  * Get a dom node + attrs
153 |  * @param parent
154 |  * @param item
155 |  * @returns {{domNode: *, attrs: {}}}
156 |  */
157 | function getElement(parent, item) {
158 | 
159 |     var element = parent.getElementsByTagName(item.tagName)[item.index];
160 |     var elemAttrs = {};
161 | 
162 |     for (var attr, i = 0, attrs = element.attributes, l = attrs.length; i < l; i++) {
163 |         attr = attrs.item(i);
164 |         elemAttrs[attr.nodeName] = attr.nodeValue;
165 |     }
166 | 
167 |     return {
168 |         domNode: element,
169 |         attrs:   elemAttrs
170 |     }
171 | }
172 | 


--------------------------------------------------------------------------------
/lib/injector.js:
--------------------------------------------------------------------------------
 1 | require("jsdom").defaultDocumentFeatures = {
 2 |     FetchExternalResources: false,
 3 |     ProcessExternalResources: false
 4 | };
 5 | 
 6 | var jsdom        = require("jsdom").jsdom;
 7 | var compare      = require('dom-compare-temp').compare;
 8 | var debug        = require('debug')('bs-html-injector');
 9 | 
10 | /**
11 |  * Compare two DOMS & return diffs
12 |  * @param {Object} newDom
13 |  * @param {Object} oldDom
14 |  * @param opts
15 |  * @returns {Object}
16 |  */
17 | function compareDoms(oldDom, newDom, opts) {
18 | 
19 |     opts = opts || {};
20 |     opts.restrictions = opts.restrictions || [];
21 | 
22 |     var diffs = [];
23 | 
24 |     if (!oldDom || !newDom) {
25 |         return diffs;
26 |     }
27 | 
28 |     if (opts.restrictions.length) {
29 |         opts.restrictions.forEach(function (restriction) {
30 |             getResults(restriction);
31 |         });
32 |     } else {
33 |         getResults("html");
34 |     }
35 | 
36 |     function getResults (restriction) {
37 |         var dom1, dom2, node;
38 | 
39 |         if (restriction !== "html") {
40 |             var match1 = oldDom.querySelectorAll(restriction);
41 |             var match2 = newDom.querySelectorAll(restriction);
42 |             if (match1.length && match2.length) {
43 | 
44 |                 dom1 = createDom(match1[0].innerHTML);
45 |                 dom2 = createDom(match2[0].innerHTML);
46 |             } else {
47 |                 debug("Selector %s not found", restriction);
48 |             }
49 |         } else {
50 |             dom1 = oldDom;
51 |             dom2 = newDom;
52 |         }
53 | 
54 |         if (!dom1 || !dom2) {
55 |             debug("2 doms not found");
56 |             return;
57 |         }
58 | 
59 |         var result = compare(dom1, dom2, {
60 |             formatFailure: function (failure, domNode) {
61 |                 node = domNode;
62 |                 var allElems    = domNode.ownerDocument.getElementsByTagName(domNode.nodeName);
63 |                 failure.index   = Array.prototype.indexOf.call(allElems, domNode);
64 |                 failure.tagName = domNode.nodeName;
65 |                 return failure;
66 |             }
67 |         });
68 | 
69 |         var same = result.getResult(); // false cause' trees are different
70 | 
71 |         if (!same) {
72 |             diffs.push({
73 |                 restriction: restriction,
74 |                 diffs:    result.getDifferences(),
75 |                 parent:   dom2
76 |             });
77 |         }
78 |     }
79 | 
80 |     return diffs;
81 | }
82 | 
83 | module.exports.compareDoms = compareDoms;
84 | 
85 | /**
86 |  * @param string
87 |  * @returns {*}
88 |  */
89 | function createDom(string) {
90 |     return jsdom(string);
91 | }
92 | 
93 | module.exports.createDom = createDom;


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
 1 | var _ = require("../lodash.custom");
 2 | 
 3 | module.exports = {
 4 |     /**
 5 |      * @param {Array} differences
 6 |      * @returns {Array}
 7 |      */
 8 |     removeDupes: function(differences) {
 9 |         return _.uniqBy(differences, "node");
10 |     },
11 | 
12 |     /**
13 |      * @param diffs
14 |      * @param excludeList
15 |      * @returns {*}
16 |      */
17 |     removeExcluded: function (diffs, excludeList) {
18 |         return _.filter(diffs, function (item) {
19 |             return !_.includes(excludeList, item.tagName);
20 |         });
21 |     }
22 | };
23 | 
24 | /**
25 |  * Not currently used... needs work.
26 |  * @param {Array} differences
27 |  * @returns {Array}
28 |  */
29 | function removeChildren(differences) {
30 | 
31 |     differences.reverse();
32 | 
33 |     var parents = [];
34 | 
35 |     differences.forEach(function (item, index) {
36 | 
37 |         var path = item.node;
38 | 
39 |         if (index === 0) {
40 |             return parents.push(item);
41 |         }
42 | 
43 |         parents.forEach(function (parentItem) {
44 |             if (!_.includes(path, parentItem.node)) {
45 |                 return parents.push(item);
46 |             }
47 |         });
48 |     });
49 | 
50 |     return parents;
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bs-html-injector",
 3 |   "version": "3.0.3",
 4 |   "description": "Inject only HTML that has changed.",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git://github.com/shakyshane/html-injector.git"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/shakyshane/html-injector/issues"
12 |   },
13 |   "scripts": {
14 |     "test": "mocha --reporter spec",
15 |     "lodash": "lodash include=isUndefined,isString,isArray,filter,assign,includes,uniqBy,uniq,without exports=node"
16 |   },
17 |   "files": [
18 |     "lib",
19 |     "lodash.custom.js",
20 |     "ui",
21 |     "index.js",
22 |     "client.js"
23 |   ],
24 |   "author": "",
25 |   "license": "MIT",
26 |   "devDependencies": {
27 |     "browser-sync": "2.12.12",
28 |     "chai": "^3.3.0",
29 |     "lodash-cli": "4.13.1",
30 |     "mocha": "^2.3.3",
31 |     "multiline": "^1.0.2",
32 |     "socket.io-client": "^1.1.0"
33 |   },
34 |   "dependencies": {
35 |     "debug": "^2.1.3",
36 |     "dom-compare-temp": "^0.1.0",
37 |     "jsdom": "^6.5.1",
38 |     "request": "^2.40.0"
39 |   },
40 |   "keywords": [
41 |     "browser sync plugin",
42 |     "html injection"
43 |   ],
44 |   "browser-sync:ui": {
45 |     "hooks": {
46 |       "markup": "ui/html-injector.html",
47 |       "templates": [
48 |         "ui/html-injector.directive.html"
49 |       ],
50 |       "client:js": [
51 |         "ui/client.js"
52 |       ]
53 |     }
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | ### HTML Injector [![Build Status](https://travis-ci.org/shakyShane/html-injector.svg?branch=master)](https://travis-ci.org/shakyShane/html-injector)
  2 | [Browsersync](http://www.browsersync.io/) plugin for injecting HTML changes without reloading the browser. Requires an existing page with a `<body>` tag.
  3 | 
  4 | ## Install (Node V4.0.0 & above)
  5 | 
  6 | ```bash
  7 | $ npm i browser-sync bs-html-injector
  8 | ```
  9 | 
 10 | ## Install (Node V0.10.x 0.12.x)
 11 | 
 12 | ```bash
 13 | $ npm i browser-sync bs-html-injector@2
 14 | ```
 15 | 
 16 | ## Examples & Recipes including html-injection
 17 | * [Examples folder](https://github.com/shakyShane/html-injector/tree/master/examples)
 18 | * [HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/html.injection)
 19 | * [Grunt, SASS, HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/grunt.html.injection)
 20 | 
 21 | ## Options
 22 | 
 23 | **files** - String|Array
 24 | File watching patterns that will trigger the injection. NOTE: Ensure you are 
 25 | not also watching the same file through the regular Browsersync
 26 | config - this will cause a full reload and the inject will not happen
 27 | 
 28 | ```js
 29 | browserSync.use(require("bs-html-injector"), {
 30 |     files: ["app/*.html", "app/templates/**"]
 31 | });
 32 | ```
 33 | 
 34 | **restrictions** - Array
 35 | Limit the comparisons to a certain elements.
 36 | 
 37 | ```js
 38 | browserSync.use(require("bs-html-injector"), {
 39 |     files: "app/*.html",
 40 |     restrictions: ['#header', '#footer']
 41 | });
 42 | ```
 43 | 
 44 | **excludedTags** - Array
 45 | When working from scratch within the `body` tag, the plugin will work just fine. But when you start
 46 | working with nested elements, you might want to add the following configuration to improve the 
 47 | injecting.
 48 | 
 49 | ```js
 50 | browserSync.use(require("bs-html-injector"), {
 51 |     files: "app/*.html",
 52 |     excludedTags: ["BODY"]
 53 | });
 54 | ```
 55 | 
 56 | 
 57 | ### Example
 58 | Create a file called `bs.js` and enter the following: (update the paths to match yours)
 59 | 
 60 | ```js
 61 | // requires version 2.0 of Browsersync or higher.
 62 | var browserSync  = require("browser-sync").create();
 63 | var htmlInjector = require("bs-html-injector");
 64 | 
 65 | // register the plugin
 66 | browserSync.use(htmlInjector, {
 67 |     // Files to watch that will trigger the injection
 68 |     files: "app/*.html" 
 69 | });
 70 | 
 71 | // now run Browsersync, watching CSS files as normal
 72 | browserSync.init({
 73 |   files: "app/styles/*.css"
 74 | });
 75 | ```
 76 | 
 77 | ### Gulp example
 78 | 
 79 | ```js
 80 | var gulp         = require("gulp");
 81 | var browserSync  = require("browser-sync").create();
 82 | var htmlInjector = require("bs-html-injector");
 83 | 
 84 | /**
 85 |  * Start Browsersync
 86 |  */
 87 | gulp.task("browser-sync", function () {
 88 |     browserSync.use(htmlInjector, {
 89 |         files: "app/*.html"
 90 |     });
 91 |     browserSync.init({
 92 |         server: "test/fixtures"
 93 |     });
 94 | });
 95 | 
 96 | /**
 97 |  * Default task
 98 |  */
 99 | gulp.task("default", ["browser-sync"], function () {
100 |     gulp.watch("test/fixtures/*.html", htmlInjector);
101 | });
102 | ```
103 | 
104 | ### Grunt example
105 | ```js
106 | // This shows a full config file!
107 | module.exports = function (grunt) {
108 |     grunt.initConfig({
109 |         watch: {
110 |             files: 'app/scss/**/*.scss',
111 |             tasks: ['bsReload:css']
112 |         },
113 |         sass: {
114 |             dev: {
115 |                 files: {
116 |                     'app/css/main.css': 'app/scss/main.scss'
117 |                 }
118 |             }
119 |         },
120 |         browserSync: {
121 |             dev: {
122 |                 options: {
123 |                     watchTask: true,
124 |                     server: './app',
125 |                     plugins: [
126 |                         {
127 |                             module: "bs-html-injector",
128 |                             options: {
129 |                                 files: "./app/*.html"
130 |                             }
131 |                         }
132 |                     ]
133 |                 }
134 |             }
135 |         },
136 |         bsReload: {
137 |             css: "main.css"
138 |         }
139 |     });
140 | 
141 |     // load npm tasks
142 |     grunt.loadNpmTasks('grunt-contrib-sass');
143 |     grunt.loadNpmTasks('grunt-contrib-watch');
144 |     grunt.loadNpmTasks('grunt-browser-sync');
145 | 
146 |     // define default task
147 |     grunt.registerTask('default', ['browserSync', 'watch']);
148 | };
149 | ```
150 | 


--------------------------------------------------------------------------------
/test/compare.doms.js:
--------------------------------------------------------------------------------
  1 | var createDom     = require("../lib/injector").createDom;
  2 | var assert        = require("chai").assert;
  3 | var HtmlInjector  = require("../lib/html-injector");
  4 | var multiline     = require("multiline");
  5 | 
  6 | describe("Comparing Simple doms", function(){
  7 | 
  8 |     it("returns element index when it has different children", function(){
  9 | 
 10 |         var str1 = multiline.stripIndent(function(){/*
 11 |          <!doctype html>
 12 |          <html>
 13 |              <body>
 14 |                 <h1>❤ unicorns</h1>
 15 |              </body>
 16 |          </html>
 17 |          */});
 18 |         var str2 = multiline.stripIndent(function(){/*
 19 |          <!doctype html>
 20 |          <html>
 21 |              <body>
 22 |                 <h1><span>❤</span> unicorns</h1>
 23 |              </body>
 24 |          </html>
 25 |          */});
 26 | 
 27 |         var oldDom = createDom(str1);
 28 |         var results = HtmlInjector().process(str2, oldDom);
 29 | 
 30 |         assert.equal(results.length, 1);
 31 |         assert.equal(results[0].restrictions, "html");
 32 |         assert.equal(results[0].tagName, "H1");
 33 |         assert.equal(results[0].index, "0");
 34 |     });
 35 | 
 36 |     it("returns element index when it has missing children", function(){
 37 | 
 38 |         var str1 = multiline.stripIndent(function(){/*
 39 |          <!doctype html>
 40 |          <html>
 41 |              <body>
 42 |              </body>
 43 |          </html>
 44 |          */});
 45 |         var str2 = multiline.stripIndent(function(){/*
 46 |          <!doctype html>
 47 |          <html>
 48 |              <body>
 49 |                 <h1><span>❤</span> unicorns</h1>
 50 |              </body>
 51 |          </html>
 52 |          */});
 53 | 
 54 |         var oldDom = createDom(str1);
 55 |         var results = HtmlInjector().process(str2, oldDom);
 56 | 
 57 |         assert.equal(results.length, 1);
 58 |         assert.equal(results[0].restrictions, "html");
 59 |         assert.equal(results[0].tagName, "BODY");
 60 |         assert.equal(results[0].index, "0");
 61 |     });
 62 | 
 63 |     it("Removes duplicate diffs if on same element", function(){
 64 | 
 65 |         var str1 = multiline.stripIndent(function(){/*
 66 |          <!doctype html>
 67 |          <html>
 68 |              <body>
 69 |                 <h1><span>❤s</span> unicorns <i>What you saying?</i></h1>
 70 |              </body>
 71 |          </html>
 72 |          */});
 73 |         var str2 = multiline.stripIndent(function(){/*
 74 |          <!doctype html>
 75 |          <html>
 76 |              <body>
 77 |                 <h1><span>❤</span> unicorns</h1>
 78 |              </body>
 79 |          </html>
 80 |          */});
 81 | 
 82 |         var oldDom = createDom(str1);
 83 |         var results = HtmlInjector().process(str2, oldDom);
 84 | 
 85 |         assert.equal(results.length, 2);
 86 |         assert.equal(results[0].tagName, "SPAN");
 87 |         assert.equal(results[1].tagName, "H1");
 88 |     });
 89 | 
 90 |     it("Removes duplicate diffs if on same element (2)", function(){
 91 | 
 92 |         var str1 = multiline.stripIndent(function(){/*
 93 |             <!doctype html>
 94 |             <html lang="en-US">
 95 |             <head>
 96 |                 <meta charset="UTF-8">
 97 |                 <title>This has a Title</title>
 98 |             </head>
 99 |             <body>
100 |                 <h1>HTML injector</h1>
101 |                 <h1 class="hidden" style="background: red;">HTML injector is prettty cool</h1>
102 |             </body>
103 |             </html>
104 |          */});
105 |         var str2 = multiline.stripIndent(function(){/*
106 |             <!doctype html>
107 |             <html lang="en-US">
108 |             <head>
109 |                 <meta charset="UTF-8">
110 |                 <title>This has a Title</title>
111 |                 <style>
112 |                     .hidden {}
113 |                 </style>
114 |                 <link href="style.css"></link>
115 |             </head>
116 |             <body>
117 |                 <h1>HTML injector</h1>
118 |                 <h1 class="hidden" style="background: red;">HTML injector is prettty cool</h1>
119 |             </body>
120 |             </html>
121 |          */});
122 | 
123 |         var oldDom = createDom(str1);
124 |         var results = HtmlInjector().process(str2, oldDom);
125 | 
126 |         assert.equal(results.length, 1);
127 |         assert.equal(results[0].tagName, "HEAD");
128 |     });
129 |     it("Returns diffs from mulitple elements", function(){
130 | 
131 |         var str1 = multiline.stripIndent(function(){/*
132 |             <!doctype html>
133 |             <html lang="en-US">
134 |             <head>
135 |                 <meta charset="UTF-8">
136 |                 <title>This has a Title</title>
137 |             </head>
138 |             <body>
139 |                 <h1>HTML injector</h1>
140 |                 <h1 class="hidden" style="background: red;">HTML injector is prettty cool</h1>
141 |             </body>
142 |             </html>
143 |          */});
144 |         var str2 = multiline.stripIndent(function(){/*
145 |             <!doctype html>
146 |             <html lang="en-US">
147 |             <head>
148 |                 <meta charset="UTF-8">
149 |                 <title>This has a Title</title>
150 |                 <style>
151 |                     .hidden {}
152 |                 </style>
153 |                 <link href="style.css"></link>
154 |             </head>
155 |             <body>
156 |                 <h1>HTML injector</h1>
157 |                 <h1 class="hidden" style="background: red;">HTML injector is prettty coolsss</h1>
158 |             </body>
159 |             </html>
160 |          */});
161 | 
162 |         var oldDom = createDom(str1);
163 |         var results = HtmlInjector().process(str2, oldDom);
164 | 
165 |         assert.equal(results.length, 2);
166 |         assert.equal(results[0].tagName, "HEAD");
167 |         assert.equal(results[1].tagName, "H1");
168 |     });
169 | });
170 | 
171 | describe("Removing excluded", function(){
172 | 
173 |     it("returns a filtered list", function(){
174 | 
175 |         var str1 = multiline.stripIndent(function(){/*
176 |          <!doctype html>
177 |          <html>
178 |          <body>
179 |          <h1>❤ unicornsss</h1>
180 |          <h2><span>HATE</span> unicornsss</h2>
181 |          <h3>Hi there</h3>
182 |          </body>
183 |          </html>
184 |          */});
185 |         var str2 = multiline.stripIndent(function(){/*
186 |          <!doctype html>
187 |          <html>
188 |          <body>
189 |          <h1>❤ unicornsss</h1>
190 |          <h2><span>HATE</span> unicornsssas</h2>
191 |          <h3 class="hidden">Hi there</h3>
192 |          </body>
193 |          </html>
194 |          */});
195 | 
196 |         var oldDom = createDom(str1);
197 |         var results = HtmlInjector().process(str2, oldDom, null, {excludedTags: ["H1", "H3"]});
198 | 
199 | 
200 |         assert.equal(results.length, 1);
201 | 
202 |         assert.equal(results[0].restrictions, "html");
203 |         assert.equal(results[0].index, 0); // should ignore outer H3
204 |         assert.equal(results[0].tagName, "H2");
205 |     });
206 | });
207 | 


--------------------------------------------------------------------------------
/test/compare.restrict.js:
--------------------------------------------------------------------------------
 1 | var createDom     = require("../lib/injector").createDom;
 2 | var HtmlInjector  = require("../lib/html-injector");
 3 | var assert        = require("chai").assert;
 4 | var multiline     = require("multiline");
 5 | 
 6 | describe("Comparing doms with restricted selector", function () {
 7 | 
 8 |     var html1, html2;
 9 | 
10 |     before(function () {
11 |         html1 = multiline.stripIndent(function(){/*
12 |          <h3>NO</h3>
13 |          <div id="shane">
14 |          <h1>❤ unicornsss</h1>
15 |          <h2><span>HATE</span> unicornsssas</h2>
16 |          <h3 class="hiddenz">Hi there</h3>
17 |          </div>
18 |          */});
19 | 
20 |         html2 = multiline.stripIndent(function(){/*
21 |          <h3>NO</h3>
22 |          <div id="shane">
23 |          <h1>❤ unicornsss</h1>
24 |          <h2><span>HATE</span> unicornsssas</h2>
25 |          <h3 class="hidden">Hi there</h3>
26 |          </div>
27 |          */});
28 |     });
29 | 
30 |     it("should compare correctly when no restriction given", function (done) {
31 | 
32 |         var oldDom = createDom(html1);
33 |         var results = HtmlInjector().process(html2, oldDom);
34 |         assert.equal(results.length, 1);
35 |         assert.equal(results[0].restrictions, "html");
36 |         assert.equal(results[0].index, 1);
37 |         assert.equal(results[0].tagName, "H3");
38 |         done();
39 |     });
40 | 
41 |     it("should compare correctly when `id` selector given", function (done) {
42 | 
43 |         var oldDom = createDom(html1);
44 |         var results = HtmlInjector().process(html2, oldDom, null, {restrictions: ["#shane"]});
45 | 
46 |         assert.equal(results.length, 1);
47 |         assert.equal(results[0].restrictions, "#shane");
48 |         assert.equal(results[0].index, 0); // should ignore outer H3
49 |         assert.equal(results[0].tagName, "H3");
50 | 
51 |         done();
52 |     });
53 | });
54 | 


--------------------------------------------------------------------------------
/test/fixtures/css/blog.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Globals
  3 |  */
  4 | 
  5 | body {
  6 |   font-family: Georgia, "Times New Roman", Times, serif;
  7 |   color: #555;
  8 | }
  9 | 
 10 | h1, .h1,
 11 | h2, .h2,
 12 | h3, .h3,
 13 | h4, .h4,
 14 | h5, .h5,
 15 | h6, .h6 {
 16 |   margin-top: 0;
 17 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 18 |   font-weight: normal;
 19 |   color: #333;
 20 | }
 21 | 
 22 | 
 23 | /*
 24 |  * Override Bootstrap's default container.
 25 |  */
 26 | 
 27 | @media (min-width: 1200px) {
 28 |   .container {
 29 |     width: 970px;
 30 |   }
 31 | }
 32 | 
 33 | /*
 34 |  * Masthead for nav
 35 |  */
 36 | 
 37 | .blog-masthead {
 38 |   background-color: #428bca;
 39 |   -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
 40 |           box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
 41 | }
 42 | 
 43 | /* Nav links */
 44 | .blog-nav-item {
 45 |   position: relative;
 46 |   display: inline-block;
 47 |   padding: 10px;
 48 |   font-weight: 500;
 49 |   color: #cdddeb;
 50 | }
 51 | .blog-nav-item:hover,
 52 | .blog-nav-item:focus {
 53 |   color: #fff;
 54 |   text-decoration: none;
 55 | }
 56 | 
 57 | /* Active state gets a caret at the bottom */
 58 | .blog-nav .active {
 59 |   color: #fff;
 60 | }
 61 | .blog-nav .active:after {
 62 |   position: absolute;
 63 |   bottom: 0;
 64 |   left: 50%;
 65 |   width: 0;
 66 |   height: 0;
 67 |   margin-left: -5px;
 68 |   vertical-align: middle;
 69 |   content: " ";
 70 |   border-right: 5px solid transparent;
 71 |   border-bottom: 5px solid;
 72 |   border-left: 5px solid transparent;
 73 | }
 74 | 
 75 | 
 76 | /*
 77 |  * Blog name and description
 78 |  */
 79 | 
 80 | .blog-header {
 81 |   padding-top: 20px;
 82 |   padding-bottom: 20px;
 83 | }
 84 | .blog-title {
 85 |   margin-top: 30px;
 86 |   margin-bottom: 0;
 87 |   font-size: 30px;
 88 |   font-weight: normal;
 89 | }
 90 | .blog-description {
 91 |   font-size: 20px;
 92 |   color: #999;
 93 | }
 94 | 
 95 | 
 96 | /*
 97 |  * Main column and sidebar layout
 98 |  */
 99 | 
100 | .blog-main {
101 |   font-size: 18px;
102 |   line-height: 1.5;
103 | }
104 | 
105 | /* Sidebar modules for boxing content */
106 | .sidebar-module {
107 |   padding: 15px;
108 |   margin: 0 -15px 15px;
109 | }
110 | .sidebar-module-inset {
111 |   padding: 15px;
112 |   background-color: #f5f5f5;
113 |   border-radius: 4px;
114 | }
115 | .sidebar-module-inset p:last-child,
116 | .sidebar-module-inset ul:last-child,
117 | .sidebar-module-inset ol:last-child {
118 |   margin-bottom: 0;
119 | }
120 | 
121 | 
122 | /* Pagination */
123 | .pager {
124 |   margin-bottom: 60px;
125 |   text-align: left;
126 | }
127 | .pager > li > a {
128 |   width: 140px;
129 |   padding: 10px 20px;
130 |   text-align: center;
131 |   border-radius: 30px;
132 | }
133 | 
134 | 
135 | /*
136 |  * Blog posts
137 |  */
138 | 
139 | .blog-post {
140 |   margin-bottom: 60px;
141 | }
142 | .blog-post-title {
143 |   margin-bottom: 5px;
144 |   font-size: 40px;
145 | }
146 | .blog-post-meta {
147 |   margin-bottom: 20px;
148 |   color: #999;
149 | }
150 | 
151 | 
152 | /*
153 |  * Footer
154 |  */
155 | 
156 | .blog-footer {
157 |   padding: 40px 0;
158 |   color: #999;
159 |   text-align: center;
160 |   background-color: #f9f9f9;
161 |   border-top: 1px solid #e5e5e5;
162 | }
163 | .blog-footer p:last-child {
164 |   margin-bottom: 0;
165 | }
166 | 


--------------------------------------------------------------------------------
/test/fixtures/dom1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <meta charset="UTF-8" />
 5 |     <title></title>
 6 | </head>
 7 | <body>
 8 | <div>shane</div>
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/test/fixtures/dom2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 | </head>
 7 | <body>
 8 | shane
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/test/fixtures/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8 |     <meta name="description" content="">
  9 |     <meta name="author" content="">
 10 | 
 11 |     <title>Blog Template for Bootstrap</title>
 12 | 
 13 |     <!-- Bootstrap core CSS -->
 14 |     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 15 | 
 16 |     <!-- Custom styles for this template -->
 17 |     <link href="css/blog.css" rel="stylesheet">
 18 | 
 19 | </head>
 20 | 
 21 | <body>
 22 | 
 23 | <div class="blog-masthead">
 24 |     <div class="container">
 25 |         <nav class="blog-nav">
 26 |             <a class="blog-nav-item" href="#">Home</a>
 27 |             <a class="blog-nav-item" href="#">Hosme</a>
 28 |             <a class="blog-nav-item active" href="#">Really</a>
 29 |             <a class="blog-nav-item active" href="#">as</a>
 30 |             <a class="blog-nav-item" href="#">Home</a>
 31 |             <a class="blog-nav-item" href="#">Homesasas</a>
 32 |         </nav>
 33 |     </div>
 34 | </div>
 35 | 
 36 | <div class="container">
 37 | 
 38 |     <div class="blog-header" id="haderz">
 39 |         <h1 class="blog-title">The BrowserSync</h1>
 40 |         <p class="lead blog-description">The official example template of creating a blog with BrowserSync + Bootstrap</p>
 41 |     </div>
 42 | 
 43 |     <div class="row">
 44 | 
 45 |         <div class="col-sm-8 blog-main">
 46 | 
 47 |             <div class="blog-post">
 48 |                 <h2 class="blog-post-title">Sample blog post</h2>
 49 |                 <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
 50 |                 <p>This blog post shows a few different types of casontent that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
 51 |                 <hr>
 52 |                 <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
 53 |                 <blockquote>
 54 |                     <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 55 |                 </blockquote>
 56 |                 <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
 57 |                 <h2>Heading</h2>
 58 |                 <p>Vivamasus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
 59 |                 <h3>Sub-heading</h3>
 60 |                 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 61 |                 <pre><code>Example code block</code></pre>
 62 |                 <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
 63 |                 <h3>Sub-heading</h3>
 64 |                 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 65 |                 <ul>
 66 |                     <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
 67 |                     <li>Donec id elit non mi porta gravida at eget metus.</li>
 68 |                     <li>Nulla vitae elit libero, a pharetra augue.</li>
 69 |                 </ul>
 70 |                 <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
 71 |                 <ol>
 72 |                     <li>Vestibulum id ligula porta felis euismod semper.</li>
 73 |                     <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
 74 |                     <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
 75 |                 </ol>
 76 |                 <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
 77 |             </div><!-- /.blog-post -->
 78 | 
 79 |             <div class="blog-post">
 80 |                 <h2 class="blog-post-title">Another blog post</h2>
 81 |                 <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
 82 | 
 83 |                 <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
 84 |                 <blockquote>
 85 |                     <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 86 |                 </blockquote>
 87 |                 <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
 88 |                 <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
 89 |             </div><!-- /.blog-post -->
 90 | 
 91 |             <div class="blog-post">
 92 |                 <h2 class="blog-post-title">New feature</h2>
 93 |                 <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
 94 | 
 95 |                 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 96 |                 <ul>
 97 |                     <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
 98 |                     <li>Donec id elit non mi porta gravida at eget metus.</li>
 99 |                     <li>Nulla vitae elit libero, a pharetra augue.</li>
100 |                 </ul>
101 |                 <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
102 |                 <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
103 |             </div><!-- /.blog-post -->
104 | 
105 |             <nav>
106 |                 <ul class="pager">
107 |                     <li><a href="#">Previous</a></li>
108 |                     <li><a href="#">Next</a></li>
109 |                 </ul>
110 |             </nav>
111 | 
112 |         </div><!-- /.blog-main -->
113 | 
114 |         <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
115 |             <div class="sidebar-module sidebar-module-inset">
116 |                 <h4>About</h4>
117 |                 <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
118 |             </div>
119 |             <div class="sidebar-module">
120 |                 <h4>Archives</h4>
121 |                 <ol class="list-unstyled">
122 |                     <li><a href="#">March 2014</a></li>
123 |                     <li><a href="#">February 2014</a></li>
124 |                     <li><a href="#">January 2014</a></li>
125 |                     <li><a href="#">December 2013</a></li>
126 |                     <li><a href="#">November 2013</a></li>
127 |                     <li><a href="#">October 2013</a></li>
128 |                     <li><a href="#">September 2013</a></li>
129 |                     <li><a href="#">August 2013</a></li>
130 |                     <li><a href="#">July 2013</a></li>
131 |                     <li><a href="#">June 2013</a></li>
132 |                     <li><a href="#">May 2013</a></li>
133 |                     <li><a href="#">April 2013</a></li>
134 |                 </ol>
135 |             </div>
136 |             <div class="sidebar-module">
137 |                 <h4>Elsewhere</h4>
138 |                 <ol class="list-unstyled">
139 |                     <li><a href="#">GitHub</a></li>
140 |                     <li><a href="#">Twitter</a></li>
141 |                     <li><a href="#">Facebook</a></li>
142 |                 </ol>
143 |             </div>
144 |         </div><!-- /.blog-sidebar -->
145 | 
146 |     </div><!-- /.row -->
147 | 
148 | </div><!-- /.container -->
149 | 
150 | <footer class="blog-footer">
151 |     <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
152 |     <p>
153 |         <a href="#">Back to top</a>
154 |     </p>
155 | </footer>
156 | 
157 | </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/test/fixtures/store-product-alt.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <!--[if lt IE 7]>
   3 | <html class="no-js ie ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
   4 | <!--[if IE 7]>
   5 | <html class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
   6 | <!--[if IE 8]>
   7 | <html class="no-js ie ie8 lt-ie10 lt-ie9" lang="en"> <![endif]-->
   8 | <!--[if IE 9]>
   9 | <html class="no-js ie ie9 lt-ie10" lang="en"> <![endif]-->
  10 | <!--[if gt IE 9]><!-->
  11 | <html class="no-js ffly" lang="en"> <!--<![endif]-->
  12 | <head>
  13 |     <title>Product | Swoon Editions</title>
  14 |     <meta name="description" content="">
  15 | 
  16 |     <!-- META -->
  17 |     <meta charset="utf-8"/>
  18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  19 |     <meta name="description" content="">
  20 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21 | 
  22 |     <!-- ICONS -->
  23 |     <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
  24 | 
  25 |     <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7061692/741444/css/fonts.css"/>
  26 | 
  27 |     <!-- CSS Includes -->
  28 |     <link rel="stylesheet" href="/assets/css/core.css"/>
  29 |     <script src="/assets/js/bower_components/modernizr/modernizr.js"></script>
  30 | 
  31 |     <!--[if (lt IE 9) & (!IEMobile)]>
  32 |     <link rel="stylesheet" href="/assets/css/ie.css">
  33 |     <![endif]-->
  34 | </head>
  35 | <body id="top" class="page-product">
  36 | 
  37 | <!-- Page top -->
  38 | <aside class="wrapper page-top desk-only">
  39 |     <div class="container">
  40 | 
  41 |         <ul class="nav pagetop-nav float--right">
  42 |             <li class="flyout--rev">
  43 | 
  44 | 
  45 |                 <a href="#" data-target="signin" class="js-signup">Sign in</a>
  46 | 
  47 | 
  48 |             </li>
  49 |             <li>
  50 |                 <span class="sprite svg-trolley svg-trolley-dims"></span>
  51 |             </li>
  52 |             <li class="flyout--rev">
  53 |                 <a href="#">Your Trolley</a>
  54 | 
  55 |                 <div class="flyout__body sub-nav" id="header-basket">
  56 |                     <!-- Trolley subnav -->
  57 |                     <div class="minibasket basket-subnav">
  58 |                         <p class="basket__header">Your Trolley</p>
  59 |                         <ul class="basket__listing" id="cart-sidebar">
  60 | 
  61 |                             <li class="media basket__item">
  62 |                                 <a class="media__img img" href="">
  63 |                                     <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
  64 |                                 </a>
  65 | 
  66 |                                 <div class="media__body">
  67 |                                     <a class="basket__remove" href="#">
  68 |                                         <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
  69 |                                     </a>
  70 | 
  71 |                                     <p class="title"><a href="">Montpellier</a></p>
  72 | 
  73 |                                     <p class="sub-title">Armchair, charcoal</p>
  74 |                                     <ul class="details">
  75 |                                         <li>Delivery: 1-2 weeks</li>
  76 |                                         <li>Quantity: 1</li>
  77 |                                         <li>Subtotal: £349</li>
  78 |                                     </ul>
  79 |                                 </div>
  80 |                             </li>
  81 |                             <li class="media basket__item">
  82 |                                 <a class="media__img img" href="">
  83 |                                     <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
  84 |                                 </a>
  85 | 
  86 |                                 <div class="media__body">
  87 |                                     <a class="basket__remove" href="#">
  88 |                                         <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
  89 |                                     </a>
  90 | 
  91 |                                     <p class="title"><a href="">Montpellier</a></p>
  92 | 
  93 |                                     <p class="sub-title">Armchair, charcoal</p>
  94 |                                     <ul class="details">
  95 |                                         <li>Delivery: 1-2 weeks</li>
  96 |                                         <li>Quantity: 1</li>
  97 |                                         <li>Subtotal: £349</li>
  98 |                                     </ul>
  99 |                                 </div>
 100 |                             </li>
 101 |                         </ul>
 102 | 
 103 |                         <div class="basket__total">
 104 |                             <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
 105 |                         </div>
 106 | 
 107 |                         <div class="basket__actions">
 108 |                             <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
 109 |                         </div>
 110 |                     </div>
 111 |                 </div>
 112 |             </li>
 113 |             <li>
 114 |                 <span class="badge">2</span>
 115 |             </li>
 116 |         </ul>
 117 |     </div>
 118 | </aside>
 119 | 
 120 | <!-- Header, including NAV + LOGO + Mobile triggers -->
 121 | <header class="wrapper site-header" role="banner">
 122 |     <div class="container nav-container">
 123 | 
 124 |         <!-- Desktop nav is sometimes hidden -->
 125 | 
 126 |         <nav class="main-nav desk-only">
 127 |             <ul class="nav nav--inline main-nav--left">
 128 |                 <li>
 129 |                     <a href="#" class="active hover-toggle" data-target="#js-editions-nav-moved"><span>Our Editions</span></a>
 130 |                 </li>
 131 |                 <li class="extra-spacing">
 132 |                     <a href="#" class="hover-toggle" data-target="#js-story-nav-moved"><span>Our Story</span></a>
 133 |                 </li>
 134 |             </ul>
 135 |             <ul class="nav nav--inline main-nav--right">
 136 |                 <li>
 137 |                     <a href="#signup-popup" data-target="signup" class="js-signup "><span>Become an Insider</span></a>
 138 |                 </li>
 139 |                 <li class="float--right multi-line">
 140 |                     <span class="over">Get in touch</span>
 141 |                     <a href="#signup-popup" data-target="signin" class="no-hover"><span>020 3137 2464</span></a>
 142 |                 </li>
 143 |             </ul>
 144 |         </nav>
 145 |         <!-- Nav trigger, mobile -->
 146 |         <a href="#" class="burger-nav-trigger js-toggle not-desk fast-click" data-target="#header-nav" data-event="nav:open">
 147 |             <span class="sprite svg-burger svg-burger-dims"></span>
 148 |         </a>
 149 | 
 150 |         <!-- Trolley trigger, mobile -->
 151 |         <a href="/" class="account-nav-trigger js-toggle not-desk fast-click" data-target="#mobile-trolley" data-event="trolley:open">
 152 |             <span class="sprite svg-trolley svg-trolley-dims"></span>
 153 |             <span class="badge">2</span>
 154 |         </a>
 155 | 
 156 | 
 157 |         <!-- Logo -->
 158 |         <a href="/" class="site-logo sprite svg-logo-inverted svg-logo-inverted-dims">Swoon Editions</a>
 159 | 
 160 |     </div>
 161 | 
 162 |     <!-- Mobile nav -->
 163 |     <nav class="header-nav animated fadeInDown" id="header-nav">
 164 |         <div class="container">
 165 |             <div class="split-nav">
 166 |                 <a href="#signup-popup" data-target="signup" class="flush js-signup">Become an Insider</a>
 167 |                 <a href="#signup-popup" data-target="signin" class="inset js-signup">Sign In</a>
 168 |             </div>
 169 |             <ul class="main-nav">
 170 |                 <li>
 171 |                     <a href="#" class="has-dropdown active">Our Editions <span class="caret"></span></a>
 172 | 
 173 |                     <div class="sub-nav-wrapper animated fadeInDown active">
 174 |                         <div class="secondary-nav active" id="js-editions-nav">
 175 |                             <ul class="nav nav--inline">
 176 |                                 <li class="flyout"><a href="#"><span>View All</span></a>
 177 | 
 178 |                                     <div class="flyout__body sub-nav two-col-nav">
 179 |                                         <ul>
 180 |                                             <li><p class="nav-heading">By Room:</p></li>
 181 |                                             <li><a href="">Living room</a></li>
 182 |                                             <li><a href="">Dining room</a></li>
 183 |                                             <li><a href="">Bedroom</a></li>
 184 |                                             <li><a href="">Kitchen</a></li>
 185 |                                             <li><a href="">Outdoor</a></li>
 186 |                                         </ul>
 187 |                                         <ul>
 188 |                                             <li><p class="nav-heading">Popular:</p></li>
 189 |                                             <li><a href="">Neutrals</a></li>
 190 |                                             <li><a href="">Accent chairs</a></li>
 191 |                                             <li><a href="">Contemporary</a></li>
 192 |                                             <li><a href="">Shabby chic</a></li>
 193 |                                             <li><a href="">Linen</a></li>
 194 |                                             <li><a href="">Greys</a></li>
 195 |                                             <li><a href="">Retro</a></li>
 196 |                                             <li><a href="">French-style</a></li>
 197 |                                             <li><a href="">Mid-century modern</a></li>
 198 |                                         </ul>
 199 |                                     </div>
 200 |                                 </li>
 201 |                                 <li><a href="#" class="active"><span>Sofas</span></a></li>
 202 |                                 <li class="flyout"><a href="#"><span>Rugs</span></a>
 203 | 
 204 |                                     <div class="flyout__body sub-nav">
 205 |                                         <ul>
 206 |                                             <li><a href="">Armchairs</a></li>
 207 |                                             <li><a href="">Dining chairs</a></li>
 208 |                                             <li><a href="">Accent chairs</a></li>
 209 |                                             <li><a href="">Outdoor chairs</a></li>
 210 |                                             <li><a href="">Ottomans & Footstools</a></li>
 211 |                                             <li><a href="">Stools</a></li>
 212 |                                             <li><a href="">Benches</a></li>
 213 |                                         </ul>
 214 |                                     </div>
 215 |                                 </li>
 216 |                                 <li><a href="#"><span>Chairs</span></a></li>
 217 |                                 <li><a href="#"><span>Lighting</span></a></li>
 218 |                                 <li><a href="#"><span>Beds</span></a></li>
 219 |                                 <li><a href="#"><span>Outdoor</span></a></li>
 220 |                             </ul>
 221 |                         </div>
 222 |                     </div>
 223 |                 </li>
 224 |                 <li><a href="#">By Room <span class="caret"></span></a></li>
 225 |                 <li><a href="#">Popular <span class="caret"></span></a></li>
 226 |                 <li><a href="#" class="has-dropdown">Our Story <span class="caret"></span></a>
 227 | 
 228 |                     <div class="sub-nav-wrapper animated fadeInDown">
 229 |                         <div class="secondary-nav" id="js-story-nav">
 230 |                             <ul class="nav nav--inline">
 231 |                                 <li><a href="#">Our Story</a></li>
 232 |                                 <li><a href="#">Jobs</a></li>
 233 |                                 <li><a href="#">Get In Touch</a></li>
 234 |                                 <li><a href="#">FAQ's</a></li>
 235 |                             </ul>
 236 |                         </div>
 237 |                     </div>
 238 |                 </li>
 239 |             </ul>
 240 |         </div>
 241 |     </nav>
 242 |     <div class="sub-nav mobile-trolley" id="mobile-trolley">
 243 |         <div class="minibasket basket-subnav">
 244 |             <div class="basket__header">
 245 |                 <p>Your Trolley</p>
 246 |             </div>
 247 |             <ul class="basket__listing" id="cart-sidebar">
 248 | 
 249 |                 <li class="media basket__item">
 250 |                     <a class="media__img img" href="">
 251 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 252 |                     </a>
 253 | 
 254 |                     <div class="media__body">
 255 |                         <a class="basket__remove" href="#">
 256 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 257 |                         </a>
 258 | 
 259 |                         <p class="title"><a href="">Montpellier</a></p>
 260 | 
 261 |                         <p class="sub-title">Armchair, charcoal</p>
 262 |                         <ul class="details">
 263 |                             <li>Delivery: 1-2 weeks</li>
 264 |                             <li>Quantity: 1</li>
 265 |                             <li>Subtotal: £349</li>
 266 |                         </ul>
 267 |                     </div>
 268 |                 </li>
 269 |                 <li class="media basket__item">
 270 |                     <a class="media__img img" href="">
 271 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 272 |                     </a>
 273 | 
 274 |                     <div class="media__body">
 275 |                         <a class="basket__remove" href="#">
 276 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 277 |                         </a>
 278 | 
 279 |                         <p class="title"><a href="">Montpellier</a></p>
 280 | 
 281 |                         <p class="sub-title">Armchair, charcoal</p>
 282 |                         <ul class="details">
 283 |                             <li>Delivery: 1-2 weeks</li>
 284 |                             <li>Quantity: 1</li>
 285 |                             <li>Subtotal: £349</li>
 286 |                         </ul>
 287 |                     </div>
 288 |                 </li>
 289 |             </ul>
 290 | 
 291 |             <div class="basket__total">
 292 |                 <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
 293 |             </div>
 294 | 
 295 |             <div class="basket__actions">
 296 |                 <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
 297 |             </div>
 298 |         </div>
 299 |     </div>
 300 | </header>
 301 | <!-- .end .site-header -->
 302 | 
 303 | <div class="site-body" role="main">
 304 | 
 305 | <!-- Secondary nav is hidden on some pages (eg: signup) -->
 306 | 
 307 | <section class="wrapper bg-style-01">
 308 |     <div class="container desk-only" id="js-subnav-container">
 309 |     </div>
 310 | </section>
 311 | 
 312 | 
 313 | <!-- Main Product slider -->
 314 | <section class="wrapper bg-style-01 product">
 315 |     <div class="container push-content product-slider-wrapper">
 316 | 
 317 |         <article class="card card--product">
 318 |             <header class="card__header not-desk no-js--hidden">
 319 |                 <h2>Lille
 320 |                     <small>Armchair, Blue</small>
 321 |                 </h2>
 322 |             </header>
 323 |             <figure class="card__image">
 324 |                 <div class="royalSlider rsDefault product-slider ">
 325 |                     <div class="rsContent">
 326 | 
 327 |                         <a href="assets/content/product-2-small.jpg"
 328 |                            title="Montpellier"
 329 |                            class="rsImg hidden"
 330 |                            data-src-lap="assets/content/product-2-medium.jpg"
 331 |                            data-src-desk="assets/content/product-2.jpg"
 332 |                             >Montpellier</a>
 333 | 
 334 |                         <noscript>
 335 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 336 |                         </noscript>
 337 |                     </div>
 338 |                     <div class="rsContent">
 339 | 
 340 |                         <a href="assets/content/product-2-small.jpg"
 341 |                            title="Montpellier"
 342 |                            class="rsImg hidden"
 343 |                            data-src-lap="assets/content/product-2-medium.jpg"
 344 |                            data-src-desk="assets/content/product-2.jpg"
 345 |                             >Montpellier</a>
 346 | 
 347 |                         <noscript>
 348 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 349 |                         </noscript>
 350 |                     </div>
 351 |                     <div class="rsContent">
 352 | 
 353 |                         <a href="assets/content/product-2-small.jpg"
 354 |                            title="Montpellier"
 355 |                            class="rsImg hidden"
 356 |                            data-src-lap="assets/content/product-2-medium.jpg"
 357 |                            data-src-desk="assets/content/product-2.jpg"
 358 |                             >Montpellier</a>
 359 | 
 360 |                         <noscript>
 361 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 362 |                         </noscript>
 363 |                     </div>
 364 |                     <div class="rsContent">
 365 | 
 366 |                         <a href="assets/content/product-2-small.jpg"
 367 |                            title="Montpellier"
 368 |                            class="rsImg hidden"
 369 |                            data-src-lap="assets/content/product-2-medium.jpg"
 370 |                            data-src-desk="assets/content/product-2.jpg"
 371 |                             >Montpellier</a>
 372 | 
 373 |                         <noscript>
 374 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 375 |                         </noscript>
 376 |                     </div>
 377 |                     <div class="rsContent">
 378 | 
 379 |                         <a href="assets/content/product-2-small.jpg"
 380 |                            title="Montpellier"
 381 |                            class="rsImg hidden"
 382 |                            data-src-lap="assets/content/product-2-medium.jpg"
 383 |                            data-src-desk="assets/content/product-2.jpg"
 384 |                             >Montpellier</a>
 385 | 
 386 |                         <noscript>
 387 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 388 |                         </noscript>
 389 |                     </div>
 390 |                     <div class="rsContent">
 391 | 
 392 |                         <a href="assets/content/product-2-small.jpg"
 393 |                            title="Montpellier"
 394 |                            class="rsImg hidden"
 395 |                            data-src-lap="assets/content/product-2-medium.jpg"
 396 |                            data-src-desk="assets/content/product-2.jpg"
 397 |                             >Montpellier</a>
 398 | 
 399 |                         <noscript>
 400 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 401 |                         </noscript>
 402 |                     </div>
 403 |                     <div class="rsContent">
 404 | 
 405 |                         <a href="assets/content/product-2-small.jpg"
 406 |                            title="Montpellier"
 407 |                            class="rsImg hidden"
 408 |                            data-src-lap="assets/content/product-2-medium.jpg"
 409 |                            data-src-desk="assets/content/product-2.jpg"
 410 |                             >Montpellier</a>
 411 | 
 412 |                         <noscript>
 413 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 414 |                         </noscript>
 415 |                     </div>
 416 |                 </div>
 417 |             </figure>
 418 |             <div class="flex-parent right">
 419 |                 <section class="card__info animated fadeIn no-js--visible">
 420 |                     <header class="card__header not-palm not-lap no-js--visible">
 421 |                         <h2>Lille
 422 |                             <small>Armchair, Blue</small>
 423 |                         </h2>
 424 |                     </header>
 425 |                     <h3 class="not-palm">The perfect French-style desk for a stylish home office.</h3>
 426 | 
 427 |                     <div class="card__price">
 428 |                         <div class="price-box">
 429 |                             <div class="price-box__items">
 430 |                         <span class="price-type">
 431 |                             Insider <br>Price
 432 |                         </span>
 433 |                                 <span class="price">£640</span>
 434 |                             </div>
 435 |                         </div>
 436 |                         <div class="price-detail">
 437 |                             <p>
 438 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 439 |                                 <span> &mdash; save 72%</span>
 440 |                             </p>
 441 |                         </div>
 442 |                     </div>
 443 |                     <div class="card__cta">
 444 |                         <div class="actions">
 445 |                             <div class="actions__qty">
 446 |                                 <label class="select" for="">
 447 |                                     <select name="qty">
 448 |                                         <option value="1">1</option>
 449 |                                         <option value="2">2</option>
 450 |                                         <option value="3">3</option>
 451 |                                         <option value="4">4</option>
 452 |                                         <option value="5">5</option>
 453 |                                         <option value="6">6</option>
 454 |                                         <option value="7">7</option>
 455 |                                         <option value="8">8</option>
 456 |                                         <option value="9">9</option>
 457 |                                     </select>
 458 |                                 </label>
 459 |                             </div>
 460 |                             <div class="actions__add">
 461 |                                 <a class="button" href="#">Add to trolley</a>
 462 |                             </div>
 463 |                         </div>
 464 |                     </div>
 465 |                     <div class="card__stock">
 466 |                         <p>Edition limited to 12 • <b>only 5 left</b></p>
 467 |                     </div>
 468 |                 </section>
 469 |             </div>
 470 |         </article>
 471 |     </div>
 472 | </section>
 473 | 
 474 | <!-- Product page content, under slider -->
 475 | <section class="wrapper">
 476 | <div class="container">
 477 | 
 478 | <!-- Detached bullet container for slider, this is populated by RoyalSlider -->
 479 | <div class="product-bullets"></div>
 480 | 
 481 | <div class="card__promotion banner">
 482 |     <p><strong>Free delivery <span class="not-palm">on MONTPELLIER</span></strong> use voucher code <strong>FREE MONTPELLIER </strong>at checkout</p>
 483 | </div>
 484 | <div class="grid">
 485 | 
 486 |     <!-- Thumbnails -->
 487 |     <div class="grid__cell desk-6-4 lap-6-4">
 488 |         <div class="thumbnails slider-thumbs">
 489 |             <a href="assets/content/product-2-slide.jpg">
 490 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="0" class="active"/>
 491 |             </a>
 492 |             <a href="assets/content/product-2-slide.jpg">
 493 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="1" class=""/>
 494 |             </a>
 495 |             <a href="assets/content/product-2-slide.jpg">
 496 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="2" class=""/>
 497 |             </a>
 498 |             <a href="assets/content/product-2-slide.jpg">
 499 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="3" class=""/>
 500 |             </a>
 501 |             <a href="assets/content/product-2-slide.jpg">
 502 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="4" class=""/>
 503 |             </a>
 504 |             <a href="assets/content/product-2-slide.jpg">
 505 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="5" class=""/>
 506 |             </a>
 507 |             <a href="assets/content/product-2-slide.jpg">
 508 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="6" class=""/>
 509 |             </a>
 510 |         </div>
 511 |     </div>
 512 | 
 513 |     <!-- Color choices -->
 514 |     <div class="grid__cell desk-6-2 lap-6-2">
 515 |         <div class="not-palm thumbnails floated">
 516 |             <div class="items">
 517 |                 <span>Also in: </span>
 518 |                 <a href="#"><img src="assets/content/thumb-01.jpg" alt="" width="59" height="38"/></a>
 519 |                 <a href="#"><img src="assets/content/thumb-02.jpg" alt="" width="59" height="38"/></a>
 520 |             </div>
 521 |         </div>
 522 |     </div>
 523 | </div>
 524 | 
 525 | <article class="accordion product-detail">
 526 |     <div class="grid">
 527 |         <div class="grid__cell desk-6-2 lap-6-2">
 528 |             <div id="desk-target-01"></div>
 529 |             <div class="desk-shift" data-target="#desk-target-02">
 530 |                 <h3>The Details <span class="caret"></span></h3>
 531 | 
 532 |                 <div class="accordion-body">
 533 |                     <ul>
 534 |                         <li>W: 130 cm D: 70 cm H: 76 cm</li>
 535 |                         <li>Drawer depth: 40 cm</li>
 536 |                         <li>Handcarved kiln-dried mango wood</li>
 537 |                         <li>Mortise and tenon joinery</li>
 538 |                         <li>Aged limewashed effect finish</li>
 539 |                         <li>Deep 40cm drawers that fit a 15'' laptop</li>
 540 |                         <li>Plate-and-ring antiqued brass handles</li>
 541 |                     </ul>
 542 |                 </div>
 543 |             </div>
 544 |         </div>
 545 |         <div class="grid__cell desk-6-2 lap-6-2">
 546 |             <h3>This Edition<span class="caret"></span></h3>
 547 | 
 548 |             <div class="accordion-body">
 549 |                 <p>
 550 |                     The Adele strikes just the right balance between French elegance and a more
 551 |                     rustic, pared-back style. So… cabriole legs, check; carving on all sides, check;
 552 |                     brass plate-and-ring handles, check. But the limewashed finish gives those
 553 |                     signature French elements a clean feel, keeping it very real and very
 554 |                     contemporary. The Adele is ideal for working from home, and it can also work
 555 |                     as a super-deep dressing table.
 556 |                 </p>
 557 |             </div>
 558 |         </div>
 559 |         <div class="grid__cell desk-6-2 lap-6-2">
 560 |             <div id="desk-target-02"></div>
 561 |             <div class="desk-shift" data-target="#desk-target-01">
 562 |                 <h3>The Maker<span class="caret"></span></h3>
 563 | 
 564 |                 <div class="accordion-body">
 565 |                     <p>
 566 |                         The workshop is located in the beautiful region of Rajashthan, India. Matthew,
 567 |                         our Quality Guardian, relocated to India and visits the artisans several times a
 568 |                         week. The owner has been in the furniture business for over 40 years, initially
 569 |                         in antique restoration. Impressed with the operation we decided to consolidate
 570 |                         the majority of our French-style production here.
 571 |                     </p>
 572 |                 </div>
 573 |             </div>
 574 | 
 575 |             <h3>Delivery & Returns<span class="caret"></span></h3>
 576 | 
 577 |             <div class="accordion-body">
 578 |                 <ul>
 579 |                     <li>In production – estimated delivery in late May</li>
 580 |                     <li>Two-man delivery service to room of choice</li>
 581 |                     <li>£38 per item delivery charge, non-refundable</li>
 582 |                     <li>7 day no quibble returns with free collection</li>
 583 |                 </ul>
 584 |             </div>
 585 |         </div>
 586 |     </div>
 587 | </article>
 588 | 
 589 | 
 590 | <div class="detail-gallery">
 591 |     <div class="grid">
 592 |         <div class="grid__cell">
 593 |             <div class="detail-zoomer has-zoom">
 594 |                 <span class="zoom-trigger"></span>
 595 |                 <a href="assets/content/product-detail-01-zoom.jpg" class="popup-image">
 596 |                     <img class="zoom-image" src="assets/content/product-detail-01.jpg" alt="Montpellier"/>
 597 |                 </a>
 598 |             </div>
 599 |         </div>
 600 |         <div class="grid__cell desk-6-3 lap-6-3">
 601 |             <div class="detail-zoomer has-zoom">
 602 |                 <span class="zoom-trigger"></span>
 603 |                 <a href="assets/content/product-detail-half-01-zoom.jpg" class="popup-image">
 604 |                     <img class="zoom-image" src="assets/content/product-detail-half-01.jpg" alt="Montpellier"/>
 605 |                 </a>
 606 |             </div>
 607 |         </div>
 608 |         <div class="grid__cell desk-6-3 lap-6-3">
 609 |             <div class="detail-zoomer has-zoom">
 610 |                 <span class="zoom-trigger"></span>
 611 |                 <a href="assets/content/product-detail-half-02-zoom.jpg" class="popup-image">
 612 |                     <img class="zoom-image" src="assets/content/product-detail-half-02.jpg" alt="Montpellier"/>
 613 |                 </a>
 614 |             </div>
 615 |         </div>
 616 |         <div class="grid__cell">
 617 |             <div class="detail-zoomer has-zoom">
 618 |                 <span class="zoom-trigger"></span>
 619 |                 <a href="assets/content/product-detail-02-zoom.jpg" class="popup-image">
 620 |                     <img class="zoom-image" src="assets/content/product-detail-02.jpg" alt="Montpellier"/>
 621 |                 </a>
 622 |             </div>
 623 |         </div>
 624 |         <div class="grid__cell">
 625 |             <div class="detail-zoomer has-zoom">
 626 |                 <span class="zoom-trigger"></span>
 627 |                 <a href="assets/content/product-detail-03-zoom.jpg" class="popup-image">
 628 |                     <img class="zoom-image" src="assets/content/product-detail-03.jpg" alt="Montpellier"/>
 629 |                 </a>
 630 |             </div>
 631 |         </div>
 632 |     </div>
 633 | </div>
 634 | 
 635 | <div class="banner">
 636 |     <div class="card card--content">
 637 |         <div class="card__content flush--bottom">
 638 |             <h4>Why shop with us?</h4>
 639 | 
 640 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 641 | 
 642 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 643 | 
 644 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 645 |         </div>
 646 |     </div>
 647 | </div>
 648 | <div>
 649 |     <div class="banner underlined">
 650 |         <h3 class="banner__heading padded">More designs from Swoon Editions</h3>
 651 |     </div>
 652 |     <div class="royalSlider rsDefault grid-slider not-desk">
 653 |         <div class="rsContent">
 654 | 
 655 |             <article class="card card--grid">
 656 |                 <!-- Stock info -->
 657 |                 <div class="stock-info">
 658 |                     <span>Only <b>10</b> Left</span>
 659 |                 </div>
 660 | 
 661 |                 <figure class="card__image">
 662 | 
 663 |                     <!-- When sold out, include an overlay -->
 664 |                     <a href="#" title="Montpellier">
 665 |                         <div class="img-swap">
 666 |                             <img src="assets/content/cards/01.jpg" alt="Lille" class="main-img">
 667 |                             <img src="assets/content/cards/01-zoomed.jpg" alt="Lille" class="alt-img">
 668 |                         </div>
 669 |                     </a>
 670 | 
 671 |                 </figure>
 672 | 
 673 |                 <section class="card__info">
 674 |                     <header class="card__header">
 675 |                         <h2>Lille
 676 |                             <small>Armchair, Blue</small>
 677 |                         </h2>
 678 |                     </header>
 679 |                     <div class="card__price">
 680 |                         <div class="price-box">
 681 |                             <div class="price-box__items">
 682 |                     <span class="price-type">
 683 |                         Insider <br/>Price
 684 |                     </span>
 685 |                                 <span class="price">£640</span>
 686 |                             </div>
 687 |                         </div>
 688 |                         <div class="price-detail">
 689 |                             <p>
 690 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 691 |                                 <span> &mdash; save 72%</span>
 692 |                             </p>
 693 |                         </div>
 694 |                     </div>
 695 |                     <!-- CTA -->
 696 |                 </section>
 697 |             </article>
 698 |         </div>
 699 |         <div class="rsContent">
 700 | 
 701 |             <article class="card card--grid">
 702 |                 <!-- Stock info -->
 703 | 
 704 |                 <figure class="card__image">
 705 | 
 706 |                     <!-- When sold out, include an overlay -->
 707 |                     <a href="#" title="Montpellier">
 708 |                         <div class="img-swap">
 709 |                             <img src="assets/content/cards/04.jpg" alt="Lille" class="main-img">
 710 |                             <img src="assets/content/cards/04-zoomed.jpg" alt="Lille" class="alt-img">
 711 |                         </div>
 712 |                     </a>
 713 | 
 714 |                 </figure>
 715 | 
 716 |                 <section class="card__info">
 717 |                     <header class="card__header">
 718 |                         <h2>Lille
 719 |                             <small>Armchair, Blue</small>
 720 |                         </h2>
 721 |                     </header>
 722 |                     <div class="card__price">
 723 |                         <div class="price-box">
 724 |                             <div class="price-box__items">
 725 |                     <span class="price-type">
 726 |                         Insider <br/>Price
 727 |                     </span>
 728 |                                 <span class="price">£640</span>
 729 |                             </div>
 730 |                         </div>
 731 |                         <div class="price-detail">
 732 |                             <p>
 733 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 734 |                                 <span> &mdash; save 72%</span>
 735 |                             </p>
 736 |                         </div>
 737 |                     </div>
 738 |                     <!-- CTA -->
 739 |                 </section>
 740 |             </article>
 741 |         </div>
 742 |         <div class="rsContent">
 743 | 
 744 |             <article class="card card--grid">
 745 |                 <!-- Stock info -->
 746 | 
 747 |                 <figure class="card__image">
 748 | 
 749 |                     <!-- When sold out, include an overlay -->
 750 |                     <a href="#" title="Montpellier">
 751 |                         <div class="img-swap">
 752 |                             <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
 753 |                             <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
 754 |                         </div>
 755 |                     </a>
 756 | 
 757 |                 </figure>
 758 | 
 759 |                 <section class="card__info">
 760 |                     <header class="card__header">
 761 |                         <h2>Lille
 762 |                             <small>Armchair, Blue</small>
 763 |                         </h2>
 764 |                     </header>
 765 |                     <div class="card__price">
 766 |                         <div class="price-box">
 767 |                             <div class="price-box__items">
 768 |                     <span class="price-type">
 769 |                         Insider <br/>Price
 770 |                     </span>
 771 |                                 <span class="price">£640</span>
 772 |                             </div>
 773 |                         </div>
 774 |                         <div class="price-detail">
 775 |                             <p>
 776 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 777 |                                 <span> &mdash; save 72%</span>
 778 |                             </p>
 779 |                         </div>
 780 |                     </div>
 781 |                     <!-- CTA -->
 782 |                 </section>
 783 |             </article>
 784 |         </div>
 785 |         <div class="rsContent">
 786 | 
 787 |             <article class="card card--grid">
 788 |                 <!-- Stock info -->
 789 | 
 790 |                 <figure class="card__image">
 791 | 
 792 |                     <!-- When sold out, include an overlay -->
 793 |                     <a href="#" title="Montpellier">
 794 |                         <div class="img-swap">
 795 |                             <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
 796 |                             <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
 797 |                         </div>
 798 |                     </a>
 799 | 
 800 |                 </figure>
 801 | 
 802 |                 <section class="card__info">
 803 |                     <header class="card__header">
 804 |                         <h2>Lille
 805 |                             <small>Armchair, Blue</small>
 806 |                         </h2>
 807 |                     </header>
 808 |                     <div class="card__price">
 809 |                         <div class="price-box">
 810 |                             <div class="price-box__items">
 811 |                     <span class="price-type">
 812 |                         Insider <br/>Price
 813 |                     </span>
 814 |                                 <span class="price">£640</span>
 815 |                             </div>
 816 |                         </div>
 817 |                         <div class="price-detail">
 818 |                             <p>
 819 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 820 |                                 <span> &mdash; save 72%</span>
 821 |                             </p>
 822 |                         </div>
 823 |                     </div>
 824 |                     <!-- CTA -->
 825 |                 </section>
 826 |             </article>
 827 |         </div>
 828 |     </div>
 829 | </div>
 830 | 
 831 | <div class="banner">
 832 |     <div class="card card--content">
 833 |         <div class="card__content">
 834 |             <h4>Become an Insider</h4>
 835 | 
 836 |             <p>Be the first to know about each day’s new designs</p>
 837 | 
 838 |             <div class="banner__cta insider-form">
 839 |                 <form action="">
 840 |                     <div class="fields">
 841 |                         <div class="field">
 842 |                             <label class="hidden" for="form1-text">Email<abbr title="Required">*</abbr></label>
 843 | 
 844 |                             <div class="input-box">
 845 |                                 <input id="form1-text" class="input-text alt-placeholder" type="text" required="" placeholder="Email">
 846 |                             </div>
 847 |                         </div>
 848 |                         <div class="field">
 849 |                             <label class="hidden" for="form2-text">Password <abbr title="Required">*</abbr></label>
 850 | 
 851 |                             <div class="input-box">
 852 |                                 <input id="form2-text" class="input-text alt-placeholder" type="text" required="" placeholder="Password">
 853 |                             </div>
 854 |                         </div>
 855 |                         <div class="field">
 856 |                             <button class="button">Sign up<span class="not-desk not-lap"> now</span></button>
 857 |                         </div>
 858 |                     </div>
 859 |                     <div class="fields">
 860 |                         <p class="or-text">or</p>
 861 | 
 862 |                         <p>
 863 |                             <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign up with Facebook</a>
 864 |                         </p>
 865 |                     </div>
 866 |                 </form>
 867 |             </div>
 868 | 
 869 |         </div>
 870 |     </div>
 871 | </div>
 872 | 
 873 | </div>
 874 | </section>
 875 | 
 876 | 
 877 | </div>
 878 | <!-- end .site-body -->
 879 | 
 880 | <section class="wrapper" style="background: white; padding: 30px 0;">
 881 |     <div class="container">
 882 |         <div class="social-links">
 883 |             <p class="banner__title stretch">Let's dance</p>
 884 |             <ul class="nav nav--inline">
 885 |                 <li><a href="#" class="sprite svg-facebook svg-facebook-dims"></a></li>
 886 |                 <li><a href="#" class="sprite svg-instagram svg-instagram-dims"></a></li>
 887 |                 <li><a href="#" class="sprite svg-pinterest svg-pinterest-dims"></a></li>
 888 |                 <li><a href="#" class="sprite svg-twitter svg-twitter-dims"></a></li>
 889 |                 <li><a href="#" class="sprite svg-linkedin svg-linkedin-dims"></a></li>
 890 |             </ul>
 891 |         </div>
 892 |     </div>
 893 | </section>
 894 | 
 895 | <footer class="site-footer ">
 896 |     <div class="container">
 897 | 
 898 |         <div class="grid">
 899 |             <div class="grid__cell desk-6-2 lap-6-2">
 900 |                 <div class="accordion">
 901 |                     <h3>Footer Category 1 <span class="caret"></span></h3>
 902 | 
 903 |                     <div class="accordion-body">
 904 |                         <ul class="nav">
 905 |                             <li><a href="#">lorem ipsum</a></li>
 906 |                             <li><a href="#">dolores sit</a></li>
 907 |                             <li><a href="#">amet consectuer</a></li>
 908 |                         </ul>
 909 |                     </div>
 910 |                 </div>
 911 |             </div>
 912 |             <div class="grid__cell desk-6-2 lap-6-2">
 913 |                 <div class="accordion">
 914 |                     <h3>Footer Category 2 <span class="caret"></span></h3>
 915 | 
 916 |                     <div class="accordion-body">
 917 |                         <ul class="nav">
 918 |                             <li><a href="#">lorem ipsum</a></li>
 919 |                             <li><a href="#">dolores sit</a></li>
 920 |                             <li><a href="#">amet consectuer</a></li>
 921 |                         </ul>
 922 |                     </div>
 923 |                 </div>
 924 |             </div>
 925 |             <div class="grid__cell desk-6-2 lap-6-2">
 926 |                 <div class="accordion">
 927 |                     <h3>Footer Category 3 <span class="caret"></span></h3>
 928 | 
 929 |                     <div class="accordion-body">
 930 |                         <ul class="nav">
 931 |                             <li><a href="#">lorem ipsum</a></li>
 932 |                             <li><a href="#">dolores sit</a></li>
 933 |                             <li><a href="#">amet consectuer</a></li>
 934 |                         </ul>
 935 |                     </div>
 936 |                 </div>
 937 |             </div>
 938 |         </div>
 939 | 
 940 |         <p class="copyright">&copy; Swoon Editions 2014</p>
 941 |     </div>
 942 | </footer>
 943 | 
 944 | 
 945 | <!-- Popup markup appears on every page -->
 946 | <div id="signup-popup" class="signup-popup mfp-hide">
 947 |     <a href="#" class="site-logo sprite svg-logo svg-logo-dims not-palm">Swoon Editions</a>
 948 | 
 949 |     <div id="signup-content" class="hidden animated">
 950 | 
 951 |         <p class="signup-heading palm-only">Sign up</p>
 952 | 
 953 |         <p class="signup-heading not-palm">Become an Insider</p>
 954 | 
 955 |         <p class="span-wraps break-desk not-palm"><span>Access to coveted furniture for up to</span> <span>70% less than high-end retailers</span></p>
 956 | 
 957 |         <form action="" class="form--stacked">
 958 | 
 959 | 
 960 |             <div class="fields">
 961 |                 <div class="field">
 962 |                     <label for="form1-text">Email</label>
 963 | 
 964 |                     <div class="input-box">
 965 |                         <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
 966 |                     </div>
 967 |                 </div>
 968 |                 <div class="field">
 969 |                     <label for="form2-text">Password</label>
 970 | 
 971 |                     <div class="input-box">
 972 |                         <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
 973 |                     </div>
 974 |                 </div>
 975 |                 <div class="field">
 976 |                     <button class="button">Sign up</button>
 977 |                 </div>
 978 |             </div>
 979 |             <div class="fields">
 980 |                 <p class="or-text">or</p>
 981 | 
 982 |                 <p>
 983 |                     <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign up with Facebook</a>
 984 |                 </p>
 985 |             </div>
 986 |         </form>
 987 | 
 988 |         <p class="text--center sign-in">
 989 |             <a href="#" class="signup-switch" data-target="signin">Already an insider? <span><b>Sign in &gt; </b></span></a>
 990 |         </p>
 991 | 
 992 |     </div>
 993 |     <div id="signin-content" class="hidden animated">
 994 |         <p class="signup-heading palm-only">Sign in</p>
 995 | 
 996 |         <form action="" class="form--stacked">
 997 | 
 998 | 
 999 |             <div class="fields">
1000 |                 <div class="field">
1001 |                     <label for="form1-text">Email</label>
1002 | 
1003 |                     <div class="input-box">
1004 |                         <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
1005 |                     </div>
1006 |                 </div>
1007 |                 <div class="field">
1008 |                     <label for="form2-text">Password</label>
1009 | 
1010 |                     <div class="input-box">
1011 |                         <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
1012 |                     </div>
1013 |                 </div>
1014 |                 <div class="field">
1015 |                     <button class="button">Sign in</button>
1016 |                 </div>
1017 |             </div>
1018 |             <div class="fields">
1019 |                 <p class="or-text">or</p>
1020 | 
1021 |                 <p>
1022 |                     <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign in with Facebook</a>
1023 |                 </p>
1024 |             </div>
1025 |         </form>
1026 | 
1027 |         <p class="text--center sign-in">
1028 |             <a href="#" class="signup-switch" data-target="signup">Not an insider yet?</a>
1029 |         </p>
1030 |     </div>
1031 | </div>
1032 | 
1033 | 
1034 | <!-- JS Includes (DEV) -->
1035 | <script src="/assets/js/bower_components/requirejs/require.js" data-main="/assets/js/config"></script>
1036 | 
1037 | </body>
1038 | </html>


--------------------------------------------------------------------------------
/test/fixtures/store-product.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <!--[if lt IE 7]>
   3 | <html class="no-js ie ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
   4 | <!--[if IE 7]>
   5 | <html class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
   6 | <!--[if IE 8]>
   7 | <html class="no-js ie ie8 lt-ie10 lt-ie9" lang="en"> <![endif]-->
   8 | <!--[if IE 9]>
   9 | <html class="no-js ie ie9 lt-ie10" lang="en"> <![endif]-->
  10 | <!--[if gt IE 9]><!-->
  11 | <html class="no-js ffly" lang="en"> <!--<![endif]-->
  12 | <head>
  13 |     <title>Product | Swoon Editions</title>
  14 |     <meta name="description" content="">
  15 | 
  16 |     <!-- META -->
  17 |     <meta charset="utf-8"/>
  18 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  19 |     <meta name="description" content="">
  20 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21 | 
  22 |     <!-- ICONS -->
  23 |     <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
  24 | 
  25 |     <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7061692/741444/css/fonts.css"/>
  26 | 
  27 |     <!-- CSS Includes -->
  28 |     <link rel="stylesheet" href="/assets/css/core.css"/>
  29 |     <script src="/assets/js/bower_components/modernizr/modernizr.js"></script>
  30 | 
  31 |     <!--[if (lt IE 9) & (!IEMobile)]>
  32 |     <link rel="stylesheet" href="/assets/css/ie.css">
  33 |     <![endif]-->
  34 | </head>
  35 | <body id="top" class="page-product">
  36 | 
  37 | <!-- Page top -->
  38 | <aside class="wrapper page-top desk-only">
  39 |     <div class="container">
  40 | 
  41 |         <ul class="nav pagetop-nav float--right">
  42 |             <li class="flyout--rev">
  43 | 
  44 | 
  45 |                 <a href="#" data-target="signin" class="js-signup">Sign in</a>
  46 | 
  47 | 
  48 |             </li>
  49 |             <li>
  50 |                 <span class="sprite svg-trolley svg-trolley-dims"></span>
  51 |             </li>
  52 |             <li class="flyout--rev">
  53 |                 <a href="#">Your Trolley</a>
  54 | 
  55 |                 <div class="flyout__body sub-nav" id="header-basket">
  56 |                     <!-- Trolley subnav -->
  57 |                     <div class="minibasket basket-subnav">
  58 |                         <p class="basket__header">Your Trolley</p>
  59 |                         <ul class="basket__listing" id="cart-sidebar">
  60 | 
  61 |                             <li class="media basket__item">
  62 |                                 <a class="media__img img" href="">
  63 |                                     <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
  64 |                                 </a>
  65 | 
  66 |                                 <div class="media__body">
  67 |                                     <a class="basket__remove" href="#">
  68 |                                         <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
  69 |                                     </a>
  70 | 
  71 |                                     <p class="title"><a href="">Montpellier</a></p>
  72 | 
  73 |                                     <p class="sub-title">Armchair, charcoal</p>
  74 |                                     <ul class="details">
  75 |                                         <li>Delivery: 1-2 weeks</li>
  76 |                                         <li>Quantity: 1</li>
  77 |                                         <li>Subtotal: £349</li>
  78 |                                     </ul>
  79 |                                 </div>
  80 |                             </li>
  81 |                             <li class="media basket__item">
  82 |                                 <a class="media__img img" href="">
  83 |                                     <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
  84 |                                 </a>
  85 | 
  86 |                                 <div class="media__body">
  87 |                                     <a class="basket__remove" href="#">
  88 |                                         <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
  89 |                                     </a>
  90 | 
  91 |                                     <p class="title"><a href="">Montpellier</a></p>
  92 | 
  93 |                                     <p class="sub-title">Armchair, charcoal</p>
  94 |                                     <ul class="details">
  95 |                                         <li>Delivery: 1-2 weeks</li>
  96 |                                         <li>Quantity: 1</li>
  97 |                                         <li>Subtotal: £349</li>
  98 |                                     </ul>
  99 |                                 </div>
 100 |                             </li>
 101 |                         </ul>
 102 | 
 103 |                         <div class="basket__total">
 104 |                             <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
 105 |                         </div>
 106 | 
 107 |                         <div class="basket__actions">
 108 |                             <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
 109 |                         </div>
 110 |                     </div>
 111 |                 </div>
 112 |             </li>
 113 |             <li>
 114 |                 <span class="badge">2</span>
 115 |             </li>
 116 |         </ul>
 117 |     </div>
 118 | </aside>
 119 | 
 120 | <!-- Header, including NAV + LOGO + Mobile triggers -->
 121 | <header class="wrapper site-header" role="banner">
 122 |     <div class="container nav-container">
 123 | 
 124 |         <!-- Desktop nav is sometimes hidden -->
 125 | 
 126 |         <nav class="main-nav desk-only">
 127 |             <ul class="nav nav--inline main-nav--left">
 128 |                 <li>
 129 |                     <a href="#" class="active hover-toggle" data-target="#js-editions-nav-moved"><span>Our Editions</span></a>
 130 |                 </li>
 131 |                 <li class="extra-spacing">
 132 |                     <a href="#" class="hover-toggle" data-target="#js-story-nav-moved"><span>Our Story</span></a>
 133 |                 </li>
 134 |             </ul>
 135 |             <ul class="nav nav--inline main-nav--right">
 136 |                 <li>
 137 |                     <a href="#signup-popup" data-target="signup" class="js-signup "><span>Become an Insider</span></a>
 138 |                 </li>
 139 |                 <li class="float--right multi-line">
 140 |                     <span class="over">Get in touch</span>
 141 |                     <a href="#signup-popup" data-target="signin" class="no-hover"><span>020 3137 2464</span></a>
 142 |                 </li>
 143 |             </ul>
 144 |         </nav>
 145 |         <!-- Nav trigger, mobile -->
 146 |         <a href="#" class="burger-nav-trigger js-toggle not-desk fast-click" data-target="#header-nav" data-event="nav:open">
 147 |             <span class="sprite svg-burger svg-burger-dims"></span>
 148 |         </a>
 149 | 
 150 |         <!-- Trolley trigger, mobile -->
 151 |         <a href="/" class="account-nav-trigger js-toggle not-desk fast-click" data-target="#mobile-trolley" data-event="trolley:open">
 152 |             <span class="sprite svg-trolley svg-trolley-dims"></span>
 153 |             <span class="badge">2</span>
 154 |         </a>
 155 | 
 156 | 
 157 |         <!-- Logo -->
 158 |         <a href="/" class="site-logo sprite svg-logo-inverted svg-logo-inverted-dims">Swoon Editions</a>
 159 | 
 160 |     </div>
 161 | 
 162 |     <!-- Mobile nav -->
 163 |     <nav class="header-nav animated fadeInDown" id="header-nav">
 164 |         <div class="container">
 165 |             <div class="split-nav">
 166 |                 <a href="#signup-popup" data-target="signup" class="flush js-signup">Become an Insider</a>
 167 |                 <a href="#signup-popup" data-target="signin" class="inset js-signup">Sign In</a>
 168 |             </div>
 169 |             <ul class="main-nav">
 170 |                 <li>
 171 |                     <a href="#" class="has-dropdown active">Our Editions <span class="caret"></span></a>
 172 | 
 173 |                     <div class="sub-nav-wrapper animated fadeInDown active">
 174 |                         <div class="secondary-nav active" id="js-editions-nav">
 175 |                             <ul class="nav nav--inline">
 176 |                                 <li class="flyout"><a href="#"><span>View All</span></a>
 177 | 
 178 |                                     <div class="flyout__body sub-nav two-col-nav">
 179 |                                         <ul>
 180 |                                             <li><p class="nav-heading">By Room:</p></li>
 181 |                                             <li><a href="">Living room</a></li>
 182 |                                             <li><a href="">Dining room</a></li>
 183 |                                             <li><a href="">Bedroom</a></li>
 184 |                                             <li><a href="">Kitchen</a></li>
 185 |                                             <li><a href="">Outdoor</a></li>
 186 |                                         </ul>
 187 |                                         <ul>
 188 |                                             <li><p class="nav-heading">Popular:</p></li>
 189 |                                             <li><a href="">Neutrals</a></li>
 190 |                                             <li><a href="">Accent chairs</a></li>
 191 |                                             <li><a href="">Contemporary</a></li>
 192 |                                             <li><a href="">Shabby chic</a></li>
 193 |                                             <li><a href="">Linen</a></li>
 194 |                                             <li><a href="">Greys</a></li>
 195 |                                             <li><a href="">Retro</a></li>
 196 |                                             <li><a href="">French-style</a></li>
 197 |                                             <li><a href="">Mid-century modern</a></li>
 198 |                                         </ul>
 199 |                                     </div>
 200 |                                 </li>
 201 |                                 <li><a href="#" class="active"><span>Sofas</span></a></li>
 202 |                                 <li class="flyout"><a href="#"><span>Rugs</span></a>
 203 | 
 204 |                                     <div class="flyout__body sub-nav">
 205 |                                         <ul>
 206 |                                             <li><a href="">Armchairs</a></li>
 207 |                                             <li><a href="">Dining chairs</a></li>
 208 |                                             <li><a href="">Accent chairs</a></li>
 209 |                                             <li><a href="">Outdoor chairs</a></li>
 210 |                                             <li><a href="">Ottomans & Footstools</a></li>
 211 |                                             <li><a href="">Stools</a></li>
 212 |                                             <li><a href="">Benches</a></li>
 213 |                                         </ul>
 214 |                                     </div>
 215 |                                 </li>
 216 |                                 <li><a href="#"><span>Chairs</span></a></li>
 217 |                                 <li><a href="#"><span>Lighting</span></a></li>
 218 |                                 <li><a href="#"><span>Beds</span></a></li>
 219 |                                 <li><a href="#"><span>Outdoor</span></a></li>
 220 |                             </ul>
 221 |                         </div>
 222 |                     </div>
 223 |                 </li>
 224 |                 <li><a href="#">By Room <span class="caret"></span></a></li>
 225 |                 <li><a href="#">Popular <span class="caret"></span></a></li>
 226 |                 <li><a href="#" class="has-dropdown">Our Story <span class="caret"></span></a>
 227 | 
 228 |                     <div class="sub-nav-wrapper animated fadeInDown">
 229 |                         <div class="secondary-nav" id="js-story-nav">
 230 |                             <ul class="nav nav--inline">
 231 |                                 <li><a href="#">Our Story</a></li>
 232 |                                 <li><a href="#">Jobs</a></li>
 233 |                                 <li><a href="#">Get In Touch</a></li>
 234 |                                 <li><a href="#">FAQ's</a></li>
 235 |                             </ul>
 236 |                         </div>
 237 |                     </div>
 238 |                 </li>
 239 |             </ul>
 240 |         </div>
 241 |     </nav>
 242 |     <div class="sub-nav mobile-trolley" id="mobile-trolley">
 243 |         <div class="minibasket basket-subnav">
 244 |             <div class="basket__header">
 245 |                 <p>Your Trolley</p>
 246 |             </div>
 247 |             <ul class="basket__listing" id="cart-sidebar">
 248 | 
 249 |                 <li class="media basket__item">
 250 |                     <a class="media__img img" href="">
 251 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 252 |                     </a>
 253 | 
 254 |                     <div class="media__body">
 255 |                         <a class="basket__remove" href="#">
 256 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 257 |                         </a>
 258 | 
 259 |                         <p class="title"><a href="">Montpellier</a></p>
 260 | 
 261 |                         <p class="sub-title">Armchair, charcoal</p>
 262 |                         <ul class="details">
 263 |                             <li>Delivery: 1-2 weeks</li>
 264 |                             <li>Quantity: 1</li>
 265 |                             <li>Subtotal: £349</li>
 266 |                         </ul>
 267 |                     </div>
 268 |                 </li>
 269 |                 <li class="media basket__item">
 270 |                     <a class="media__img img" href="">
 271 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 272 |                     </a>
 273 | 
 274 |                     <div class="media__body">
 275 |                         <a class="basket__remove" href="#">
 276 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 277 |                         </a>
 278 | 
 279 |                         <p class="title"><a href="">Montpellier</a></p>
 280 | 
 281 |                         <p class="sub-title">Armchair, charcoal</p>
 282 |                         <ul class="details">
 283 |                             <li>Delivery: 1-2 weeks</li>
 284 |                             <li>Quantity: 1</li>
 285 |                             <li>Subtotal: £349</li>
 286 |                         </ul>
 287 |                     </div>
 288 |                 </li>
 289 |             </ul>
 290 | 
 291 |             <div class="basket__total">
 292 |                 <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
 293 |             </div>
 294 | 
 295 |             <div class="basket__actions">
 296 |                 <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
 297 |             </div>
 298 |         </div>
 299 |     </div>
 300 | </header>
 301 | <!-- .end .site-header -->
 302 | 
 303 | <div class="site-body" role="main">
 304 | 
 305 | <!-- Secondary nav is hidden on some pages (eg: signup) -->
 306 | 
 307 | <section class="wrapper bg-style-01">
 308 |     <div class="container desk-only" id="js-subnav-container">
 309 |     </div>
 310 | </section>
 311 | 
 312 | 
 313 | <!-- Main Product slider -->
 314 | <section class="wrapper bg-style-01 product">
 315 |     <div class="container push-content product-slider-wrapper">
 316 | 
 317 |         <article class="card card--product">
 318 |             <header class="card__header not-desk no-js--hidden">
 319 |                 <h2>Lille
 320 |                     <small>Armchair, Blue</small>
 321 |                 </h2>
 322 |             </header>
 323 |             <figure class="card__image">
 324 |                 <div class="royalSlider rsDefault product-slider ">
 325 |                     <div class="rsContent">
 326 | 
 327 |                         <a href="assets/content/product-2-small.jpg"
 328 |                            title="Montpellier"
 329 |                            class="rsImg hidden"
 330 |                            data-src-lap="assets/content/product-2-medium.jpg"
 331 |                            data-src-desk="assets/content/product-2.jpg"
 332 |                             >Montpellier</a>
 333 | 
 334 |                         <noscript>
 335 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 336 |                         </noscript>
 337 |                     </div>
 338 |                     <div class="rsContent">
 339 | 
 340 |                         <a href="assets/content/product-2-small.jpg"
 341 |                            title="Montpellier"
 342 |                            class="rsImg hidden"
 343 |                            data-src-lap="assets/content/product-2-medium.jpg"
 344 |                            data-src-desk="assets/content/product-2.jpg"
 345 |                             >Montpellier</a>
 346 | 
 347 |                         <noscript>
 348 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 349 |                         </noscript>
 350 |                     </div>
 351 |                     <div class="rsContent">
 352 | 
 353 |                         <a href="assets/content/product-2-small.jpg"
 354 |                            title="Montpellier"
 355 |                            class="rsImg hidden"
 356 |                            data-src-lap="assets/content/product-2-medium.jpg"
 357 |                            data-src-desk="assets/content/product-2.jpg"
 358 |                             >Montpellier</a>
 359 | 
 360 |                         <noscript>
 361 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 362 |                         </noscript>
 363 |                     </div>
 364 |                     <div class="rsContent">
 365 | 
 366 |                         <a href="assets/content/product-2-small.jpg"
 367 |                            title="Montpellier"
 368 |                            class="rsImg hidden"
 369 |                            data-src-lap="assets/content/product-2-medium.jpg"
 370 |                            data-src-desk="assets/content/product-2.jpg"
 371 |                             >Montpellier</a>
 372 | 
 373 |                         <noscript>
 374 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 375 |                         </noscript>
 376 |                     </div>
 377 |                     <div class="rsContent">
 378 | 
 379 |                         <a href="assets/content/product-2-small.jpg"
 380 |                            title="Montpellier"
 381 |                            class="rsImg hidden"
 382 |                            data-src-lap="assets/content/product-2-medium.jpg"
 383 |                            data-src-desk="assets/content/product-2.jpg"
 384 |                             >Montpellier</a>
 385 | 
 386 |                         <noscript>
 387 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 388 |                         </noscript>
 389 |                     </div>
 390 |                     <div class="rsContent">
 391 | 
 392 |                         <a href="assets/content/product-2-small.jpg"
 393 |                            title="Montpellier"
 394 |                            class="rsImg hidden"
 395 |                            data-src-lap="assets/content/product-2-medium.jpg"
 396 |                            data-src-desk="assets/content/product-2.jpg"
 397 |                             >Montpellier</a>
 398 | 
 399 |                         <noscript>
 400 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 401 |                         </noscript>
 402 |                     </div>
 403 |                     <div class="rsContent">
 404 | 
 405 |                         <a href="assets/content/product-2-small.jpg"
 406 |                            title="Montpellier"
 407 |                            class="rsImg hidden"
 408 |                            data-src-lap="assets/content/product-2-medium.jpg"
 409 |                            data-src-desk="assets/content/product-2.jpg"
 410 |                             >Montpellier</a>
 411 | 
 412 |                         <noscript>
 413 |                             <img src="assets/content/product-2.jpg" alt="Montpellier"/>
 414 |                         </noscript>
 415 |                     </div>
 416 |                 </div>
 417 |             </figure>
 418 |             <div class="flex-parent right">
 419 |                 <section class="card__info animated fadeIn no-js--visible">
 420 |                     <header class="card__header not-palm not-lap no-js--visible">
 421 |                         <h2>Lille
 422 |                             <small>Armchair, Blue</small>
 423 |                         </h2>
 424 |                     </header>
 425 |                     <h3 class="not-palm">The perfect French-style desk for a stylish home office.</h3>
 426 | 
 427 |                     <div class="card__price">
 428 |                         <div class="price-box">
 429 |                             <div class="price-box__items">
 430 |                         <span class="price-type">
 431 |                             Insider <br>Price
 432 |                         </span>
 433 |                                 <span class="price">£640</span>
 434 |                             </div>
 435 |                         </div>
 436 |                         <div class="price-detail">
 437 |                             <p>
 438 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 439 |                                 <span> &mdash; save 72%</span>
 440 |                             </p>
 441 |                         </div>
 442 |                     </div>
 443 |                     <div class="card__cta">
 444 |                         <div class="actions">
 445 |                             <div class="actions__qty">
 446 |                                 <label class="select" for="">
 447 |                                     <select name="qty">
 448 |                                         <option value="1">1</option>
 449 |                                         <option value="2">2</option>
 450 |                                         <option value="3">3</option>
 451 |                                         <option value="4">4</option>
 452 |                                         <option value="5">5</option>
 453 |                                         <option value="6">6</option>
 454 |                                         <option value="7">7</option>
 455 |                                         <option value="8">8</option>
 456 |                                         <option value="9">9</option>
 457 |                                     </select>
 458 |                                 </label>
 459 |                             </div>
 460 |                             <div class="actions__add">
 461 |                                 <a class="button" href="#">Add to trolley</a>
 462 |                             </div>
 463 |                         </div>
 464 |                     </div>
 465 |                     <div class="card__stock">
 466 |                         <p>Edition limited to 12 • <b>only 5 left</b></p>
 467 |                     </div>
 468 |                 </section>
 469 |             </div>
 470 |         </article>
 471 |     </div>
 472 | </section>
 473 | 
 474 | <!-- Product page content, under slider -->
 475 | <section class="wrapper">
 476 | <div class="container">
 477 | 
 478 | <!-- Detached bullet container for slider, this is populated by RoyalSlider -->
 479 | <div class="product-bullets"></div>
 480 | 
 481 | <div class="card__promotion banner">
 482 |     <p><strong>Free delivery <span class="not-palm">on MONTPELLIER</span></strong> use voucher code <strong>FREE MONTPELLIER </strong>at checkout</p>
 483 | </div>
 484 | <div class="grid">
 485 | 
 486 |     <!-- Thumbnails -->
 487 |     <div class="grid__cell desk-6-4 lap-6-4">
 488 |         <div class="thumbnails slider-thumbs">
 489 |             <a href="assets/content/product-2-slide.jpg">
 490 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="0" class="active"/>
 491 |             </a>
 492 |             <a href="assets/content/product-2-slide.jpg">
 493 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="1" class=""/>
 494 |             </a>
 495 |             <a href="assets/content/product-2-slide.jpg">
 496 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="2" class=""/>
 497 |             </a>
 498 |             <a href="assets/content/product-2-slide.jpg">
 499 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="3" class=""/>
 500 |             </a>
 501 |             <a href="assets/content/product-2-slide.jpg">
 502 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="4" class=""/>
 503 |             </a>
 504 |             <a href="assets/content/product-2-slide.jpg">
 505 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="5" class=""/>
 506 |             </a>
 507 |             <a href="assets/content/product-2-slide.jpg">
 508 |                 <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="6" class=""/>
 509 |             </a>
 510 |         </div>
 511 |     </div>
 512 | 
 513 |     <!-- Color choices -->
 514 |     <div class="grid__cell desk-6-2 lap-6-2">
 515 |         <div class="not-palm thumbnails floated">
 516 |             <div class="items">
 517 |                 <span>Also in: </span>
 518 |                 <a href="#"><img src="assets/content/thumb-01.jpg" alt="" width="59" height="38"/></a>
 519 |                 <a href="#"><img src="assets/content/thumb-02.jpg" alt="" width="59" height="38"/></a>
 520 |             </div>
 521 |         </div>
 522 |     </div>
 523 | </div>
 524 | 
 525 | <article class="accordion product-detail">
 526 |     <div class="grid">
 527 |         <div class="grid__cell desk-6-2 lap-6-2">
 528 |             <div id="desk-target-01"></div>
 529 |             <div class="desk-shift" data-target="#desk-target-02">
 530 |                 <h3>The Details <span class="caret"></span></h3>
 531 | 
 532 |                 <div class="accordion-body">
 533 |                     <ul>
 534 |                         <li>W: 130 cm D: 70 cm H: 76 cm</li>
 535 |                         <li>Drawer depth: 40 cm</li>
 536 |                         <li>Handcarved kiln-dried mango wood</li>
 537 |                         <li>Mortise and tenon joinery</li>
 538 |                         <li>Aged limewashed effect finish</li>
 539 |                         <li>Deep 40cm drawers that fit a 15'' laptop</li>
 540 |                         <li>Plate-and-ring antiqued brass handles</li>
 541 |                     </ul>
 542 |                 </div>
 543 |             </div>
 544 |         </div>
 545 |         <div class="grid__cell desk-6-2 lap-6-2">
 546 |             <h3>This Edition<span class="caret"></span></h3>
 547 | 
 548 |             <div class="accordion-body">
 549 |                 <p>
 550 |                     The Adele strikes just the right balance between French elegance and a more
 551 |                     rustic, pared-back style. So… cabriole legs, check; carving on all sides, check;
 552 |                     brass plate-and-ring handles, check. But the limewashed finish gives those
 553 |                     signature French elements a clean feel, keeping it very real and very
 554 |                     contemporary. The Adele is ideal for working from home, and it can also work
 555 |                     as a super-deep dressing table.
 556 |                 </p>
 557 |             </div>
 558 |         </div>
 559 |         <div class="grid__cell desk-6-2 lap-6-2">
 560 |             <div id="desk-target-02"></div>
 561 |             <div class="desk-shift" data-target="#desk-target-01">
 562 |                 <h3>The Maker<span class="caret"></span></h3>
 563 | 
 564 |                 <div class="accordion-body">
 565 |                     <p>
 566 |                         The workshop is located in the beautiful region of Rajashthan, India. Matthew,
 567 |                         our Quality Guardian, relocated to India and visits the artisans several times a
 568 |                         week. The owner has been in the furniture business for over 40 years, initially
 569 |                         in antique restoration. Impressed with the operation we decided to consolidate
 570 |                         the majority of our French-style production here.
 571 |                     </p>
 572 |                 </div>
 573 |             </div>
 574 | 
 575 |             <h3>Delivery & Returns<span class="caret"></span></h3>
 576 | 
 577 |             <div class="accordion-body">
 578 |                 <ul>
 579 |                     <li>In production – estimated delivery in late May</li>
 580 |                     <li>Two-man delivery service to room of choice</li>
 581 |                     <li>£38 per item delivery charge, non-refundable</li>
 582 |                     <li>7 day no quibble returns with free collection</li>
 583 |                 </ul>
 584 |             </div>
 585 |         </div>
 586 |     </div>
 587 | </article>
 588 | 
 589 | 
 590 | <div class="detail-gallery">
 591 |     <div class="grid">
 592 |         <div class="grid__cell">
 593 |             <div class="detail-zoomer has-zoom">
 594 |                 <span class="zoom-trigger"></span>
 595 |                 <a href="assets/content/product-detail-01-zoom.jpg" class="popup-image">
 596 |                     <img class="zoom-image" src="assets/content/product-detail-01.jpg" alt="Montpellier"/>
 597 |                 </a>
 598 |             </div>
 599 |         </div>
 600 |         <div class="grid__cell desk-6-3 lap-6-3">
 601 |             <div class="detail-zoomer has-zoom">
 602 |                 <span class="zoom-trigger"></span>
 603 |                 <a href="assets/content/product-detail-half-01-zoom.jpg" class="popup-image">
 604 |                     <img class="zoom-image" src="assets/content/product-detail-half-01.jpg" alt="Montpellier"/>
 605 |                 </a>
 606 |             </div>
 607 |         </div>
 608 |         <div class="grid__cell desk-6-3 lap-6-3">
 609 |             <div class="detail-zoomer has-zoom">
 610 |                 <span class="zoom-trigger"></span>
 611 |                 <a href="assets/content/product-detail-half-02-zoom.jpg" class="popup-image">
 612 |                     <img class="zoom-image" src="assets/content/product-detail-half-02.jpg" alt="Montpellier"/>
 613 |                 </a>
 614 |             </div>
 615 |         </div>
 616 |         <div class="grid__cell">
 617 |             <div class="detail-zoomer has-zoom">
 618 |                 <span class="zoom-trigger"></span>
 619 |                 <a href="assets/content/product-detail-02-zoom.jpg" class="popup-image">
 620 |                     <img class="zoom-image" src="assets/content/product-detail-02.jpg" alt="Montpellier"/>
 621 |                 </a>
 622 |             </div>
 623 |         </div>
 624 |         <div class="grid__cell">
 625 |             <div class="detail-zoomer has-zoom">
 626 |                 <span class="zoom-trigger"></span>
 627 |                 <a href="assets/content/product-detail-03-zoom.jpg" class="popup-image">
 628 |                     <img class="zoom-image" src="assets/content/product-detail-03.jpg" alt="Montpellier"/>
 629 |                 </a>
 630 |             </div>
 631 |         </div>
 632 |     </div>
 633 | </div>
 634 | 
 635 | <div class="banner">
 636 |     <div class="card card--content">
 637 |         <div class="card__content flush--bottom">
 638 |             <h4>Why shop with us?</h4>
 639 | 
 640 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 641 | 
 642 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 643 | 
 644 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
 645 |         </div>
 646 |     </div>
 647 | </div>
 648 | <div>
 649 |     <div class="banner underlined">
 650 |         <h3 class="banner__heading padded">More designs from Swoon Editions</h3>
 651 |     </div>
 652 |     <div class="royalSlider rsDefault grid-slider not-desk">
 653 |         <div class="rsContent">
 654 | 
 655 |             <article class="card card--grid">
 656 |                 <!-- Stock info -->
 657 |                 <div class="stock-info">
 658 |                     <span>Only <b>10</b> Left</span>
 659 |                 </div>
 660 | 
 661 |                 <figure class="card__image">
 662 | 
 663 |                     <!-- When sold out, include an overlay -->
 664 |                     <a href="#" title="Montpellier">
 665 |                         <div class="img-swap">
 666 |                             <img src="assets/content/cards/01.jpg" alt="Lille" class="main-img">
 667 |                             <img src="assets/content/cards/01-zoomed.jpg" alt="Lille" class="alt-img">
 668 |                         </div>
 669 |                     </a>
 670 | 
 671 |                 </figure>
 672 | 
 673 |                 <section class="card__info">
 674 |                     <header class="card__header">
 675 |                         <h2>Lille
 676 |                             <small>Armchair, Blue</small>
 677 |                         </h2>
 678 |                     </header>
 679 |                     <div class="card__price">
 680 |                         <div class="price-box">
 681 |                             <div class="price-box__items">
 682 |                     <span class="price-type">
 683 |                         Insider <br/>Price
 684 |                     </span>
 685 |                                 <span class="price">£640</span>
 686 |                             </div>
 687 |                         </div>
 688 |                         <div class="price-detail">
 689 |                             <p>
 690 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 691 |                                 <span> &mdash; save 72%</span>
 692 |                             </p>
 693 |                         </div>
 694 |                     </div>
 695 |                     <!-- CTA -->
 696 |                 </section>
 697 |             </article>
 698 |         </div>
 699 |         <div class="rsContent">
 700 | 
 701 |             <article class="card card--grid">
 702 |                 <!-- Stock info -->
 703 | 
 704 |                 <figure class="card__image">
 705 | 
 706 |                     <!-- When sold out, include an overlay -->
 707 |                     <a href="#" title="Montpellier">
 708 |                         <div class="img-swap">
 709 |                             <img src="assets/content/cards/04.jpg" alt="Lille" class="main-img">
 710 |                             <img src="assets/content/cards/04-zoomed.jpg" alt="Lille" class="alt-img">
 711 |                         </div>
 712 |                     </a>
 713 | 
 714 |                 </figure>
 715 | 
 716 |                 <section class="card__info">
 717 |                     <header class="card__header">
 718 |                         <h2>Lille
 719 |                             <small>Armchair, Blue</small>
 720 |                         </h2>
 721 |                     </header>
 722 |                     <div class="card__price">
 723 |                         <div class="price-box">
 724 |                             <div class="price-box__items">
 725 |                     <span class="price-type">
 726 |                         Insider <br/>Price
 727 |                     </span>
 728 |                                 <span class="price">£640</span>
 729 |                             </div>
 730 |                         </div>
 731 |                         <div class="price-detail">
 732 |                             <p>
 733 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 734 |                                 <span> &mdash; save 72%</span>
 735 |                             </p>
 736 |                         </div>
 737 |                     </div>
 738 |                     <!-- CTA -->
 739 |                 </section>
 740 |             </article>
 741 |         </div>
 742 |         <div class="rsContent">
 743 | 
 744 |             <article class="card card--grid">
 745 |                 <!-- Stock info -->
 746 | 
 747 |                 <figure class="card__image">
 748 | 
 749 |                     <!-- When sold out, include an overlay -->
 750 |                     <a href="#" title="Montpellier">
 751 |                         <div class="img-swap">
 752 |                             <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
 753 |                             <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
 754 |                         </div>
 755 |                     </a>
 756 | 
 757 |                 </figure>
 758 | 
 759 |                 <section class="card__info">
 760 |                     <header class="card__header">
 761 |                         <h2>Lille
 762 |                             <small>Armchair, Blue</small>
 763 |                         </h2>
 764 |                     </header>
 765 |                     <div class="card__price">
 766 |                         <div class="price-box">
 767 |                             <div class="price-box__items">
 768 |                     <span class="price-type">
 769 |                         Insider <br/>Price
 770 |                     </span>
 771 |                                 <span class="price">£640</span>
 772 |                             </div>
 773 |                         </div>
 774 |                         <div class="price-detail">
 775 |                             <p>
 776 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 777 |                                 <span> &mdash; save 72%</span>
 778 |                             </p>
 779 |                         </div>
 780 |                     </div>
 781 |                     <!-- CTA -->
 782 |                 </section>
 783 |             </article>
 784 |         </div>
 785 |         <div class="rsContent">
 786 | 
 787 |             <article class="card card--grid">
 788 |                 <!-- Stock info -->
 789 | 
 790 |                 <figure class="card__image">
 791 | 
 792 |                     <!-- When sold out, include an overlay -->
 793 |                     <a href="#" title="Montpellier">
 794 |                         <div class="img-swap">
 795 |                             <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
 796 |                             <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
 797 |                         </div>
 798 |                     </a>
 799 | 
 800 |                 </figure>
 801 | 
 802 |                 <section class="card__info">
 803 |                     <header class="card__header">
 804 |                         <h2>Lille
 805 |                             <small>Armchair, Blue</small>
 806 |                         </h2>
 807 |                     </header>
 808 |                     <div class="card__price">
 809 |                         <div class="price-box">
 810 |                             <div class="price-box__items">
 811 |                     <span class="price-type">
 812 |                         Insider <br/>Price
 813 |                     </span>
 814 |                                 <span class="price">£640</span>
 815 |                             </div>
 816 |                         </div>
 817 |                         <div class="price-detail">
 818 |                             <p>
 819 |                                 <span><s>£699</s></span><span> in high-end retailers</span>
 820 |                                 <span> &mdash; save 72%</span>
 821 |                             </p>
 822 |                         </div>
 823 |                     </div>
 824 |                     <!-- CTA -->
 825 |                 </section>
 826 |             </article>
 827 |         </div>
 828 |     </div>
 829 | </div>
 830 | 
 831 | <div class="banner">
 832 |     <div class="card card--content">
 833 |         <div class="card__content">
 834 |             <h4>Become an Insider</h4>
 835 | 
 836 |             <p>Be the first to know about each day’s new designs</p>
 837 | 
 838 |             <div class="banner__cta insider-form">
 839 |                 <form action="">
 840 |                     <div class="fields">
 841 |                         <div class="field">
 842 |                             <label class="hidden" for="form1-text">Email<abbr title="Required">*</abbr></label>
 843 | 
 844 |                             <div class="input-box">
 845 |                                 <input id="form1-text" class="input-text alt-placeholder" type="text" required="" placeholder="Email">
 846 |                             </div>
 847 |                         </div>
 848 |                         <div class="field">
 849 |                             <label class="hidden" for="form2-text">Password <abbr title="Required">*</abbr></label>
 850 | 
 851 |                             <div class="input-box">
 852 |                                 <input id="form2-text" class="input-text alt-placeholder" type="text" required="" placeholder="Password">
 853 |                             </div>
 854 |                         </div>
 855 |                         <div class="field">
 856 |                             <button class="button">Sign up<span class="not-desk not-lap"> now</span></button>
 857 |                         </div>
 858 |                     </div>
 859 |                     <div class="fields">
 860 |                         <p class="or-text">or</p>
 861 | 
 862 |                         <p>
 863 |                             <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign up with Facebook</a>
 864 |                         </p>
 865 |                     </div>
 866 |                 </form>
 867 |             </div>
 868 | 
 869 |         </div>
 870 |     </div>
 871 | </div>
 872 | 
 873 | </div>
 874 | </section>
 875 | 
 876 | 
 877 | </div>
 878 | <!-- end .site-body -->
 879 | 
 880 | <section class="wrapper" style="background: white; padding: 30px 0;">
 881 |     <div class="container">
 882 |         <div class="social-links">
 883 |             <p class="banner__title stretch">Let's dance</p>
 884 |             <ul class="nav nav--inline">
 885 |                 <li><a href="#" class="sprite svg-facebook svg-facebook-dims"></a></li>
 886 |                 <li><a href="#" class="sprite svg-instagram svg-instagram-dims"></a></li>
 887 |                 <li><a href="#" class="sprite svg-pinterest svg-pinterest-dims"></a></li>
 888 |                 <li><a href="#" class="sprite svg-twitter svg-twitter-dims"></a></li>
 889 |                 <li><a href="#" class="sprite svg-linkedin svg-linkedin-dims"></a></li>
 890 |             </ul>
 891 |         </div>
 892 |     </div>
 893 | </section>
 894 | 
 895 | <footer class="site-footer ">
 896 |     <div class="container">
 897 | 
 898 |         <div class="grid">
 899 |             <div class="grid__cell desk-6-2 lap-6-2">
 900 |                 <div class="accordion">
 901 |                     <h3>Footer Category 1 <span class="caret"></span></h3>
 902 | 
 903 |                     <div class="accordion-body">
 904 |                         <ul class="nav">
 905 |                             <li><a href="#">lorem ipsum</a></li>
 906 |                             <li><a href="#">dolores sit</a></li>
 907 |                             <li><a href="#">amet consectuer</a></li>
 908 |                         </ul>
 909 |                     </div>
 910 |                 </div>
 911 |             </div>
 912 |             <div class="grid__cell desk-6-2 lap-6-2">
 913 |                 <div class="accordion">
 914 |                     <h3>Footer Category 2 <span class="caret"></span></h3>
 915 | 
 916 |                     <div class="accordion-body">
 917 |                         <ul class="nav">
 918 |                             <li><a href="#">lorem ipsum</a></li>
 919 |                             <li><a href="#">dolores sit</a></li>
 920 |                             <li><a href="#">amet consectuer</a></li>
 921 |                         </ul>
 922 |                     </div>
 923 |                 </div>
 924 |             </div>
 925 |             <div class="grid__cell desk-6-2 lap-6-2">
 926 |                 <div class="accordion">
 927 |                     <h3>Footer Category 3 <span class="caret"></span></h3>
 928 | 
 929 |                     <div class="accordion-body">
 930 |                         <ul class="nav">
 931 |                             <li><a href="#">lorem ipsum</a></li>
 932 |                             <li><a href="#">dolores sit</a></li>
 933 |                             <li><a href="#">amet consectuer</a></li>
 934 |                         </ul>
 935 |                     </div>
 936 |                 </div>
 937 |             </div>
 938 |         </div>
 939 | 
 940 |         <p class="copyright">&copy; Swoon Editions 2014</p>
 941 |     </div>
 942 | </footer>
 943 | 
 944 | 
 945 | <!-- Popup markup appears on every page -->
 946 | <div id="signup-popup" class="signup-popup mfp-hide">
 947 |     <a href="#" class="site-logo sprite svg-logo svg-logo-dims not-palm">Swoon Editions</a>
 948 | 
 949 |     <div id="signup-content" class="hidden animated">
 950 | 
 951 |         <p class="signup-heading palm-only">Sign up</p>
 952 | 
 953 |         <p class="signup-heading not-palm">Become an Insider</p>
 954 | 
 955 |         <p class="span-wraps break-desk not-palm"><span>Access to coveted furniture for up to</span> <span>70% less than high-end retailers</span></p>
 956 | 
 957 |         <form action="" class="form--stacked">
 958 | 
 959 | 
 960 |             <div class="fields">
 961 |                 <div class="field">
 962 |                     <label for="form1-text">Email</label>
 963 | 
 964 |                     <div class="input-box">
 965 |                         <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
 966 |                     </div>
 967 |                 </div>
 968 |                 <div class="field">
 969 |                     <label for="form2-text">Password</label>
 970 | 
 971 |                     <div class="input-box">
 972 |                         <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
 973 |                     </div>
 974 |                 </div>
 975 |                 <div class="field">
 976 |                     <button class="button">Sign up</button>
 977 |                 </div>
 978 |             </div>
 979 |             <div class="fields">
 980 |                 <p class="or-text">or</p>
 981 | 
 982 |                 <p>
 983 |                     <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign up with Facebook</a>
 984 |                 </p>
 985 |             </div>
 986 |         </form>
 987 | 
 988 |         <p class="text--center sign-in">
 989 |             <a href="#" class="signup-switch" data-target="signin">Already an insider? <span><b>Sign in &gt; </b></span></a>
 990 |         </p>
 991 | 
 992 |     </div>
 993 |     <div id="signin-content" class="hidden animated">
 994 |         <p class="signup-heading palm-only">Sign in</p>
 995 | 
 996 |         <form action="" class="form--stacked">
 997 | 
 998 | 
 999 |             <div class="fields">
1000 |                 <div class="field">
1001 |                     <label for="form1-text">Email</label>
1002 | 
1003 |                     <div class="input-box">
1004 |                         <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
1005 |                     </div>
1006 |                 </div>
1007 |                 <div class="field">
1008 |                     <label for="form2-text">Password</label>
1009 | 
1010 |                     <div class="input-box">
1011 |                         <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
1012 |                     </div>
1013 |                 </div>
1014 |                 <div class="field">
1015 |                     <button class="button">Sign in</button>
1016 |                 </div>
1017 |             </div>
1018 |             <div class="fields">
1019 |                 <p class="or-text">or</p>
1020 | 
1021 |                 <p>
1022 |                     <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign in with Facebook</a>
1023 |                 </p>
1024 |             </div>
1025 |         </form>
1026 | 
1027 |         <p class="text--center sign-in">
1028 |             <a href="#" class="signup-switch" data-target="signup">Not an insider yet? <span><b>Sign up &gt; </b></span></a>
1029 |         </p>
1030 |     </div>
1031 | </div>
1032 | 
1033 | 
1034 | <!-- JS Includes (DEV) -->
1035 | <script src="/assets/js/bower_components/requirejs/require.js" data-main="/assets/js/config"></script>
1036 | 
1037 | </body>
1038 | </html>


--------------------------------------------------------------------------------
/test/fixtures/store-product.php:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <!DOCTYPE html>
  4 | <!--[if lt IE 7]>      <html class="no-js ie ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  5 | <!--[if IE 7]>         <html class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
  6 | <!--[if IE 8]>         <html class="no-js ie ie8 lt-ie10 lt-ie9" lang="en"> <![endif]-->
  7 | <!--[if IE 9]>         <html class="no-js ie ie9 lt-ie10" lang="en"> <![endif]-->
  8 | <!--[if gt IE 9]><!--> <html class="no-js ffly" lang="en"> <!--<![endif]-->
  9 |     <head>
 10 |         <title>Product | Swoon Editions</title>
 11 |         <meta name="description" content="">
 12 | 
 13 |         <!-- META -->
 14 |         <meta charset="utf-8" />
 15 |         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 16 |         <meta name="description" content="">
 17 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 18 | 
 19 |         <!-- ICONS -->
 20 |         <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
 21 | 
 22 |         <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7061692/741444/css/fonts.css" />
 23 | 
 24 |         <!-- CSS Includes -->
 25 |                     <link rel="stylesheet" href="/assets/css/core.css"/>
 26 |             <script src="/assets/js/bower_components/modernizr/modernizr.js"></script>
 27 |         
 28 |         <!--[if (lt IE 9) & (!IEMobile)]>
 29 |         <link rel="stylesheet" href="/assets/css/ie.css">
 30 |         <![endif]-->
 31 |     </head>
 32 |     <body id="top" class="page-product">
 33 | 
 34 | <!-- Page top -->
 35 |             <aside class="wrapper page-top desk-only">
 36 |             <div class="container">
 37 |                 
 38 | <ul class="nav pagetop-nav float--right">
 39 |     <li class="flyout--rev">
 40 | 
 41 |         
 42 |             <a href="#" data-target="signin" class="js-signup">Sign in</a>
 43 | 
 44 |         
 45 |     </li>
 46 |     <li>
 47 |         <span class="sprite svg-trolley svg-trolley-dims"></span>
 48 |     </li>
 49 |     <li class="flyout--rev">
 50 |         <a href="#">Your Trolley</a>
 51 |                     <div class="flyout__body sub-nav" id="header-basket">
 52 |                 <!-- Trolley subnav -->
 53 |                 <div class="minibasket basket-subnav">
 54 |     <p class="basket__header">Your Trolley</p>
 55 |     <ul class="basket__listing" id="cart-sidebar">
 56 | 
 57 |                 <li class="media basket__item">
 58 |             <a class="media__img img" href="">
 59 |                 <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 60 |             </a>
 61 |             <div class="media__body">
 62 |                 <a class="basket__remove" href="#">
 63 |                     <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 64 |                 </a>
 65 |                 <p class="title"><a href="">Montpellier</a></p>
 66 |                 <p class="sub-title">Armchair, charcoal</p>
 67 |                 <ul class="details">
 68 |                     <li>Delivery: 1-2 weeks</li>
 69 |                     <li>Quantity: 1</li>
 70 |                     <li>Subtotal: £349</li>
 71 |                 </ul>
 72 |             </div>
 73 |         </li>
 74 |                 <li class="media basket__item">
 75 |             <a class="media__img img" href="">
 76 |                 <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
 77 |             </a>
 78 |             <div class="media__body">
 79 |                 <a class="basket__remove" href="#">
 80 |                     <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
 81 |                 </a>
 82 |                 <p class="title"><a href="">Montpellier</a></p>
 83 |                 <p class="sub-title">Armchair, charcoal</p>
 84 |                 <ul class="details">
 85 |                     <li>Delivery: 1-2 weeks</li>
 86 |                     <li>Quantity: 1</li>
 87 |                     <li>Subtotal: £349</li>
 88 |                 </ul>
 89 |             </div>
 90 |         </li>
 91 |             </ul>
 92 | 
 93 |     <div class="basket__total">
 94 |         <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
 95 |     </div>
 96 | 
 97 |     <div class="basket__actions">
 98 |         <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
 99 |     </div>
100 | </div>            </div>
101 |             </li>
102 |     <li>
103 |         <span class="badge">2</span>
104 |     </li>
105 | </ul>            </div>
106 |         </aside>
107 |     
108 |         <!-- Header, including NAV + LOGO + Mobile triggers -->
109 |         <header class="wrapper site-header" role="banner">
110 |             <div class="container nav-container">
111 | 
112 |                 <!-- Desktop nav is sometimes hidden -->
113 |                 
114 |                     <nav class="main-nav desk-only">
115 |     <ul class="nav nav--inline main-nav--left">
116 |         <li>
117 |             <a href="#" class="active hover-toggle" data-target="#js-editions-nav-moved"><span>Our Editions</span></a>
118 |         </li>
119 |         <li class="extra-spacing">
120 |             <a href="#" class="hover-toggle" data-target="#js-story-nav-moved"><span>Our Story</span></a>
121 |         </li>
122 |     </ul>
123 |     <ul class="nav nav--inline main-nav--right">
124 |         <li>
125 |             <a href="#signup-popup" data-target="signup" class="js-signup "><span>Become an Insider</span></a>
126 |         </li>
127 |         <li class="float--right multi-line">
128 |             <span class="over">Get in touch</span>
129 |             <a href="#signup-popup" data-target="signin" class="no-hover"><span>020 3137 2464</span></a>
130 |         </li>
131 |     </ul>
132 | </nav>
133 |                     <!-- Nav trigger, mobile -->
134 |                     <a href="#" class="burger-nav-trigger js-toggle not-desk fast-click" data-target="#header-nav" data-event="nav:open">
135 |                         <span class="sprite svg-burger svg-burger-dims"></span>
136 |                     </a>
137 | 
138 |                     <!-- Trolley trigger, mobile -->
139 |                     <a href="/" class="account-nav-trigger js-toggle not-desk fast-click" data-target="#mobile-trolley" data-event="trolley:open">
140 |                         <span class="sprite svg-trolley svg-trolley-dims"></span>
141 |                         <span class="badge">2</span>
142 |                     </a>
143 | 
144 |                 
145 |                 <!-- Logo -->
146 |                 <a href="/" class="site-logo sprite svg-logo-inverted svg-logo-inverted-dims">Swoon Editions</a>
147 | 
148 |             </div>
149 | 
150 |             <!-- Mobile nav -->
151 |             <nav class="header-nav animated fadeInDown" id="header-nav">
152 |     <div class="container">
153 |         <div class="split-nav">
154 |             <a href="#signup-popup" data-target="signup" class="flush js-signup">Become an Insider</a>
155 |             <a href="#signup-popup" data-target="signin" class="inset js-signup">Sign In</a>
156 |         </div>
157 |         <ul class="main-nav">
158 |             <li>
159 |                 <a href="#" class="has-dropdown active">Our Editions <span class="caret"></span></a>
160 |                 <div class="sub-nav-wrapper animated fadeInDown active">
161 |                     <div class="secondary-nav active" id="js-editions-nav">
162 |     <ul class="nav nav--inline">
163 |         <li class="flyout"><a href="#"><span>View All</span></a>
164 |             <div class="flyout__body sub-nav two-col-nav">
165 |                 <ul>
166 |                     <li><p class="nav-heading">By Room:</p></li>
167 |                     <li><a href="">Living room</a></li>
168 |                     <li><a href="">Dining room</a></li>
169 |                     <li><a href="">Bedroom</a></li>
170 |                     <li><a href="">Kitchen</a></li>
171 |                     <li><a href="">Outdoor</a></li>
172 |                 </ul>
173 |                 <ul>
174 |                     <li><p class="nav-heading">Popular:</p></li>
175 |                     <li><a href="">Neutrals</a></li>
176 |                     <li><a href="">Accent chairs</a></li>
177 |                     <li><a href="">Contemporary</a></li>
178 |                     <li><a href="">Shabby chic</a></li>
179 |                     <li><a href="">Linen</a></li>
180 |                     <li><a href="">Greys</a></li>
181 |                     <li><a href="">Retro</a></li>
182 |                     <li><a href="">French-style</a></li>
183 |                     <li><a href="">Mid-century modern</a></li>
184 |                 </ul>
185 |             </div>
186 |         </li>
187 |         <li><a href="#" class="active"><span>Sofas</span></a></li>
188 |         <li class="flyout"><a href="#"><span>Rugs</span></a>
189 |             <div class="flyout__body sub-nav">
190 |                 <ul>
191 |                     <li><a href="">Armchairs</a></li>
192 |                     <li><a href="">Dining chairs</a></li>
193 |                     <li><a href="">Accent chairs</a></li>
194 |                     <li><a href="">Outdoor chairs</a></li>
195 |                     <li><a href="">Ottomans & Footstools</a></li>
196 |                     <li><a href="">Stools</a></li>
197 |                     <li><a href="">Benches</a></li>
198 |                 </ul>
199 |             </div>
200 |         </li>
201 |         <li><a href="#"><span>Chairs</span></a></li>
202 |         <li><a href="#"><span>Lighting</span></a></li>
203 |         <li><a href="#"><span>Beds</span></a></li>
204 |         <li><a href="#"><span>Outdoor</span></a></li>
205 |     </ul>
206 | </div>                </div>
207 |             </li>
208 |             <li><a href="#">By Room <span class="caret"></span></a></li>
209 |             <li><a href="#">Popular <span class="caret"></span></a></li>
210 |             <li><a href="#" class="has-dropdown">Our Story <span class="caret"></span></a>
211 |                 <div class="sub-nav-wrapper animated fadeInDown">
212 |                     <div class="secondary-nav" id="js-story-nav">
213 |     <ul class="nav nav--inline">
214 |         <li><a href="#">Our Story</a></li>
215 |         <li><a href="#">Jobs</a></li>
216 |         <li><a href="#">Get In Touch</a></li>
217 |         <li><a href="#">FAQ's</a></li>
218 |     </ul>
219 | </div>                </div>
220 |             </li>
221 |         </ul>
222 |     </div>
223 | </nav>            <div class="sub-nav mobile-trolley" id="mobile-trolley">
224 |     <div class="minibasket basket-subnav">
225 |         <div class="basket__header">
226 |             <p>Your Trolley</p>
227 |         </div>
228 |         <ul class="basket__listing" id="cart-sidebar">
229 | 
230 |                             <li class="media basket__item">
231 |                     <a class="media__img img" href="">
232 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
233 |                     </a>
234 |                     <div class="media__body">
235 |                         <a class="basket__remove" href="#">
236 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
237 |                         </a>
238 |                         <p class="title"><a href="">Montpellier</a></p>
239 |                         <p class="sub-title">Armchair, charcoal</p>
240 |                         <ul class="details">
241 |                             <li>Delivery: 1-2 weeks</li>
242 |                             <li>Quantity: 1</li>
243 |                             <li>Subtotal: £349</li>
244 |                         </ul>
245 |                     </div>
246 |                 </li>
247 |                                 <li class="media basket__item">
248 |                     <a class="media__img img" href="">
249 |                         <img alt="Montpellier" height="66" src="assets/content/thumbs/product-1.jpg" width="70">
250 |                     </a>
251 |                     <div class="media__body">
252 |                         <a class="basket__remove" href="#">
253 |                             <span class="sprite svg-cross-dark svg-cross-dark-dims"></span>
254 |                         </a>
255 |                         <p class="title"><a href="">Montpellier</a></p>
256 |                         <p class="sub-title">Armchair, charcoal</p>
257 |                         <ul class="details">
258 |                             <li>Delivery: 1-2 weeks</li>
259 |                             <li>Quantity: 1</li>
260 |                             <li>Subtotal: £349</li>
261 |                         </ul>
262 |                     </div>
263 |                 </li>
264 |                         </ul>
265 | 
266 |         <div class="basket__total">
267 |             <p>Total: <span class="price-detail"><strong>£216.64</strong> + delivery</span></p>
268 |         </div>
269 | 
270 |         <div class="basket__actions">
271 |             <button class="button button--full button--primary btn-checkout">Secure Checkout</button>
272 |         </div>
273 |     </div>
274 | </div>
275 |         </header><!-- .end .site-header -->
276 | 
277 |         <div class="site-body" role="main">
278 | 
279 |             <!-- Secondary nav is hidden on some pages (eg: signup) -->
280 |             
281 |                 <section class="wrapper bg-style-01">
282 |                     <div class="container desk-only" id="js-subnav-container">
283 |                     </div>
284 |                 </section>
285 | 
286 |             
287 | <!-- Main Product slider -->
288 | <section class="wrapper bg-style-01 product">
289 |     <div class="container push-content product-slider-wrapper">
290 |         
291 | <article class="card card--product">
292 |     <header class="card__header not-desk no-js--hidden">
293 |         <h2>Lille <small>Armchair, Blue</small></h2>
294 |     </header>
295 |     <figure class="card__image">
296 |         <div class="royalSlider rsDefault product-slider ">
297 |                             <div class="rsContent">
298 | 
299 |                 <a href="assets/content/product-2-small.jpg"
300 |                    title="Montpellier"
301 |                    class="rsImg hidden"
302 |                    data-src-lap="assets/content/product-2-medium.jpg"
303 |                    data-src-desk="assets/content/product-2.jpg"
304 |                     >Montpellier</a>
305 | 
306 |                     <noscript>
307 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
308 |                     </noscript>
309 |                 </div>
310 |                             <div class="rsContent">
311 | 
312 |                 <a href="assets/content/product-2-small.jpg"
313 |                    title="Montpellier"
314 |                    class="rsImg hidden"
315 |                    data-src-lap="assets/content/product-2-medium.jpg"
316 |                    data-src-desk="assets/content/product-2.jpg"
317 |                     >Montpellier</a>
318 | 
319 |                     <noscript>
320 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
321 |                     </noscript>
322 |                 </div>
323 |                             <div class="rsContent">
324 | 
325 |                 <a href="assets/content/product-2-small.jpg"
326 |                    title="Montpellier"
327 |                    class="rsImg hidden"
328 |                    data-src-lap="assets/content/product-2-medium.jpg"
329 |                    data-src-desk="assets/content/product-2.jpg"
330 |                     >Montpellier</a>
331 | 
332 |                     <noscript>
333 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
334 |                     </noscript>
335 |                 </div>
336 |                             <div class="rsContent">
337 | 
338 |                 <a href="assets/content/product-2-small.jpg"
339 |                    title="Montpellier"
340 |                    class="rsImg hidden"
341 |                    data-src-lap="assets/content/product-2-medium.jpg"
342 |                    data-src-desk="assets/content/product-2.jpg"
343 |                     >Montpellier</a>
344 | 
345 |                     <noscript>
346 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
347 |                     </noscript>
348 |                 </div>
349 |                             <div class="rsContent">
350 | 
351 |                 <a href="assets/content/product-2-small.jpg"
352 |                    title="Montpellier"
353 |                    class="rsImg hidden"
354 |                    data-src-lap="assets/content/product-2-medium.jpg"
355 |                    data-src-desk="assets/content/product-2.jpg"
356 |                     >Montpellier</a>
357 | 
358 |                     <noscript>
359 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
360 |                     </noscript>
361 |                 </div>
362 |                             <div class="rsContent">
363 | 
364 |                 <a href="assets/content/product-2-small.jpg"
365 |                    title="Montpellier"
366 |                    class="rsImg hidden"
367 |                    data-src-lap="assets/content/product-2-medium.jpg"
368 |                    data-src-desk="assets/content/product-2.jpg"
369 |                     >Montpellier</a>
370 | 
371 |                     <noscript>
372 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
373 |                     </noscript>
374 |                 </div>
375 |                             <div class="rsContent">
376 | 
377 |                 <a href="assets/content/product-2-small.jpg"
378 |                    title="Montpellier"
379 |                    class="rsImg hidden"
380 |                    data-src-lap="assets/content/product-2-medium.jpg"
381 |                    data-src-desk="assets/content/product-2.jpg"
382 |                     >Montpellier</a>
383 | 
384 |                     <noscript>
385 |                         <img src="assets/content/product-2.jpg" alt="Montpellier" />
386 |                     </noscript>
387 |                 </div>
388 |                     </div>
389 |     </figure>
390 |     <div class="flex-parent right">
391 |         <section class="card__info animated fadeIn no-js--visible">
392 |             <header class="card__header not-palm not-lap no-js--visible">
393 |                 <h2>Lille <small>Armchair, Blue</small></h2>
394 |             </header>
395 |             <h3 class="not-palm">The perfect French-style desk for a stylish home office.</h3>
396 |             <div class="card__price">
397 |                 <div class="price-box">
398 |                     <div class="price-box__items">
399 |                         <span class="price-type">
400 |                             Insider <br>Price
401 |                         </span>
402 |                         <span class="price">£640</span>
403 |                     </div>
404 |                 </div>
405 |                 <div class="price-detail">
406 |                     <p>
407 |                         <span><s>£699</s></span><span> in high-end retailers</span>
408 |                         <span> &mdash; save 72%</span>
409 |                     </p>
410 |                 </div>
411 |             </div>
412 |             <div class="card__cta">
413 |                 <div class="actions">
414 |                                              <div class="actions__qty">
415 |                             <label class="select" for="">
416 |                                 <select name="qty">
417 |                                                                             <option value="1">1</option>
418 |                                                                             <option value="2">2</option>
419 |                                                                             <option value="3">3</option>
420 |                                                                             <option value="4">4</option>
421 |                                                                             <option value="5">5</option>
422 |                                                                             <option value="6">6</option>
423 |                                                                             <option value="7">7</option>
424 |                                                                             <option value="8">8</option>
425 |                                                                             <option value="9">9</option>
426 |                                                                     </select>
427 |                             </label>
428 |                         </div>
429 |                         <div class="actions__add">
430 |                             <a class="button" href="#">Add to trolley</a>
431 |                         </div>
432 |                                      </div>
433 |             </div>
434 |             <div class="card__stock">
435 |                                     <p>Edition limited to 12 • <b>only 5 left</b></p>
436 |                             </div>
437 |         </section>
438 |     </div>
439 | </article>    </div>
440 | </section>
441 | 
442 | <!-- Product page content, under slider -->
443 | <section class="wrapper">
444 |     <div class="container">
445 | 
446 |         <!-- Detached bullet container for slider, this is populated by RoyalSlider -->
447 |         <div class="product-bullets"></div>
448 | 
449 |         <div class="card__promotion banner">
450 |     <p><strong>Free delivery <span class="not-palm">on MONTPELLIER</span></strong> use voucher code <strong>FREE MONTPELLIER </strong>at checkout</p>
451 | </div>
452 |         <div class="grid">
453 | 
454 |             <!-- Thumbnails -->
455 |             <div class="grid__cell desk-6-4 lap-6-4">
456 |                 <div class="thumbnails slider-thumbs">
457 |                                             <a href="assets/content/product-2-slide.jpg">
458 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="0" class="active"/>
459 |                         </a>
460 |                                             <a href="assets/content/product-2-slide.jpg">
461 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="1" class=""/>
462 |                         </a>
463 |                                             <a href="assets/content/product-2-slide.jpg">
464 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="2" class=""/>
465 |                         </a>
466 |                                             <a href="assets/content/product-2-slide.jpg">
467 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="3" class=""/>
468 |                         </a>
469 |                                             <a href="assets/content/product-2-slide.jpg">
470 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="4" class=""/>
471 |                         </a>
472 |                                             <a href="assets/content/product-2-slide.jpg">
473 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="5" class=""/>
474 |                         </a>
475 |                                             <a href="assets/content/product-2-slide.jpg">
476 |                             <img src="assets/content/thumb-01.jpg" alt="" width="59" data-target="6" class=""/>
477 |                         </a>
478 |                                     </div>
479 |             </div>
480 | 
481 |             <!-- Color choices -->
482 |             <div class="grid__cell desk-6-2 lap-6-2">
483 |                 <div class="not-palm thumbnails floated">
484 |                     <div class="items">
485 |                         <span>Also in: </span>
486 |                         <a href="#"><img src="assets/content/thumb-01.jpg" alt="" width="59" height="38"/></a>
487 |                         <a href="#"><img src="assets/content/thumb-02.jpg" alt="" width="59" height="38"/></a>
488 |                     </div>
489 |                 </div>
490 |             </div>
491 |         </div>
492 | 
493 |         <article class="accordion product-detail">
494 |     <div class="grid">
495 |         <div class="grid__cell desk-6-2 lap-6-2">
496 |             <div id="desk-target-01"></div>
497 |             <div class="desk-shift" data-target="#desk-target-02">
498 |                 <h3>The Details <span class="caret"></span></h3>
499 |                 <div class="accordion-body">
500 |                     <ul>
501 |                         <li>W: 130 cm D: 70 cm H: 76 cm</li>
502 |                         <li>Drawer depth: 40 cm</li>
503 |                         <li>Handcarved kiln-dried mango wood</li>
504 |                         <li>Mortise and tenon joinery</li>
505 |                         <li>Aged limewashed effect finish</li>
506 |                         <li>Deep 40cm drawers that fit a 15'' laptop</li>
507 |                         <li>Plate-and-ring antiqued brass handles</li>
508 |                     </ul>
509 |                 </div>
510 |             </div>
511 |         </div>
512 |         <div class="grid__cell desk-6-2 lap-6-2">
513 |             <h3>This Edition<span class="caret"></span></h3>
514 |             <div class="accordion-body">
515 |                 <p>
516 |                     The Adele strikes just the right balance between French elegance and a more
517 |                     rustic, pared-back style. So… cabriole legs, check; carving on all sides, check;
518 |                     brass plate-and-ring handles, check. But the limewashed finish gives those
519 |                     signature French elements a clean feel, keeping it very real and very
520 |                     contemporary. The Adele is ideal for working from home, and it can also work
521 |                     as a super-deep dressing table.
522 |                 </p>
523 |             </div>
524 |         </div>
525 |         <div class="grid__cell desk-6-2 lap-6-2">
526 |             <div id="desk-target-02"></div>
527 |             <div class="desk-shift" data-target="#desk-target-01">
528 |                 <h3>The Maker<span class="caret"></span></h3>
529 |                 <div class="accordion-body">
530 |                     <p>
531 |                         The workshop is located in the beautiful region of Rajashthan, India. Matthew,
532 |                         our Quality Guardian, relocated to India and visits the artisans several times a
533 |                         week. The owner has been in the furniture business for over 40 years, initially
534 |                         in antique restoration. Impressed with the operation we decided to consolidate
535 |                         the majority of our French-style production here.
536 |                     </p>
537 |                 </div>
538 |             </div>
539 | 
540 |             <h3>Delivery & Returns<span class="caret"></span></h3>
541 |             <div class="accordion-body">
542 |                 <ul>
543 |                     <li>In production – estimated delivery in late May</li>
544 |                     <li>Two-man delivery service to room of choice</li>
545 |                     <li>£38 per item delivery charge, non-refundable</li>
546 |                     <li>7 day no quibble returns with free collection</li>
547 |                 </ul>
548 |             </div>
549 |         </div>
550 |     </div>
551 | </article>
552 | 
553 |         
554 | 
555 | <div class="detail-gallery">
556 |     <div class="grid">
557 |         <div class="grid__cell">
558 |                     <div class="detail-zoomer has-zoom">
559 |             <span class="zoom-trigger"></span>
560 |             <a href="assets/content/product-detail-01-zoom.jpg" class="popup-image">
561 |                 <img class="zoom-image" src="assets/content/product-detail-01.jpg" alt="Montpellier"/>
562 |             </a>
563 |         </div>
564 |             </div>
565 |         <div class="grid__cell desk-6-3 lap-6-3">
566 |                     <div class="detail-zoomer has-zoom">
567 |             <span class="zoom-trigger"></span>
568 |             <a href="assets/content/product-detail-half-01-zoom.jpg" class="popup-image">
569 |                 <img class="zoom-image" src="assets/content/product-detail-half-01.jpg" alt="Montpellier"/>
570 |             </a>
571 |         </div>
572 |             </div>
573 |         <div class="grid__cell desk-6-3 lap-6-3">
574 |                     <div class="detail-zoomer has-zoom">
575 |             <span class="zoom-trigger"></span>
576 |             <a href="assets/content/product-detail-half-02-zoom.jpg" class="popup-image">
577 |                 <img class="zoom-image" src="assets/content/product-detail-half-02.jpg" alt="Montpellier"/>
578 |             </a>
579 |         </div>
580 |             </div>
581 |         <div class="grid__cell">
582 |                     <div class="detail-zoomer has-zoom">
583 |             <span class="zoom-trigger"></span>
584 |             <a href="assets/content/product-detail-02-zoom.jpg" class="popup-image">
585 |                 <img class="zoom-image" src="assets/content/product-detail-02.jpg" alt="Montpellier"/>
586 |             </a>
587 |         </div>
588 |             </div>
589 |         <div class="grid__cell">
590 |                     <div class="detail-zoomer has-zoom">
591 |             <span class="zoom-trigger"></span>
592 |             <a href="assets/content/product-detail-03-zoom.jpg" class="popup-image">
593 |                 <img class="zoom-image" src="assets/content/product-detail-03.jpg" alt="Montpellier"/>
594 |             </a>
595 |         </div>
596 |             </div>
597 |     </div>
598 | </div>
599 | 
600 |         <div class="banner">
601 |     <div class="card card--content">
602 |         <div class="card__content flush--bottom">
603 |             <h4>Why shop with us?</h4>
604 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
605 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
606 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum ornare metus, at lobortis libero viverra non.</p>
607 |         </div>
608 |     </div>
609 | </div>
610 |         <div>
611 |     <div class="banner underlined">
612 |         <h3 class="banner__heading padded">More designs from Swoon Editions</h3>
613 |     </div>
614 |     <div class="royalSlider rsDefault grid-slider not-desk">
615 |         <div class="rsContent">
616 |             
617 |     <article class="card card--grid">
618 |                     <!-- Stock info -->
619 |                             <div class="stock-info">
620 |                     <span>Only <b>10</b> Left</span>
621 |                 </div>
622 |                     
623 |         <figure class="card__image">
624 | 
625 |             <!-- When sold out, include an overlay -->
626 |                             <a href="#" title="Montpellier">
627 |                     <div class="img-swap">
628 |                         <img src="assets/content/cards/01.jpg" alt="Lille" class="main-img">
629 |                         <img src="assets/content/cards/01-zoomed.jpg" alt="Lille" class="alt-img">
630 |                     </div>
631 |                 </a>
632 |             
633 |         </figure>
634 | 
635 |         <section class="card__info">
636 |             <header class="card__header">
637 |                 <h2>Lille <small>Armchair, Blue</small></h2>
638 |             </header>
639 |             <div class="card__price">
640 |                 <div class="price-box">
641 |                     <div class="price-box__items">
642 |                     <span class="price-type">
643 |                         Insider <br/>Price
644 |                     </span>
645 |                         <span class="price">£640</span>
646 |                     </div>
647 |                 </div>
648 |                 <div class="price-detail">
649 |                                             <p>
650 |                             <span><s>£699</s></span><span> in high-end retailers</span>
651 |                             <span> &mdash; save 72%</span>
652 |                         </p>
653 |                                     </div>
654 |             </div>
655 |             <!-- CTA -->
656 |                     </section>
657 |     </article>
658 |         </div>
659 |         <div class="rsContent">
660 |             
661 |     <article class="card card--grid">
662 |                     <!-- Stock info -->
663 |                     
664 |         <figure class="card__image">
665 | 
666 |             <!-- When sold out, include an overlay -->
667 |                             <a href="#" title="Montpellier">
668 |                     <div class="img-swap">
669 |                         <img src="assets/content/cards/04.jpg" alt="Lille" class="main-img">
670 |                         <img src="assets/content/cards/04-zoomed.jpg" alt="Lille" class="alt-img">
671 |                     </div>
672 |                 </a>
673 |             
674 |         </figure>
675 | 
676 |         <section class="card__info">
677 |             <header class="card__header">
678 |                 <h2>Lille <small>Armchair, Blue</small></h2>
679 |             </header>
680 |             <div class="card__price">
681 |                 <div class="price-box">
682 |                     <div class="price-box__items">
683 |                     <span class="price-type">
684 |                         Insider <br/>Price
685 |                     </span>
686 |                         <span class="price">£640</span>
687 |                     </div>
688 |                 </div>
689 |                 <div class="price-detail">
690 |                                             <p>
691 |                             <span><s>£699</s></span><span> in high-end retailers</span>
692 |                             <span> &mdash; save 72%</span>
693 |                         </p>
694 |                                     </div>
695 |             </div>
696 |             <!-- CTA -->
697 |                     </section>
698 |     </article>
699 |         </div>
700 |         <div class="rsContent">
701 |             
702 |     <article class="card card--grid">
703 |                     <!-- Stock info -->
704 |                     
705 |         <figure class="card__image">
706 | 
707 |             <!-- When sold out, include an overlay -->
708 |                             <a href="#" title="Montpellier">
709 |                     <div class="img-swap">
710 |                         <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
711 |                         <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
712 |                     </div>
713 |                 </a>
714 |             
715 |         </figure>
716 | 
717 |         <section class="card__info">
718 |             <header class="card__header">
719 |                 <h2>Lille <small>Armchair, Blue</small></h2>
720 |             </header>
721 |             <div class="card__price">
722 |                 <div class="price-box">
723 |                     <div class="price-box__items">
724 |                     <span class="price-type">
725 |                         Insider <br/>Price
726 |                     </span>
727 |                         <span class="price">£640</span>
728 |                     </div>
729 |                 </div>
730 |                 <div class="price-detail">
731 |                                             <p>
732 |                             <span><s>£699</s></span><span> in high-end retailers</span>
733 |                             <span> &mdash; save 72%</span>
734 |                         </p>
735 |                                     </div>
736 |             </div>
737 |             <!-- CTA -->
738 |                     </section>
739 |     </article>
740 |         </div>
741 |         <div class="rsContent">
742 |             
743 |     <article class="card card--grid">
744 |                     <!-- Stock info -->
745 |                     
746 |         <figure class="card__image">
747 | 
748 |             <!-- When sold out, include an overlay -->
749 |                             <a href="#" title="Montpellier">
750 |                     <div class="img-swap">
751 |                         <img src="assets/content/cards/03.jpg" alt="Lille" class="main-img">
752 |                         <img src="assets/content/cards/03-zoomed.jpg" alt="Lille" class="alt-img">
753 |                     </div>
754 |                 </a>
755 |             
756 |         </figure>
757 | 
758 |         <section class="card__info">
759 |             <header class="card__header">
760 |                 <h2>Lille <small>Armchair, Blue</small></h2>
761 |             </header>
762 |             <div class="card__price">
763 |                 <div class="price-box">
764 |                     <div class="price-box__items">
765 |                     <span class="price-type">
766 |                         Insider <br/>Price
767 |                     </span>
768 |                         <span class="price">£640</span>
769 |                     </div>
770 |                 </div>
771 |                 <div class="price-detail">
772 |                                             <p>
773 |                             <span><s>£699</s></span><span> in high-end retailers</span>
774 |                             <span> &mdash; save 72%</span>
775 |                         </p>
776 |                                     </div>
777 |             </div>
778 |             <!-- CTA -->
779 |                     </section>
780 |     </article>
781 |         </div>
782 |     </div>
783 | </div>
784 | 
785 |         <div class="banner">
786 |             <div class="card card--content">
787 |                 <div class="card__content">
788 |                     <h4>Become an Insider</h4>
789 |                     <p>Be the first to know about each day’s new designs</p>
790 |                     
791 | <div class="banner__cta insider-form">
792 |     <form action="">
793 |         <div class="fields">
794 |             <div class="field">
795 |                 <label class="hidden" for="form1-text">Email<abbr title="Required">*</abbr></label>
796 |                 <div class="input-box">
797 |                     <input id="form1-text" class="input-text alt-placeholder" type="text" required="" placeholder="Email">
798 |                 </div>
799 |             </div>
800 |             <div class="field">
801 |                 <label class="hidden" for="form2-text">Password <abbr title="Required">*</abbr></label>
802 |                 <div class="input-box">
803 |                     <input id="form2-text" class="input-text alt-placeholder" type="text" required="" placeholder="Password">
804 |                 </div>
805 |             </div>
806 |             <div class="field"><button class="button">Sign up<span class="not-desk not-lap"> now</span></button></div>
807 |         </div>
808 |         <div class="fields">
809 |             <p class="or-text">or</p>
810 |             <p>
811 |                 <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span> Sign up with Facebook</a>
812 |             </p>
813 |         </div>
814 |     </form>
815 | </div>
816 | 
817 |                 </div>
818 |             </div>
819 |         </div>
820 | 
821 |     </div>
822 | </section>
823 | 
824 | 
825 |         </div><!-- end .site-body -->
826 | 
827 |                     <section class="wrapper" style="background: white; padding: 30px 0;">
828 |                 <div class="container">
829 |                     <div class="social-links">
830 |     <p class="banner__title stretch">Let's dance</p>
831 |     <ul class="nav nav--inline">
832 |         <li><a href="#" class="sprite svg-facebook svg-facebook-dims"></a></li>
833 |         <li><a href="#" class="sprite svg-instagram svg-instagram-dims"></a></li>
834 |         <li><a href="#" class="sprite svg-pinterest svg-pinterest-dims"></a></li>
835 |         <li><a href="#" class="sprite svg-twitter svg-twitter-dims"></a></li>
836 |         <li><a href="#" class="sprite svg-linkedin svg-linkedin-dims"></a></li>
837 |     </ul>
838 | </div>                </div>
839 |             </section>
840 |         
841 |         <footer class="site-footer ">
842 |     <div class="container">
843 | 
844 |                 <div class="grid">
845 |             <div class="grid__cell desk-6-2 lap-6-2">
846 |                 <div class="accordion">
847 |                     <h3>Footer Category 1 <span class="caret"></span></h3>
848 | 
849 |                     <div class="accordion-body">
850 |                         <ul class="nav">
851 |                             <li><a href="#">lorem ipsum</a></li>
852 |                             <li><a href="#">dolores sit</a></li>
853 |                             <li><a href="#">amet consectuer</a></li>
854 |                         </ul>
855 |                     </div>
856 |                 </div>
857 |             </div>
858 |             <div class="grid__cell desk-6-2 lap-6-2">
859 |                 <div class="accordion">
860 |                     <h3>Footer Category 2 <span class="caret"></span></h3>
861 | 
862 |                     <div class="accordion-body">
863 |                         <ul class="nav">
864 |                             <li><a href="#">lorem ipsum</a></li>
865 |                             <li><a href="#">dolores sit</a></li>
866 |                             <li><a href="#">amet consectuer</a></li>
867 |                         </ul>
868 |                     </div>
869 |                 </div>
870 |             </div>
871 |             <div class="grid__cell desk-6-2 lap-6-2">
872 |                 <div class="accordion">
873 |                     <h3>Footer Category 3 <span class="caret"></span></h3>
874 | 
875 |                     <div class="accordion-body">
876 |                         <ul class="nav">
877 |                             <li><a href="#">lorem ipsum</a></li>
878 |                             <li><a href="#">dolores sit</a></li>
879 |                             <li><a href="#">amet consectuer</a></li>
880 |                         </ul>
881 |                     </div>
882 |                 </div>
883 |             </div>
884 |         </div>
885 |         
886 |         <p class="copyright">&copy; Swoon Editions 2014</p>
887 |     </div>
888 | </footer>
889 | 
890 | 
891 | <!-- Popup markup appears on every page -->
892 | <div id="signup-popup" class="signup-popup mfp-hide">
893 |     <a href="#" class="site-logo sprite svg-logo svg-logo-dims not-palm">Swoon Editions</a>
894 |     <div id="signup-content" class="hidden animated">
895 | 
896 |         <p class="signup-heading palm-only">Sign up</p>
897 |         <p class="signup-heading not-palm">Become an Insider</p>
898 |         <p class="span-wraps break-desk not-palm"><span>Access to coveted furniture for up to</span> <span>70% less than high-end retailers</span></p>
899 | 
900 |             <form action="" class="form--stacked">
901 | 
902 | 
903 |         
904 |         <div class="fields">
905 |             <div class="field">
906 |                 <label for="form1-text">Email</label>
907 | 
908 |                 <div class="input-box">
909 |                     <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
910 |                 </div>
911 |             </div>
912 |             <div class="field">
913 |                 <label for="form2-text">Password</label>
914 | 
915 |                 <div class="input-box">
916 |                     <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
917 |                 </div>
918 |             </div>
919 |             <div class="field">
920 |                 <button class="button">Sign up</button>
921 |             </div>
922 |         </div>
923 |         <div class="fields">
924 |             <p class="or-text">or</p>
925 |             <p>
926 |                 <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span>                    Sign up with Facebook</a>
927 |             </p>
928 |         </div>
929 |     </form>
930 | 
931 |         <p class="text--center sign-in">
932 |             <a href="#" class="signup-switch" data-target="signin">Already an insider? <span><b>Sign in &gt; </b></span></a>
933 |         </p>
934 | 
935 |     </div>
936 |     <div id="signin-content" class="hidden animated">
937 |         <p class="signup-heading palm-only">Sign in</p>
938 | 
939 |             <form action="" class="form--stacked">
940 | 
941 | 
942 |         
943 |         <div class="fields">
944 |             <div class="field">
945 |                 <label for="form1-text">Email</label>
946 | 
947 |                 <div class="input-box">
948 |                     <input id="form1-text" class="input-text alt-placeholder" type="text" required="">
949 |                 </div>
950 |             </div>
951 |             <div class="field">
952 |                 <label for="form2-text">Password</label>
953 | 
954 |                 <div class="input-box">
955 |                     <input id="form2-text" class="input-text alt-placeholder" type="text" required="">
956 |                 </div>
957 |             </div>
958 |             <div class="field">
959 |                 <button class="button">Sign in</button>
960 |             </div>
961 |         </div>
962 |         <div class="fields">
963 |             <p class="or-text">or</p>
964 |             <p>
965 |                 <a href="" class="button button--facebook"><span class="sprite svg-facebook-white svg-facebook-white-dims"></span>                    Sign in with Facebook</a>
966 |             </p>
967 |         </div>
968 |     </form>
969 | 
970 |         <p class="text--center sign-in">
971 |             <a href="#" class="signup-switch" data-target="signup">Not an insider yet? <span><b>Sign up &gt; </b></span></a>
972 |         </p>
973 |     </div>
974 | </div>
975 | 
976 |         
977 |         
978 |             <!-- JS Includes (DEV) -->
979 |             <script src="/assets/js/bower_components/requirejs/require.js" data-main="/assets/js/config"></script>
980 | 
981 |             </body>
982 | </html>


--------------------------------------------------------------------------------
/test/init.js:
--------------------------------------------------------------------------------
 1 | var browserSync   = require("browser-sync");
 2 | var htmlInjector  = require("../index");
 3 | var path          = require("path");
 4 | var assert        = require("chai").assert;
 5 | 
 6 | describe(".plugin()", function () {
 7 |     it("should run with BrowserSync `.use()`", function (done) {
 8 |         browserSync.reset();
 9 |         browserSync.use(htmlInjector);
10 |         browserSync({logLevel: "silent"}, function (err, bs) {
11 |             bs.cleanup();
12 |             done();
13 |         });
14 |     });
15 |     it("should run with BrowserSync as inline plugin", function (done) {
16 |         browserSync.reset();
17 |         var modulepath = path.dirname(require.resolve("../index"));
18 |         browserSync({plugins: [modulepath], logLevel: "silent"}, function (err, bs) {
19 |             assert.equal(bs.getUserPlugins()[0].name, "HTML Injector");
20 |             assert.isTrue(bs.getUserPlugins()[0].active);
21 |             bs.cleanup();
22 |             done();
23 |         });
24 |     });
25 |     it("should run with BrowserSync as inline plugin with options", function (done) {
26 |         browserSync.reset();
27 |         var modulepath = path.dirname(require.resolve("../index"));
28 |         var plugin = {
29 |             module: modulepath
30 |         };
31 |         browserSync({plugins: [plugin], logLevel: "silent"}, function (err, bs) {
32 |             assert.equal(bs.getUserPlugins()[0].name, "HTML Injector");
33 |             assert.isTrue(bs.getUserPlugins()[0].active);
34 |             bs.cleanup();
35 |             done();
36 |         });
37 |     });
38 |     it("should run when UI is disabled", function (done) {
39 |         browserSync.reset();
40 |         var modulepath = path.dirname(require.resolve("../index"));
41 |         var plugin = {
42 |             module: modulepath,
43 |             options: {
44 |                 excludedTags: ['H1']
45 |             }
46 |         };
47 |         browserSync({
48 |             plugins: [plugin],
49 |             logLevel: "silent",
50 |             ui: false
51 |         }, function (err, bs) {
52 |             assert.equal(bs.getUserPlugins()[0].name, "HTML Injector");
53 |             assert.isTrue(bs.getUserPlugins()[0].active);
54 |             bs.cleanup();
55 |             done();
56 |         });
57 |     });
58 | });
59 | 


--------------------------------------------------------------------------------
/ui/client.js:
--------------------------------------------------------------------------------
 1 | (function (angular) {
 2 | 
 3 |     const PLUGIN_NAME = "HTML Injector";
 4 | 
 5 |     angular
 6 |         .module("BrowserSync")
 7 |         .directive("htmlInjector", function () {
 8 |             return {
 9 |                 restrict: "E",
10 |                 replace: true,
11 |                 scope: {
12 |                     "options": "=",
13 |                     "pluginOpts": "="
14 |                 },
15 |                 templateUrl: "html-injector/html-injector.directive.html",
16 |                 controller: ["$scope", "Socket", function ($scope, Socket) {
17 | 
18 |                     var ctrl = this;
19 | 
20 |                     ctrl.restriction = "";
21 | 
22 |                     ctrl.state = {
23 |                         classname: "ready"
24 |                     };
25 | 
26 |                     ctrl.plugin = $scope.options.userPlugins.filter(function (item) {
27 |                         return item.name === PLUGIN_NAME;
28 |                     })[0];
29 | 
30 |                     ctrl.addRestriction = function (selector) {
31 | 
32 |                         if (selector.length < 3) {
33 |                             return;
34 |                         }
35 | 
36 |                         ctrl.restriction = "";
37 |                         ctrl.state.classname = "waiting";
38 | 
39 |                         setTimeout(function () {
40 | 
41 |                             ctrl.state.classname = "success";
42 | 
43 |                             $scope.$digest();
44 | 
45 |                             setTimeout(function () {
46 |                                 ctrl.state.classname = "ready";
47 |                                 $scope.$digest();
48 |                             }, 1000);
49 | 
50 |                             Socket.uiEvent({
51 |                                 namespace: PLUGIN_NAME,
52 |                                 event: "restriction:add",
53 |                                 data: selector
54 |                             });
55 |                         }, 300);
56 | 
57 |                     };
58 | 
59 |                     ctrl.removeRestriction = function (selector) {
60 |                         Socket.uiEvent({
61 |                             namespace: PLUGIN_NAME,
62 |                             event: "restriction:remove",
63 |                             data: selector
64 |                         });
65 |                     };
66 | 
67 |                     ctrl.update = function (data) {
68 |                         ctrl.plugin.opts = data.opts;
69 |                         $scope.$digest();
70 |                     };
71 | 
72 |                     Socket.on("options:update", ctrl.update);
73 | 
74 |                     $scope.$on("$destory", function () {
75 |                         Socket.off("options:update", ctrl.update);
76 |                     });
77 |                 }],
78 |                 controllerAs: "ctrl"
79 |             };
80 |         });
81 | 
82 | })(angular);
83 | 
84 | 


--------------------------------------------------------------------------------
/ui/html-injector.directive.html:
--------------------------------------------------------------------------------
 1 | <section>
 2 |     <div bs-panel-content>
 3 |         <div bs-inputs bs-grid="desk-2">
 4 |             <div bs-grid-item="padded-right">
 5 |                 <div bs-input="text">
 6 |                     <form ng-submit="ctrl.addRestriction(ctrl.restriction)">
 7 |                         <div bs-input="text">
 8 |                             <label for="new-restriction" bs-input-label>New Restriction</label>
 9 |                             <input bs-stack
10 |                                    id="new-restriction"
11 |                                    type="text"
12 |                                    value=""
13 |                                    ng-model="ctrl.restriction"
14 |                                    placeholder="eg: #main">
15 |                             <div bs-state-wrapper ng-class="[ctrl.state.classname]">
16 |                                 <button type="submit"
17 |                                         id="add-restriction"
18 |                                         bs-button="size-small subtle-alt icon-left"
19 |                                         ng-blur="ctrl.state.classname === 'ready'"
20 |                                         ng-disabled="ctrl.state.waiting">
21 |                                     <svg bs-svg-icon="" icon="circle-plus"><use xlink:href="#svg-circle-plus"></use></svg>
22 |                                     Add
23 |                                 </button>
24 |                                 <div bs-state-icons>
25 |                                     <svg bs-svg-icon icon="circle-ok" bs-state="success inline"><use xlink:href="#svg-circle-ok"></use></svg>
26 |                                     <svg bs-svg-icon icon="circle-minus" bs-state="waiting inline" bs-anim="spin"><use xlink:href="#svg-circle-minus"></use></svg>
27 |                                 </div>
28 |                             </div>
29 |                         </div>
30 |                     </form>
31 |                 </div>
32 |             </div>
33 |             <div bs-grid-item>
34 |                 <div ng-show="!ctrl.plugin.opts.restrictions.length">
35 |                     <p bs-label-heading>No Restrictions.</p>
36 |                     <p>This means the entire page will be used for comparison. If this is slow, or causes
37 |                     errors, narrow down the comparison by using a CSS selectors.</p>
38 |                 </div>
39 |                 <p bs-label-heading ng-show="ctrl.plugin.opts.restrictions.length"><b>Current Restrictions:</b></p>
40 |                 <ul bs-list="bordered inline-controls">
41 |                     <li ng-repeat="item in ctrl.plugin.opts.restrictions track by $index">
42 |                         <p bs-text="mono">{{item}}</p>
43 |                         <div bs-button-group>
44 |                             <button href="#" bs-button="subtle-alt icon" ng-click="ctrl.removeRestriction(item)">
45 |                                 <svg bs-svg-icon>
46 |                                     <use xlink:href="#svg-bin"></use>
47 |                                 </svg>
48 |                             </button>
49 |                         </div>
50 |                     </li>
51 |                 </ul>
52 |             </div>
53 |         </div>
54 |     </div>
55 | </section>
56 | 


--------------------------------------------------------------------------------
/ui/html-injector.html:
--------------------------------------------------------------------------------
1 | <html-injector options="ctrl.options"></html-injector>


--------------------------------------------------------------------------------