Source: addons/preloader.js

  1. import register from "../util/register.js";
  3. import m_cont_fact from "../extern/container.js";
  5. /**
  6.  * Preloader add-on.
  7.  * Provides API to create various types of standard preloaders.
  8.  * @module preloader
  9.  */
  10. function Preloader(ns, exports) {
  12. var m_cont = m_cont_fact(ns);
  14. var PL_CONT_BG_COLOR    = "#484848";
  15. var PL_BAR_BG_COLOR     = "#5276cf";
  16. var PL_BAR_BORDER_COLOR = "rgba(150, 150, 150, 0.7)";
  17. var PL_FONT_COLOR       = "#fff";
  19. var _preloader = {};
  20. var _canvas_container_elem = null;
  22. /**
  23.  * Create a preloader.
  24.  * @param {Object} options Initialization options.
  25.  * @param {string} [options.container_color] The CSS background color of the preloader container.
  26.  * @param {string} [options.bar_color] The CSS background color of the preloader bar.
  27.  * @param {string} [options.frame_color] The CSS color of the preloader frame border.
  28.  * @param {string} [options.font_color] The CSS color of the preloader font.
  29.  * @cc_externs container_color bar_color frame_color font_color
  30.  */
  31. exports.create_preloader = function(options) {
  32.     var container_color = PL_CONT_BG_COLOR;
  33.     var bar_color       = PL_BAR_BG_COLOR;
  34.     var frame_color     = PL_BAR_BORDER_COLOR;
  35.     var font_color      = PL_FONT_COLOR;
  37.     for (var opt in options) {
  38.         switch (opt) {
  39.         case "container_color":
  40.             container_color = options.container_color;
  41.             break;
  42.         case "bar_color":
  43.             bar_color = options.bar_color;
  44.             break;
  45.         case "frame_color":
  46.             frame_color = options.frame_color;
  47.             break;
  48.         case "font_color":
  49.             font_color = options.font_color;
  50.             break;
  51.         }
  52.     }
  54.     var pl_cont     = document.createElement("div");
  55.     var pl_bar      = pl_cont.cloneNode(false);
  56.     var pl_frame    = pl_cont.cloneNode(false);
  57.     var pl_caption  = pl_cont.cloneNode(false);
  58.     var canvas_cont = m_cont.get_container();
  60.     pl_frame.appendChild(pl_bar);
  61.     pl_frame.appendChild(pl_caption);
  62.     pl_cont.appendChild(pl_frame);
  63.     canvas_cont.appendChild(pl_cont);
  65.     pl_cont.style.cssText =
  66.         "background-color: " + container_color + ";" +
  67.         "width: 100%;" +
  68.         "height: 100%;" +
  69.         "position: absolute;" +
  70.         "top: 0;" +
  71.         "left: 0;";
  73.     pl_frame.style.cssText =
  74.         "position: absolute;" +
  75.         "left: 50%;" +
  76.         "top: 50%;" +
  77.         "margin-left: -150px;" +
  78.         "margin-top: -30px;" +
  79.         "width: 300px;" +
  80.         "height: 28px;" +
  81.         "box-shadow: 0px 0px 10px 0px " + frame_color + ";" +
  82.         "border: 2px solid " + frame_color + ";";
  84.     pl_bar.style.cssText =
  85.         "position: absolute;" +
  86.         "width: 0%;" +
  87.         "top: 0;" +
  88.         "left: 0;" +
  89.         "background-color: " + bar_color + ";" +
  90.         "height: 100%;";
  92.     pl_caption.style.cssText =
  93.         "font-family: Arial, sans-serif;" +
  94.         "line-height: 28px;" +
  95.         "height: 100%;" +
  96.         "width: 100%;" +
  97.         "top: 0;" +
  98.         "left: 0;" +
  99.         "text-align: center;" +
  100.         "position: absolute;" +
  101.         "font-size: 16px;" +
  102.         "font-weight: bold;" +
  103.         "text-shadow: 0px 0px 6px " + frame_color + ";" +
  104.         "color: " + font_color + ";";
  106.     _preloader.bar = pl_bar;
  107.     _preloader.caption = pl_caption;
  108.     _preloader.container = pl_cont;
  109.     _preloader.type = "DEFAULT";
  110. }
  112. /**
  113.  * Create a simple preloader.
  114.  * @param {Object} options Initialization options.
  115.  * @param {string} options.canvas_container_id Canvas container ID.
  116.  * @param {string} [options.background_container_id] Background container ID.
  117.  * @param {string} [options.bg_color] Background color.
  118.  * @param {string} [options.bar_color] Load bar color.
  119.  * @cc_externs bar_color bg_color background_container_id
  120.  * @cc_externs canvas_container_id preloader_fadeout
  121.  * @deprecated Use custom preloader or {@link module:preloader.create_preloader|preloader.create_preloader}.
  122.  */
  123. exports.create_simple_preloader = function(options) {
  124.     var canvas_container_id = null;
  125.     var background_container_id = null;
  126.     var bar_color = "#bf9221";
  127.     var bg_color = "#000";
  129.     for (var opt in options) {
  130.         switch (opt) {
  131.         case "canvas_container_id":
  132.             canvas_container_id = options.canvas_container_id;
  133.             break;
  134.         case "background_container_id":
  135.             background_container_id = options.background_container_id;
  136.             break;
  137.         case "bg_color":
  138.             bg_color = options.bg_color;
  139.             break;
  140.         case "bar_color":
  141.             bar_color = options.bar_color;
  142.             break;
  143.         case "preloader_fadeout":
  144.             _preloader.fadeout = options.preloader_fadeout;
  145.             break;
  146.         }
  147.     }
  149.     var container = document.createElement("div");
  150.     var frame = document.createElement("div");
  151.     container.id = "simple_preloader_container";
  152.     var bar = document.createElement("div");
  153.     var caption = document.createElement("div");
  154.     var background_container = document.getElementById(background_container_id);
  156.     _canvas_container_elem = document.getElementById(canvas_container_id);
  158.     container.style.cssText =
  159.         "z-index: 4;" +
  160.         "background-color: " + bg_color + ";" +
  161.         "width: 100%;" +
  162.         "height: 100%;" +
  163.         "position: absolute;" +
  164.         "margin: 0;" +
  165.         "padding: 0;" +
  166.         "top: 0;" +
  167.         "left: 0;";
  169.     frame.style.cssText =
  170.         "position: absolute;" +
  171.         "left: 50%;" +
  172.         "top: 82%;" +
  173.         "width: 300px;" +
  174.         "height: 20px;" +
  175.         "margin-left: -150px;" +
  176.         "margin-top: -10px;" +
  177.         "border-style:solid;" +
  178.         "border-width:4px;" +
  179.         "border-color: " + "#000" + ";" +
  180.         "border-radius: 0px;";
  182.     bar.style.cssText =
  183.         "position: absolute;" +
  184.         "left: 0px;" +
  185.         "top: 1px;" +
  186.         "width: 0px;" +
  187.         "height: 18px;" +
  188.         "background-color: " + bar_color + ";" +
  189.         "border-radius: 0px;";
  191.     caption.style.cssText =
  192.         "position: absolute;" +
  193.         "left: 50%;" +
  194.         "top: 50%;" +
  195.         "width: 100%;" +
  196.         "height: 100%;" +
  197.         "margin-left: -150px;" +
  198.         "margin-top: -10px;" +
  199.         "text-align: center;" +
  200.         "font-size: 17px;" +
  201.         "font-weight: bold;" +
  202.         "color: #000;" +
  203.         "font-family: Verdana;" +
  205.     frame.appendChild(bar);
  206.     frame.appendChild(caption);
  207.     container.appendChild(frame);
  209.     document.body.appendChild(container);
  211.     _preloader.type = "SIMPLE";
  212.     _preloader.container = container;
  213.     _preloader.bar = bar;
  214.     _preloader.caption = caption;
  215.     _preloader.background = background_container;
  216. }
  218. /**
  219.  * Create a rotation preloader.
  220.  * @param {Object} options Initialization options.
  221.  * @param {string} options.canvas_container_id Canvas container ID.
  222.  * @param {string} [options.background_container_id] Background container ID.
  223.  * @param {string} [options.bg_color] Background color.
  224.  * @param {string} [options.frame_bg_color] Frame background color.
  225.  * @param {string} [options.frame_class] CSS frame class.
  226.  * @param {string} [options.anim_elem_class] Animated element class.
  227.  * @cc_externs frame_bg_color frame_class anim_elem_class
  228.  * @deprecated Use custom preloader or {@link module:preloader.create_preloader|preloader.create_preloader}.
  229.  */
  230. exports.create_rotation_preloader = function(options) {
  231.     var canvas_container_id = null;
  232.     var background_container_id = null;
  233.     var frame_bg_color = "rgba(0,0,0,0)";
  234.     var frame_class = "";
  235.     var anim_elem_class = "";
  236.     var bg_color = "rgba(0,0,0,0)";
  238.     for (var opt in options) {
  239.         switch (opt) {
  240.         case "canvas_container_id":
  241.             canvas_container_id = options.canvas_container_id;
  242.             break;
  243.         case "background_container_id":
  244.             background_container_id = options.background_container_id;
  245.             break;
  246.         case "frame_bg_color":
  247.             frame_bg_color = options.frame_bg_color;
  248.             break;
  249.         case "bg_color":
  250.             bg_color = options.bg_color;
  251.             break;
  252.         case "frame_class":
  253.             frame_class = options.frame_class;
  254.             break;
  255.         case "anim_elem_class":
  256.             anim_elem_class = options.anim_elem_class;
  257.             break;
  258.         }
  259.     }
  261.     var container = document.createElement("div");
  262.     var frame = document.createElement("div");
  263.     var anim_elem = document.createElement("div");
  264.     var caption = document.createElement("div");
  265.     var background_container = document.getElementById(background_container_id);
  267.     _canvas_container_elem = document.getElementById(canvas_container_id);
  269.     container.style.cssText =
  270.         "z-index: 4;" +
  271.         "background-color: " + bg_color + ";" +
  272.         "width: 100%;" +
  273.         "height: 100%;" +
  274.         "position: absolute;" +
  275.         "margin: 0;" +
  276.         "padding: 0;" +
  277.         "top: 0;" +
  278.         "left: 0;";
  280.     frame.style.cssText =
  281.         "position: absolute;" +
  282.         "left: 50%;" +
  283.         "top: 50%;" +
  284.         "width: 117px;" +
  285.         "height: 117px;" +
  286.         "margin-left: -58px;" +
  287.         "margin-top: -58px;" +
  288.         "background-color: " + frame_bg_color + ";";
  290.     anim_elem.style.cssText =
  291.         "position: absolute;" +
  292.         "left: 0px;" +
  293.         "top: 0px;" +
  294.         "width: 100%;" +
  295.         "height: 100%;" +
  296.         "background-position: center;" +
  297.         "background-repeat: no-repeat;";
  299.     caption.style.cssText =
  300.         "position: absolute;" +
  301.         "width: 100%;" +
  302.         "height: 100%;" +
  303.         "text-align: center;" +
  304.         "margin-top: 38px;" +
  305.         "font-size: 36px;" +
  306.         "color: #ffffff;" +
  307.         "font-family: Arial;" +
  308.         "font-weight: bold;";
  310.     anim_elem.className = anim_elem_class;
  311.     frame.appendChild(anim_elem);
  312.     frame.className = frame_class;
  313.     frame.appendChild(caption);
  314.     container.appendChild(frame);
  316.     _canvas_container_elem.appendChild(container);
  318.     _preloader.type = "ROTATION";
  319.     _preloader.container = container;
  320.     _preloader.anim_elem = anim_elem;
  321.     _preloader.caption = caption;
  322.     _preloader.background = background_container;
  323. }
  325. /**
  326.  * Create an advanced preloader.
  327.  * @param {Object} options Initialization options.
  328.  * @param {string} options.canvas_container_id Canvas container ID.
  329.  * @param {string} options.background_container_id Background container ID.
  330.  * @param {string} options.preloader_bar_id Preloader bar ID.
  331.  * @param {string} options.fill_band_id Preloader band ID.
  332.  * @param {string} options.preloader_caption_id Preloader caption ID.
  333.  * @param {string} options.preloader_container_id Preloader container ID.
  334.  * @param {number} options.img_width Device image width.
  335.  * @param {number} options.preloader_width Preloader width.
  336.  * @cc_externs fill_band_id preloader_bar_id preloader_caption_id
  337.  * @cc_externs preloader_container_id img_width preloader_width
  338.  * @deprecated Use custom preloader or {@link module:preloader.create_preloader|preloader.create_preloader}.
  339.  */
  340. exports.create_advanced_preloader = function(options) {
  341.     var img_width = options.img_width;
  342.     var preloader_width = options.preloader_width;
  343.     var canvas_container_id = options.canvas_container_id;
  345.     var band_width = preloader_width - img_width;
  346.     var ratio = preloader_width / band_width;
  348.     var preloader_bar = document.getElementById(options.preloader_bar_id);
  349.     var fill_band = document.getElementById(options.fill_band_id);
  350.     var preloader_caption = document.getElementById(options.preloader_caption_id);
  351.     var preloader_container = document.getElementById(options.preloader_container_id);
  352.     var background_container = document.getElementById(options.background_container_id);
  354.     _canvas_container_elem = document.getElementById(canvas_container_id);
  356.     _preloader.type = "ADVANCED";
  357.     _preloader.bar = preloader_bar;
  358.     _preloader.fill = fill_band;
  359.     _preloader.ratio = ratio;
  361.     _preloader.caption = preloader_caption;
  362.     _preloader.container = preloader_container;
  363.     _preloader.background = background_container;
  364. }
  366. /**
  367.  * Update the preloader bar status.
  368.  * @param {number} percentage The new preloader bar percentage
  369.  */
  370. exports.update_preloader = function(percentage) {
  371.     _preloader.caption.innerHTML = percentage + "%";
  373.     if (_preloader.type == "SIMPLE")
  374.         _preloader.bar.style.width = percentage + "%";
  375.     else if (_preloader.type == "ADVANCED") {
  376.         _preloader.bar.style.width = percentage / _preloader.ratio + "%";
  377.         _preloader.fill.style.width = (100 - percentage) + "%";
  378.     } else if (_preloader.type == "ROTATION")
  379.         _preloader.anim_elem.style.transform = "rotate(" + percentage + "deg)";
  380.     else if (_preloader.type == "DEFAULT")
  381.         _preloader.bar.style.width = percentage + "%";
  383.     if (percentage == 100) {
  384.         _preloader.container.parentNode.removeChild(_preloader.container);
  386.         if (_preloader.background)
  387.             _preloader.background.parentNode.removeChild(_preloader.background);
  388.     }
  389. }
  391. }
  393. var preloader_factory = register("preloader", Preloader);
  395. export default preloader_factory;