https://devosvlaardingen.nl/js/dnn.controls.dnntabstrip.js?cdv=1695

1Type.registerNamespace("dnn.controls");
2dnn.extend(dnn.controls, {
3  initTabStrip: function (ctl) {
4    if (ctl && dnn.controls.controls[ctl.id] == null) {
5      var ts = new dnn.controls.DNNTabStrip(ctl);
6      ts.initialize();
7      return ts;
8    }
9  },
10});
11dnn.controls.DNNTabStrip = function (o) {
12  dnn.controls.DNNTabStrip.initializeBase(this, [o]);
13  this.contentContainer = $get(o.id + "_c");
14  this.resultCtr = null;
15  this.workImg = this.getProp("workImage", "");
16  this.tabRenderMode = new Number(this.getProp("trm", "0"));
17  this.callBack = this.getProp("callback", "");
18  this.callBackStatFunc = this.getProp("callbackSF", "");
19  if (this.callBackStatFunc.length > 0)
20    this.add_handler("callBackStatus", eval(this.callBackStatFunc));
21  this.callbackType = this.getProp("cbtype", "0");
22  this.tabClickFunc = this.getProp("tabClickF", "");
23  if (this.tabClickFunc.length > 0)
24    this.add_handler("tabClick", eval(this.tabClickFunc));
25  this.selectedIndexFunc = this.getProp("selIdxF", "");
26  if (this.selectedIndexFunc.length > 0)
27    this.add_handler("selectedIndexChanged", eval(this.selectedIndexFunc));
28  this.lblCss = this.getProp("css", "");
29  this.lblCssSel = this.getProp("csssel", this.lblCss);
30  this.lblCssHover = this.getProp("csshover", "");
31  this.lblCssDisabled = this.getProp("cssdisabled", "");
32  this.pendingLookupId = null;
33  var json = dnn.evalJSON(dnn.getVar(this.ns + "_json"));
34  if (json) {
35    this.tabData = json.tabs;

36    this.tabLabelData = json.tablabels;
37  }
38  this.tabs = [];
39  this.tabIds = [];
40  this.selectedIndex = -1;
41  this.selectedTab = null;
42  var clientId;
43  var tabId;
44  var tab;
45  for (var i = 0; i < this.tabData.length; i++) {
46    clientId = this.tabData[i].tcid;
47    tabId = this.tabData[i].tid;
48    tab = new dnn.controls.DNNTab(this, i, tabId, clientId);
49    tab.selected =
50      tab.container != null && tab.container.style.display != "none";
51    this.tabIds.push(tab.tabId);
52    this.tabs[tabId] = tab;
53    this.addHandlers(
54      tab.tab,
55      {
56        click: this.tabClick,
57        mouseover: this.tabMouseOver,
58        mouseout: this.tabMouseOut,
59      },
60      tab,
61    );
62    if (tab.selected) {
63      this.selectedIndex = i;
64      this.selectedTab = tab;
65    }
66  }
67  this.update();
68};
69dnn.controls.DNNTabStrip.prototype = {
70  tabClick: function (evt, element) {
71    var tab = this;
72    var ts = tab.strip;
73    if (tab.enabled) {
74      var arg = new dnn.controls.DNNTabStripEventArgs(tab);
75      ts.invoke_handler("tabClick", arg);
76      if (arg.get_cancel() == false) ts.showTab(tab.tabId);
77    }
78  },
79  tabMouseOver: function (evt, element) {
80    if (typeof dnn != "undefined") {
81      this.hovered = true;
82      this.assignCss();
83    }
84  },
85  tabMouseOut: function (evt, element) {
86    if (typeof dnn != "undefined") {
87      this.hovered = false;
88      this.assignCss();
89    }
90  },
91  setSelectedIndex: function (index) {
92    return this.showTab(this.tabIds[index]);
93  },
94  showTab: function (tabId) {
95    var tab;
96    if (this.needsLookup(tabId)) {
97      if (this.pendingLookupId == null) {
98        tab = this.tabs[tabId];
99        tab.showWork(true);
100        this.pendingLookupId = tabId;
101        if (this.tabRenderMode == "1") {
102          for (var i = 0; i < this.tabIds.length; i++) {
103            tab = this.tabs[this.tabIds[i]];
104            if (tab.tabId == tabId) {
105              tab.selected = true;
106              this.selectedIndex = i;
107              this.selectedTab = tab;
108              this.invoke_compatHandler("selectedIndexChanged", null, this);
109            } else tab.selected = false;
110          }
111          this.update();
112        }
113        eval(
114          this.callBack
115            .replace("[TABID]", tabId)
116            .replace("'[POST]'", tab.postMode)
117            .replace("[CBTYPE]", tab.callbackType),
118        );
119      }
120    } else {
121      for (var i = 0; i < this.tabIds.length; i++) {
122        tab = this.tabs[this.tabIds[i]];
123        if (tab.tabId == tabId) {
124          tab.showWork(false);
125          tab.selected = true;
126          tab.rendered = true;
127          tab.hovered = false;
128          tab.container.style.display = "";
129          tab.assignCss();
130          this.selectedIndex = i;
131          this.selectedTab = tab;
132          this.invoke_compatHandler("selectedIndexChanged", null, this);
133        } else {
134          if (tab.container != null) tab.container.style.display = "none";
135          tab.selected = false;
136          tab.assignCss();
137        }
138      }
139      this.update();
140    }
141    return tab;
142  },
143  raiseEvent: function (sFunc, evt, element) {
144    if (this[sFunc].length > 0) {
145      var oPointerFunc = eval(this[sFunc]);
146      return oPointerFunc(evt, element) != false;
147    }
148    return true;
149  },
150  update: function () {
151    var ary = [];
152    for (var i = 0; i < this.tabIds.length; i++)
153      ary[ary.length] = this.tabs[this.tabIds[i]].serialize();
154    dnn.setVar(this.ns + "_tabs", ary.join(","));
155  },
156  createTab: function (html, id) {
157    var span = dnn.dom.createElement("span");
158    span.innerHTML = html;
159    var ctr = span.childNodes[0];
160    if (ctr.id != this.tabs[id].clientId)
161      ctr = dnn.dom.getById(this.tabs[id].clientId, span);
162    this.tabs[id].container = ctr;
163    this.contentContainer.appendChild(ctr);
164    return this.tabs[id];
165  },
166  resetTab: function (id) {
167    var tab = this.tabs[id];
168    if (tab.container != null) {
169      dnn.dom.removeChild(tab.container);
170      tab.container = null;
171    }
172  },
173  needsLookup: function (tabId) {
174    return this.tabs[tabId].container == null;
175  },
176  callBackStatus: function (result, ctx, req) {
177    var ts = ctx;
178    ts.invoke_compatHandler("callBackStatus", result, ctx, req);
179  },
180  callBackSuccess: function (result, ctx, req) {
181    var ts = ctx;
182    ts.invoke_compatHandler("callBackStatus", result, ctx, req);
183    ctx.invoke_handler(
184      "callBackSuccess",
185      new dnn.controls.DNNCallbackEventArgs(result, ctx, req),
186    );
187    var ret = dnn.evalJSON(result);
188    var tab = ts.createTab(ret.text, ts.pendingLookupId);
189    var vars = dnn.evalJSON(ret.vars);
190    for (var key in vars) dnn.setVar(key, vars[key]);
191    if (ret.scripts != null) {
192      var scripts = dnn.evalJSON(ret.scripts);
193      var inlineScripts = [];
194      var refScripts = [];
195      for (var s in scripts) {
196        if (scripts[s].src && scripts[s].src.length > 0) {
197          if (dnn.dom.scriptStatus(scripts[s].src) == "")
198            refScripts.push(scripts[s].src);
199        }

199 else inlineScripts.push(scripts[s].__text);
200      }
201      dnn.dom.loadScripts(
202        refScripts,
203        inlineScripts,
204        dnn.createDelegate(ts, ts.callBackScriptComplete),
205      );
206    } else ts.callBackScriptComplete();
207  },
208  callBackScriptComplete: function () {
209    var tabId = this.pendingLookupId;
210    this.pendingLookupId = null;
211    this.showTab(tabId);
212  },
213  callBackFail: function (result, ctx, req) {
214    ctx.invoke_handler(
215      "callBackFail",
216      new dnn.controls.DNNCallbackEventArgs(result, ctx, req),
217    );
218  },
219  _getTabFromTabElement: function (element) {},
220  _getLabelData: function (index, prop, def) {
221    var data = this.tabLabelData[index];
222    if (data[prop] != null && data[prop].length > 0) return data[prop];
223    else return def;
224  },
225  _getTabData: function (index, prop, def) {
226    var data = this.tabData[index];
227    if (data[prop] != null && data[prop].length > 0) return data[prop];
228    else return def;
229  },
230};
231dnn.controls.DNNTabStrip.registerClass(
232  "dnn.controls.DNNTabStrip",
233  dnn.controls.control,
234);
235dnn.controls.DNNTab = function (strip, index, id, clientId) {
236  var tab = $get(clientId + "_l");
237  if (tab != null) {
238    this.tab = tab;
239    this.container = $get(clientId);
240    this.icon = $get(clientId + "_i");
241    this.work = $get(clientId + "_w");
242    this.rendered = this.container != null;
243    this.selected = false;
244    this.hovered = false;
245    this.tabIndex = index;
246    this.strip = strip;
247    this.text = this.tab.innerHTML;
248    this.clientId = clientId;
249    this.tabId = id;
250    this.css = this.strip._getLabelData(index, "css", strip.lblCss);
251    this.cssSel = this.strip._getLabelData(index, "csssel", strip.lblCssSel);
252    this.cssHover = this.strip._getLabelData(
253      index,
254      "csshover",
255      strip.lblCssHover,
256    );
257    this.cssDisabled = this.strip._getLabelData(
258      index,
259      "cssdisabled",
260      strip.lblCssDisabled,
261    );
262    this.postMode = this.strip._getTabData(index, "postmode", null);
263    this.enabled = this.strip._getTabData(index, "enabled", "1") == "1";
264    this.callbackType = this.strip._getTabData(
265      index,
266      "cbtype",
267      strip.callbackType,
268    );
269    if (this.postMode) this.postMode = "'" + this.postMode + "'";
270  }
271};
272dnn.controls.DNNTab.prototype = {
273  serialize: function () {
274    return (
275      this.tabId +
276      "=" +
277      ((this.rendered ? 1 : 0) +
278        (this.selected ? 2 : 0) +
279        (this.enabled ? 4 : 0))
280    );
281  },
282  showWork: function (show) {
283    if (this.work != null) {
284      if (show) {
285        this.work.style.display = "";
286        if (this.icon != null) this.icon.style.display = "none";
287      } else {
288        this.work.style.display = "none";
289        if (this.icon != null) this.icon.style.display = "";
290      }
291    }
292  },
293  enable: function () {
294    this.enabled = true;
295  },
296  disable: function () {
297    this.enabled = false;
298  },
299  assignCss: function () {
300    var sCss = "";
301    if (this.enabled == false && this.cssDisabled.length > 0)
302      sCss = this.cssDisabled;
303    else {
304      if (this.hovered && this.cssHover.length > 0) sCss = this.cssHover;
305      else sCss = this.selected ? this.cssSel : this.css;
306    }
307    this.tab.className = sCss;
308  },
309};
310dnn.controls.DNNTab.registerClass("dnn.controls.DNNTab");