"vl-layout.js" jetzt in "web-apps"

_attachments/js/vl-layout.js

-/**
- * @author Rolf Niepraschk (Rolf.Niepraschk@ptb.de)
- * version: 2016-11-14
- */
-
-define(['jquery'], function ($) {
-
-  function version() {
-    return "0.8b";
-  }
-
-  function showTime(){
-    function _pad0(n) {
-      return n<10 ? '0' + n : n;
-    }
-    var dt = new Date();
-    var Y = dt.getFullYear();
-    var M = _pad0(dt.getMonth()+1);
-    var D = _pad0(dt.getDate());
-    var h = _pad0(dt.getHours());
-    var m = _pad0(dt.getMinutes());
-    $('#vl-rfoot > div').html(h + ':' + m + '<br />' +
-      '<span style="font-size:65%;">' + Y + '-' + M + '-' + D + '</span>');
-    $(document).trigger('vl.page.timer');
-  }
-
-  /**
-   * Setzt das Menülisten-Element auf "highlight", welches im preset-Attribut
-   * von '#vl-menu' angebeben ist. Ist nichts oder ein ungültiger Wert angegeben,
-   * so wird des erste Element ausgewählt. Die Auswahl geschieht mit einem
-   * "künstlichen" Klick.
-   */
-  function initMenuList() {
-    var flag = true;
-    if ($('#vl-menu[preset]').length) {
-      var $menu = $('#vl-menu');
-      var idx = parseInt($menu.attr('preset')) - 1;
-      var li = $menu.find('ul > li').get(idx);
-      flag = !li;
-      if (li) setPage($(li))
-    }
-    if (flag) setPage($('#vl-menu ul > li').first());
-  }
-
-  /**
-   * Erzeugt Menüliste entsprechend der div-Elemente mit Klasse "vl-page". Das
-   * title-Attribut wird zur Beschriftung verwendet; wenn nicht vorhanden, dann
-   * die laufende Nummer.
-   * @param {boolean} _clear wenn true, dann Menüliste vorher löschen
-   *   (optional, Standard: true)
-   * @param {function} _clbk Aufruf am Ende (optional)
-   */
-  function refreshNavList(_clear, _clbk) {
-    var clbk = typeof _clear == 'function' ? _clear : _clbk;
-    var clear = typeof _clear == 'boolean' ? _clear : true;
-    var $pages = $('.vl-page');
-    var $ul, $li;
-    if (clear) {
-      $ul = $('<ul style="list-style:none;" />');
-      $('#vl-menu').empty().append($ul);
-    } else {
-      $li = $('#vl-menu ul > li');
-    }
-    $pages.each(function(idx, o){
-      var t = $(o).attr('title') ? $(o).attr('title') : '[' + (idx+1) + ']';
-      if (clear) {
-        $ul.append($('<li />').html(t));
-      } else {
-        $($li.get(idx)).html(t);
-      }
-    });
-    initMenuList();
-    if (typeof clbk == 'function') clbk();
-  }
-
-  /**
-   * Beseitigt alle Menüeinträge
-   * @param {boolean} _refresh wenn true, dann am Ende Menüliste aktualisieren
-   * (optional, Standard: true)
-   * @param {function} _clbk Aufruf bei jedem Menüeintrag (optional); nur bei
-   * Rückgabewert true wird Menüeintrag beseitigt.
-   */
-  function removePages(_refresh, _clbk) {
-    var clbk = typeof _refresh == 'function' ? _refresh : _clbk;
-    var refresh = typeof _refresh == 'boolean' ? _refresh : true;
-    var f = true;
-    $p = $('.vl-page');
-    $p.each(function(idx, o){
-      if (typeof clbk == 'function') f = clbk(idx, $(o));
-      if (f) $(o).remove();
-    });
-    if (refresh) refreshNavList(true);
-  }
-
-  /**
-   * Fügt neue Seite hinzu.
-   * @param {string} title, Name des Menüeintrages
-   * @param {string|object|[object]} o der Seite hinzuzufügender html-Code.
-   * Kann als String, als Jquery-Objekt oder als Array von Jquery-Objekten
-   * angegeben werden.
-   * @param {boolean} ahead, wenn true, dann zuvorderst einfügen.
-   * (optional, Standard: false)
-   * @return {object} Jquery-Objekt (neue Seite)
-   */
-  function addPage(title, o, ahead) {
-    //var $o = typeof o == 'string' ? [$(o)] : Array.isArray(o) ? o : [o];
-    var $p = $('<div class="vl-page">').attr('title', title)
-      .append(o).hide();
-    var $p0 = $('.vl-page:first');
-    if ($p0.length) {
-      if (ahead) $p0.before($p);
-      else $('.vl-page:last').before($p);
-    } else {
-      $('#main').append($p);
-    }
-    return $p;
-  }
-
-  /**
-   * Legt fest, welcher Menüpunkt nach einem refreshNavList-Aufruf ausgewählt ist.
-   * @param {number} n
-   */
-  function presetPage(n) {
-    $('#vl-menu').attr('preset', n);
-  }
-
-  function _getLiElement(x) {
-    var $e = x, e;
-    if (typeof x == 'number') {
-      e = $('#vl-menu').find('ul > li');
-      if (e.length > x) $e = $(e[x]); else return null;
-    }
-    return $e;
-  }
-
-  function setActivMarker(x) {
-    clearActivMarker();
-    var $a = $('#vl-menu').find('ul > li');
-    var $li = $($a[x]).append($('<div class="vl-active">'));
-  }
-
-  function clearActivMarker() {
-    var $a = $('#vl-menu').find('ul > li');
-    var $m = $a.find('div.vl-active');
-    $m.remove();
-  }
-
-  function getActivMarker(x) {
-    var $e = _getLiElement(x), $d = $e.find('div.vl-active');
-    return $d.length ? $($d[0]) : null;
-  }
-
-  var _lock = false;
-
-  function lock() {
-    _lock = true;
-  }
-  function unlock() {
-    _lock = false;
-  }
-
-  function setPage(x) {
-    var $x = x;
-    if (typeof x == 'number') {
-      $x = $($('#vl-menu').find('ul > li').get(x));
-    }
-    if ($x.hasClass('hilit') || _lock) return;
-    $x.addClass('hilit').siblings().removeClass('hilit');
-    var idx = $x.prevAll().length;
-    var $pages = $('.vl-page').fadeOut(200);
-    $($pages.get(idx)).fadeIn(500, function() {
-      $(this).trigger('vl.page.visible', [idx]);
-    });
-  }
-  
-  function getPageIndex($x) {
-    return $('.vl-page')
-      .index($x.hasClass('vl-page') ? $x : $x.parents('.vl-page'));
-  }
-  
-  function showOverlay($x, _wd, _ht) {// _wd, _ht: relativer Faktor
-    var opt = typeof _wd == 'object' ? _wd : false;
-    var $p = $x.hasClass('vl-page') ? $x : $x.parents('.vl-page');
-    var $e = $x.hasClass('vl-overlay') ? $x : 
-      $x.siblings('.vl-overlay').length ? $x.siblings('.vl-overlay') : 
-      $p.find('.vl-overlay');
-    if ($e.length) $e.fadeIn(400, function() {
-      var $this = $(this); 
-      var pwd = $p.outerWidth(true), pht = $p.outerHeight(true);
-      var wd = _wd || 0.75, ht = _ht || wd;
-      $this.outerWidth(wd * pwd);
-      $this.outerHeight(ht * pht);
-      $this.css('left', pwd * (1-wd) / 2);
-      $this.css('top',  pht * (1-ht) / 2);
-      $this.removeClass('hidden');
-    });
-  }
-  
-  function hideOverlay($x) {
-    var $e = $x.parents('.vl-overlay').length ? $x.parents('.vl-overlay') :
-      $x.children('.vl-overlay').length ?  $x.children('.vl-overlay') :
-      $x.hasClass('vl-overlay') ? $x : [];
-    if ($e.length) $e.fadeOut(400, function() {
-      $(this).addClass('hidden');
-    });
-  }
-
-  function init(clbk) {
-
-    $('#vl-menu').on('click', 'ul > li', function(e) {// auch für künftige
-      setPage($(e.target));
-    });
-
-    refreshNavList();
-
-    if (!$('#vl-rfoot div').length) {
-      $('#vl-rfoot').append('<div></div>');
-    }
-
-    showTime(); setInterval(showTime, 10000);
-
-    if (typeof clbk == 'function') clbk();
-
-  }
-
-  return {
-    init: init,
-    refreshNavList: refreshNavList,
-    removePages:removePages,
-    setActivMarker:setActivMarker,
-    clearActivMarker:clearActivMarker,
-    getActivMarker:getActivMarker,
-    lock:lock,
-    unlock:unlock,
-    addPage: addPage,
-    setPage: setPage,
-    getPageIndex: getPageIndex,
-    presetPage: presetPage,
-    showOverlay: showOverlay,
-    hideOverlay:  hideOverlay,
-    version: version
-  };
-
-});
-