CameraTrigger/ts/loader.ts

/*
 * SPDX-FileCopyrightText: 2023 Sascha Nitsch (@grumpydevelop@contentnation.net) https://contentnation.net/en/grumpydevelop
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */


/// <reference path="cameratrigger.ts" />

// IE stuff
interface HTMLElement {
  readyState: any;
  onreadystatechange: any;
}

class Loader {
  private loading: object;
  private app: CameraTrigger;

  constructor(app: CameraTrigger) {
    this.loading = {};
    this.app = app;
  }

  /**
   * load css
   * @param {string} file file to load
   * - checks for duplicates
   * - file name: /css/ + file + .css?v=version
   */
  css(file: string) {
    if (!document.getElementById("css_" + file)) {
      var link = document.createElement('link');
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("type", "text/css");
      link.setAttribute("id", "css_" + file);
      if (file[0] === "/") {
        link.setAttribute("href", file);
      } else {
        link.setAttribute("href", "css/" + file + ".css?v=" + this.app.getVersion());
      }
      document.getElementsByTagName("head")[0].appendChild(link);
    }
  };

  /**
   * gerneic callback wrapper supporting App scope or optional other scope
   * @param {object} scope to use (undefined or false uses App instance)
   * @param {Function} funct function to call
   * @param {object} parameter paramter for funct
   * @private
   */
  private callback(scope: object, funct: Function, parameter: object) {
    if (!scope) {
      funct.call(this, parameter);
    } else {
      funct.call(scope, parameter);
    }
  };

  /**
   * load javascript
   * @param {string} file file to load
   * @param {object} scope scope for callback
   * @param {Function} callback callback function
   * @param {object} parameter parameter for callback
   * - checks for duplicates
   * - file name: /js/ + file + .min.js?v=version
   */
  js(file: string, scope?: object, callback?: Function, parameter?: object) : boolean {
    if (this.loading[file]) {
      this.loading[file].push([scope,callback, parameter]);
      return true;
    }
    if (!document.getElementById("script_" + file.replace("/","_"))) {
      var script:HTMLElement = document.createElement('script');
      if (file[0] === "/") {
        script.setAttribute("src", file);
      } else {
        script.setAttribute("src", file + ".min.js?v=" + this.app.getVersion());
      }
      if (!callback) {
        callback = function() {
          script.setAttribute("id", "script_" + file);
          // console.log("trigger", "scriptload." + file);
          $(document).trigger("scriptload." + file);
        };
      }
      this.loading[file] = [[scope,callback, parameter]];
      if (callback) {
        if (script.readyState) { // IE
          script.onreadystatechange = function() {
            if (script.readyState === "loaded" || script.readyState === "complete") {
              script.onreadystatechange = null;
              script.setAttribute("id", "script_" + file.replace("/","_"));
              this.callbackList(file);
              delete this.loading[file];
            }
          }.bind(this);
        } else { // Others
          script.onload = function() {
            script.setAttribute("id", "script_" + file.replace("/","_"));
            this.callbackList(file);
            delete this.loading[file];
          }.bind(this);
        }
      }
      document.getElementsByTagName("head")[0].appendChild(script);
      return true;
    }
    if (callback) {
      this.callback(scope, callback, parameter);
    } else {
      $(document).trigger("scriptload." + file);
    }
    return false;
  };

  /**
   * calls multiple callsbacks if a file has been loaded
   * @param {string} file file that has been loaded
   * @private
   */
  callbackList(file: string) {
    for (var i = 0; i < this.loading[file].length; ++i) {
      var c = this.loading[file][i];
      if (c[0]) {
        this.callback(c[0], c[1], c[2]);
      }
    }
    $(document).trigger("scriptload." + file);
  };

  /**
   * add translation file to global translation object
   * @param {string} language
   * @param {string} group language group
   * @param {object} scope scope for callback function
   * @param {Function} callback callback function
   * @param {object} parameter parameter for callback
   */
  addLang(lang: string, group: string, scope?: object, callback?:Function, parameter?: object) {
    if (this.app.lang && this.app.lang[group]) {
      if (callback) {
        this.callback(scope, callback, parameter);
      }
    } else {
      jQuery.ajax({
        url : lang + "_" + group + ".json?v=" + this.app.getVersion(),
        dataType : 'json',
        type : "GET",
        data : parameter,
        success : function(a) {
          this.app.lang = jQuery.extend(this.app.lang, a);
          if (callback) {
            this.callback(scope, callback, parameter);
          }
        },
        error : this.app.error,
        context : this
      });
    }
  };

  template(file: string, scope: object, callback: Function, param?: object) {
    jQuery.ajax({
      url: file+'.mst?v=' + this.app.getVersion(),
      dataType: 'text',
      context: this,
      success: function(template) {
        $("body").append(template);
        if (callback) {
          this.callback(scope, callback, param);
        }
      }
    });
  }
}