unlockanimation.js

import $ from 'jquery';
import { angular } from './../../js/base';
import _ from 'lodash';


class unlockAnimation {
    constructor($element, $rootScope) {
        this.$rootScope = $rootScope;
        this.listeners = {
            click: this.onClick.bind(this),
            DOMNodeRemoved: this.onDestroy.bind(this)
        };
        $($element).on(this.listeners);
    }

    onClick(event) {
        this.executeResizeAnimation();
    }

    executeResizeAnimation() {
        var windowHeight = window.innerHeight;
        var deviceHeight = $('#phone-hardware').find('.marvel-device').innerHeight();

        var ratio = windowHeight / deviceHeight;
        var text = `scale(${ratio*1.25})`;
        console.log(`wd: ${windowHeight}, ${deviceHeight}, scale(${ratio})`);
        var width = $('#phone-hardware').find('.marvel-device').innerWidth()*2;
        $('body').css({transform: text, width: width+25});

        this.screenUnlockSource = 'images/lockscreen-password.gif';
        this.$rootScope.isScreenUnlocked = true;
    }

    onDestroy() {
        console.log('destroyed');
        this.listeners.forEach($($element).off);
    }

}

angular.module('unlockanimation', [])
    .directive('unlockAnimation', function() {
        return {
            restrict: 'A',
            controller: unlockAnimation,
            bindToController: true,
            controllerAs: 'unlockAnimation'
        }
    });