logviewer/static/js/kismet.ui.walkthrough.js

   1 (
   2   typeof define === "function" ? function (m) { define("kismet-ui-walkthrough-js", m); } :
   3   typeof exports === "object" ? function (m) { module.exports = m(); } :
   4   function(m){ this.kismet_ui_walkthrough = m(); }
   5 )(function () {
   6
   7 /* A tabbed set of introductory/walkthrough windows, for instance to implement
   8  * an onboarding process.
   9  *
  10  * Each step should contain:
  11  * title            Main title of step
  12  * content          String content or function(element)
  13  */
  14
  15 "use strict";
  16
  17 var exports = {};
  18
  19 // Flag we're still loading
  20 exports.load_complete = 0;
  21
  22 // Generate a walkthrough
  23 exports.MakeWalkthrough = function() {
  24     wt = {};
  25     wt['steps'] = [];
  26 }
  27
  28 // Concatenate a step onto the list of actions
  29 exports.AddWalkthroughStep = function(walkthrough, step) {
  30     walkthrough['steps'].push(step);
  31     return walkthrough;
  32 }
  33
  34 // Disable the 'next' button in the walkthrough
  35 exports.DisableNext = function(walkthrough) {
  36     // ...
  37 }
  38
  39 // Enable the 'next' button in the walkthrough
  40 exports.EnableNext = function(walkthrough) {
  41     // ...
  42 }
  43
  44 exports.ShowWalkthrough = function(walkthrough) {
  45     var w = $(window).width() * 0.85;
  46     var h = $(window).height() * 0.75;
  47     var offy = 20;
  48
  49     if ($(window).width() < 450 || $(window).height() < 450) {
  50         w = $(window).width() - 5;
  51         h = $(window).height() - 5;
  52         offy = 0;
  53     }
  54
  55     walkthrough['content'] =
  56         $('<div>', {
  57             class: 'wt-content',
  58         });
  59
  60     walkthrough['prevbutton'] =
  61         $('<button>', {
  62             class: 'wt-button-previous',
  63         })
  64         .text("Previous")
  65         .button()
  66         .button("disable")
  67         .on('click', function() {
  68             exports.PreviousWalkthrough(walkthrough);
  69         });
  70
  71     walkthrough['nextbutton'] =
  72         $('<button>', {
  73             class: 'wt-button-next',
  74         })
  75         .text("Next")
  76         .button()
  77         .button("disable")
  78         .on('click', function() {
  79             exports.NextWalkthrough(walkthrough);
  80         });
  81
  82     var content =
  83         $('<div>', {
  84             class: 'wt-holder'
  85         })
  86         .append(walkthrough['content'])
  87         .append(
  88             $('<div>', {
  89                 class: 'wt-buttons',
  90             })
  91             .append(walkthrough['prevbutton'])
  92             .append(walkthrough['nextbutton'])
  93         );
  94
  95
  96     walkthrough['panel'] = $.jsPanel({
  97         headerControls: {
  98             iconfont: 'jsglyph',
  99         },
 100         content: content,
 101     }).resize({
 102         width: w,
 103         height: h
 104     }).reposition({
 105         my: 'center-top',
 106         at: 'center-top',
 107         of: 'window',
 108         offsetY: offy,
 109     });
 110
 111
 112 }
 113
 114 exports.CancelWalkthrough = function(walkthrough) {
 115
 116 }
 117
 118 exports.NextWalkthrough = function(walkthrough) {
 119
 120 }
 121
 122 epxorts.PreviousWalkthrough = function(walkthrough) {
 123
 124 }
 125
 126 return exports;
 127
 128 });