PeterRayHomesConsultant.user.js

// ==UserScript==
// @name         Peter Ray Homes Consultant
// @namespace    http://github.com/Tiny-Giant
// @version      1.0.0.4
// @description  Interactive consultant applet for the homepage of Peter Ray Homes
// @author       @TinyGiant
// @match        http://www.libbyandben.co.nz/peterRay*
// @grant        GM_addStyle
// ==/UserScript==
/* jshint -W097 */
'use strict';

var css = [
    '#consultant {',
    '    min-height: 657px;',
    '    box-sizing: border-box;',
    '}',
    '#consultant .span_1_of_3 {',
    '    width: 45%;',
    '}',
    '.consultant-input {',
    '    -moz-box-sizing: border-box;',
    '    -webkit-appearance: none;',
    '    -webkit-box-sizing: border-box;',
    '    border: none;',
    '    background: transparent;',
    '    box-sizing: border-box;',
    '    color: #606060;',
    '    display: block;',
    '    font-size: 1em;',
    '    margin: 0;',
    '    margin-top: 20px !important;',
    '    max-width: 100%;',
    '    padding: 0.5em 0.8em;',
    '    font-family: inherit;',
    '    background: #f2f2f2;',
    '    width: 100%;',
    '}',
    '.homepage-wrap h1 {',
    '    font-size: 45px;',
    '}',
    '.consultant-response,',
    '.consultant-question {',
    '    font-size: 40px;',
    '    line-height: 45px;',
    '}',
    '.consultant-response small,',
    '.consultant-question small {',
    '    display: block;',
    '    font-size: 20px;',
    '    line-height: 25px;',
    '    line-spacing: 0px;',
    '}',
    '.consultant-done-wrap {',
    '    position: relative;',
    '    top: 75px;',
    '    left: 25px;',
    '    line-height: 0px;',
    '}',
    '.consultant-done {',
    '    display: inline-block;',
    '    color: #E69025;',
    '    font-size: 100px;',
    '    line-height: 0px;',
    '    vertical-align: bottom;',
    '}'
].join('\n');

GM_addStyle(css);

var nodes = {};

nodes.consultant = document.querySelector('#consultant');

nodes.scope = nodes.consultant.querySelector('.col');

nodes.response = document.createElement('div');
nodes.response.className = 'white consultant-response';
nodes.response.innerHTML = 'Hi, I’m Jim, a consultant at Peter Ray.<small class="orange">My job is to make your build as easy and personal as possible. And that starts right now. Let me give you a hand to find some plans on our website that suit your needs.</small>';

nodes.question = document.createElement('div');
nodes.question.className = 'orange consultant-question';

nodes.input = nodes.scope.querySelector('input');
nodes.scope.innerHTML = '';

nodes.scope.appendChild(nodes.response);
nodes.scope.appendChild(nodes.question);

var funcs = {};

funcs.prompt = function(e)
{
    
    if (typeof e !== 'undefined')
    {
        if(e.which && e.which !== 13) 
        {
            return;
        }
    }

    if (question.name)
    {
        document.body.scrollTop = document.body.scrollTop + nodes.consultant.getBoundingClientRect().top;
    }

    if (typeof question.response === 'function')
    {
        nodes.response.innerHTML = question.response(question.input.value);
    }
    else
    {
        if (typeof question.response !== 'undefined')
        {
            nodes.response.innerHTML = question.response;
        }
    }

    if (typeof question.name !== 'undefined')
    {
        responses.push(question);
        nodes.scope.removeChild(question.input);
    }
    
    question = questions.shift();


    if (typeof question.question !== 'undefined')
    {
        nodes.question.innerHTML = question.question;
    }

    nodes.question.innerHTML = question.question;

    console.log(question.input);
    if (question.input instanceof HTMLElement)
    {
        nodes.scope.appendChild(question.input);
    }

    if (question.name !== 'done')
    {
        if (question.input instanceof HTMLElement && /input|select/i.test(question.input.tagName))
        {
            question.input.className += ' consultant-input';
            funcs.applyListener(question.input);
        }
    }
    else
    {
        funcs.updateAllInputs();
    }
};

funcs.applyListener = function(input)
{
    var eventType = ['change', 'keydown'][+(input.type === 'text')];
    input.addEventListener(eventType, funcs.prompt, false);
}

funcs.updateInput = function(response)
{
    if (!response.original)
    {
        return;
    }

    response.original.value = response.input.value;

    var event = new UIEvent("change",
    {
        "view": unsafeWindow,
        "bubbles": true,
        "cancelable": true
    });

    response.original.dispatchEvent(event);
};

funcs.updateAllInputs = function()
{
    for (var i in responses)
    {
        funcs.updateInput(responses[i]);
    }
};

var question = {};

var questions = [
{
    name: 'name',
    question: 'First things first though. You know my name. What’s yours?',
    input: nodes.input,
    response: function(name)
    {
        localStorage.clientName = name;
        return "Hey " + name + ". Great to meet you. I've got a few questions to help us create the perfect home for you.";
    }
},
{
    name: 'bedrooms',
    question: "How many bedrooms are you thinking of having?",
    input: document.querySelector('[name="_sfm_bedrooms[]"]').cloneNode(true),
    original: document.querySelector('[name="_sfm_bedrooms[]"]'),
    response: function(bedrooms)
    {
        var response = '';
        switch (+bedrooms)
        {
            case 4:
                response += "Four! ";
                break;
            case 3:
                response += "Three! ";
                break;
            case 2:
                response += "Two! ";
                break;
            case 1:
                response += "One! ";
                break;
            default:
                return "Well that isn't a valid response...";
        }
        return response + "That should fit a few screaming kids and the odd guest or two.";
    }
},
{
    name: 'levels',
    question: "Does that mean you want two storeys or would you rather stick with one?",
    input: document.querySelector('[name="_sfm_levels[]"]').cloneNode(true),
    original: document.querySelector('[name="_sfm_levels[]"]'),
    response: function(levels)
    {
        return "Thanks " + localStorage.clientName + ". We've got lots of ideas for you. One more question:";
    }
},
{
    name: 'style',
    question: "Do you like contemporary or more traditional style homes?",
    input: document.querySelector('[name="_sfm_style[]"]').cloneNode(true),
    original: document.querySelector('[name="_sfm_style[]"]'),
    response: function(style)
    {
        return "Can't beat the old classics, eh? Here are some ideas we think you'll like.";
    }
},
{
    name: 'done',
    question: "They're just a starting point – we can customise them to suit you perfectly.",
    input: (function()
    {
        var wrap = document.createElement('div');
        wrap.className = 'consultant-done-wrap';
        var elmnt = document.createElement('a');
        elmnt.className = 'consultant-done';
        elmnt.innerHTML = '&#x2193;';
        elmnt.href = "#find-a-plan";
        wrap.appendChild(elmnt);
        return wrap;
    })()
}];

var responses = [];

funcs.prompt();

(function($)
{
    if (typeof $ !== 'function')
    {
        return;
    }

    $(document).on('click', 'a[href*="#"]:not([href="#"])', function()
    {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)
        {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

            if (target.length)
            {
                $('html, body').animate(
                {
                    scrollTop: target.offset().top
                }, 1000);

                return false;
            }
        }
    });
})(jQuery);