getsource.js

/**
 Mark up code document at the given `codeUrl` into the div `domelement`
 using the optional option overrides and optional callback.

 Callback signature is (err, out) - where `out` is the structure defined
 in [markupcode.js](../src/markupcode'js).

 The getCodeUrl function allows testing on localhost (ie: leaves the
 url untouched). If the server is not localhost will change url to
 go to GitHub for the raw source to mark up.
 */
(function (ns) {
    "use strict";

    /// ### Markup source code using [Markdown](//daringfireball.net/projects/markdown/)
    /// {{{img.paperclip}}}
    var typeList = ['js', 'html', 'css', 'json', 'md'];
    var extPattern = /\.([0-9a-z]+)(?:[\?#]|$)/i;

    var source = function (codeUrl, domelement, options, callback) {
        codeUrl = getCodeUrl(codeUrl);

        var extension = codeUrl.match(extPattern);
        if (typeList.indexOf(extension[1]) === -1) {
            throw new Error('markupcode: unsupported file type - extension ' + extension[1]);
        }

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                if (xmlhttp.status == 200) {
                    ns.markup(xmlhttp.responseText.split('\n'), domelement, extension[1], options, function (err, out) {
                        if (callback) callback(err, out);
                    })
                }
                else {
                    throw new Error('markupcode: get source file returned status ' + xmlhttp.status);
                }
            }
        };
        xmlhttp.open('GET', codeUrl, true);
        xmlhttp.send();
    };

    /// ### Get source from localhost or GitHub if server not localhost
    // Determine location of source code
    // - If site not localhost then get source code from GitHub
    //   - `../` indicates moving down into the project files
    //     - so the GitHub source is in **master**
    //     - otherwise is page in **gh-pages**
    function getCodeUrl(filepath) {
        var src = window.location.href.replace('#', '');
        if ('localhost' !== window.location.hostname) {
            src = ns.sourcepath;
            if (filepath.indexOf('../') > -1) {
                src += 'master/';
                filepath = filepath.replace('../', '');
            }
            else {
                src += 'gh-pages/';
            }
        }
        return src + filepath;
    }

    // Add to namespace
    ns.source = source;
})(poc2g.markup);

hbarshelpers.js

/**
 Functions to position images on marked up document
 Design allows calling functions from javascript or
 Handlebars.

 Handlebars example
\{\{\{ image img.pretty_pic '0 0 0 0' '80px' \}\}\}

 The '0 0 0 0' is the margin style for positioning the
 image on the document relative to the location of the
 Handlebars entry. '80px' is the image width (the
 height is automatic keeping to the image aspect ratio)

 `img.pretty_pic` is object with the following fields :

 <pre><samp>
 img.pretty_pic = {
   src: url of image,
   href: url if image clicked
   style: optional image style override
 }
 </samp></pre>

 */

(function (ns) {
    "use strict";
    /** **Handlebars helper to place images on page**

     Images are placed within a div that is position: relative thus
     allowing the image to scroll properly, and float: left as being the
     most commonly used image on left side of the text. To float: right
     place the float:right in the style (see [image.js](js/image.js))
     Because the containing div is relative, the image itself can be
     styled position: absolute for flexibility of overlaying image
     above/below text.
     */
    function image(pic, margin, width) {
        if (pic == null) return '';
        var src = pic.src;
        var ref = pic.href;
        var style = pic.style || '';

        // The right and left margin is assigned to the containing div
        //  while the top and bottom margins are assigned to the image
        var margins = margin.split(' ');
        var divmargin = '0 ' + margins[1] + ' 0 ' + margins[3];
        var imgmargin = margins[0] + ' 0 ' + margins[2] + ' 0';

        // If the style is a float - place float:xxx into the image's parent div
        var divstyle = ['', ''];
        if (/(float:.*;)/.test(style)) {
            divstyle = style.match(/(float:.*;)/i);
        }

        // Create layout for image for placing in the document
        // Important styles of pic-parent-div class are :
        //  { position: relative; float: left; }
        var retval =
            '<div style="margin:' + divmargin + '; width:' + width + ';' + divstyle[1] +
            '" class="pic-parent-div">' +
            '<a href="' + ref + '">' +
            '<img style="margin:' + imgmargin + '; ' +
            'width:' + width + ';' + style + '" src="' + src + '" />' +
            '</a>' +
            '</div>';
        return retval;
    }


    /** **Handlebars helper to place inline images on page**

     In-line images will flow with the text. The only parameter
     is the image width :
     \{\{\{ image-inline '80px' \}\}\}
     */
    function imageInline (pic, width) {
        if (pic == null) return '';
        var src = pic.src;
        var ref = pic.href;
        var style = pic.style || '';

        var retval = '<a href="' + ref + '">' +
            '<img src="' + src + '" style="width:' + width + ';' + style + '" /></a>';

        return retval;
    }

    /// Register the helpers with Handlebars
    Handlebars.registerHelper('image', function (pic, margin, width){
        return new Handlebars.SafeString(image(pic, margin, width));
    });
    Handlebars.registerHelper('image-inline', function (pic, width){
        return new Handlebars.SafeString(imageInline(pic, width));
    });

    /// Assign functions to the namespace so can be used by javascript
    ns.image = image;
    ns.imageInline = imageInline;
})(poc2g.markup);