Download raw (2.6 KB)

function (window, document) {
    'use strict';
    
    function getScale(transform) {
        var test = /matrix\(((?:\d+\.)?\d+),\s*((?:\d+\.)?\d+),\s*((?:\d+\.)?\d+),\s*((?:\d+\.)?\d+),\s*((?:\d+\.)?\d+),\s*((?:\d+\.)?\d+)\)/
        
        if (test.test(transform)) {
            var matches = test.exec(transform);
            return [ parseFloat(matches[1]), parseFloat(matches[4]) ];
        }
        
        return [ 1, 1 ];
    }

    function position (x, y) {
        var sections = document.getElementsByTagName('section'),
            left = x, top = y,
            offsetLeft, offsetTop;
        
        for (var i=0; i < sections.length; i++) {
            var anchor = sections[i].getElementsByClassName('anchor')[0],
                rect = anchor.getBoundingClientRect(),
                paragraph = sections[i].getElementsByTagName('p')[0];
            
            offsetLeft = left - anchor.offsetLeft;
            offsetTop = top - anchor.offsetTop;
                
            
            var style = window.getComputedStyle(paragraph),
                scale = getScale(style.transform),
                centerDistanceX = (anchor.offsetLeft + ((rect.width * .5) / scale[0])) - parseInt(paragraph.clientWidth) / 2,
                scaleCorrectionX = centerDistanceX * (parseFloat(scale[0]) - 1),
                offsetLeft = offsetLeft - scaleCorrectionX,
                centerDistanceY = (anchor.offsetTop + ((rect.height * .5) / scale[1])) - parseInt(paragraph.clientHeight) / 2,
                scaleCorrectionY = centerDistanceY * (parseFloat(scale[1]) - 1),
                offsetTop = offsetTop - scaleCorrectionY;
                
            paragraph.style.setProperty('left', offsetLeft + 'px');
            paragraph.style.setProperty('top', offsetTop + 'px');
        }
    }

    function timeFrames () {
        console.log('Called');
        var section, duration, frames, clones = [],
            sections = document.getElementsByTagName('section'),
            frameLength = 15;
        
        for (var i=0; i < sections.length; i++) {
            section = sections[i],
            duration = section.getAttribute('duration'),
            frames = Math.ceil(duration / frameLength);
            
            for (var f=0; f < frames; f++) {
                clones.push({
                    clone: section.cloneNode(true),
                    reference: section,
                    parent: section.parentElement
                });
            }
        }
        
        for (var c=0; c < clones.length; c++) {
            var row = clones[c];
            row.parent.insertBefore(row.clone, row.reference);
        }
    }
}(window, document);