1:13 p.m.
From: Atreyee Mukhopadhyay <atreyee(a)linux.vnet.ibm.com>
Second level tabs in Host functionality are sorted using a unique
number assigned to align them in desired order irrespective of
the plugin installed
Unique numbers are assigned to tabs in gingerbase and ginger plugin
Atreyee Mukhopadhyay (1):
Issue # 28 : Tab order in Host is not consistent
ui/js/src/wok.main.js | 822 +++++++++++++++++++++++++-------------------------
1 file changed, 416 insertions(+), 406 deletions(-)
--
2.1.0
1:13 p.m.
New subject: [PATCH ][Wok] Issue # 28 : Tab order in Host is not consistent
From: Atreyee Mukhopadhyay <atreyee(a)linux.vnet.ibm.com>
Second level tabs in Host functionality are sorted using a unique
number assigned to align them in desired order irrespective of
the plugin installed
---
ui/js/src/wok.main.js | 822 +++++++++++++++++++++++++-------------------------
1 file changed, 416 insertions(+), 406 deletions(-)
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 7d604b4..8a36235 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -22,454 +22,464 @@ wok.tabMode = {};
wok.config = undefined;
wok.getConfig(function(result) {
- wok.config = result;
+ wok.config = result;
}, function() {
- wok.config = {};
+ wok.config = {};
});
wok.main = function() {
- wok.isLoggingOut = false;
- wok.popable();
-
- var genTabs = function(tabs) {
- var tabsHtml = [];
- $(tabs).each(function(i, tab) {
- var functionality = tab['functionality'];
- var title = tab['title'];
- var path = tab['path'];
- var mode = tab['mode'];
- if (mode != 'none') {
- var helpPath = wok.checkHelpFile(path);
- var disableHelp = (helpPath.length == 0 ? "disableHelp" :
helpPath);
- tabsHtml.push(
- '<li class="', functionality.toLowerCase() +
'Tab', '">',
- '<a class="item ', disableHelp, '"
href="', path, '">',
- title,
- '</a>',
- '<input id="funcTab" name="funcTab"
class="sr-only" value="' + functionality.toLowerCase() + '"
type="hidden"/>',
- '<input id="helpPathId"
name="helpPath" class="sr-only" value="' + helpPath +
'" type="hidden"/>',
- '</li>'
- );
- }
- });
- return tabsHtml.join('');
- };
-
- var genFuncTabs = function(tabs){
- var functionalTabHtml = [];
- $(tabs).each(function(i, tab) {
- functionalTabHtml.push(
- '<li>',
- '<a class="item','
',tab.toLowerCase(),'Tab','" href="#">',
- tab,
- '</a>',
- '</li>'
- );
- });
- return functionalTabHtml.join('');
- };
-
- var parseTabs = function(xmlData) {
- var tabs = [];
- var functionalTabs = {};
- var functionality = $(xmlData).find('functionality').text();
- $(xmlData).find('tab').each(function() {
- var $tab = $(this);
- var titleKey = $tab.find('title').text();
- var title = i18n[titleKey] ? i18n[titleKey] : titleKey;
- var path = $tab.find('path').text();
- var roles = wok.cookie.get('roles');
- if (roles) {
- var role = JSON.parse(roles)[titleKey.toLowerCase()];
- var mode = $tab.find('[role="' + role +
'"]').attr('mode');
- wok.tabMode[titleKey.toLowerCase()] = mode;
- tabs.push({
- functionality: functionality,
- title: title,
- path: path,
- mode: mode
- });
- } else {
- document.location.href = 'login.html';
- }
+ wok.isLoggingOut = false;
+ wok.popable();
+
+ var genTabs = function(tabs) {
+ var tabsHtml = [];
+ $(tabs).each(function(i, tab) {
+ var functionality = tab['functionality'];
+ var title = tab['title'];
+ var path = tab['path'];
+ var mode = tab['mode'];
+ if (mode != 'none') {
+ var helpPath = wok.checkHelpFile(path);
+ var disableHelp = (helpPath.length == 0 ? "disableHelp" : helpPath);
+ tabsHtml.push(
+ '<li class="', functionality.toLowerCase() + 'Tab',
'">',
+ '<a class="item ', disableHelp, '" href="',
path, '">',
+ title,
+ '</a>',
+ '<input id="funcTab" name="funcTab"
class="sr-only" value="' + functionality.toLowerCase() + '"
type="hidden"/>',
+ '<input id="helpPathId" name="helpPath"
class="sr-only" value="' + helpPath + '"
type="hidden"/>',
+ '</li>'
+ );
+ }
+ });
+ return tabsHtml.join('');
+ };
+
+ var genFuncTabs = function(tabs) {
+ var functionalTabHtml = [];
+ $(tabs).each(function(i, tab) {
+ functionalTabHtml.push(
+ '<li>',
+ '<a class="item', ' ', tab.toLowerCase(), 'Tab',
'" href="#">',
+ tab,
+ '</a>',
+ '</li>'
+ );
+ });
+ return functionalTabHtml.join('');
+ };
+
+ var parseTabs = function(xmlData) {
+ var tabs = [];
+ var functionalTabs = {};
+ var functionality = $(xmlData).find('functionality').text();
+ $(xmlData).find('tab').each(function() {
+ var $tab = $(this);
+ var titleKey = $tab.find('title').text();
+ var title = i18n[titleKey] ? i18n[titleKey] : titleKey;
+ var path = $tab.find('path').text();
+ var roles = wok.cookie.get('roles');
+ var order = $tab.find('order').text();
+
+ if (roles) {
+ var role = JSON.parse(roles)[titleKey.toLowerCase()];
+ var mode = $tab.find('[role="' + role +
'"]').attr('mode');
+ wok.tabMode[titleKey.toLowerCase()] = mode;
+ tabs.push({
+ functionality: functionality,
+ title: title,
+ path: path,
+ mode: mode,
+ order: order
});
+ } else {
+ document.location.href = 'login.html';
+ }
+ });
+
+ return tabs;
+ };
- return tabs;
- };
-
- var retrieveTabs = function(url) {
- var tabs = [];
- $.ajax({
- url : url,
- async : false,
- success : function(xmlData) {
- tabs = parseTabs(xmlData);
- },
- statusCode : {
- 404: function() {
- return tabs;
- }
- }
+ var retrieveTabs = function(url) {
+ var tabs = [];
+ $.ajax({
+ url: url,
+ async: false,
+ success: function(xmlData) {
+ tabs = parseTabs(xmlData);
+ },
+ statusCode: {
+ 404: function() {
+ return tabs;
+ }
+ }
+ });
+ return tabs;
+ };
+
+ var pluginConfigUrl = 'plugins/{plugin}/ui/config/tab-ext.xml';
+ var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
+ var DEFAULT_HASH;
+ var buildTabs = function(callback) {
+ var tabs = [];
+ var functionalTabs = [];
+ wok.listPlugins(function(plugins) {
+ $(plugins).each(function(i, p) {
+ var url = wok.substitute(pluginConfigUrl, {
+ plugin: p
});
- return tabs;
- };
-
- var pluginConfigUrl = 'plugins/{plugin}/ui/config/tab-ext.xml';
- var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
- var DEFAULT_HASH;
- var buildTabs = function(callback) {
- var tabs = [];
- var functionalTabs = [];
- wok.listPlugins(function(plugins) {
- $(plugins).each(function(i, p) {
- var url = wok.substitute(pluginConfigUrl, {
- plugin: p
- });
- var i18nUrl = wok.substitute(pluginI18nUrl, {
- plugin: p
- });
- wok.getI18n(function(i18nObj){ $.extend(i18n, i18nObj)},
- function(i18nObj){ //i18n is not define by plugin
- }, i18nUrl, true);
- var pluginTabs = retrieveTabs(url);
- if(pluginTabs.length > 0){
- var func = pluginTabs[0].functionality
- if (functionalTabs.indexOf(func) == -1) {
- functionalTabs.push(pluginTabs[0].functionality)
- }
- tabs.push.apply(tabs, pluginTabs);
- }
- });
-
- //redirect to empty page when no plugin installed
- if(tabs.length===0){
- DEFAULT_HASH = 'wok-empty';
- } else {
- var defaultTab = tabs[0]
- var defaultTabPath = defaultTab && defaultTab['path']
-
- // Remove file extension from 'defaultTabPath'
- DEFAULT_HASH = defaultTabPath &&
- defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
- }
-
- $('#functionalTabPanel ul').append(genFuncTabs(functionalTabs));
- $('#tabPanel ul').append(genTabs(tabs));
- wok.getHostname();
-
- callback && callback();
- }, function(data) {
- wok.message.error(data.responseJSON.reason);
- }, true);
- };
-
- var onLanguageChanged = function(lang) {
- wok.lang.set(lang);
- location.reload();
- };
-
- /**
- * Do the following setup:
- * 1) Clear any timing events.
- * 2) If the given URL is invalid (i.e., no corresponding href value in
- * page tab list.), then clear location.href and inform the user;
- *
- * Or else:
- * Move the page tab indicator to the right position;
- * Load the page content via Ajax.
- */
- var onWokRedirect = function(url) {
- /*
- * Find the corresponding tab node and animate the arrow indicator to
- * point to the tab. If nothing found, inform user the URL is invalid
- * and clear location.hash to jump to home page.
- */
- var tab = $('#tabPanel a[href="' + url + '"]');
- if (tab.length === 0 && url != 'wok-empty.html') {
- location.hash = '#';
- return;
+ var i18nUrl = wok.substitute(pluginI18nUrl, {
+ plugin: p
+ });
+ wok.getI18n(function(i18nObj) {
+ $.extend(i18n, i18nObj)
+ },
+ function(i18nObj) { //i18n is not define by plugin
+ }, i18nUrl, true);
+ var pluginTabs = retrieveTabs(url);
+ if (pluginTabs.length > 0) {
+ var func = pluginTabs[0].functionality
+ if (functionalTabs.indexOf(func) == -1) {
+ functionalTabs.push(pluginTabs[0].functionality)
+ }
+ tabs.push.apply(tabs, pluginTabs);
}
- //Remove the tab arrow indicator for no plugin
- if (url == 'wok-empty.html') {
- $('#main').html('No plugins installed currently.You can download
the available plugins <a
href="https://github.com/kimchi-project/kimchi">Kimchi</a... and <a
href="https://github.com/kimchi-project/ginger">Ginger</a... from
Github').addClass('noPluginMessage');
+ });
+
+ //sort second level tab based on their ordering number
+ var orderedTabs = tabs.slice(0);
+ orderedTabs.sort(function(a, b) {
+ return a.order - b.order;
+ });
+
+ //redirect to empty page when no plugin installed
+ if (tabs.length === 0) {
+ DEFAULT_HASH = 'wok-empty';
+ } else {
+ var defaultTab = tabs[0]
+ var defaultTabPath = defaultTab && defaultTab['path']
+
+ // Remove file extension from 'defaultTabPath'
+ DEFAULT_HASH = defaultTabPath &&
+ defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
+ }
+
+ $('#functionalTabPanel ul').append(genFuncTabs(functionalTabs));
+ $('#tabPanel ul').append(genTabs(orderedTabs));
+ wok.getHostname();
+
+ callback && callback();
+ }, function(data) {
+ wok.message.error(data.responseJSON.reason);
+ }, true);
+ };
+
+ var onLanguageChanged = function(lang) {
+ wok.lang.set(lang);
+ location.reload();
+ };
+
+ /**
+ * Do the following setup:
+ * 1) Clear any timing events.
+ * 2) If the given URL is invalid (i.e., no corresponding href value in
+ * page tab list.), then clear location.href and inform the user;
+ *
+ * Or else:
+ * Move the page tab indicator to the right position;
+ * Load the page content via Ajax.
+ */
+ var onWokRedirect = function(url) {
+ /*
+ * Find the corresponding tab node and animate the arrow indicator to
+ * point to the tab. If nothing found, inform user the URL is invalid
+ * and clear location.hash to jump to home page.
+ */
+ var tab = $('#tabPanel a[href="' + url + '"]');
+ if (tab.length === 0 && url != 'wok-empty.html') {
+ location.hash = '#';
+ return;
+ }
+ //Remove the tab arrow indicator for no plugin
+ if (url == 'wok-empty.html') {
+ $('#main').html('No plugins installed currently.You can download the
available plugins <a
href="https://github.com/kimchi-project/kimchi">Kimchi</a... and <a
href="https://github.com/kimchi-project/ginger">Ginger</a... from
Github').addClass('noPluginMessage');
+ } else {
+ var plugin =
$(tab).parent().find("input[name='funcTab']").val();
+
+ $('#tabPanel').removeClass(function(i, css) {
+ return (css.match(/\S+Tab/g) || []).join(' ');
+ });
+ $('#tabPanel').addClass(plugin + 'Tab');
+ $('#tabPanel ul li').removeClass('active');
+ $.each($('#tabPanel li'), function(i, t) {
+ if ($(t).hasClass(plugin + 'Tab')) {
+ $(t).css('display', 'block');
} else {
- var plugin =
$(tab).parent().find("input[name='funcTab']").val();
-
- $('#tabPanel').removeClass(function(i, css) {
- return (css.match(/\S+Tab/g) || []).join(' ');
- });
- $('#tabPanel').addClass(plugin + 'Tab');
- $('#tabPanel ul li').removeClass('active');
- $.each($('#tabPanel li'), function(i, t) {
- if ($(t).hasClass(plugin + 'Tab')) {
- $(t).css('display', 'block');
- } else {
- $(t).css('display', 'none');
- }
- });
-
- $(tab).parent().addClass('active');
- $(tab).addClass(plugin + 'Selected').focus();
-
- $('#functionalTabPanel ul li').removeClass('active');
- $('#functionalTabPanel ul .' + plugin +
'Tab').parent().addClass('active').focus();
-
- // Disable Help button according to selected tab
- if ($(tab).hasClass("disableHelp")) {
- $('#btn-help').css('cursor', "not-allowed");
- $('#btn-help').off("click");
- }
- else {
- $('#btn-help').css('cursor', "pointer");
- $('#btn-help').on("click", wok.openHelp);
- }
- // Load page content.
- loadPage(url);
+ $(t).css('display', 'none');
}
- };
+ });
+
+ $(tab).parent().addClass('active');
+ $(tab).addClass(plugin + 'Selected').focus();
+
+ $('#functionalTabPanel ul li').removeClass('active');
+ $('#functionalTabPanel ul .' + plugin +
'Tab').parent().addClass('active').focus();
+
+ // Disable Help button according to selected tab
+ if ($(tab).hasClass("disableHelp")) {
+ $('#btn-help').css('cursor', "not-allowed");
+ $('#btn-help').off("click");
+ } else {
+ $('#btn-help').css('cursor', "pointer");
+ $('#btn-help').on("click", wok.openHelp);
+ }
+ // Load page content.
+ loadPage(url);
+ }
+ };
+
+ /**
+ * Use Ajax to dynamically load a page without a page refreshing. Handle
+ * arrow cursor animation, DOM node focus, and page content rendering.
+ */
+ var loadPage = function(url) {
+ // Get the page content through Ajax and render it.
+ url && $('#main').load(url, function(responseText, textStatus, jqXHR)
{
+ if (jqXHR['status'] === 401 || jqXHR['status'] === 303) {
+ var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout") != -1;
+ document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
+ return;
+ }
+ });
+ };
+
+ /*
+ * Update page content.
+ * 1) If user types in the main page URL without hash, then we apply the
+ * default hash. e.g., http://kimchi.company.com:8000;
+ * 2) If user types a URL with hash, then we publish an "redirect" event
+ * to load the page, e.g., http://kimchi.company.com:8000/#templates.
+ */
+ var updatePage = function() {
+ // Parse hash string.
+ var hashString = (location.hash && location.hash.substr(1));
- /**
- * Use Ajax to dynamically load a page without a page refreshing. Handle
- * arrow cursor animation, DOM node focus, and page content rendering.
+ /*
+ * If hash string is empty, then apply the default one;
+ * or else, publish an "redirect" event to load the page.
*/
- var loadPage = function(url) {
- // Get the page content through Ajax and render it.
- url && $('#main').load(url, function(responseText, textStatus,
jqXHR) {
- if (jqXHR['status'] === 401 || jqXHR['status'] === 303) {
- var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout")!=-1;
- document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
- return;
- }
- });
- };
+ if (!hashString) {
+ location.hash = DEFAULT_HASH;
+ } else {
+ wok.topic('redirect').publish(hashString + '.html');
+ }
+ };
+
+ /**
+ * Register listeners including:
+ * 1) wok redirect event
+ * 2) hashchange event
+ * 3) Tab list click event
+ * 4) Log-out button click event
+ * 5) About button click event
+ * 6) Help button click event
+ * 7) Peers button click event
+ */
+ var searchingPeers = false;
+ var initListeners = function() {
+ wok.topic('languageChanged').subscribe(onLanguageChanged);
+ wok.topic('redirect').subscribe(onWokRedirect);
/*
- * Update page content.
- * 1) If user types in the main page URL without hash, then we apply the
- * default hash. e.g., http://kimchi.company.com:8000;
- * 2) If user types a URL with hash, then we publish an "redirect" event
- * to load the page, e.g., http://kimchi.company.com:8000/#templates.
+ * If hash value is changed, then we know the user is intended to load
+ * another page.
*/
- var updatePage = function() {
- // Parse hash string.
- var hashString = (location.hash && location.hash.substr(1));
+ window.onhashchange = updatePage;
+ /*
+ * Register click listener of tabs. Replace the default reloading page
+ * behavior of <a> with Ajax loading.
+ */
+ $('#tabPanel ul').on('click', 'a.item', function(event) {
+ var href = $(this).attr('href');
+ // Remove file extension from 'href'
+ location.hash = href.substring(0, href.lastIndexOf('.'))
/*
- * If hash string is empty, then apply the default one;
- * or else, publish an "redirect" event to load the page.
+ * We use the HTML file name for hash, like: guests for guests.html
+ * and templates for templates.html.
+ * Retrieve hash value from the given URL and update location's
+ * hash part. It has 2 effects: one is to publish Wok "redirect"
+ * event to trigger listener, the other is to put an entry into the
+ * browser's address history to make pages be bookmark-able.
*/
- if (!hashString) {
- location.hash = DEFAULT_HASH;
- }
- else {
- wok.topic('redirect').publish(hashString + '.html');
- }
- };
-
- /**
- * Register listeners including:
- * 1) wok redirect event
- * 2) hashchange event
- * 3) Tab list click event
- * 4) Log-out button click event
- * 5) About button click event
- * 6) Help button click event
- * 7) Peers button click event
+ // Prevent <a> causing browser redirecting to other page.
+ event.preventDefault();
+ });
+
+ /*
+ * Register click listener of second level tabs. Replace the default reloading page
+ * behavior of <a> with Ajax loading.
*/
- var searchingPeers = false;
- var initListeners = function() {
- wok.topic('languageChanged').subscribe(onLanguageChanged);
- wok.topic('redirect').subscribe(onWokRedirect);
+ $('#functionalTabPanel ul li').on('click', 'a.item',
function(event) {
+ var plugin = $(this).text().toLowerCase();
+ var previousPlugin = $('#functionalTabPanel ul li.active
a').text().toLowerCase();
+
+ $('#tabPanel').switchClass(previousPlugin + 'Tab', plugin +
'Tab');
+ $('#tabPanel ul li').removeClass('active');
+ $.each($('#tabPanel li'), function(i, t) {
+ if ($(t).hasClass(plugin + 'Tab')) {
+ $(t).css('display', 'block');
+ } else {
+ $(t).css('display', 'none');
+ }
+ });
- /*
- * If hash value is changed, then we know the user is intended to load
- * another page.
- */
- window.onhashchange = updatePage;
+ $('#functionalTabPanel ul li').removeClass('active');
+ $(this).parent().addClass('active').focus();
- /*
- * Register click listener of tabs. Replace the default reloading page
- * behavior of <a> with Ajax loading.
- */
- $('#tabPanel ul').on('click', 'a.item', function(event)
{
- var href = $(this).attr('href');
- // Remove file extension from 'href'
- location.hash = href.substring(0,href.lastIndexOf('.'))
- /*
- * We use the HTML file name for hash, like: guests for guests.html
- * and templates for templates.html.
- * Retrieve hash value from the given URL and update location's
- * hash part. It has 2 effects: one is to publish Wok "redirect"
- * event to trigger listener, the other is to put an entry into the
- * browser's address history to make pages be bookmark-able.
- */
- // Prevent <a> causing browser redirecting to other page.
- event.preventDefault();
- });
+ var firstTab = $('#tabPanel ul.navbar-nav li.' + plugin +
'Tab').first();
+ $(firstTab).addClass('active');
+ $('a.item', firstTab).addClass(plugin + 'Selected');
- /*
- * Register click listener of second level tabs. Replace the default reloading
page
- * behavior of <a> with Ajax loading.
- */
- $('#functionalTabPanel ul li').on('click', 'a.item',
function(event) {
- var plugin = $(this).text().toLowerCase();
- var previousPlugin = $('#functionalTabPanel ul li.active
a').text().toLowerCase();
-
- $('#tabPanel').switchClass(previousPlugin + 'Tab', plugin +
'Tab');
- $('#tabPanel ul li').removeClass('active');
- $.each($('#tabPanel li'), function(i, t) {
- if ($(t).hasClass(plugin + 'Tab')) {
- $(t).css('display', 'block');
- } else {
- $(t).css('display', 'none');
- }
- });
-
- $('#functionalTabPanel ul li').removeClass('active');
- $(this).parent().addClass('active').focus();
-
- var firstTab = $('#tabPanel ul.navbar-nav li.' + plugin +
'Tab').first();
- $(firstTab).addClass('active');
- $('a.item', firstTab).addClass(plugin + 'Selected');
-
- var href = $('a.item', firstTab).attr('href');
- location.hash = href.substring(0,href.lastIndexOf('.'));
- event.preventDefault();
- });
+ var href = $('a.item', firstTab).attr('href');
+ location.hash = href.substring(0, href.lastIndexOf('.'));
+ event.preventDefault();
+ });
- // Perform logging out via Ajax request.
- $('#btn-logout').on('click', function() {
- wok.logout(function() {
- wok.isLoggingOut = true;
- document.location.href = "login.html";
- }, function(err) {
- wok.message.error(err.responseJSON.reason);
- });
- });
+ // Perform logging out via Ajax request.
+ $('#btn-logout').on('click', function() {
+ wok.logout(function() {
+ wok.isLoggingOut = true;
+ document.location.href = "login.html";
+ }, function(err) {
+ wok.message.error(err.responseJSON.reason);
+ });
+ });
- // Set handler for about button
- $('#btn-about').on('click', function(event) {
- event.preventDefault();
- });
+ // Set handler for about button
+ $('#btn-about').on('click', function(event) {
+ event.preventDefault();
+ });
- $("#aboutModal").append($("#about-tmpl").html());
+ $("#aboutModal").append($("#about-tmpl").html());
- // Set handler for help button
- $('#btn-help').on('click', wok.openHelp);
+ // Set handler for help button
+ $('#btn-help').on('click', wok.openHelp);
- // Set handler to peers drop down
- $('#peers').on('click', function() {
+ // Set handler to peers drop down
+ $('#peers').on('click', function() {
- // Check if any request is in progress
- if ($('.dropdown', '#peers').is('.open') ||
searchingPeers == true)
- return
+ // Check if any request is in progress
+ if ($('.dropdown', '#peers').is('.open') || searchingPeers
== true)
+ return
- $('#search-peers').show();
- $('#no-peers').addClass('hide-content');
- $('a', '#peers').remove();
+ $('#search-peers').show();
+ $('#no-peers').addClass('hide-content');
+ $('a', '#peers').remove();
- searchingPeers = true;
+ searchingPeers = true;
- kimchi.getPeers(function(data){
- $('#search-peers').hide();
- if (data.length == 0)
- $('#no-peers').removeClass('hide-content');
+ kimchi.getPeers(function(data) {
+ $('#search-peers').hide();
+ if (data.length == 0)
+ $('#no-peers').removeClass('hide-content');
- for(var i=0; i<data.length; i++){
- $('.dropdown-menu ',
'#peers').append("<li><a href='"+data[i]+"'
target='_blank'>"+data[i]+"</a></li>");
- }
- searchingPeers = false;
- });
- });
- };
-
- var initUI = function() {
- var errorMsg = "";
- $(document).bind('ajaxError', function(event, jqXHR, ajaxSettings,
errorThrown) {
- if (!ajaxSettings['wok']) {
- return;
- }
-
- if (jqXHR['status'] === 401) {
- var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout")!=-1;
- wok.user.showUser(false);
- wok.previousAjax = ajaxSettings;
- $(".empty-when-logged-off").empty();
- $(".remove-when-logged-off").remove();
- document.location.href= isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
- return;
- }
- else if((jqXHR['status'] == 0) &&
("error"==jqXHR.statusText) && !wok.isLoggingOut && errorMsg ==
"") {
- errorMsg = i18n['WOKAPI6007E'].replace("%1",
jqXHR.state());
- wok.message.error(errorMsg);
- }
- if(ajaxSettings['originalError']) {
- ajaxSettings['originalError'](jqXHR, jqXHR.statusText,
errorThrown);
- }
- });
+ for (var i = 0; i < data.length; i++) {
+ $('.dropdown-menu ', '#peers').append("<li><a
href='" + data[i] + "' target='_blank'>" + data[i] +
"</a></li>");
+ }
+ searchingPeers = false;
+ });
+ });
+ };
+
+ var initUI = function() {
+ var errorMsg = "";
+ $(document).bind('ajaxError', function(event, jqXHR, ajaxSettings,
errorThrown) {
+ if (!ajaxSettings['wok']) {
+ return;
+ }
+
+ if (jqXHR['status'] === 401) {
+ var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout") != -1;
+ wok.user.showUser(false);
+ wok.previousAjax = ajaxSettings;
+ $(".empty-when-logged-off").empty();
+ $(".remove-when-logged-off").remove();
+ document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
+ return;
+ } else if ((jqXHR['status'] == 0) && ("error" ==
jqXHR.statusText) && !wok.isLoggingOut && errorMsg == "") {
+ errorMsg = i18n['WOKAPI6007E'].replace("%1", jqXHR.state());
+ wok.message.error(errorMsg);
+ }
+ if (ajaxSettings['originalError']) {
+ ajaxSettings['originalError'](jqXHR, jqXHR.statusText, errorThrown);
+ }
+ });
- wok.user.showUser(true);
- initListeners();
- updatePage();
-
- // Overriding Bootstrap Modal windows to allow a stack of modal windows and
backdrops
- $(document).on({
- 'show.bs.modal': function () {
- var zIndex = 1040 + (10 * $('.modal:visible').length);
- $(this).css('z-index', zIndex);
- setTimeout(function() {
-
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex -
1).addClass('modal-stack');
- }, 0);
- },
- 'hidden.bs.modal': function() {
- if ($('.modal:visible').length > 0) {
- // restore the modal-open class to the body element, so that
scrolling works
- // properly after de-stacking a modal.
- setTimeout(function() {
- $(document.body).addClass('modal-open');
- }, 0);
- }
- }
- }, '.modal');
-
-
- };
-
- // Load i18n translation strings first and then render the page.
- wok.getI18n(
- function(i18nStrings){ //success
- i18n = i18nStrings;
- buildTabs(initUI);
- },
- function(data){ //error
- wok.message.error(data.responseJSON.reason);
+ wok.user.showUser(true);
+ initListeners();
+ updatePage();
+
+ // Overriding Bootstrap Modal windows to allow a stack of modal windows and
backdrops
+ $(document).on({
+ 'show.bs.modal': function() {
+ var zIndex = 1040 + (10 * $('.modal:visible').length);
+ $(this).css('z-index', zIndex);
+ setTimeout(function() {
+ $('.modal-backdrop').not('.modal-stack').css('z-index',
zIndex - 1).addClass('modal-stack');
+ }, 0);
+ },
+ 'hidden.bs.modal': function() {
+ if ($('.modal:visible').length > 0) {
+ // restore the modal-open class to the body element, so that scrolling works
+ // properly after de-stacking a modal.
+ setTimeout(function() {
+ $(document.body).addClass('modal-open');
+ }, 0);
}
- );
+ }
+ }, '.modal');
+
+
+ };
+
+ // Load i18n translation strings first and then render the page.
+ wok.getI18n(
+ function(i18nStrings) { //success
+ i18n = i18nStrings;
+ buildTabs(initUI);
+ },
+ function(data) { //error
+ wok.message.error(data.responseJSON.reason);
+ }
+ );
};
wok.checkHelpFile = function(path) {
- var lang = wok.lang.get();
- var url = path.replace("tabs", "help/" + lang);
- // Checking if help page exist.
- $.ajax({
- url: url,
- async: false,
- error: function() { url = ""; },
- success: function() { }
- });
- return url;
+ var lang = wok.lang.get();
+ var url = path.replace("tabs", "help/" + lang);
+ // Checking if help page exist.
+ $.ajax({
+ url: url,
+ async: false,
+ error: function() {
+ url = "";
+ },
+ success: function() {}
+ });
+ return url;
};
wok.getHostname = function(e) {
- host = window.location.hostname;
- $('span.host-location').text(host);
- return host;
+ host = window.location.hostname;
+ $('span.host-location').text(host);
+ return host;
}
wok.openHelp = function(e) {
- var tab = $('#tabPanel ul li.active');
- var url = $(tab).find("input[name='helpPath']").val();
- window.open(url, "Wok Help");
- e.preventDefault();
+ var tab = $('#tabPanel ul li.active');
+ var url = $(tab).find("input[name='helpPath']").val();
+ window.open(url, "Wok Help");
+ e.preventDefault();
};
--
2.1.0
12:02 p.m.
New subject: [PATCH ][Wok] Issue # 28 : Tab order in Host is not consistent
On 02/18/2016 05:13 PM, atreyee(a)linux.vnet.ibm.com wrote:
From: Atreyee Mukhopadhyay <atreyee(a)linux.vnet.ibm.com>
Second level tabs in Host functionality are sorted using a unique
number assigned to align them in desired order irrespective of
the plugin installed
---
ui/js/src/wok.main.js | 822 +++++++++++++++++++++++++-------------------------
1 file changed, 416 insertions(+), 406 deletions(-)
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 7d604b4..8a36235 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -22,454 +22,464 @@ wok.tabMode = {};
wok.config = undefined;
wok.getConfig(function(result) {
- wok.config = result;
+ wok.config = result;
}, function() {
- wok.config = {};
+ wok.config = {};
});
Please, use 4 spaces for indentation.
It is being really hard to review this patch as all the indentation
level was changed to 2 spaces.
Please, revert those changes and send a new patch to review.
wok.main = function() {
- wok.isLoggingOut = false;
- wok.popable();
-
- var genTabs = function(tabs) {
- var tabsHtml = [];
- $(tabs).each(function(i, tab) {
- var functionality = tab['functionality'];
- var title = tab['title'];
- var path = tab['path'];
- var mode = tab['mode'];
- if (mode != 'none') {
- var helpPath = wok.checkHelpFile(path);
- var disableHelp = (helpPath.length == 0 ? "disableHelp" :
helpPath);
- tabsHtml.push(
- '<li class="', functionality.toLowerCase() +
'Tab', '">',
- '<a class="item ', disableHelp, '"
href="', path, '">',
- title,
- '</a>',
- '<input id="funcTab" name="funcTab"
class="sr-only" value="' + functionality.toLowerCase() + '"
type="hidden"/>',
- '<input id="helpPathId"
name="helpPath" class="sr-only" value="' + helpPath +
'" type="hidden"/>',
- '</li>'
- );
- }
- });
- return tabsHtml.join('');
- };
-
- var genFuncTabs = function(tabs){
- var functionalTabHtml = [];
- $(tabs).each(function(i, tab) {
- functionalTabHtml.push(
- '<li>',
- '<a class="item','
',tab.toLowerCase(),'Tab','" href="#">',
- tab,
- '</a>',
- '</li>'
- );
- });
- return functionalTabHtml.join('');
- };
-
- var parseTabs = function(xmlData) {
- var tabs = [];
- var functionalTabs = {};
- var functionality = $(xmlData).find('functionality').text();
- $(xmlData).find('tab').each(function() {
- var $tab = $(this);
- var titleKey = $tab.find('title').text();
- var title = i18n[titleKey] ? i18n[titleKey] : titleKey;
- var path = $tab.find('path').text();
- var roles = wok.cookie.get('roles');
- if (roles) {
- var role = JSON.parse(roles)[titleKey.toLowerCase()];
- var mode = $tab.find('[role="' + role +
'"]').attr('mode');
- wok.tabMode[titleKey.toLowerCase()] = mode;
- tabs.push({
- functionality: functionality,
- title: title,
- path: path,
- mode: mode
- });
- } else {
- document.location.href = 'login.html';
- }
+ wok.isLoggingOut = false;
+ wok.popable();
+
+ var genTabs = function(tabs) {
+ var tabsHtml = [];
+ $(tabs).each(function(i, tab) {
+ var functionality = tab['functionality'];
+ var title = tab['title'];
+ var path = tab['path'];
+ var mode = tab['mode'];
+ if (mode != 'none') {
+ var helpPath = wok.checkHelpFile(path);
+ var disableHelp = (helpPath.length == 0 ? "disableHelp" : helpPath);
+ tabsHtml.push(
+ '<li class="', functionality.toLowerCase() + 'Tab',
'">',
+ '<a class="item ', disableHelp, '" href="',
path, '">',
+ title,
+ '</a>',
+ '<input id="funcTab" name="funcTab"
class="sr-only" value="' + functionality.toLowerCase() + '"
type="hidden"/>',
+ '<input id="helpPathId" name="helpPath"
class="sr-only" value="' + helpPath + '"
type="hidden"/>',
+ '</li>'
+ );
+ }
+ });
+ return tabsHtml.join('');
+ };
+
+ var genFuncTabs = function(tabs) {
+ var functionalTabHtml = [];
+ $(tabs).each(function(i, tab) {
+ functionalTabHtml.push(
+ '<li>',
+ '<a class="item', ' ', tab.toLowerCase(), 'Tab',
'" href="#">',
+ tab,
+ '</a>',
+ '</li>'
+ );
+ });
+ return functionalTabHtml.join('');
+ };
+
+ var parseTabs = function(xmlData) {
+ var tabs = [];
+ var functionalTabs = {};
+ var functionality = $(xmlData).find('functionality').text();
+ $(xmlData).find('tab').each(function() {
+ var $tab = $(this);
+ var titleKey = $tab.find('title').text();
+ var title = i18n[titleKey] ? i18n[titleKey] : titleKey;
+ var path = $tab.find('path').text();
+ var roles = wok.cookie.get('roles');
+ var order = $tab.find('order').text();
+
+ if (roles) {
+ var role = JSON.parse(roles)[titleKey.toLowerCase()];
+ var mode = $tab.find('[role="' + role +
'"]').attr('mode');
+ wok.tabMode[titleKey.toLowerCase()] = mode;
+ tabs.push({
+ functionality: functionality,
+ title: title,
+ path: path,
+ mode: mode,
+ order: order
});
+ } else {
+ document.location.href = 'login.html';
+ }
+ });
+
+ return tabs;
+ };
- return tabs;
- };
-
- var retrieveTabs = function(url) {
- var tabs = [];
- $.ajax({
- url : url,
- async : false,
- success : function(xmlData) {
- tabs = parseTabs(xmlData);
- },
- statusCode : {
- 404: function() {
- return tabs;
- }
- }
+ var retrieveTabs = function(url) {
+ var tabs = [];
+ $.ajax({
+ url: url,
+ async: false,
+ success: function(xmlData) {
+ tabs = parseTabs(xmlData);
+ },
+ statusCode: {
+ 404: function() {
+ return tabs;
+ }
+ }
+ });
+ return tabs;
+ };
+
+ var pluginConfigUrl = 'plugins/{plugin}/ui/config/tab-ext.xml';
+ var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
+ var DEFAULT_HASH;
+ var buildTabs = function(callback) {
+ var tabs = [];
+ var functionalTabs = [];
+ wok.listPlugins(function(plugins) {
+ $(plugins).each(function(i, p) {
+ var url = wok.substitute(pluginConfigUrl, {
+ plugin: p
});
- return tabs;
- };
-
- var pluginConfigUrl = 'plugins/{plugin}/ui/config/tab-ext.xml';
- var pluginI18nUrl = 'plugins/{plugin}/i18n.json';
- var DEFAULT_HASH;
- var buildTabs = function(callback) {
- var tabs = [];
- var functionalTabs = [];
- wok.listPlugins(function(plugins) {
- $(plugins).each(function(i, p) {
- var url = wok.substitute(pluginConfigUrl, {
- plugin: p
- });
- var i18nUrl = wok.substitute(pluginI18nUrl, {
- plugin: p
- });
- wok.getI18n(function(i18nObj){ $.extend(i18n, i18nObj)},
- function(i18nObj){ //i18n is not define by plugin
- }, i18nUrl, true);
- var pluginTabs = retrieveTabs(url);
- if(pluginTabs.length > 0){
- var func = pluginTabs[0].functionality
- if (functionalTabs.indexOf(func) == -1) {
- functionalTabs.push(pluginTabs[0].functionality)
- }
- tabs.push.apply(tabs, pluginTabs);
- }
- });
-
- //redirect to empty page when no plugin installed
- if(tabs.length===0){
- DEFAULT_HASH = 'wok-empty';
- } else {
- var defaultTab = tabs[0]
- var defaultTabPath = defaultTab && defaultTab['path']
-
- // Remove file extension from 'defaultTabPath'
- DEFAULT_HASH = defaultTabPath &&
- defaultTabPath.substring(0,
defaultTabPath.lastIndexOf('.'))
- }
-
- $('#functionalTabPanel
ul').append(genFuncTabs(functionalTabs));
- $('#tabPanel ul').append(genTabs(tabs));
- wok.getHostname();
-
- callback && callback();
- }, function(data) {
- wok.message.error(data.responseJSON.reason);
- }, true);
- };
-
- var onLanguageChanged = function(lang) {
- wok.lang.set(lang);
- location.reload();
- };
-
- /**
- * Do the following setup:
- * 1) Clear any timing events.
- * 2) If the given URL is invalid (i.e., no corresponding href value in
- * page tab list.), then clear location.href and inform the user;
- *
- * Or else:
- * Move the page tab indicator to the right position;
- * Load the page content via Ajax.
- */
- var onWokRedirect = function(url) {
- /*
- * Find the corresponding tab node and animate the arrow indicator to
- * point to the tab. If nothing found, inform user the URL is invalid
- * and clear location.hash to jump to home page.
- */
- var tab = $('#tabPanel a[href="' + url + '"]');
- if (tab.length === 0 && url != 'wok-empty.html') {
- location.hash = '#';
- return;
+ var i18nUrl = wok.substitute(pluginI18nUrl, {
+ plugin: p
+ });
+ wok.getI18n(function(i18nObj) {
+ $.extend(i18n, i18nObj)
+ },
+ function(i18nObj) { //i18n is not define by plugin
+ }, i18nUrl, true);
+ var pluginTabs = retrieveTabs(url);
+ if (pluginTabs.length > 0) {
+ var func = pluginTabs[0].functionality
+ if (functionalTabs.indexOf(func) == -1) {
+ functionalTabs.push(pluginTabs[0].functionality)
+ }
+ tabs.push.apply(tabs, pluginTabs);
}
- //Remove the tab arrow indicator for no plugin
- if (url == 'wok-empty.html') {
- $('#main').html('No plugins installed currently.You can download
the available plugins <a
href="https://github.com/kimchi-project/kimchi">Kimchi</a... and <a
href="https://github.com/kimchi-project/ginger">Ginger</a... from
Github').addClass('noPluginMessage');
+ });
+
+ //sort second level tab based on their ordering number
+ var orderedTabs = tabs.slice(0);
+ orderedTabs.sort(function(a, b) {
+ return a.order - b.order;
+ });
+
+ //redirect to empty page when no plugin installed
+ if (tabs.length === 0) {
+ DEFAULT_HASH = 'wok-empty';
+ } else {
+ var defaultTab = tabs[0]
+ var defaultTabPath = defaultTab && defaultTab['path']
+
+ // Remove file extension from 'defaultTabPath'
+ DEFAULT_HASH = defaultTabPath &&
+ defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
+ }
+
+ $('#functionalTabPanel ul').append(genFuncTabs(functionalTabs));
+ $('#tabPanel ul').append(genTabs(orderedTabs));
+ wok.getHostname();
+
+ callback && callback();
+ }, function(data) {
+ wok.message.error(data.responseJSON.reason);
+ }, true);
+ };
+
+ var onLanguageChanged = function(lang) {
+ wok.lang.set(lang);
+ location.reload();
+ };
+
+ /**
+ * Do the following setup:
+ * 1) Clear any timing events.
+ * 2) If the given URL is invalid (i.e., no corresponding href value in
+ * page tab list.), then clear location.href and inform the user;
+ *
+ * Or else:
+ * Move the page tab indicator to the right position;
+ * Load the page content via Ajax.
+ */
+ var onWokRedirect = function(url) {
+ /*
+ * Find the corresponding tab node and animate the arrow indicator to
+ * point to the tab. If nothing found, inform user the URL is invalid
+ * and clear location.hash to jump to home page.
+ */
+ var tab = $('#tabPanel a[href="' + url + '"]');
+ if (tab.length === 0 && url != 'wok-empty.html') {
+ location.hash = '#';
+ return;
+ }
+ //Remove the tab arrow indicator for no plugin
+ if (url == 'wok-empty.html') {
+ $('#main').html('No plugins installed currently.You can download the
available plugins <a
href="https://github.com/kimchi-project/kimchi">Kimchi</a... and <a
href="https://github.com/kimchi-project/ginger">Ginger</a... from
Github').addClass('noPluginMessage');
+ } else {
+ var plugin =
$(tab).parent().find("input[name='funcTab']").val();
+
+ $('#tabPanel').removeClass(function(i, css) {
+ return (css.match(/\S+Tab/g) || []).join(' ');
+ });
+ $('#tabPanel').addClass(plugin + 'Tab');
+ $('#tabPanel ul li').removeClass('active');
+ $.each($('#tabPanel li'), function(i, t) {
+ if ($(t).hasClass(plugin + 'Tab')) {
+ $(t).css('display', 'block');
} else {
- var plugin =
$(tab).parent().find("input[name='funcTab']").val();
-
- $('#tabPanel').removeClass(function(i, css) {
- return (css.match(/\S+Tab/g) || []).join(' ');
- });
- $('#tabPanel').addClass(plugin + 'Tab');
- $('#tabPanel ul li').removeClass('active');
- $.each($('#tabPanel li'), function(i, t) {
- if ($(t).hasClass(plugin + 'Tab')) {
- $(t).css('display', 'block');
- } else {
- $(t).css('display', 'none');
- }
- });
-
- $(tab).parent().addClass('active');
- $(tab).addClass(plugin + 'Selected').focus();
-
- $('#functionalTabPanel ul li').removeClass('active');
- $('#functionalTabPanel ul .' + plugin +
'Tab').parent().addClass('active').focus();
-
- // Disable Help button according to selected tab
- if ($(tab).hasClass("disableHelp")) {
- $('#btn-help').css('cursor', "not-allowed");
- $('#btn-help').off("click");
- }
- else {
- $('#btn-help').css('cursor', "pointer");
- $('#btn-help').on("click", wok.openHelp);
- }
- // Load page content.
- loadPage(url);
+ $(t).css('display', 'none');
}
- };
+ });
+
+ $(tab).parent().addClass('active');
+ $(tab).addClass(plugin + 'Selected').focus();
+
+ $('#functionalTabPanel ul li').removeClass('active');
+ $('#functionalTabPanel ul .' + plugin +
'Tab').parent().addClass('active').focus();
+
+ // Disable Help button according to selected tab
+ if ($(tab).hasClass("disableHelp")) {
+ $('#btn-help').css('cursor', "not-allowed");
+ $('#btn-help').off("click");
+ } else {
+ $('#btn-help').css('cursor', "pointer");
+ $('#btn-help').on("click", wok.openHelp);
+ }
+ // Load page content.
+ loadPage(url);
+ }
+ };
+
+ /**
+ * Use Ajax to dynamically load a page without a page refreshing. Handle
+ * arrow cursor animation, DOM node focus, and page content rendering.
+ */
+ var loadPage = function(url) {
+ // Get the page content through Ajax and render it.
+ url && $('#main').load(url, function(responseText, textStatus,
jqXHR) {
+ if (jqXHR['status'] === 401 || jqXHR['status'] === 303) {
+ var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout") != -1;
+ document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
+ return;
+ }
+ });
+ };
+
+ /*
+ * Update page content.
+ * 1) If user types in the main page URL without hash, then we apply the
+ * default hash. e.g., http://kimchi.company.com:8000;
+ * 2) If user types a URL with hash, then we publish an "redirect" event
+ * to load the page, e.g., http://kimchi.company.com:8000/#templates.
+ */
+ var updatePage = function() {
+ // Parse hash string.
+ var hashString = (location.hash && location.hash.substr(1));
- /**
- * Use Ajax to dynamically load a page without a page refreshing. Handle
- * arrow cursor animation, DOM node focus, and page content rendering.
+ /*
+ * If hash string is empty, then apply the default one;
+ * or else, publish an "redirect" event to load the page.
*/
- var loadPage = function(url) {
- // Get the page content through Ajax and render it.
- url && $('#main').load(url, function(responseText, textStatus,
jqXHR) {
- if (jqXHR['status'] === 401 || jqXHR['status'] === 303) {
- var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout")!=-1;
- document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
- return;
- }
- });
- };
+ if (!hashString) {
+ location.hash = DEFAULT_HASH;
+ } else {
+ wok.topic('redirect').publish(hashString + '.html');
+ }
+ };
+
+ /**
+ * Register listeners including:
+ * 1) wok redirect event
+ * 2) hashchange event
+ * 3) Tab list click event
+ * 4) Log-out button click event
+ * 5) About button click event
+ * 6) Help button click event
+ * 7) Peers button click event
+ */
+ var searchingPeers = false;
+ var initListeners = function() {
+ wok.topic('languageChanged').subscribe(onLanguageChanged);
+ wok.topic('redirect').subscribe(onWokRedirect);
/*
- * Update page content.
- * 1) If user types in the main page URL without hash, then we apply the
- * default hash. e.g., http://kimchi.company.com:8000;
- * 2) If user types a URL with hash, then we publish an "redirect" event
- * to load the page, e.g., http://kimchi.company.com:8000/#templates.
+ * If hash value is changed, then we know the user is intended to load
+ * another page.
*/
- var updatePage = function() {
- // Parse hash string.
- var hashString = (location.hash && location.hash.substr(1));
+ window.onhashchange = updatePage;
+ /*
+ * Register click listener of tabs. Replace the default reloading page
+ * behavior of <a> with Ajax loading.
+ */
+ $('#tabPanel ul').on('click', 'a.item', function(event) {
+ var href = $(this).attr('href');
+ // Remove file extension from 'href'
+ location.hash = href.substring(0, href.lastIndexOf('.'))
/*
- * If hash string is empty, then apply the default one;
- * or else, publish an "redirect" event to load the page.
+ * We use the HTML file name for hash, like: guests for guests.html
+ * and templates for templates.html.
+ * Retrieve hash value from the given URL and update location's
+ * hash part. It has 2 effects: one is to publish Wok "redirect"
+ * event to trigger listener, the other is to put an entry into the
+ * browser's address history to make pages be bookmark-able.
*/
- if (!hashString) {
- location.hash = DEFAULT_HASH;
- }
- else {
- wok.topic('redirect').publish(hashString + '.html');
- }
- };
-
- /**
- * Register listeners including:
- * 1) wok redirect event
- * 2) hashchange event
- * 3) Tab list click event
- * 4) Log-out button click event
- * 5) About button click event
- * 6) Help button click event
- * 7) Peers button click event
+ // Prevent <a> causing browser redirecting to other page.
+ event.preventDefault();
+ });
+
+ /*
+ * Register click listener of second level tabs. Replace the default reloading page
+ * behavior of <a> with Ajax loading.
*/
- var searchingPeers = false;
- var initListeners = function() {
- wok.topic('languageChanged').subscribe(onLanguageChanged);
- wok.topic('redirect').subscribe(onWokRedirect);
+ $('#functionalTabPanel ul li').on('click', 'a.item',
function(event) {
+ var plugin = $(this).text().toLowerCase();
+ var previousPlugin = $('#functionalTabPanel ul li.active
a').text().toLowerCase();
+
+ $('#tabPanel').switchClass(previousPlugin + 'Tab', plugin +
'Tab');
+ $('#tabPanel ul li').removeClass('active');
+ $.each($('#tabPanel li'), function(i, t) {
+ if ($(t).hasClass(plugin + 'Tab')) {
+ $(t).css('display', 'block');
+ } else {
+ $(t).css('display', 'none');
+ }
+ });
- /*
- * If hash value is changed, then we know the user is intended to load
- * another page.
- */
- window.onhashchange = updatePage;
+ $('#functionalTabPanel ul li').removeClass('active');
+ $(this).parent().addClass('active').focus();
- /*
- * Register click listener of tabs. Replace the default reloading page
- * behavior of <a> with Ajax loading.
- */
- $('#tabPanel ul').on('click', 'a.item', function(event)
{
- var href = $(this).attr('href');
- // Remove file extension from 'href'
- location.hash = href.substring(0,href.lastIndexOf('.'))
- /*
- * We use the HTML file name for hash, like: guests for guests.html
- * and templates for templates.html.
- * Retrieve hash value from the given URL and update location's
- * hash part. It has 2 effects: one is to publish Wok "redirect"
- * event to trigger listener, the other is to put an entry into the
- * browser's address history to make pages be bookmark-able.
- */
- // Prevent <a> causing browser redirecting to other page.
- event.preventDefault();
- });
+ var firstTab = $('#tabPanel ul.navbar-nav li.' + plugin +
'Tab').first();
+ $(firstTab).addClass('active');
+ $('a.item', firstTab).addClass(plugin + 'Selected');
- /*
- * Register click listener of second level tabs. Replace the default reloading
page
- * behavior of <a> with Ajax loading.
- */
- $('#functionalTabPanel ul li').on('click', 'a.item',
function(event) {
- var plugin = $(this).text().toLowerCase();
- var previousPlugin = $('#functionalTabPanel ul li.active
a').text().toLowerCase();
-
- $('#tabPanel').switchClass(previousPlugin + 'Tab', plugin +
'Tab');
- $('#tabPanel ul li').removeClass('active');
- $.each($('#tabPanel li'), function(i, t) {
- if ($(t).hasClass(plugin + 'Tab')) {
- $(t).css('display', 'block');
- } else {
- $(t).css('display', 'none');
- }
- });
-
- $('#functionalTabPanel ul li').removeClass('active');
- $(this).parent().addClass('active').focus();
-
- var firstTab = $('#tabPanel ul.navbar-nav li.' + plugin +
'Tab').first();
- $(firstTab).addClass('active');
- $('a.item', firstTab).addClass(plugin + 'Selected');
-
- var href = $('a.item', firstTab).attr('href');
- location.hash = href.substring(0,href.lastIndexOf('.'));
- event.preventDefault();
- });
+ var href = $('a.item', firstTab).attr('href');
+ location.hash = href.substring(0, href.lastIndexOf('.'));
+ event.preventDefault();
+ });
- // Perform logging out via Ajax request.
- $('#btn-logout').on('click', function() {
- wok.logout(function() {
- wok.isLoggingOut = true;
- document.location.href = "login.html";
- }, function(err) {
- wok.message.error(err.responseJSON.reason);
- });
- });
+ // Perform logging out via Ajax request.
+ $('#btn-logout').on('click', function() {
+ wok.logout(function() {
+ wok.isLoggingOut = true;
+ document.location.href = "login.html";
+ }, function(err) {
+ wok.message.error(err.responseJSON.reason);
+ });
+ });
- // Set handler for about button
- $('#btn-about').on('click', function(event) {
- event.preventDefault();
- });
+ // Set handler for about button
+ $('#btn-about').on('click', function(event) {
+ event.preventDefault();
+ });
- $("#aboutModal").append($("#about-tmpl").html());
+ $("#aboutModal").append($("#about-tmpl").html());
- // Set handler for help button
- $('#btn-help').on('click', wok.openHelp);
+ // Set handler for help button
+ $('#btn-help').on('click', wok.openHelp);
- // Set handler to peers drop down
- $('#peers').on('click', function() {
+ // Set handler to peers drop down
+ $('#peers').on('click', function() {
- // Check if any request is in progress
- if ($('.dropdown', '#peers').is('.open') ||
searchingPeers == true)
- return
+ // Check if any request is in progress
+ if ($('.dropdown', '#peers').is('.open') || searchingPeers
== true)
+ return
- $('#search-peers').show();
- $('#no-peers').addClass('hide-content');
- $('a', '#peers').remove();
+ $('#search-peers').show();
+ $('#no-peers').addClass('hide-content');
+ $('a', '#peers').remove();
- searchingPeers = true;
+ searchingPeers = true;
- kimchi.getPeers(function(data){
- $('#search-peers').hide();
- if (data.length == 0)
- $('#no-peers').removeClass('hide-content');
+ kimchi.getPeers(function(data) {
+ $('#search-peers').hide();
+ if (data.length == 0)
+ $('#no-peers').removeClass('hide-content');
- for(var i=0; i<data.length; i++){
- $('.dropdown-menu ',
'#peers').append("<li><a href='"+data[i]+"'
target='_blank'>"+data[i]+"</a></li>");
- }
- searchingPeers = false;
- });
- });
- };
-
- var initUI = function() {
- var errorMsg = "";
- $(document).bind('ajaxError', function(event, jqXHR, ajaxSettings,
errorThrown) {
- if (!ajaxSettings['wok']) {
- return;
- }
-
- if (jqXHR['status'] === 401) {
- var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout")!=-1;
- wok.user.showUser(false);
- wok.previousAjax = ajaxSettings;
- $(".empty-when-logged-off").empty();
- $(".remove-when-logged-off").remove();
- document.location.href= isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
- return;
- }
- else if((jqXHR['status'] == 0) &&
("error"==jqXHR.statusText) && !wok.isLoggingOut && errorMsg ==
"") {
- errorMsg = i18n['WOKAPI6007E'].replace("%1",
jqXHR.state());
- wok.message.error(errorMsg);
- }
- if(ajaxSettings['originalError']) {
- ajaxSettings['originalError'](jqXHR, jqXHR.statusText,
errorThrown);
- }
- });
+ for (var i = 0; i < data.length; i++) {
+ $('.dropdown-menu ', '#peers').append("<li><a
href='" + data[i] + "' target='_blank'>" + data[i] +
"</a></li>");
+ }
+ searchingPeers = false;
+ });
+ });
+ };
+
+ var initUI = function() {
+ var errorMsg = "";
+ $(document).bind('ajaxError', function(event, jqXHR, ajaxSettings,
errorThrown) {
+ if (!ajaxSettings['wok']) {
+ return;
+ }
+
+ if (jqXHR['status'] === 401) {
+ var isSessionTimeout =
jqXHR['responseText'].indexOf("sessionTimeout") != -1;
+ wok.user.showUser(false);
+ wok.previousAjax = ajaxSettings;
+ $(".empty-when-logged-off").empty();
+ $(".remove-when-logged-off").remove();
+ document.location.href = isSessionTimeout ?
'login.html?error=sessionTimeout' : 'login.html';
+ return;
+ } else if ((jqXHR['status'] == 0) && ("error" ==
jqXHR.statusText) && !wok.isLoggingOut && errorMsg == "") {
+ errorMsg = i18n['WOKAPI6007E'].replace("%1", jqXHR.state());
+ wok.message.error(errorMsg);
+ }
+ if (ajaxSettings['originalError']) {
+ ajaxSettings['originalError'](jqXHR, jqXHR.statusText, errorThrown);
+ }
+ });
- wok.user.showUser(true);
- initListeners();
- updatePage();
-
- // Overriding Bootstrap Modal windows to allow a stack of modal windows and
backdrops
- $(document).on({
- 'show.bs.modal': function () {
- var zIndex = 1040 + (10 * $('.modal:visible').length);
- $(this).css('z-index', zIndex);
- setTimeout(function() {
-
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex -
1).addClass('modal-stack');
- }, 0);
- },
- 'hidden.bs.modal': function() {
- if ($('.modal:visible').length > 0) {
- // restore the modal-open class to the body element, so that
scrolling works
- // properly after de-stacking a modal.
- setTimeout(function() {
- $(document.body).addClass('modal-open');
- }, 0);
- }
- }
- }, '.modal');
-
-
- };
-
- // Load i18n translation strings first and then render the page.
- wok.getI18n(
- function(i18nStrings){ //success
- i18n = i18nStrings;
- buildTabs(initUI);
- },
- function(data){ //error
- wok.message.error(data.responseJSON.reason);
+ wok.user.showUser(true);
+ initListeners();
+ updatePage();
+
+ // Overriding Bootstrap Modal windows to allow a stack of modal windows and
backdrops
+ $(document).on({
+ 'show.bs.modal': function() {
+ var zIndex = 1040 + (10 * $('.modal:visible').length);
+ $(this).css('z-index', zIndex);
+ setTimeout(function() {
+
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex -
1).addClass('modal-stack');
+ }, 0);
+ },
+ 'hidden.bs.modal': function() {
+ if ($('.modal:visible').length > 0) {
+ // restore the modal-open class to the body element, so that scrolling works
+ // properly after de-stacking a modal.
+ setTimeout(function() {
+ $(document.body).addClass('modal-open');
+ }, 0);
}
- );
+ }
+ }, '.modal');
+
+
+ };
+
+ // Load i18n translation strings first and then render the page.
+ wok.getI18n(
+ function(i18nStrings) { //success
+ i18n = i18nStrings;
+ buildTabs(initUI);
+ },
+ function(data) { //error
+ wok.message.error(data.responseJSON.reason);
+ }
+ );
};
wok.checkHelpFile = function(path) {
- var lang = wok.lang.get();
- var url = path.replace("tabs", "help/" + lang);
- // Checking if help page exist.
- $.ajax({
- url: url,
- async: false,
- error: function() { url = ""; },
- success: function() { }
- });
- return url;
+ var lang = wok.lang.get();
+ var url = path.replace("tabs", "help/" + lang);
+ // Checking if help page exist.
+ $.ajax({
+ url: url,
+ async: false,
+ error: function() {
+ url = "";
+ },
+ success: function() {}
+ });
+ return url;
};
wok.getHostname = function(e) {
- host = window.location.hostname;
- $('span.host-location').text(host);
- return host;
+ host = window.location.hostname;
+ $('span.host-location').text(host);
+ return host;
}
wok.openHelp = function(e) {
- var tab = $('#tabPanel ul li.active');
- var url = $(tab).find("input[name='helpPath']").val();
- window.open(url, "Wok Help");
- e.preventDefault();
+ var tab = $('#tabPanel ul li.active');
+ var url = $(tab).find("input[name='helpPath']").val();
+ window.open(url, "Wok Help");
+ e.preventDefault();
};
2980
days inactive
2984
days old
2 comments
2 participants
participants (2)
-
Aline Manera -
atreyee＠linux.vnet.ibm.com