diff --git a/.eslintignore b/.eslintignore index 60b17779..278b72e3 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ examples/* docs/* tmp/* coverage/* +test/mocha/html-snapshots/server diff --git a/test/mocha/html-snapshots/server/app/app.js b/test/mocha/html-snapshots/server/app/app.js new file mode 100644 index 00000000..8b3d4b28 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/app.js @@ -0,0 +1,74 @@ +define([ + "backbone.layoutmanager" +], function() { + + // Provide a global location to place configuration settings and module + // creation. + var app = { + // The root path to run the application. + root: "/" + }; + + // Localize or create a new JavaScript Template object. + var JST = window.JST = window.JST || {}; + + // Configure LayoutManager with Backbone Boilerplate defaults. + Backbone.Layout.configure({ + // Allow LayoutManager to augment Backbone.View.prototype. + manage: true, + + prefix: "app/templates/", + + fetch: function(path) { + // Concatenate the file extension. + path = path + ".html"; + + // If cached, use the compiled template. + if (JST[path]) { + return JST[path]; + } + + // Put fetch into `async-mode`. + var done = this.async(); + + // Seek out the template asynchronously. + $.get(app.root + path, function(contents) { + done(JST[path] = _.template(contents)); + }); + } + }); + + // Mix Backbone.Events, modules, and layout management into the app object. + return _.extend(app, { + // Create a custom object with a nested Views object. + module: function(additionalProps) { + return _.extend({ Views: {} }, additionalProps); + }, + + // Helper for using layouts. + useLayout: function(name, options) { + // Enable variable arity by allowing the first argument to be the options + // object and omitting the name argument. + if (_.isObject(name)) { + options = name; + } + + // Ensure options is an object. + options = options || {}; + + // If a name property was specified use that as the template. + if (_.isString(name)) { + options.template = name; + } + + // Create a new Layout with options. + var layout = new Backbone.Layout(_.extend({ + el: "#main" + }, options)); + + // Cache the refererence. + return this.layout = layout; + } + }, Backbone.Events); + +}); diff --git a/test/mocha/html-snapshots/server/app/config.js b/test/mocha/html-snapshots/server/app/config.js new file mode 100644 index 00000000..4e32ebe1 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/config.js @@ -0,0 +1,74 @@ +// Set the require.js configuration for your application. +require.config({ + + // Initialize the application with the main application file and the JamJS + // generated configuration file. + deps: ["../vendor/jam/require.config", "main"], + + paths: { + + // Use the underscore build of Lo-Dash to minimize incompatibilities. + "lodash": "../vendor/jam/lodash/dist/lodash.underscore", + + // JavaScript folders. + plugins: "../vendor/js/plugins", + vendor: "../vendor", + + // shortcut to foundation + foundation: "../vendor/foundation", + + polyfiller: "../vendor/js/libs/webshim/minified/polyfiller" + + }, + + config: { + "modules/contact": { + // these have to match the api + endpoint: "/api", + resource: "contact", + slug: "NORTHSTAR86i23a03pZ" + }, + "modules/render": { + polyfillerBasePath: "/vendor/js/libs/webshim/minified/shims/" + } + }, + + map: { + // Ensure Lo-Dash is used instead of underscore. + "*": { "underscore": "lodash" } + + // Put additional maps here. + }, + + shim: { + + "foundation/jquery.event.move": { + deps: ["jquery"] + }, + "foundation/jquery.event.swipe": { + deps: ["jquery"] + }, + + "foundation/jquery.foundation.orbit.ln": { + deps: ["jquery"] + }, + "foundation/init": { + deps: ["jquery"] + }, +/* + "foundation/jquery.foundation.mediaQueryToggle": { + deps: ["jquery"] + }, +*/ + "foundation/jquery.foundation.navigation.ln" : { + deps: ["jquery"] + }, + "foundation/jquery.placeholder": { + deps: ["jquery"] + }, + "foundation/jquery.foundation.reveal": { + deps: ["jquery"] + } + } + +}); diff --git a/test/mocha/html-snapshots/server/app/data/pageData.json b/test/mocha/html-snapshots/server/app/data/pageData.json new file mode 100644 index 00000000..3260f273 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/data/pageData.json @@ -0,0 +1,193 @@ +{ + "home": { + "name": "home", + "type": "target", + "url": "/", + "displayName": "Home", + "slides": [ + { + "cssclass": "slider-1", + "content": "
Oh yes we do. We really really do - believe it!
" + } + ], + "mainArt": "/images/art1.jpg", + "mainArtAlt": "Test Art", + "pageTitle": "Carpet Cleaning - North Star Cleaning Service", + "pageDescription": "this is the carpets page", + "pageKeywords": "carpets page", + "displayName": "Carpets", + "url": "/services/carpets", + "vectorArt": true, + "images": [ + { + "pair": 0, + "revealId": "carpet1", + "th_src": "/images/carpets/carpet1_th.jpg", + "th_alt": "small carpet", + "th_width": "300px", + "th_height": "300px", + "m_src": "/images/carpets/carpet1.jpg", + "m_alt": "big carpet", + "m_width": "600px", + "m_height": "600px", + "title": "carpet one" + }, + { + "pair": 0, + "revealId": "carpet2", + "th_src": "/images/carpets/carpet2_th.jpg", + "th_alt": "small carpet", + "th_width": "300px", + "th_height": "300px", + "m_src": "/images/carpets/carpet2.jpg", + "m_alt": "big carpet", + "m_width": "600px", + "m_height": "600px", + "title": "carpet two" + }, + { + "pair": 1, + "revealId": "carpet3", + "th_src": "/images/carpets/carpet3_th.jpg", + "th_alt": "small carpet", + "th_width": "300px", + "th_height": "300px", + "m_src": "/images/carpets/carpet3.jpg", + "m_alt": "big carpet", + "m_width": "600px", + "m_height": "600px", + "title": "carpet three" + }, + { + "pair": 1, + "revealId": "carpet4", + "th_src": "/images/carpets/carpet4_th.jpg", + "th_alt": "small carpet", + "th_width": "300px", + "th_height": "300px", + "m_src": "/images/carpets/carpet4.jpg", + "m_alt": "big carpet", + "m_width": "600px", + "m_height": "600px", + "title": "carpet four" + } + ] + }, + "floors": { + "name": "floors", + "type": "service", + "slides": [], + "mainArt": "", + "mainArtAlt": "", + "pageTitle": "Floor Cleaning - North Star Cleaning Service", + "pageDescription": "this is the floors page", + "pageKeywords": "floors page", + "displayName": "Floors", + "url": "/services/floors", + "vectorArt": false, + "images": [] + }, + "upholstery": { + "name": "upholstery", + "type": "service", + "slides": [], + "mainArt": "", + "mainArtAlt": "", + "pageTitle": "Upholstery Cleaning - North Star Cleaning Service", + "pageDescription": "this is the upholstery page", + "pageKeywords": "upholstery page", + "displayName": "Upholstery", + "url": "/services/upholstery", + "vectorArt": false, + "images": [] + }, + "tile-grout": { + "name": "tile-grout", + "type": "service", + "slides": [], + "mainArt": "", + "mainArtAlt": "", + "pageTitle": "Tile & Grout - North Star Cleaning Service", + "pageDescription": "this is the tile & grout page", + "pageKeywords": "tile & grout page", + "displayName": "Tile & Grout", + "url": "/services/tile-grout", + "vectorArt": false, + "images": [] + }, + "water-damage": { + "name": "water-damage", + "type": "service", + "slides": [], + "mainArt": "", + "mainArtAlt": "", + "pageTitle": "Water Damage - North Star Cleaning Service", + "pageDescription": "this is the water damage page", + "pageKeywords": "water damage page", + "displayName": "Water Damage", + "url": "/services/water-damage", + "vectorArt": false, + "images": [] + }, + "faq": { + "name": "faq", + "type": "service", + "slides": [], + "mainArt": "", + "mainArtAlt": "", + "pageTitle": "FAQ - North Star Cleaning Service", + "pageDescription": "this is the FAQ page", + "pageKeywords": "FAQ page", + "displayName": "FAQ", + "url": "/services/faq", + "vectorArt": false, + "images": [] + } + } \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/main.js b/test/mocha/html-snapshots/server/app/main.js new file mode 100644 index 00000000..8fb85116 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/main.js @@ -0,0 +1,43 @@ +require([ + "app", + "router" +], +function(app, Router) { + + // Define your master router on the application namespace and trigger all + // navigation from this instance. + app.router = new Router(); + + // Trigger the initial route and enable HTML5 History API support, set the + // root folder to '/' by default. Change in app.js. + Backbone.history.start({ pushState: true, root: app.root }); + + // All navigation that is relative should be passed through the navigate + // method, to be processed by the router. If the link has a `data-bypass` + // attribute, bypass the delegation completely. + $(document).on("click", "a[href]:not([data-bypass])", function(evt) { + // Get the absolute anchor href. + var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; + + // Get the absolute root. + var root = location.protocol + "//" + location.host + app.root; + + // If the browser is normalizing, remove the absolute root from the href attr + // Switch to normalizr instead when if/when it becomes available + if (!$.support.hrefNormalized) + href.attr = href.attr.replace(root, ""); + + // Ensure the root is part of the anchor href, meaning it's relative. + if (href.prop.slice(0, root.length) === root) { + // Stop the default event to ensure the link will not cause a page + // refresh. + evt.preventDefault(); + + // `Backbone.history.navigate` is sufficient for all Routers and will + // trigger the correct events. The Router's internal `navigate` method + // calls this anyways. The fragment is sliced from the root. + Backbone.history.navigate(href.attr, true); + } + }); + +}); diff --git a/test/mocha/html-snapshots/server/app/modules/art.js b/test/mocha/html-snapshots/server/app/modules/art.js new file mode 100644 index 00000000..2524daf1 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/art.js @@ -0,0 +1,373 @@ +/* + * art.js + * Draws all of the artwork for the pages + */ +define([ + "app", + "modules/spline", + "waitforimages" +], +function(app, spline, waitForImages){ + + var module = app.module(); + + var tension = 0.33; + + // bend + //x: lastCol+(colinc > 0 ? width-lastCol : (lastCol*-1))/2, + //y: (rows[i]+rows[i+1])/2 + + // if width is 0, then bends left, else right + var bend = function(pts, width, endX, endY) { + var bendMax = 40, + ltrBend, + startY = pts.pop(), + startX = pts.pop(); + if (width !== 0 && Math.abs(width-startX) > bendMax) + ltrBend = bendMax; + else + ltrBend = width-startX; + pts.push( + startX, startY, + startX+(width !== 0 ? ltrBend : (startX*-1))/2, + (startY+endY)/2, endX, endY + ); + }; + + // insert a smoothing point between the last pt and next pt + var smoothLast = function(pts, nextX, nextY) { + var lastY = pts.pop(), + lastX = pts.pop(); + pts.push(lastX, lastY); + pts.push(lastX+(nextX-lastX)/1.414, lastY+(nextY-lastY)/2); + }; + + // make horizontal variations between the last point and endX + // squeeze tween points in between + var variateHorz = function(pts, tween, endX, smoothStart, modulation) { + var colmod = modulation || 5, + i, x, + startY = pts.pop(), + startX = pts.pop(), + ltr = startX < endX; + tp = Math.round(Math.abs(endX - startX) / tween); + if (smoothStart) + smoothLast(pts, startX, startY); + pts.push(startX, startY); + for (x=startX, i=0; i < tween; + (ltr ? x+=tp : x-=tp), i++) { + if (ltr ? x+(tp*1.5) < endX : x-(tp*1.5) > endX) + pts.push( + ltr ? x+tp : x-tp, + startY+(colmod * ((i % 2)===0 ? 1 : -1)) + ); + else + break; + } + }; + + // same as variateHorz, but vertical - top down only. + var variateVertical = function(pts, tween, endY, smoothStart) { + var colmod = 5, + i, y, + startY = pts.pop(), + startX = pts.pop(), + tp = Math.round(Math.abs(endY - startY) / tween); + if (smoothStart) + smoothLast(pts, startX, startY); + pts.push(startX, startY); + for (y=startY, i=0; i < tween; y+=tp, i++) { + if (y+(tp*1.5) < endY) { + pts.push( + startX+(colmod * ((i % 2)===0 ? 1 : -1)), + y+tp + ); + } + else + break; + } + }; + + // draw a loop + var loop = function(pts, startDegree, endDegree, radius, smoothStart) { + var i, degInc = 45, + startY = pts.pop(), + startX = pts.pop(); + + if (smoothStart) + smoothLast(pts, startX, startY); + + pts.push(startX, startY); + + for (i = startDegree; i <= endDegree; i+=degInc) { + pts.push( + startX + radius + Math.cos(i * Math.PI/180) * (radius/2), + startY + radius + Math.sin(i * Math.PI/180) * radius + ); + } + }; + + // draw a looping coil horizontally + var coilHorz = function(pts, width) { + var x, y, radius = 40; + loop(pts, 315, 595, radius, false); + y = pts.pop(); + x = pts.pop(); + pts.push(x, y, x+radius, y-(radius/1.414)); + variateHorz(pts, 4, x+width/2, false); + loop(pts, 315, 595, radius, false); + y = pts.pop(); + x = pts.pop(); + pts.push(x, y, x+radius, y-(radius/1.414)); + + }; + + /** + * makeServicePoints + * Create the points for the services page. + */ + var makeServicePoints = function(pts, bp, canvas, page) { + // offsets to start in art1.jpg + var initOffsetX = 175; + var initOffsetY = 114; + + // make starting point + var imgDims = page.css("img-ctl-js", [$.fn.width, $.fn.height]); + var img = $(".image-ctl-inner>img"), + imgOrigWidth = imgDims[0], + imgOrigHeight = imgDims[1], + imgOffsetXAdj = Math.round((img.width()*initOffsetX)/imgOrigWidth), + imgOffsetYAdj = Math.round((img.height()*initOffsetY)/imgOrigHeight); + + var imgX = img.offset().left + imgOffsetXAdj; + var imgY = img.offset().top + imgOffsetYAdj; + pts.push(imgX, imgY); + + // make random kink + if (!bp) { + pts.push(imgX+40, imgY); + pts.push(imgX+100, imgY+80); + } + + // 1st destination - badges + var badges = $(".badges-outer"), + pos = badges.offset(), + badgesWidth = badges.width(), + badgesHeight = badges.height(), + badgesTopOffset = 0; + if (!bp) { + pts.push(pos.left, pos.top+badgesHeight); + } + + // ltr + if (bp) + variateHorz(pts, 4, pos.left+badgesWidth, false); + else + //coilHorz(pts, canvas.width - pos.left); + variateHorz(pts, bp ? 4 : 8, pos.left+badgesWidth, false, badgesHeight*2); + + pts.push(pos.left+badgesWidth, pos.top+badgesHeight); + + var footerImgDims = page.css("footer-image-js", [$.fn.width, $.fn.height]); + var footer = $(".footer-inner"), + footerImg = $(".footer-image"), + footerImgImg = $(".footer-image>img"), + footerOrigWidth = footerImgDims[0], + footerOrigHeight = footerImgDims[1], + footerOffsetX = initOffsetX, + footerOffsetY = initOffsetY, + footerOffsetXAdj = Math.round((footerImgImg.width()*footerOffsetX)/footerOrigWidth), + footerOffsetYAdj = Math.round((footerImgImg.height()*footerOffsetY)/footerOrigHeight); + + pos = footer.offset(); + + // end at footer + variateVertical(pts, bp ? 22 : 12, pos.top, bp ? true : false); + pts.push(pos.left+footer.width(), pos.top); + pos = footerImg.offset(); + pts.push(pos.left+(footerImg.width()/2)+30, pos.top); + pts.push(footerImgImg.offset().left+footerOffsetXAdj, footerImgImg.offset().top+footerOffsetYAdj); + //} + }; + + /** + * makeHomePoints + * Create the points for the home page. + */ + var makeHomePoints = function(pts, bp, canvas, page) { + // offsets to start in art1.jpg + var initOffsetX = 175; + var initOffsetY = 114; + + // make starting point + var imgDims = page.css("img-ctl-js", [$.fn.width, $.fn.height]); + var img = $(".image-ctl-inner>img"), + imgOrigWidth = imgDims[0], + imgOrigHeight = imgDims[1], + imgOffsetXAdj = Math.round((img.width()*initOffsetX)/imgOrigWidth), + imgOffsetYAdj = Math.round((img.height()*initOffsetY)/imgOrigHeight); + + var imgX = img.offset().left + imgOffsetXAdj; + var imgY = img.offset().top + imgOffsetYAdj; + pts.push(imgX, imgY); + + // make random kink + if (!bp) { + pts.push(imgX+40, imgY); + pts.push(imgX+100, imgY+80); + } + + // test loop + //loop(pts, 90, 405, 50); + + // 1st destination - badges + var badges = $(".badges-outer"), + pos = badges.offset(), + badgesWidth = badges.width(), + badgesHeight = badges.height(), + badgesTopOffset = 0; + if (!bp) { + pts.push(pos.left, pos.top-badgesTopOffset); + } + // ltr + variateHorz(pts, bp ? 4 : 6, pos.left+badgesWidth, false); + pts.push(pos.left+badgesWidth, pos.top-badgesTopOffset); + if (!bp) + bend(pts, canvas.width, pos.left+badgesWidth, pos.top+badgesHeight-badgesTopOffset); + + var footerImgDims = page.css("footer-image-js", [$.fn.width, $.fn.height]); + var footer = $(".footer-inner"), + footerImg = $(".footer-image"), + footerImgImg = $(".footer-image>img"), + footerOrigWidth = footerImgDims[0], + footerOrigHeight = footerImgDims[1], + footerOffsetX = initOffsetX, + footerOffsetY = initOffsetY, + footerOffsetXAdj = Math.round((footerImgImg.width()*footerOffsetX)/footerOrigWidth), + footerOffsetYAdj = Math.round((footerImgImg.height()*footerOffsetY)/footerOrigHeight); + + pos = footer.offset(); + + // end at footer + variateVertical(pts, bp ? 12 : 6, pos.top, bp ? true : false); + pts.push(pos.left+footer.width(), pos.top); + pos = footerImg.offset(); + pts.push(pos.left+(footerImg.width()/2)+30, pos.top); + pts.push(footerImgImg.offset().left+footerOffsetXAdj, footerImgImg.offset().top+footerOffsetYAdj); + + }; + + /** + * superstition + * Totally superstitious code that works. + * Runs some code that causes the UI to complete updating. + * I'm not sure why, but this works beyond all other measures. + * Relies on there being an img in the footer and the supporting css. + * Initial tests showed that doing the math on the object did the trick. + * NOTE: This just makes it work in screenfly. No evidence to support this + * is even really required, or that it works in real life - yet. + */ + var superstition = function(page) { + var footerImgImg = $(".footer-image>img"); + var footerOrigWidth = page.css("footer-image-js", $.fn.width); + var footerOrigHeight = page.css("footer-image-js", $.fn.height); + var footerOffsetXAdj = Math.round((footerImgImg.width()*1)/footerOrigWidth); + var footerOffsetYAdj = Math.round((footerImgImg.height()*1)/footerOrigHeight); + }; + + /** + * drawArt + * Actually draw the art, which is really two splines. + * Depending on the name, make the appropriate points. + */ + var drawArt = function(name, page) { + + // yup, I'm really doing this. + superstition(page); + + var canvas = document.getElementById("canvas-section"); + var container = $(canvas).parent(); + canvas.width = container.width(); + canvas.height = container.height(); + + var ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.scale(1.0, 1.0); + + var bp = page.css("small-breakpoint-js", $.fn.width), + breakpoint = $(window).width() <= bp, + pts = []; + + switch (name) { + case "home": + makeHomePoints(pts, breakpoint, canvas, page); + break; + case "service": + makeServicePoints(pts, breakpoint, canvas, page); + break; + default: + break; + } + + spline.draw(ctx, pts, tension, 12, "#020202"); + spline.draw(ctx, pts, tension, 10, "#de8938"); + }; + + + /** + * drawAdjust + * Adjust the art if a window resize has actually occurred. + */ + var drawAdjust = function(name, page) { + var winWidth = $(window).width(), + winHeight = $(window).height(); + + // return the resize handler + return function () { + var newWinWidth = $(window).width(), + newWinHeight = $(window).height(); + + if (newWinWidth != winWidth || newWinHeight != winHeight) { + winWidth = newWinWidth; + winHeight = newWinHeight; + //_.defer(function() { drawArt(name, page); }); + _.defer(function() { $("#main").waitForImages(loaded(name, page), $.noop, true); }); + } + }; + }; + + /** + * loaded + * Return the ImageLoaded handler + */ + var loaded = function(name, page) { + return function() { + drawArt(name, page); + }; + }; + + /** + * draw + * If the options indicate that there is art, setup to draw the art. + * Otherwise, clear the art. + */ + module.draw = function(options) { + var opts = options || {}; + if (opts.art) { + // loaded returns the image load handler + $("#main").waitForImages(loaded(opts.name, opts.page), $.noop, true); + // resize handler + $(window).off("resize").on("resize", + // drawAdjust returns the handler to run after 100ms + _.debounce(drawAdjust(opts.name, opts.page), 100) + ); + } else { + var canvas = document.getElementById("canvas-section"); + var ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + $(window).off("resize"); + } + }; + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/contact.js b/test/mocha/html-snapshots/server/app/modules/contact.js new file mode 100644 index 00000000..280d68ac --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/contact.js @@ -0,0 +1,139 @@ +/* + * contact.js + * The view for the contact page + */ + define([ + "app", + "modules/page", + "plugins/text!../templates/contact-fail.html", + "plugins/text!../templates/contact-success.html", + "module" +], +function(app, page, failTemplate, successTemplate, module){ + var $d = document, + $m = window.Modernizr; + + var contactModule = app.module(); + + // the contact model definition + contactModule.Model = Backbone.Model.extend({ + id: module.config().resource, + urlRoot: module.config().endpoint + }); + + // contact view + contactModule.View = Backbone.View.extend({ + template: "contact", + id: "dynamic-content", + contentId: "contact-content", + formId: "contact-form", + + events: { + "click #submit": "submit" + }, + + serialize: function() { + this.pageData = page.data("contact"); + return { + //art: data.mainArt, + contentId: this.contentId, + formId: this.formId + }; + }, + + afterRender: function() { + page.afterRender(); + + // focus on the first input element - fallback only + $("input").filter(":first").focus(); + }, + + // create a new model, disconnect the old one if it exists + createModel: function() { + if (this.model) + this.stopListening(this.model); + this.model = new contactModule.Model(); + + // wire up request, sync, and error + this.listenTo(this.model, "request", this.send); + this.listenTo(this.model, "sync", this.sync); + this.listenTo(this.model, "error", this.fail); + return this.model; + }, + + // making the request, so show the spinner + send: function() { + if (!this.finished) + $("#"+this.contentId).html(""); + }, + + // model is synchronized + sync: function() { + this.finished = true; + + // api returns the error property + var error = this.model.get("error"); + if (!error) + $("#"+this.contentId).html( + _.template(successTemplate, { + name: this.model.get("Name"), + email: this.model.get("Email"), + responseTime: this.pageData.responseTime + })); + else { + console.log("Error submitting contact form: "+error.reason); + this.fail(); + } + }, + + // we failed + fail: function() { + this.finished = true; + $("#"+this.contentId).html( + _.template(failTemplate, { + message: this.model.get("Message"), + mailTo: this.pageData.mailTo + })); + }, + + // handle the submit button + submit: function() { + var form = $d.getElementById(this.formId), + valid = false; + + // cross-browser check validity + if(typeof form.checkValidity != "undefined") + valid = form.checkValidity(); + else + valid = $(form).checkValidity(); + + // performs the actual submit + function doSubmit (self) { + return function() { + self.finished = false; + + // get the form input + var i, formInput = $('[id^="form-"]'); + + // make the input data to send + var input = { Slug: module.config().slug }; + for (i = 0; i < formInput.length; i++) + input[formInput[i].title] = formInput[i].value; + + // send the data + self.createModel().save(input); + }; + } + + if (valid) { + // call on the leading edge, tossing double-clicks + _.debounce(doSubmit(this), 500, true)(); + return false; + } + // otherwise return nothing so the validation result can present. + } + + }); + + return contactModule; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/footer.js b/test/mocha/html-snapshots/server/app/modules/footer.js new file mode 100644 index 00000000..3c625415 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/footer.js @@ -0,0 +1,39 @@ +/* + * footer.js + * The view for the footer + */ + define([ + "app", + "modules/page" +], +function(app, page){ + var module = app.module(); + + var theDate = new Date(); + + module.View = Backbone.View.extend({ + template: "footer", + initialize: function() { + page.on(page.Events.page, this.updateView, this); + }, + + serialize: function() { + var data = page.data("footer"); + var imgProps = page.css("footer-image-js", [$.fn.width, $.fn.height]); + return { + art: data.mainArt, + artAlt: data.mainArtAlt, + artWidth: imgProps[0], + artHeight: imgProps[1], + copyYear: theDate.getFullYear() + }; + }, + + updateView: function(data) { + // update the view with the page data + // maybe footer can be static? + } + }); + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/header.js b/test/mocha/html-snapshots/server/app/modules/header.js new file mode 100644 index 00000000..000a49ec --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/header.js @@ -0,0 +1,70 @@ +/* + * header.js + * The view for the header + */ +define([ + "app", + "modules/page", + "foundation/jquery.foundation.navigation.ln", + "foundation/jquery.foundation.orbit.ln" +], +function(app, page){ + var $d = document;//, + //$m = window.Modernizr; + + //var mq = $m.mq("only all"); + + var module = app.module(); + + module.View = Backbone.View.extend({ + template: "header", + orbitId: "featured-orbit", + + initialize: function() { + page.on(page.Events.page, this.updateView, this); + this.services = page.serviceNavigation(); + this.contact = page.data("contact"); + }, + + serialize: function() { + var imgProps = page.css("logo-img-js", [$.fn.width, $.fn.height]); + return { + orbitId: this.orbitId, + services: this.services, + contact: this.contact, + logoWidth: imgProps[0], + logoHeight: imgProps[1] + }; + }, + + updateView: function(data) { + // update the head elements + $d.title = data.pageTitle; + $("meta[name=description]").attr("content", data.pageDescription); + $("meta[name=keywords]").attr("content", data.pageKeywords); + + this.data = data; + }, + + afterRender: function() { + // update the slides + var orbit = this.$("#"+this.orbitId).empty(); + if (this.data && this.data.slides) { + var i; + for (i = 0; i < this.data.slides.length; i++) + orbit.append($("") + .addClass(this.data.slides[i].cssclass) + .append(this.data.slides[i].content) + ); + } + var fluid = "47x24";//mq ? "47x24" : false; + orbit.orbit({ fluid: fluid, advanceSpeed: 8000, captions: false, bullets: false, + afterLoadComplete: function(){ + orbit.trigger("loadComplete"); + } }); + } + + }); + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/home.js b/test/mocha/html-snapshots/server/app/modules/home.js new file mode 100644 index 00000000..05ccc6fc --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/home.js @@ -0,0 +1,33 @@ +/* + * home.js + * The view for the home page + */ +define([ + "app", + "modules/page" +], +function(app, page){ + var module = app.module(); + + module.View = Backbone.View.extend({ + template: "home", + id: "dynamic-content", + + serialize: function() { + var data = page.data("home"); + var imgProps = page.css("img-ctl-js", [$.fn.width, $.fn.height]); + return { + art: data.mainArt, + artAlt: data.mainArtAlt, + artWidth: imgProps[0], + artHeight: imgProps[1] + }; + }, + + afterRender: function() { + page.afterRender({ art: true, name: "home", page: page }); + } + }); + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/page.js b/test/mocha/html-snapshots/server/app/modules/page.js new file mode 100644 index 00000000..67443a48 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/page.js @@ -0,0 +1,105 @@ +/* + * page.js + * + * The common page module + * Loads the page data + * Defines page events + * Exports common page tasks + */ +define([ + "app", + "modules/art", + "foundation/init", + "plugins/text!../data/pageData.json", + "plugins/text!../templates/modal.html" +], +function(app, art, foundation, pageDataJson, modalTemplate) { + // get a module + var module = app.module(); + + // hydrate the page data + var pageData = $.parseJSON(pageDataJson); + + // this module's events + module.Events = { + page: "data", + notfound: "404" + }; + + // prepare modal dialogs + module.modalRender = function(images) { + var i; + for (i = 0; i < images.length; i++) { + if ($("#"+images[i].revealId).length===0) + $("body").append(_.template(modalTemplate, { image: images[i] })); + } + }; + + // General utility function to pull a property value(s) from a css style + // temporarily inject the DOM with the style, and pull the properties + module.css = function(style, prop) { + var i, tmp, + multi = _.isArray(prop), + value = [], + props = multi ? prop : [prop]; + + tmp = $("").appendTo("body"); + + for (i = 0; i < props.length; i++) + value.push(props[i].call(tmp)); + + tmp.remove(); + + return multi ? value : value[0]; + }; + + // access any page data, trigger the page data event + module.data = function(page, options) { + var result, e; + options = options || {}; + + if (options.type) { + result = _.findWhere(pageData, { type: options.type, name: page }); + } else { + result = pageData[page]; + } + e = module.Events.page; + + // if the page is not found, trigger the notfound event + if (!result) { + e = module.Events.notfound; + result = page; + } + + this.trigger(e, result); + return result; + }; + + // access service page data only + module.service = function(page) { + return module.data(page, { type: "service" }); + }; + + // common afterRender + // called by pages that need foundation init and optional art + module.afterRender = function(options) { + foundation.initialize(); + art.draw(options); + }; + + // return the service navigation + module.serviceNavigation = function() { + var nav = {}; + var services = _.where(pageData, { type: "service" }); + for (var k in services) { + nav[k] = { + url: services[k].url, + name: services[k].displayName + }; + } + return nav; + }; + + _.extend(module, Backbone.Events); + return module; +}); diff --git a/test/mocha/html-snapshots/server/app/modules/render.js b/test/mocha/html-snapshots/server/app/modules/render.js new file mode 100644 index 00000000..1890178d --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/render.js @@ -0,0 +1,66 @@ +/* + * render.js + * Runs render code. + * If the browser requires polyfill: + * Load the polyfiller, run the render, then polyfill it. + * Otherwise, just run the render code. + */ +define([ + "require", + "app", + "module" +], +function (require, app, module) { + var $m = window.Modernizr, + $n = window.navigator, + renderModule = app.module(); + + var hasCanvas = $m.canvas, + hasForms = $m.input && $m.inputtypes && $m.formvalidation, + hasBoxsizing = $m.boxsizing, + phantom = $n.userAgent.match(/phantom/i), + + // the main polyfill policy + poly = (!hasCanvas || !hasForms) && !phantom; + + var render = function(fn, context) { + if (poly) { + // dynamically load the polyfiller, also load oldie if they don't support boxsizing + require(["plugins/cload!"+!hasBoxsizing+"?plugins/oldie", "polyfiller"], function(oldie) { + $.webshims.setOptions({ + waitReady : false, + disableShivMethods: false, + basePath: module.config().polyfillerBasePath, + canvas: { + type: "excanvas" + } + }); + // set the features + var features = !hasForms ? ["forms"] : []; + if (!hasCanvas) + features.push("canvas"); + + // start polyfilling + $.webshims.polyfill(features.join(" ")); + + // when DOM ready and webshims ready run fn + $(function(){ + $.webshims.ready(features.join(" ")+" DOM", function(){ + // if the browser does not support box sizing, setup an after render call to the oldie poly + var opts = hasBoxsizing ? {} : { afterRender: oldie.all }; + fn.call(context, opts); + }); + }); + }); + } else { + // no poly so just run fn + fn.call(context); + } + }; + + renderModule.run = function(fn, context) { + render(fn, context); + }; + + return renderModule; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/service.js b/test/mocha/html-snapshots/server/app/modules/service.js new file mode 100644 index 00000000..a52c8c49 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/service.js @@ -0,0 +1,47 @@ +/* + * service.js + * The view for all service pages + */ +define([ + "app", + "modules/page", + "foundation/jquery.foundation.reveal" +], +function(app, page){ + var module = app.module(); + + module.View = Backbone.View.extend({ + template: "service", + id: "dynamic-content", + + initialize: function() { + if (this.options.router) + this.options.router.on("service", this.service, this); + }, + + // my service changed handler + service: function(options) { + options = options || {}; + this.service = options.service; + }, + + serialize: function() { + this.data = page.service(this.service); + var imgProps = page.css("img-ctl-js", [$.fn.width, $.fn.height]); + return { + art: this.data.mainArt, + artAlt: this.data.mainArtAlt, + artWidth: imgProps[0], + artHeight: imgProps[1], + images: this.data.images, + modal: page.modalRender + }; + }, + + afterRender: function() { + page.afterRender({ art: this.data.vectorArt, name: "service", page: page }); + } + }); + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/modules/spline.js b/test/mocha/html-snapshots/server/app/modules/spline.js new file mode 100644 index 00000000..5f4254f4 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/modules/spline.js @@ -0,0 +1,125 @@ +define([ + "app" +], +function (app) { + var module = app.module(); + + var hexToCanvasColor = function (hexColor,opacity) { + // Convert #AA77CC to rbga() format for Firefox + opacity=opacity || "1.0"; + hexColor=hexColor.replace("#",""); + var r=parseInt(hexColor.substring(0,2),16); + var g=parseInt(hexColor.substring(2,4),16); + var b=parseInt(hexColor.substring(4,6),16); + return "rgba("+r+","+g+","+b+","+opacity+")"; + }; + + var drawPoint = function (ctx,x,y,r,color) { + ctx.save(); + ctx.beginPath(); + ctx.lineWidth=1; + ctx.fillStyle=hexToCanvasColor(color,1); + ctx.arc(x,y,r,0.0,2*Math.PI,false); + ctx.closePath(); + ctx.stroke(); + ctx.fill(); + ctx.restore(); + }; + + var getControlPoints = function (x0,y0,x1,y1,x2,y2,t) { + // x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment + // x2,y2 is the next knot -- not connected here but needed to calculate p2 + // p1 is the control point calculated here, from x1 back toward x0. + // p2 is the next control point, calculated here and returned to become the + // next segment's p1. + // t is the 'tension' which controls how far the control points spread. + + // Scaling factors: distances from this knot to the previous and following knots. + var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2)); + var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)); + + var fa=t*d01/(d01+d12); + var fb=t-fa; + + var p1x=x1+fa*(x0-x2); + var p1y=y1+fa*(y0-y2); + + var p2x=x1-fb*(x0-x2); + var p2y=y1-fb*(y0-y2); + + return [p1x,p1y,p2x,p2y]; + }; + + var drawControlLine = function (ctx,x,y,px,py) { + // Only for demo purposes: show the control line and control points. + ctx.save(); + ctx.beginPath(); + ctx.lineWidth=1; + ctx.strokeStyle="rgba(0,0,0,0.3)"; + ctx.moveTo(x,y); + ctx.lineTo(px,py); + ctx.closePath(); + ctx.stroke(); + drawPoint(ctx,px,py,1.5,"#000000"); + ctx.restore(); + }; + + // context, points, tension, linewidth, color + module.draw = function(ctx,pts,t,lw,cl) { + + var closed = false, + showDetails = false, + cp = []; // array of control points, as x0,y0,x1,y1,... + n = pts.length, + i = 0; + + ctx.lineWidth=lw; + ctx.save(); + + // Draw an open curve, not connected at the ends + for (i=0; i < n-4; i+=2) { + cp=cp.concat(getControlPoints(pts[i],pts[i+1],pts[i+2],pts[i+3],pts[i+4],pts[i+5],t)); + } + for(i=2; i < pts.length-5; i+=2) { + ctx.strokeStyle=hexToCanvasColor(cl,0.75); + ctx.beginPath(); + ctx.moveTo(pts[i],pts[i+1]); + ctx.bezierCurveTo(cp[2*i-2],cp[2*i-1],cp[2*i],cp[2*i+1],pts[i+2],pts[i+3]); + ctx.stroke(); + ctx.closePath(); + if(showDetails){ + drawControlLine(ctx,pts[i],pts[i+1],cp[2*i-2],cp[2*i-1]); + drawControlLine(ctx,pts[i+2],pts[i+3],cp[2*i],cp[2*i+1]); + } + } + + // For open curves the first and last arcs are simple quadratics. + ctx.strokeStyle=hexToCanvasColor(cl,0.75); + ctx.beginPath(); + ctx.moveTo(pts[0],pts[1]); + ctx.quadraticCurveTo(cp[0],cp[1],pts[2],pts[3]); + ctx.stroke(); + ctx.closePath(); + + ctx.strokeStyle=hexToCanvasColor(cl,0.75); + ctx.beginPath(); + ctx.moveTo(pts[n-2],pts[n-1]); + ctx.quadraticCurveTo(cp[2*n-10],cp[2*n-9],pts[n-4],pts[n-3]); + ctx.stroke(); + ctx.closePath(); + if(showDetails){ + drawControlLine(ctx,pts[2],pts[3],cp[0],cp[1]); + drawControlLine(ctx,pts[n-4],pts[n-3],cp[2*n-10],cp[2*n-9]); + } + + ctx.restore(); + + if(showDetails){ // Draw the knot points. + for(i=0; i < n; i+=2){ + drawPoint(ctx,pts[i],pts[i+1],2.5,"#ffff00"); + } + } + }; + + return module; +}); \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/router.js b/test/mocha/html-snapshots/server/app/router.js new file mode 100644 index 00000000..842f65ec --- /dev/null +++ b/test/mocha/html-snapshots/server/app/router.js @@ -0,0 +1,112 @@ +define([ + "app", + "modules/header", + "modules/home", + "modules/service", + "modules/contact", + "modules/footer", + "modules/page", + "modules/render" +], +function(app, header, home, service, contact, footer, page, render) { + + var $w = window; + + // Defining the application router, you can attach sub routers here. + var Router = Backbone.Router.extend({ + + routes: { + "(/)": "index", + "services/:service(/)": "service", + "contact(/)": "contact", + "*default": "notfound" + }, + + initialize: function() { + + // wire up the page notfound event + page.on(page.Events.notfound, this.notfound, this); + + // create the main layout views + var mainLayout = app.useLayout("main-layout"); + var homeView = new home.View(); + var serviceView = new service.View({router: this}); + var contactView = new contact.View(); + + // keep references to the views + _.extend(this, { + mainLayout: mainLayout, + home: homeView, + service: serviceView, + contact: contactView + }); + + // set the child views, they get notified via page events + mainLayout.setViews({ + "#header": new header.View(), + "#footer": new footer.View() + }); + }, + + // default route handler and page notfound handler + // exits the app to the 404 handler + notfound: function(path) { + $w.location.replace("/"+path+".notfound"); + }, + + // handle the index route + index: function() { + render.run( + function(options){ + options = options || {}; + + // hook up after render + if (options.afterRender) + this.mainLayout.once("afterRender", options.afterRender); + + // render the home view + this.mainLayout.setViews({"#content": this.home}).render(); + }, this + ); + }, + + // handle the service route + service: function(service) { + render.run( + function(options){ + options = options || {}; + + // hook up after render + if (options.afterRender) + this.mainLayout.once("afterRender", options.afterRender); + + // trigger a service change + this.trigger("service", {service: service}); + + // render the service view + this.mainLayout.setViews({"#content": this.service}).render(); + }, this + ); + }, + + // handle the contact route + contact: function() { + render.run( + function(options){ + options = options || {}; + + // hook up after render + if (options.afterRender) + this.mainLayout.once("afterRender", options.afterRender); + + // render the contact view + this.mainLayout.setViews({"#content": this.contact}).render(); + }, this + ); + } + + }); + + return Router; + +}); diff --git a/test/mocha/html-snapshots/server/app/sass/_contact.scss b/test/mocha/html-snapshots/server/app/sass/_contact.scss new file mode 100644 index 00000000..6a28aa86 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_contact.scss @@ -0,0 +1,21 @@ +.form-message { + min-height: 100px; +} +#contact-content { + position: relative; + @extend %level-page; + overflow: visible; +} +.contact-inner-input { + @include column(6); +} +.contact-inner { + @include column(12); +} +.contact-button { + color: $site-black; + font: { + weight: bold; + size: ms(1); + } +} diff --git a/test/mocha/html-snapshots/server/app/sass/_footer.bak.scss b/test/mocha/html-snapshots/server/app/sass/_footer.bak.scss new file mode 100644 index 00000000..e7e61175 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_footer.bak.scss @@ -0,0 +1,72 @@ +.footer-outer { + @include column($totalColumns, center); +} +.footer-inner { + @extend .panel; + min-height: 100px; + @include clearfix(); + + @include background($primary-3); + color: $primary-5; +} +$footerImgWidth: 308px; +$footerImgHeight: 200px; +.footer-image-js { + width: $footerImgWidth; + height: $footerImgHeight; +} +.footer-image { + min-height: $footerImgHeight; + @include background(transparent); + //padding-bottom: 10% !important; + //padding-top: 10% !important; + margin: auto; + text-align: center; + @include breakpoint(very-small) { + width: 33% !important; + } + @include breakpoint(super-small) { + width: 25% !important; + } + color: $site-black; +} +.footer-content { + text-align: left; + padding-bottom: 0px !important; + position: relative; + @extend %level-page; + @include breakpoint(very-small) { + width: 67% !important; + } + @include breakpoint(super-small) { + width: 75% !important; + } +} +.footer-block { + margin: 0px; +} +.footer-item-block { + display: block; + padding: 10px 0; + +} +.footer-item { + display: block; + @include breakpoint(super-small) { + font-size: 12px; + } +} +//.footer-item[itemprop="email"] { +//} +//.footer-legal { +// margin: 20px 0; +//} +//.footer-item { + //display: block; + //line-height: 1.2; + //font-size: 12px; +//} + +.footer-block-panel { + @extend %grid-half; +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_footer.scss b/test/mocha/html-snapshots/server/app/sass/_footer.scss new file mode 100644 index 00000000..fd1dedba --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_footer.scss @@ -0,0 +1,71 @@ +.footer-outer { + @include column($totalColumns, center); +} +.footer-inner { + @extend .panel; + min-height: 100px; + @include clearfix(); + + //@include background($primary-3); + //@include background(#948c4c); + @include background($kuler-shade-2); + color: $primary-5; +} +$footerImgWidth: 308px; +$footerImgHeight: 200px; +.footer-image-js { + width: $footerImgWidth; + height: $footerImgHeight; +} +.footer-image { + @include background(transparent); + margin: 10px auto; + text-align: center; + color: $site-black; +} +.footer-content { + text-align: left; + padding-bottom: 0px !important; +} +.footer-block { + margin: 0px; +} +.footer-item-block { + display: block; + padding: 10px 0; + position: relative; + @extend %level-page; +} +.footer-item { + display: block; + line-height: 1.2; + @include breakpoint(small) { + text-align: center; + } + @include breakpoint(super-small) { + font-size: 12px; + } +} +.footer-item.credits { + text-align: center; +} + +.small-text { + @include breakpoint(extra-small) { + display: block; + } +} +//.footer-item[itemprop="email"] { +//} +//.footer-legal { +// margin: 20px 0; +//} +//.footer-item { + //display: block; + //line-height: 1.2; + //font-size: 12px; +//} + +.footer-block-panel { + @include column(6); +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_foundation-settings.scss b/test/mocha/html-snapshots/server/app/sass/_foundation-settings.scss new file mode 100644 index 00000000..235ef76d --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_foundation-settings.scss @@ -0,0 +1,245 @@ +@import "foundation/common/ratios"; + +// Settings file containing Foundation defaults + +// Grid Settings + +// $rowWidth: 1000px; +// $columnGutter: 30px; +// $totalColumns: 12; +// $mobileTotalColumns: 4; +// $blockGridElements: 12; // Highest number of block grid elements, Maximum of 24 supported + +// Colors Settings + +$mainColor: $primary-4; +$secondaryColor: $primary-1; +$alertColor: $secondary-b-3; +//$successColor: #5da423; +$txtColor: $site-black; +// $highlightColor: #ffff99; +$black: $site-black; +$white: $site-white; +$shinyEdge: rgba(#fff, .5); +// $darkEdge: rgba(#000, .2); + +// Font Settings + +// $fontSmoothing: antialiased; +// $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; +// $headerFontWeight: bold; +// $headerFontStyle: normal; +// $headerFontColor: #222; +// $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; +// $bodyFontWeight: normal; +// $bodyFontStyle: normal; +// $bodyFontColor: $txtColor; + +// Text Direction Settings + +// $textDirection: ltr; // Controls default global text direction, 'rtl' or 'ltr' + +// Button Settings + +//$buttonRadius: $default-border-radius; +// $btnBase: 10px; + +// $tinyBtnBase: $btnBase - 5; +// $smallBtnBase: $btnBase - 3; +// $largeBtnBase: $btnBase + 5; + +// Form Settings + +// $formSpacing: 12px; +// $labelFontWeight: 500; +// $labelFontColor: lighten(#000, 30%); +// $labelBtmMargin: 3px; +// $inputFontColor: rgba(0,0,0,0.75); +// $inputFontSize: 14px; +// $inputBgColor: #fff; +// $inputFocusBgColor: darken(#fff, 2%); +// $inputBorderColor: darken(#fff, 20%); +// $inputFocusBorderColor: darken(#fff, 30%); +// $inputBorderStyle: solid; +// $inputBorderWidth: 1px; +// $inputBorderRadius: 2px; +// $fieldsetBorderRadius: 3px; + +// Custom Form Settings + +// $custFormBorderColor: #ccc; +// $custFormBgColor: #fff; +// $custCheckColor: #222; +// $custSelectCurrentFontColor: #141414; +// $custSelectBgColor: #fff; +// $custSelectBorderColor: #ddd; +// $custSelectTriangleColor: #aaa; +// $custSelectTriangleColorOpen: #222; +// $custSelectDropHeight: 200px; +// $custDropdownBgColor: #fff; +// $custDropdownBorderColor: darken(#fff, 20%); +// $custDropdownFontColor: #555; +// $custDropdownSelectedBgColor: lighten(#2ba6cb, 40%); +// $custDropdownSelectedFontColor: #000; +// $custFormDisabledBgColor: #ddd; + +// Tab Settings + +// $tabHeight: 40px; +// $tabTermFontSize: 12px; + +// Nav Bar Settings + +$navBarHeight: 36px; +$navFlyoutBaseWidth: 200px; + +// Top Bar Settings + +//$topBarBgColor: #d2d2d2; +// $topBarHeight: 45px; +// $topBarHeightMobile: 45px; +//$topBarBtmMargin: 20px; +// $topBarTitleWeight: bold; +// $topBarTitleSize: 17px; +//$topBarLinkColor: #222; +// $topBarLinkWeight: bold; +// $topBarLinkSize: 13px; +//$topBarDropBgColor: #d2d2d2; +//$topBarDropLinkColor: $topBarLinkColor; +// $topBarDropToggleSize: 5px; +// $topBarDropToggleColor: #fff; +// $topBarDropToggleAlpha: 0.5; +// $topBarSearchWidth: 200px; +//$topBarBreakPoint: $breakTopBar; // Change to 9999px for always mobile layout +// $topBarNavToggleSize: 8px; +//$topBarNavToggleColor: $topBarLinkColor; + +// UI Settings + +// $thumbRadius: 3px; +// $progBarHeight: 25px; +// $progBarBorderColor: darken(#fff, 20%); +// $progBarBorderSize: 1px; +// $progBarPad: 2px; +// $linkListBottomMargin: 17px -22px; +// $tableBorderRadius: 3px; +// $alertBorderRadius: 3px; + +// Tooltip Settings + +// $hasTipBorderBottom: dotted 1px #ccc; +// $hasTipFontWeight: bold; +// $hasTipFontColor: #333; +// $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%); +// $hasTipFontColorHover: $mainColor; +// $tooltipBackgroundColor: #000; +// $tooltipBackgroundOpacity: 0.85; +// $tooltipFontSize: 12px; +// $tooltipFontWeight: bold; +// $tooltipFontColor: #fff; +// $tapToCloseFontSize: 10; +// $tapToCloseFontWeight: normal; +// $tapToCloseFontColor: #888; +// $tooltipFontSizeScreenSm: 14; +// $tooltipBgOpacityScreenSm: 0.85; +// $tooltipBorderRadius: 4px; + +// Pricing Table Settings + +// $priceTableBorder: solid 1px #ddd; +// $priceTitleBgColor: #ddd; +// $priceTitlePadding: 15px 20px; +// $priceTitleAlign: center; +// $priceTitleColor: #333; +// $priceTitleWeight: bold; +// $priceTitleSize: 16px; + +// $priceMoneyBgColor: #eee; +// $priceMoneyPadding: 15px 20px; +// $priceMoneyAlign: center; +// $priceMoneyColor: #333; +// $priceMoneyWeight: normal; +// $priceMoneySize: 20px; + +// $priceBgColor: #fff; +// $priceDescColor: #777; +// $priceDescPadding: 15px; +// $priceDescAlign: center; +// $priceDescFontSize: 12px; +// $priceDescWeight: normal; +// $priceDescLineHeight: 1.4; +// $priceDescBtmBorder: dotted 1px #ddd; + +// $priceItemColor: #333; +// $priceItemPadding: 15px; +// $priceItemAlign: center; +// $priceItemFontSize: 14px; +// $priceItemWeight: normal; +// $priceItemBtmBorder: dotted 1px #ddd; + +// $priceCtaBgColor: #f5f5f5; +// $priceCtaAlign: center; +// $priceCtaPadding: 20px; + +// Orbit Settings + +$orbitCaptionBgColorOldBrowser: #020202; +$orbitCaptionBgColor: rgba(02,02,02,.8); +$orbitCaptionFontColor: $site-white; +// $orbitBulletNavColor: #999; +// $orbitBulletNavColorActive: #222; +// $orbitHasThumbBorderColor: #000; +// $orbitHasThumbBorderWidth: 2px; +// $orbitHasThumbBorderStyle: solid; +// $orbitSlideNumBgColor: rgba(0,0,0,0.7); +// $orbitSlideNumFontColor: #fff; +// $orbitSlideNumPadding: 5px; + +// Clearing Settings + +// $clearingBg: rgba(0,0,0,0.8); +// $clearingOldBrowserBg: rgb(0,0,0); +// $clearingCaptionBg: rgba(0,0,0,0.7); +// $clearingCaptionOldBrowserBg: rgb(0,0,0); +// $clearingCaptionFontColor: #fff; +// $clearingCloseColor: #fff; +// $clearingArrowColor: #fff; +// $clearingArrowSize: 16px; +// $clearingCarouselBg: rgba(0,0,0,0.75); +// $clearingCarouselOldBrowserBg: rgb(0,0,0); +// $clearingCarouselHeight: 150px; +// $clearingActiveImgHeight: 75%; +// $clearingCarouselThumbWidth: 175px; +// $clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255); +// $clearingImgBg: rgba(0,0,0,0.75); +// $clearingImgOldBrowserBg: rgb(0,0,0); + +// Joyride Settings + +// $tipBg: rgba(0,0,0,0.8); +// $tipBgIE8: #000; +// $tipFontColor: #fff; +// $tipHeaderWeight: bold; +// $tipDefaultWidth: 300px; +// $tipBorderRadius: 4px; +// $tipPadding: 18px 20px 24px; +// $tipNubSize: 14px; +// $tipFontSize: 14px; +// $tipTimerWidth: 50px; +// $tipTimerHeight: 3px; +// $tipTimerBorder: solid 1px #555; +// $tipTimerColor: #666; +// $tipCloseColor: #777; +// $tipCloseSize: 20px; +// $tipCloseWeight: normal; +// $tipScreenFill: rgba(0,0,0,0.5); + +// Modular Scale Settings + +// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE +// $baseFontSize: 14px; +// $importantModNum: 44px; +// $base-size: $baseFontSize $importantModNum; +// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115; +// http://www.modularscale.com by Tim Brown +// https://github.com/scottkellum/modular-scale by scottkellum \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_global-mixins.scss b/test/mocha/html-snapshots/server/app/sass/_global-mixins.scss new file mode 100644 index 00000000..1525632c --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_global-mixins.scss @@ -0,0 +1,93 @@ +// +// global-mixins +// +// The mixins exposed to the container and application that are original +// to the container itself (not vendor). +// + +// ------------------------- +// breakpoint(point) +// ------------------------- +// Takes one argument, the breakpoint +// Accepted argument values (can be one of the following): +// large, medium, medium-portrait, medium-landscape, small, small-portrait, small-landscape, +// very-small, very-small-portrait, very-small-landscape, super-small, super-small-portrait, +// super-small-landscape +// These values are defined in container-settings.scss +// +@mixin breakpoint($point) { + @if $point == large { + @media only screen and (min-width: $breakLargeMin) { @content; } + } + @else if $point == medium { + @media only screen and (max-width: $breakMediumMax) and (min-width: $breakMediumMin) { @content; } + } + @else if $point == medium-portrait { + @media screen and (orientation: portrait) and (max-width: $breakMediumPortraitMax) and (min-width: $breakMediumPortraitMin) { @content; } + } + @else if $point == medium-landscape { + @media screen and (orientation: landscape) and (max-width: $breakMediumLandscapeMax) and (min-width: $breakMediumLandscapeMin) { @content; } + } + @else if $point == medium-small { + @media only screen and (max-width: $breakMedSmallMax) { @content; } + } + @else if $point == small { + @media only screen and (max-width: $breakSmallMax) { @content; } + } + @else if $point == small-portrait { + @media screen and (orientation: portrait) and (max-width: $breakSmallPortraitMax) { @content; } + } + @else if $point == small-landscape { + @media screen and (orientation: landscape) and (max-width: $breakSmallLandscapeMax) { @content; } + } + @else if $point == very-small { + @media only screen and (max-width: $breakVerySmallMax) { @content; } + } + @else if $point == very-small-portrait { + @media only screen and (max-width: $breakVerySmallPortraitMax) { @content; } + } + @else if $point == very-small-landscape { + @media screen and (orientation: landscape) and (max-width: $breakVerySmallLandscapeMax) { @content; } + } + @elseif $point == very-small-super-small { + @media only screen and (max-width: $breakVerySmallSuperSmallMax) { @content; } + } + @else if $point == super-small { + @media only screen and (max-width: $breakSuperSmallMax) { @content; } + } + @else if $point == super-small-portrait { + @media screen and (orientation: portrait) and (max-width: $breakSuperSmallPortraitMax) { @content; } + } + @else if $point == super-small-landscape { + @media screen and (orientation: landscape) and (max-width: $breakSuperSmallLandscapeMax) { @content; } + } + @else if $point == super-small-extra-small { + @media only screen and (max-width: $breakSuperSmallExtraSmallMax) { @content; } + } + @else if $point == extra-small { + @media only screen and (max-width: $breakExtraSmallMax) { @content; } + } + @else if $point == extra-small-portrait { + @media screen and (orientation: portrait) and (max-width: $breakExtraSmallPortraitMax) { @content; } + } + @else if $point == extra-small-landscape { + @media screen and (orientation: landscape) and (max-width: $breakExtraSmallPortraitMax) { @content; } + } + @else { + @warn ILLEGAL ARGUMENT TO breakpoint; + @debug ILLEGAL ARGUMENT TO breakpoint; + @content; + } +} + +@mixin switcher($direction, $point) { + float: $direction; + @include breakpoint($point) { + @if ($direction == left) { + float: right; + } + @else { + float: left; + } + } +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_global-settings.scss b/test/mocha/html-snapshots/server/app/sass/_global-settings.scss new file mode 100644 index 00000000..7000411d --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_global-settings.scss @@ -0,0 +1,135 @@ +// +// global-settings +// +// This settings file has the main variables exposed to applications. +// + +// Breakpoints +// ------------------------- +$breakLargeMin: 1441px; +$breakMediumMin: 768px; +$breakMediumMax: 1279px; +$breakMediumPortraitMin: $breakMediumMin; +$breakMediumPortraitMax: $breakMediumMax; +$breakMediumLandscapeMin: $breakMediumMin; +$breakMediumLandscapeMax: $breakMediumMax; +$breakMedSmallMax: 885px; +$breakSmallMax: 767px; +$breakSmallPortraitMax: $breakSmallMax; +$breakSmallLandscapeMax: $breakSmallMax; +$breakVerySmallMax: 480px; +$breakVerySmallPortraitMax: $breakVerySmallMax; +$breakVerySmallLandscapeMax: $breakVerySmallMax; +$breakVerySmallSuperSmallMax: 435px; +$breakSuperSmallMax: 380px; +$breakSuperSmallPortraitMax: $breakSuperSmallMax; +$breakSuperSmallLandscapeMax: $breakSuperSmallMax; +$breakSuperSmallExtraSmallMax: 320px; +$breakExtraSmallMax: 240px; +$breakExtraSmallPortraitMax: $breakExtraSmallMax; +$breakExtraSmallLandscapeMax: $breakExtraSmallMax; + +// urls +$urlbase: ""; +$urlfbfwoff: "#{$urlbase}/fonts/facebolf-webfont.woff"; +$urlfbfeot: "#{$urlbase}/fonts/facebolf-webfont.eot"; +$urlfbfeotie: $urlfbfeot + "?#iefix"; +$urlfbfttf: "#{$urlbase}/fonts/facebolf-webfont.ttf"; +$urlfbfsvg: "#{$urlbase}/fonts/facebolf-webfont.svg#facebook_letter_facesregular"; + +// panel bottom margin +$panel-bottom-margin: 22px; + +// colors +$site-white: #fdfdfd; +$site-black: #050001; // from the logo font color + +// analogic to primary yellow faaa00 +$primary-1: #F9AA00; +$primary-2: #BB8E2F; +$primary-3: #A26F00; +$primary-4: #FCC03F; +$primary-5: #FCD071; + +$secondary-a-1: #F9D200; +$secondary-a-2: #BBA52F; +$secondary-a-3: #A28900; +$secondary-a-4: #FCDF3F; +$secondary-a-5: #FCE671; + +$secondary-b-1: #F97700; +$secondary-b-2: #BB722F; +$secondary-b-3: #A24E00; +$secondary-b-4: #FC9A3F; +$secondary-b-5: #FCB471; + +// yellow/green +$secondary-c-1: #F7FE00; +$secondary-c-2: #BBBE30; //lt +$secondary-c-3: #A1A500; //dk +$secondary-c-4: #F9FE40; +$secondary-c-5: #FBFE72; + +/* +Web palate analogic +Primary: +FF9900 CC9933 996600 FFCC33 FFCC66 +Secondary Color A: +FFCC00 CC9933 999900 FFCC33 FFFF66 +Secondary Color B: +FF6600 CC6633 993300 FF9933 FF9966 +*/ +/* +OMS +OMS 4027 +(F1A02D) OMS 4584 +(BA932F) OMS 4137 +(B95E0E) OMS 4494 +(FAC23D) OMS 4018 +(FEC478) +Secondary Color A: +OMS 4481 +(F6D93E) OMS 4583 +(C1A52E) OMS 4123 +(BC8023) OMS 4005 +(FCEE66) +Secondary Color B: +OMS 4522 +(FF6000) OMS 4545 +(C07235) OMS 4144 +(B55100) OMS 4026 +(F0A142) OMS 4018 +(FEC478) +*/ + +//Kuler Mono: +$kuler-mono-1: #FBCC68; +$kuler-mono-2: #7A580E; +$kuler-mono-3: #FAB41D; +$kuler-mono-4: #7A6433; +$kuler-mono-5: #C78F17; + +// Kuler Analog: +$kuler-analog-1: #E3850F; +$kuler-analog-2: #FDE211; +$kuler-analog-3: #FAB41D; +$kuler-analog-4: #E38A0F; +$kuler-analog-5: #FD7811; + +// Kuler Compound (green/yel): +$kuler-comp-1: #948C4C; +$kuler-comp-2: #C7B003; + +// Kuler Shades: +$kuler-shade-1: #7A580E; +$kuler-shade-2: #BA8616; +$kuler-shade-3: #FAB41D; +$kuler-shade-4: #3B2A07; +$kuler-shade-5: #E0A21A; + +// Snapshot (green to white w/yel): +$snap-1: #262401; // super dk green +$snap-2: #3e4001; // dark green +$snap-3: #70731f; // green +$snap-4: #b8a03e; // yel +$snap-5: #e0e4e5; // off-white diff --git a/test/mocha/html-snapshots/server/app/sass/_global.scss b/test/mocha/html-snapshots/server/app/sass/_global.scss new file mode 100644 index 00000000..5dd39be3 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_global.scss @@ -0,0 +1,86 @@ +$home-sprite-sprite-dimensions: true; +$home-sprite-spacing: 10px; +@import "home-sprite/*.png"; +@include all-home-sprite-sprites; + +%grid-full { + @include column($totalColumns); +} +%grid-half { + @include column($totalColumns/2); + @include breakpoint(extra-small) { + padding: 0; + } +} + +.small-breakpoint-js { width: $breakSmallMax; } + +// fonts +@font-face { + font-family: 'facebook_letter_facesregular'; + src: url($urlfbfeot); + src: url($urlfbfeotie) format('embedded-opentype'), + url($urlfbfwoff) format('woff'), + url($urlfbfttf) format('truetype'), + url($urlfbfsvg) format('svg'); + font-weight: normal; + font-style: normal; +} + +%level-dropdown { + z-index: 9; +} +%level-page { + z-index: 3; +} +%level-logo { + z-index: 2; +} +%level-canvas { + z-index: 1; +} +%level-art { + z-index: 0; +} + +%radius-panel { + @include border-radius($default-border-radius); +} + +.js .page-spinner { + @include background(image-url("/images/ajax-loader.gif") no-repeat); + height: 32px; + width: 32px; + margin: 64px auto; +} + +//.body { + // oldie hack +// *position: relative; +// *z-index: -1; +//} +#canvas-section { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + @extend %level-canvas; +} + +.main-grid-row { + @include outerRow(); + @include breakpoint(small) { + padding: inherit; + } +} +.main-grid-column { + @extend %grid-full; + background: $site-white; +} + +.image-ctl-inner { + background: transparent; + margin: 0 0 $panel-bottom-margin 0; + @extend %level-art; +} diff --git a/test/mocha/html-snapshots/server/app/sass/_header.scss b/test/mocha/html-snapshots/server/app/sass/_header.scss new file mode 100644 index 00000000..29eb10a0 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_header.scss @@ -0,0 +1,319 @@ +.header-top-block { + @extend %grid-half; + @include clearfix(); +} +.header-top-left { + float: left; +} +.header-top-right { + float: right; +} +%topline-item { + margin-top: 5px; + @include breakpoint(small) { + margin: 15px auto 0 auto; + } +} +.header-top-left-switch { + @include switcher(left, small); +} +.header-top-right-switch { + @include switcher(right, small); +} + +// +// Logo +// ---------------------------------------------------------------------- +$logo-width: 265px; +$logo-height: 211px; +$logo-margin-top: -30px; // -50 +$logo-margin-top-ms-reduction: 15px; // 35 + +.logo-img-js { + width: $logo-width; + height: $logo-height; +} +.logo-outer { + @extend %grid-half; +} +.logo-inner { + margin: $logo-margin-top 0 $panel-bottom-margin -20px; + min-height: $logo-height;// + abs($logo-margin-top); + text-align: center; + @include breakpoint(medium-small) { + // reduce to make room for nav + margin-top: $logo-margin-top + $logo-margin-top-ms-reduction; + //min-height: $logo-height + abs($logo-margin-top + $logo-margin-top-ms-reduction); + //margin-bottom: abs($logo-margin-top + $logo-margin-top-ms-reduction) / 2 * -1; + } + @include breakpoint(small) { + margin-top: $logo-margin-top - $logo-margin-top-ms-reduction; + //min-height: $logo-height + abs($logo-margin-top - $logo-margin-top-ms-reduction); + //margin-bottom: abs($logo-margin-top - $logo-margin-top-ms-reduction) / 2 * -1; + } + @include breakpoint(extra-small) { + margin-top: 0px; + margin-bottom: 0px; + } + position: relative; + @extend %level-logo; +} +.logo-inner a { + //display: block; + height: $logo-height; + width: $logo-width; // 100% +} + +// +// Slider +// ---------------------------------------------------------------------- + +$slider-container-height: 240px; +// this is really the foundation panel bottom margin value +$slider-container-bottom-margin: $panel-bottom-margin; +.slider-1 { + @include background(image-url('/images/slider1.jpg') no-repeat); + @include breakpoint(small) { + background: image-url('/images/slider1-lg.jpg') no-repeat; + } + @include breakpoint(very-small) { + background: image-url('/images/slider1.jpg') no-repeat; + } +} +.slider-outer { + @extend %grid-half; +} +.slider-inner { + //@include background($primary-4); + //border: 1px solid $secondary-b-3; + //padding: 10px; + margin: 0 0 $slider-container-bottom-margin 0; + @include box-shadow(rgba($primary-3, 0.6) 0 0 25px); +} +/* .ie7 .orbit-wrapper { + height: $slider-container-height !important; +} +.ie7 #featured-orbit { + height: inherit !important; +} + */ +#featured-orbit div { + // extra right for timer + padding: 10px 30px 10px 20px; +} +#featured-orbit h1 { + @include breakpoint(super-small) { + font-size: 22px; + } +} +#featured-orbit h2 { + @include breakpoint(super-small) { + font-size: 22px; + } +} +.orbit-wrapper { + @extend %level-canvas; +} +.no-touch .orbit-wrapper { + .slider-nav span { @include opacity(0); @include single-transition(opacity, 400ms); } + &:hover .slider-nav span { @include opacity(1); } +} +.ie8 .orbit-wrapper, .ie7 .orbit-wrapper { + .slider-nav span { display: none; } + &:hover .slider-nav span { display: none; } +} +.ie8 .orbit-wrapper .timer, .ie7 .orbit-wrapper .timer { + display: none; +} +.orbit-wrapper .timer { + @include breakpoint(super-small) { + display: none; + } +} + +// +// top buttons +// ---------------------------------------------------------------------- + +//%top-pill-box-shadow { +// @include box-shadow(rgba($primary-4, 0.8) 0 0 25px, rgba($primary-5, 0.6) 0 0 3px 1px inset); +//} +%top-pill-box-shadow { + -webkit-box-shadow: rgba($primary-4, 0.8) 0 0 25px, rgba($primary-5, 0.6) 0 0 3px 1px inset !important; + -moz-box-shadow: rgba($primary-4, 0.8) 0 0 25px, rgba($primary-5, 0.6) 0 0 3px 1px inset !important; + box-shadow: rgba($primary-4, 0.8) 0 0 25px, rgba($primary-5, 0.6) 0 0 3px 1px inset !important; +} +%top-pill-hover { + @include background($primary-1 !important); + @extend %top-pill-box-shadow; +} +%top-text { + font : { + size: ms(2) !important; + weight: bold; + } + color: $site-black; + @include breakpoint(very-small-super-small) { + font-size: ms(1) !important; + } + @include breakpoint(extra-small) { + font-size: 14px !important; + } +} +.top-pill { + @extend %radius-panel; + @extend %topline-item; + + position: relative; + @extend %level-page; + + @include background($primary-4); + padding: 5px 18px; + border: { + color: #eba104 !important; // transparent + width: 1px; + style: solid; + }; + @include box-shadow(0 1px 0 $shinyEdge inset); + + @include breakpoint(super-small) { + padding: 5px 8px; + } + + //-webkit-transition: background-color 0.3s ease-in-out; + @include transition-property(background-color); + @include transition-duration(0.3s); + @include transition-timing-function(ease-in-out); +} +.top-pill:hover { + @extend %top-pill-hover; +} +.top-pill a { + @extend %top-text; + text-align: center; +} +.ie7 .top-pill { + box-sizing: content-box; +} +.ie7 .has-flyout.top-pill { + box-sizing: border-box; +} + +$contact-facebook-width: 149px; +.contact-facebook { + @extend %radius-panel; + @extend %topline-item; + position: relative; + @extend %level-page; + + @include single-box-shadow(white, 0px, 1px, 1px, 0px, true); + border: { + style: solid; + width: 1px; + color: #29447e #29447e #1a356e; + }; + @include background(#2e4a83); + @include clearfix(); + width: $contact-facebook-width; + @include breakpoint(very-small-super-small) { + width: 100px; + } + @include breakpoint(extra-small) { + width: 80px; + } +} +.contact-facebook-text { + float: left; + font-family: 'facebook_letter_facesregular'; + font-weight: normal; + font-size: ms(2); + text-shadow: none; + color: white; + line-height: 31px; + text-align: center !important; + width: $contact-facebook-width; + margin-top: 2px; + @include breakpoint(very-small-super-small) { + line-height: 26px; + width: 100px; + font-size: ms(1); + } + @include breakpoint(extra-small) { + width: 80px; + } +} + +// +// Navbar +// ---------------------------------------------------------------------- + +$icon-width: 20px; +$icon-height: 3px; +$icon-container-height: 35px; +$icon-container-width: 35px; + +.nav-bar { + @extend %topline-item; + @include background(transparent); + //@include breakpoint(small) { + //margin-top: inherit; + //} +} +.nav-bar li.has-flyout { + @include box-shadow(0 1px 0 $shinyEdge inset); + @include breakpoint(small) { + width: $icon-container-width; + height: $icon-container-height; + } +} +.nav-bar li:hover { + @extend %top-pill-box-shadow; + } +.nav-bar li a { + @extend %top-text; +} +.flyout { + //@include box-shadow(rgba($primary-3, 0.6) 0 1px 5px); + //border: 1px solid darken($primary-3, 2%); + @include background($primary-4); + @include breakpoint(small) { + position: absolute; + width: 200px !important; // this is tied to the text size + } +} +ul.flyout li, .nav-bar li ul li { + border-left: solid 3px darken($primary-1, 10%); +} +ul.flyout li a, .nav-bar li ul li a { + @include background($primary-4); + border: 1px solid $primary-1; +} +.ie7 ul.flyout li a, .ie7 .nav-bar li ul li a { + box-sizing: content-box; +} +ul.flyout li a:hover, ul.flyout li a:focus, .nav-bar li ul li a:hover, .nav-bar li ul li a:focus { + @extend %top-pill-hover; +} +.nav-bar > li.has-flyout > a:first-child:after { + border: { + width: 6px; + color: $site-black transparent transparent transparent; + } +} +.line-menu { + padding: ((($icon-height*3+6)/$icon-container-height)*100/2)#{"%"} (((1 - $icon-width / $icon-container-width) * 100) / 2)#{"%"}; + width: $icon-container-width; + height: $icon-container-height; + @include breakpoint(very-small-super-small) { + height: 26px; + } +} +.line-menu .icon-bar { + display: block; + width: $icon-width; + height: $icon-height; + margin-top: $icon-height - 1; + @include background($site-black); + @include border-radius(1px); + @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_home.scss b/test/mocha/html-snapshots/server/app/sass/_home.scss new file mode 100644 index 00000000..2213b428 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_home.scss @@ -0,0 +1,147 @@ +// +// Badges +// --------------------------------------------------------------------- +.badges-outer { + @extend %grid-half; +} +$badges-number: 3; +$badge-margin: 20px; +$badge-width: 80px; +$total-badge-width: (($badge-width+$badge-margin) * $badges-number) + $badge-margin; +.badges-inner { + margin: 10px auto $panel-bottom-margin auto; + //min-height: 120px; + @include clearfix(); + width: $total-badge-width; + position: relative; + @extend %level-logo; +} +.badge { + margin-left: $badge-margin; + float: right; +} +.home-sprite-certification { + margin-right: $badge-margin; +} + +// +// Main art image +// --------------------------------------------------------------------- +$img-height: 200px; +$img-width: 308px; +$img-margin-top: ($img-height / 2) * -1 + 20px; +.img-ctl-home { + // ? mh for this space is determined by the image and badge height + + position: relative; + margin: $img-margin-top auto 0 auto; + width: $img-width; + min-height: $img-height; + + @extend %level-art; + + @include breakpoint(medium-small) { + margin-top: $img-margin-top + $logo-margin-top-ms-reduction + 20px; + } + @include breakpoint(small) { + margin: 0 auto $panel-bottom-margin auto; + } + @include breakpoint(extra-small) { + width: $breakExtraSmallMax; + margin-bottom: 0; + } +} +.img-ctl-js { + height: $img-height; + width: $img-width; +} + +// +// Buttons +// --------------------------------------------------------------------- +.optional-text { + @include breakpoint(extra-small) { + display: none; + } +} + +$home-button-height: 60px; +%home-button { + @extend %radius-panel; + @include box-shadow(0 1px 0 $shinyEdge inset); + min-height: $home-button-height; + line-height: $home-button-height; + border: { + style: solid; + width: 1px; + } + width: 85%; + margin: 0 auto $panel-bottom-margin auto; + position: relative; + @extend %level-page; +} + +.home-link { + text-align: center; + display: block; + height: $home-button-height; + width: 100%; + font: { + weight: bold; + size: ms(2); + } + color: $primary-5; + @include text-shadow( + 2px 2px 2px rgba(20, 20, 20, 0.8), + -1px -1px 0 #202020, + 1px -1px 0 #202020, + -1px 1px 0 #202020, + 1px 1px 0 #202020 + ); + @include breakpoint(super-small) { + font-size: ms(1); + } +} +.carpet-button { + @extend %home-button; + @include background(image-url('/images/carpetw2.jpg') repeat-x); + border: { + //color: $secondary-b-2; + color: #d8d8d8; + } +} +.floor-button { + @extend %home-button; + @include background(image-url('/images/floor2.jpg') repeat-x); + border: { + color: $primary-3; + } +} +.fabric-button { + @extend %home-button; + @include background(image-url('/images/fabricw2.jpg') repeat-x); + border: { + color: #d8d8d8; + } +} +.tile-button { + @extend %home-button; + @include background(image-url('/images/tile.jpg') repeat-x); + border: { + color: #d8d8d8; + } +} +.water-button { + @extend %home-button; + @include background(image-url('/images/waterw.jpg') repeat-x); + border: { + color: #5ba1bb; + } +} +.generic-button { + @extend %home-button; + @include background($primary-2); + border: { + color: $primary-3; + } +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/_service.scss b/test/mocha/html-snapshots/server/app/sass/_service.scss new file mode 100644 index 00000000..4be675c9 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/_service.scss @@ -0,0 +1,32 @@ +// nothing yet +.img-ctl-service { + // mh is controlled by image alone + min-height: 120px; + + @include breakpoint(small) { + min-height: 100px; + } +} + +.service-inner { + @include background(darken($primary-2, 2%)); + width: 92%; + border: solid 1px $primary-3; + margin: 0 0 $panel-bottom-margin 0; + padding: 20px; + text-align: center; + position: relative; + @extend %level-page; +} + +.service-inner img { + border: solid 4px $primary-4; +} + +.reveal-modal { + @include background(darken($primary-2, 10%)); +} + +.reveal-modal img { + border: solid 4px $primary-4; +} \ No newline at end of file diff --git a/test/mocha/html-snapshots/server/app/sass/index.scss b/test/mocha/html-snapshots/server/app/sass/index.scss new file mode 100644 index 00000000..08bcc3d2 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/sass/index.scss @@ -0,0 +1,39 @@ +@import "global-settings"; +@import "global-mixins"; + +// Foundation overrides +@import "foundation-settings"; + +// Foundation styles and dependencies +@import "compass/css3"; +@import "foundation/settings"; +@import "foundation/functions/all"; +@import "foundation/mixins/clearfix"; +@import "foundation/mixins/css-triangle"; +@import "foundation/mixins/font-size"; +@import "foundation/mixins/respond-to"; +@import "foundation/mixins/semantic-grid"; +@import "modular-scale"; +@import "foundation/common/globals"; +@import "foundation/components/grid"; +@import "foundation/common/typography"; +@import "foundation/common/forms"; +@import "foundation/components/modules/buttons"; +// @import "foundation/components/modules/tabs"; +@import "foundation/components/modules/ui"; +// @import "foundation/components/modules/topbar"; +@import "foundation/components/modules/navbar"; +@import "foundation/components/modules/orbit"; +@import "foundation/components/modules/reveal"; +// @import "foundation/components/modules/offcanvas"; +// @import "foundation/components/modules/clearing"; +// @import "foundation/components/modules/joyride"; +@import "foundation/components/modules/mqueries"; + +// application styles +@import "global"; +@import "header"; +@import "footer"; +@import "home"; +@import "service"; +@import "contact"; diff --git a/test/mocha/html-snapshots/server/app/styles/index.css b/test/mocha/html-snapshots/server/app/styles/index.css new file mode 100644 index 00000000..34c728ef --- /dev/null +++ b/test/mocha/html-snapshots/server/app/styles/index.css @@ -0,0 +1,5873 @@ +/* +Web palate analogic +Primary: +FF9900 CC9933 996600 FFCC33 FFCC66 +Secondary Color A: +FFCC00 CC9933 999900 FFCC33 FFFF66 +Secondary Color B: +FF6600 CC6633 993300 FF9933 FF9966 +*/ +/* +OMS +OMS 4027 +(F1A02D) OMS 4584 +(BA932F) OMS 4137 +(B95E0E) OMS 4494 +(FAC23D) OMS 4018 +(FEC478) +Secondary Color A: +OMS 4481 +(F6D93E) OMS 4583 +(C1A52E) OMS 4123 +(BC8023) OMS 4005 +(FCEE66) +Secondary Color B: +OMS 4522 +(FF6000) OMS 4545 +(C07235) OMS 4144 +(B55100) OMS 4026 +(F0A142) OMS 4018 +(FEC478) +*/ +/* line 51, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_semantic-grid.scss */ +.main-grid-column, .header-top-block, .logo-outer, .slider-outer, .badges-outer, .footer-block-panel, .contact-inner-input, .contact-inner { + float: left; +} + +/* line 53, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_semantic-grid.scss */ +.footer-outer { + float: none; +} + +/* line 55, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_semantic-grid.scss */ +.main-grid-row { + *zoom: 1; +} +/* line 4, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_clearfix.scss */ +.main-grid-row:before, .main-grid-row:after { + content: " "; + display: table; +} +/* line 5, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_clearfix.scss */ +.main-grid-row:after { + clear: both; +} + +/* line 62, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/mixins/_semantic-grid.scss */ +.main-grid-column, .header-top-block, .logo-outer, .slider-outer, .badges-outer, .footer-outer, .footer-block-panel, .contact-inner-input, .contact-inner { + position: relative; + min-height: 1px; + padding: 0 15px; +} + +/* Requires: normalize.css */ +/* Global Reset & Standards ---------------------- */ +/* line 5, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +*, *:before, *:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* line 6, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +html { + font-size: 62.5%; +} + +/* line 7, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +body { + background: #fdfdfd; + font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; + font-weight: normal; + font-style: normal; + font-size: 14px; + line-height: 1; + color: #050001; + position: relative; + -webkit-font-smoothing: antialiased; +} + +/* Links ---------------------- */ +/* line 11, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +a img { + border: none; +} + +/* line 12, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +a { + color: #fcc03f; + text-decoration: none; + line-height: inherit; +} + +/* line 13, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +a:hover { + color: #fcb826; +} + +/* line 14, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +a:focus { + color: #fcb826; +} + +/* line 15, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +p a, p a:visited { + line-height: inherit; +} + +/* Misc ---------------------- */ +/* line 19, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.left { + float: left; +} + +/* line 20, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.right { + float: right; +} + +/* line 21, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.text-left { + text-align: left; +} + +/* line 22, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.text-right { + text-align: right; +} + +/* line 23, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.text-center { + text-align: center; +} + +/* line 24, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.hide { + display: none; +} + +/* line 25, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.hide-override { + display: none !important; +} + +/* line 26, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +.highlight { + background: #ffff99; +} + +/* line 28, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +#googlemap img, object, embed { + max-width: none; +} + +/* line 30, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +#map_canvas embed { + max-width: none; +} + +/* line 31, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +#map_canvas img { + max-width: none; +} + +/* line 32, ../../../../../../../../var/lib/gems/1.8/gems/zurb-foundation-3.2.5/scss/foundation/common/_globals.scss */ +#map_canvas object { + max-width: none; +} + +/* Reset for strange margins by default on+ Our contact system is temporarily unavailable. We apologize for the inconvenience. +
+Here is your message:
+ ++ Please consider mailing your message to us directly: + <%= mailTo %> +
++ We really would love to hear from you! +
diff --git a/test/mocha/html-snapshots/server/app/templates/contact-success.html b/test/mocha/html-snapshots/server/app/templates/contact-success.html new file mode 100644 index 00000000..9dcbbd4c --- /dev/null +++ b/test/mocha/html-snapshots/server/app/templates/contact-success.html @@ -0,0 +1,7 @@ ++ Thank you for your inquiry. We will reply to <%= email %> within <%= responseTime %>. +
+ diff --git a/test/mocha/html-snapshots/server/app/templates/contact.html b/test/mocha/html-snapshots/server/app/templates/contact.html new file mode 100644 index 00000000..a6d89a69 --- /dev/null +++ b/test/mocha/html-snapshots/server/app/templates/contact.html @@ -0,0 +1,28 @@ +Contact us instructions go here. All form inputs are required.
+ +