creative-connections/Bodylight.js-Components

View on GitHub
src_aurelia-bodylight-plugin/src/elements/animate-adobe-ss.js

Summary

Maintainability
D
3 days
Test Coverage
import {bindable} from 'aurelia-framework';
import 'latest-createjs';

export class AnimateAdobeSs {
  @bindable src;
  @bindable width=800;
  @bindable height=600;
  @bindable name;//="ZelezoCelek"
  //@bindable cid;//="3CC81150E735AE4485D4B0DF526EB8B4";

  constructor(){}
  bind(){}

  attached(){
    //let that = this;
    let continueAfter = () => {
      if (typeof createjs === 'undefined') console.log('WARN: createjs not present,loading script manually not supported yet.');

      //if (!window.createjs) window.createjs = createjs;
      //make this component global - due to further calls
      //this.bindings = [];
      //window.ani = that;
      //detects and if not present - adds script with JS into DOM - so browser will load it, after that, initAdobe() will be called
      this.getScript(this.src, this.init.bind(this));
      //this.ratio = this.width / this.height;
      //window.addEventListener('resize', this.handleResize);
      //this.init();
    };

    //check global instance of createjs - if not present wait 500 ms
    if (typeof createjs === 'undefined') {
      console.log('INFO: waiting 1000ms for createjs ');
      setTimeout(() => continueAfter.bind(this), 1000);
    } else continueAfter();
  }

  //handleResize(); // First draw
  detached() {
    console.log('adobeobj detached()');
    //stop animation
    //this.disableAnimation();
    //remove script
    this.removeScript(this.src);
    //destroy bindings
    this.bindings = [];
    //remove listeners
    /*let fromel = document.getElementById(this.fromid);
    if (fromel) {
      fromel.removeEventListener('animatestart', this.startAllAnimation);
      fromel.removeEventListener('animatestop', this.stopAllAnimation);
      fromel.removeEventListener('fmidata', this.handleValueChange);
      fromel.removeEventListener('fmistart', this.enableAnimation);
      fromel.removeEventListener('fmistop', this.disableAnimation);
    }*/
    this.destroyAdobe();
    //document.removeEventListener('fmiattached',this.handleFMIAttached);
  }

  destroyAdobe() {
    console.log('animate adobe ss destroy()');
    if (this.stage) {
      this.stage.enableMouseOver(-1);
      this.stage.enableDOMEvents(false);
      this.stage.removeAllEventListeners();
      this.stage.removeAllChildren();
      this.stage.canvas = null;
      this.stage = null;
    }
    if (this.exportRoot) this.exportRoot = null;
    if (this.ss) this.ss = null;
    if (this.lib) this.lib = null;
    if (this.comp) this.comp = null;
    if (this.cid) this.cid = null;
    if (this.objs) this.objs = null;
    if (this.animobjs) this.animobjs = null;
    if (this.textobjs) this.textobjs = null;
    if (this.playobjs) this.playobjs = null;
    if (this.AdobeAn) this.AdobeAn = null;
  }


  init(){
    //canvas = document.getElementById("canvas");
    //anim_container = document.getElementById("animation_container");
    //dom_overlay_container = document.getElementById("dom_overlay_container");
    //find the right composition
    this.lib = null; this.comp = null;
    for (let cid of Object.keys(AdobeAn.compositions)) {
      let comp = AdobeAn.getComposition(cid);
      let lib = comp.getLibrary();
      if (lib[this.name] || lib['_'+this.name]) {
        this.lib = lib;
        this.comp = comp;
        break;
      }
    }
    /*let cid = Object.keys(AdobeAn.compositions).at(-1); //TODO last composition is the one needed??
    let comp=AdobeAn.getComposition(cid);
    this.lib=comp.getLibrary();*/
    let loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("fileload", function(evt){this.handleFileLoad(evt,this.comp)}.bind(this));
    loader.addEventListener("complete", function(evt){this.handleComplete(evt,this.comp)}.bind(this));
    //var lib=comp.getLibrary();
    loader.loadManifest(this.lib.properties.manifest);
  }

  handleFileLoad(evt, comp) {
    var images=comp.getImages();
    if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
  }
  handleComplete(evt,comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    //var lib=comp.getLibrary();
    let ss=comp.getSpriteSheet();
    let queue = evt.target;
    let ssMetadata = this.lib.ssMetadata;
    for(let i=0; i<ssMetadata.length; i++) {
      ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    let keys = Object.keys(this.lib);
    console.log('animate adobe ss lib keys:',keys);
    console.log('animate adobe ss name to be initialized:',this.name);
    //fix '_' before object name
    if (typeof this.lib[this.name] == 'function') this.exportRoot = new this.lib[this.name]
    else if (typeof this.lib['_'+this.name] == 'function') this.exportRoot = new this.lib['_'+this.name]();//new lib._04_Fe_výskyt_HTML5Canvas();
    else { console.warn('cannot instantiate animation',this.name); return;}
    this.stage = new this.lib.Stage(this.canvas);
    //Registers the "tick" event listener.
    //Code to support hidpi screens and responsive scaling.
    //AdobeAn.makeResponsive(false,'both',false,1,[this.canvas,this.anim_container,this.dom_overlay_container]);
    this.makeResponsive(true, 'both', true, 1, [this.canvas, this.anim_container, this.dom_overlay_container]);

    AdobeAn.compositionLoaded(this.lib.properties.id);
    this.fnStartAnimation();
  }

  fnStartAnimation() {
    this.stage.addChild(this.exportRoot);
    createjs.Ticker.setFPS(this.lib.properties.fps);
    createjs.Ticker.addEventListener("tick", this.stage);
  }


  playSound(id, loop) {
    return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
  }

  //get script element and registers 'onload' callback to be called when the script is loaded
  getScript(source, callback) {
    //check whether the script is not already there
    if (Array.from(document.getElementsByTagName('script')).filter(x=> x.getAttribute('src') === source).length > 0) {
      console.warn('AnimateAdobe.getScript() WARNING, script is already added into DOM:', source);
      //do callback?
      if (callback) setTimeout(callback, 0);
      return;
    }
    //console.log('animateadobe getscript()');
    let script = document.createElement('script');
    let prior = document.getElementsByTagName('script')[0];
    script.async = 1;
    //set that after onload a callback will be executed
    script.onerror = function() {
      if (!script.readyState || /loaded|complete/.test(script.readyState) ) {
        script.onerror = script.onload = script.onreadystatechange = null;
        script = undefined;
        // try to insert script by other app for previewing - scripts might be inserted into DOM
        if (window.editorapi && (typeof window.editorapi.insertScriptById === 'function')) {
          //disable previoues definition
          this.destroyAdobe();
          //enable current def
          //console.log('inserting script by thirdparty api');
          window.editorapi.insertScriptById(source, 'adobeobj')
            .then(innerscript => {
              //console.log('third party script node', innerscript);
              try {
                // eslint-disable-next-line no-eval
                eval(innerscript.innerHTML);
              } catch (e) {
                console.warn('Error during evaluation of adobe script. Probably OK to ignore', e.message);
              }
              if (callback) setTimeout(callback, 1000);
            });
        }
        // do callback after 2s
        //if (callback) setTimeout(callback, 1000);
      }
    };
    script.onload = script.onreadystatechange = function( _, isAbort ) {
      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
        script.onerror = script.onload = script.onreadystatechange = null;
        script = undefined;

        if (!isAbort && callback) setTimeout(callback, 0);
      }
    };
    //set script source - if base url is defined then base is prefixed
    script.src = window.bdlBaseHref ? window.bdlBaseHref + source : source;
    //add custom animate script into DOM - the onload will be called then
    prior.parentNode.insertBefore(script, prior);
  }

  makeResponsive(isResp, respDim, isScale, scaleType, domContainers) {
    //let lastW; let lastH; let lastS = 1;
    window.addEventListener('resize', this.handleResize.bind(this));
    this.isResp = isResp;
    this.respDim = respDim;
    this.isScale = isScale;
    this.scaleType = scaleType;
    this.domContainers = domContainers;
    this.handleResize();
  }

  handleResize() {
    console.log('animateadobe handleResize()');
    //do not run if ani.lib is not defined - no adobe component is available
    if (!this.lib) return;
    let w = this.lib.properties.width; let h = this.lib.properties.height;
    let iw = window.innerWidth;
    let ih = window.innerHeight;
    if (this.canvas && this.canvas.parentElement && this.canvas.parentElement.parentElement && this.canvas.parentElement.parentElement.parentElement) {
      iw = this.canvas.parentElement.parentElement.parentElement.offsetWidth;
      ih = this.canvas.parentElement.parentElement.parentElement.offsetHeight;
    }
    ih = iw / ( w / h );
    //let iw = window.innerWidth; let ih = window.innerHeight;
    let pRatio = window.devicePixelRatio || 1; let xRatio = iw / w; let yRatio = ih / h; let sRatio = 1;
    if (this.isResp) {
      if ((this.respDim === 'width' && this.lastW === iw) || (this.respDim === 'height' && this.lastH === ih)) {
        sRatio = this.lastS;
      } else if (!this.isScale) {
        if (iw < w || ih < h) {sRatio = Math.min(xRatio, yRatio);}
      } else if (this.scaleType === 1) {
        sRatio = Math.min(xRatio, yRatio);
      } else if (this.scaleType === 2) {
        sRatio = Math.max(xRatio, yRatio);
      }
    }
    this.domContainers[0].width = w * pRatio * sRatio;
    this.domContainers[0].height = h * pRatio * sRatio;
    this.domContainers.forEach(function(container) {
      container.style.width = w * sRatio + 'px';
      container.style.height = h * sRatio + 'px';
    });
    this.stage.scaleX = pRatio * sRatio;
    this.stage.scaleY = pRatio * sRatio;
    this.lastW = iw; this.lastH = ih; this.lastS = sRatio;
    this.stage.tickOnUpdate = false;
    this.stage.update();
    this.stage.tickOnUpdate = true;
  }

  removeScript(source) {
    let src = window.bdlBaseHref ? window.bdlBaseHref + source : source;
    let tags = document.getElementsByTagName('script');
    for (let i = tags.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove
      if (tags[i] && tags[i].getAttribute('src') !== null && tags[i].getAttribute('src').indexOf(src) !== -1) {tags[i].parentNode.removeChild(tags[i]);} //remove element by calling parentNode.removeChild()
    }
  }


}