[Kimchi-devel] [PATCH 3/9] Adding new-ui base templates and widgets - JS
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Oct 27 21:22:57 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/js/src/wok.confirm.js | 91 ++++++++++
ui/js/src/wok.datagrid.js | 123 +++++++++++++
ui/js/src/wok.grid.js | 416 +++++++++++---------------------------------
ui/js/src/wok.line-chart.js | 74 +++++---
ui/js/src/wok.list.js | 302 ++++++++++++++++++++++++++++++++
ui/js/src/wok.login.js | 9 +-
ui/js/src/wok.main.js | 61 +++++--
ui/js/src/wok.message.js | 95 +++-------
ui/js/src/wok.window.js | 31 ++--
ui/js/widgets/grid.js | 123 -------------
10 files changed, 749 insertions(+), 576 deletions(-)
create mode 100644 ui/js/src/wok.confirm.js
create mode 100644 ui/js/src/wok.datagrid.js
create mode 100644 ui/js/src/wok.list.js
delete mode 100644 ui/js/widgets/grid.js
diff --git a/ui/js/src/wok.confirm.js b/ui/js/src/wok.confirm.js
new file mode 100644
index 0000000..63f01c4
--- /dev/null
+++ b/ui/js/src/wok.confirm.js
@@ -0,0 +1,91 @@
+/*
+ * Project Wok
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A public function of confirm box.
+ *
+ * @param msg
+ * type:[object]
+ * @param msg.title
+ * The title of the confirm box.
+ * @param msg.content
+ * The main text of the confirm box.
+ * @param msg.confirm
+ * The text of the confirm button.
+ * @param msg.cancel
+ * the text of the cancel button.
+ * @param confirmCallback
+ * the callback function of click the confirm button.
+ * @param cancelCallback
+ * The callback function of click the cancel and X button.
+ */
+wok.confirm = function(settings, confirmCallback, cancelCallback) {
+ "use strict";
+ var modalStr = '<div id="wok-confirm-modal" class="modal fade host-modal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true"></div>';
+ if ($('#wok-confirm-modal ').size() < 1 && $('#modalWindow').size() < 1 ) {
+ $(document.body).append(modalStr);
+ } else if ($('#wok-confirm-modal ').size() < 1) {
+ $('#modalWindow').after(modalStr);
+ }
+
+ var confirmboxHeader = [
+ '<div class="modal-header', (settings.title === '' || typeof settings.title === 'undefined' ? ' icon' : '' ) ,'">',
+ '<h4 class="modal-title"><i class="fa fa-exclamation-triangle"></i>'+(settings.title || '')+'</h4>',
+ '</div>'
+ ].join('');
+
+ var confirmboxHtml = [
+ '<div class="modal-dialog modal-sm">',
+ '<div class="modal-content">',
+ confirmboxHeader,
+ '<div class="modal-body">',
+ settings.content,
+ '</div>',
+ '<div class="modal-footer">',
+ '<button id="button-confirm" class="btn btn-default">' + (settings.confirm || i18n['KCHAPI6004M']) + '</button>',
+ '<button id="button-cancel" class="btn btn-default">' + (settings.cancel || i18n['KCHAPI6003M']) + '</button>',
+ '</div>',
+ '</div>',
+ '</div>'
+ ].join('');
+ var confirmboxNode = $(confirmboxHtml);
+ $('#wok-confirm-modal').append(confirmboxNode);
+ $('#wok-confirm-modal').modal('show');
+ $('#wok-confirm-modal').on("click", "#button-confirm", function(e) {
+ if (confirmCallback) {
+ confirmCallback();
+ }
+ $('#wok-confirm-modal').modal('hide');
+ });
+ $('#wok-confirm-modal').on("click", "#button-cancel", function(e) {
+ if (cancelCallback) {
+ cancelCallback();
+ }
+ $('#wok-confirm-modal').modal('hide');
+ });
+
+ $('#wok-confirm-modal').on('hidden.bs.modal', function () {
+ close();
+ });
+
+ var close = function(){
+ "use strict";
+ $('#wok-confirm-modal').removeData('bs.modal');
+ $('#wok-confirm-modal').remove();
+ };
+
+};
\ No newline at end of file
diff --git a/ui/js/src/wok.datagrid.js b/ui/js/src/wok.datagrid.js
new file mode 100644
index 0000000..9f2f17b
--- /dev/null
+++ b/ui/js/src/wok.datagrid.js
@@ -0,0 +1,123 @@
+/*
+ * Project Wok
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Code derived from Project Kimchi
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$(function(){
+$.widget("wok.dataGrid", {
+ options: {
+ enableSorting: true
+ },
+ _create: function() {
+ var that = this;
+ this.element.addClass('wok-datagrid');
+ var head = $(this.element.children().get(0));
+ var body = $(this.element.children().get(1));
+ head.addClass('wok-datagrid-header');
+ if(this.options.enableSorting){
+ head.children().each(function(){
+ var addSorting = "<span>"+$(this).html()+"</span>";
+ addSorting += '<span><div class="icon-angle-up sort-up"></div><div class="icon-angle-down sort-down"></div></span>';
+ $(this).empty().append(addSorting);
+ });
+ }
+ $('.icon-angle-up', head).click(function(){
+ that.sort(head.children().index($(this).parent().parent()), true);
+ });
+ $('.icon-angle-down', head).click(function(){
+ that.sort(head.children().index($(this).parent().parent()), false);
+ });
+ body.addClass('wok-datagrid-body');
+ body.children().addClass('wok-datagrid-row');
+ this._setRowBackgroud();
+ },
+ _setRowBackgroud: function(){
+ var i=0, classes=['odd', 'even'];
+ $(this.element.children().get(1)).children().each(function(){
+ $(this).removeClass('odd');
+ $(this).removeClass('even');
+ $(this).addClass(classes[i]);
+ i = i==0?1:0;
+ });
+ },
+ sort: function(column, assending) {
+ var head = $(this.element.children().get(0));
+ $('.icon-up-dir', head).removeClass('icon-up-dir').addClass('icon-angle-up');
+ $('.icon-down-dir', head).removeClass('icon-down-dir').addClass('icon-angle-down');
+ var columnCell = $(head.children().get(column));
+ if(assending){
+ $('.icon-angle-up', columnCell).removeClass('icon-angle-up').addClass('icon-up-dir');
+ }else{
+ $('.icon-angle-down', columnCell).removeClass('icon-angle-down').addClass('icon-down-dir');
+ }
+ var container = $(this.element.children().get(1));
+ var nodes = [];
+ container.children().each(function(){
+ nodes.push($(this));
+ });
+ nodes.sort(function(a, b){
+ aVal = $(a.children().get(column)).attr('val');
+ bVal = $(b.children().get(column)).attr('val');
+ return aVal.localeCompare(bVal);
+ });
+ if(!assending) nodes.reverse();
+ container.empty();
+ for(var i=0;i<nodes.length;i++){
+ container.append(nodes[i]);
+ }
+ this._setRowBackgroud();
+ },
+ filter: function(keyword) {
+ keyword = keyword.toLowerCase();
+ var container = $(this.element.children().get(1));
+ container.children().each(function(){
+ var hide = true;
+ $(this).children().each(function(){
+ if($(this).attr('val')&&$(this).attr('val').toLowerCase().indexOf(keyword)!=-1){
+ hide = false;
+ return false;
+ }
+ });
+ $(this).css('display', hide?'none':'');
+ });
+ this._setRowBackgroud();
+ },
+ addRow: function(rowNode){
+ $(rowNode).addClass('wok-datagrid-row');
+ this._setRowBackgroud();
+ },
+ deleteRow: function(rowNode){
+ $(rowNode).remove();
+ this._setRowBackgroud();
+ },
+ _destroy: function() {
+ this.element.removeClass('wok-datagrid');
+ var head = $(this.element.children().get(0));
+ var body = $(this.element.children().get(1));
+ head.removeClass('wok-datagrid-header');
+ if(this.options.enableSorting){
+ head.children().each(function(){
+ var oriContent = $($(this).children().get(0)).html()
+ $(this).empty().append(oriContent);
+ });
+ }
+ body.removeClass('wok-datagrid-body');
+ body.children().removeClass('wok-datagrid-row odd even');
+ }
+});
+});
diff --git a/ui/js/src/wok.grid.js b/ui/js/src/wok.grid.js
index 12f191c..0606bc6 100644
--- a/ui/js/src/wok.grid.js
+++ b/ui/js/src/wok.grid.js
@@ -18,106 +18,73 @@
* limitations under the License.
*/
wok.widget.Grid = function(opts) {
+ "use strict";
this.opts = $.extend({}, this.opts, opts);
this.createDOM();
this.reload();
};
wok.widget.Grid.prototype = (function() {
+ "use strict";
var htmlStr = [
- '<div id="{id}" class="grid">',
- '<div class="grid-content">',
- '<div class="grid-header">',
- '<div class="grid-frozen-header-view">',
- '<table class="grid-frozen-header-container">',
- '</table>',
- '</div>',
- '<div class="grid-header-view">',
- '<div class="grid-header-wrapper">',
- '<table class="grid-header-container">',
- '</table>',
- '</div>',
- '</div>',
- '</div>',
- '<div class="grid-body">',
- '<div class="grid-frozen-body-view">',
- '<div class="grid-frozen-body-wrapper">',
- '<table class="grid-frozen-body-container">',
- '</table>',
- '</div>',
- '</div>',
- '<div class="grid-body-view">',
- '<div class="grid-body-wrapper">',
- '<table class="grid-body-container">',
- '</table>',
- '</div>',
- '</div>',
+ '<div id="{id}" class="grid wok-grid">',
+ '<div class="wok-grid-message hidden">',
+ '<div class="alert alert-danger fade in" role="alert">',
+ '<p><strong>{message}</strong> ',
+ '<span class="detailed-text"></span></p>',
+ '<p><button class="btn btn-primary btn-xs retry-button">',
+ '{buttonLabel}',
+ '</button></p>',
'</div>',
- '<div class="grid-resizer-leftmost hidden"></div>',
- '<div class="grid-resizer hidden"></div>',
'</div>',
- '<div class="grid-footer"></div>',
- '<div class="grid-mask hidden">',
- '<div class="grid-loading">',
- '<div class="grid-loading-icon"></div>',
- '<div class="grid-loading-text">',
- '{loading}',
- '</div>',
- '</div>',
+ '<div class="grid-content wok-grid-content">',
+ '<table class="wok-table table">',
+ '<thead class="wok-grid-header-container"></thead>',
+ '<tbody class="wok-grid-body-container">',
+ '</tbody>',
+ '</table>',
'</div>',
- '<div class="grid-message hidden">',
- '<div class="grid-message-text">',
- '{message}',
- '<button class="retry-button btn-small">',
- '{buttonLabel}',
- '</button>',
- '</div>',
- '<div class="detailed-title">',
- '{detailedLabel}',
+ '<div class="wok-grid-mask hidden">',
+ '<div class="wok-grid-loader-container">',
+ '<div class="wok-grid-loading">',
+ '<div class="wok-grid-loading-icon"></div>',
+ '<div class="wok-grid-loading-text">',
+ '{loading}',
+ '</div>',
+ '</div>',
'</div>',
- '<div class="detailed-text"></div>',
'</div>',
'</div>'
].join('');
- var CONTAINER_NORMAL = 0, CONTAINER_FROZEN = 1;
-
var setupHeaders = function(header, body, fields) {
var colGroup = $('<colgroup></colgroup>').appendTo(header);
- var headerHeader = $('<thead></thead>');
- var headerRow = $('<tr></tr>').appendTo(headerHeader);
+ var headerRow = $('<tr></tr>').appendTo(header);
$.each(fields || [], function(i, field) {
$('<col class="' +
field['class'] +
'"/>')
.appendTo(colGroup);
- $('<th><div class="cell-text-wrapper">' +
+ $('<th><div class="wok-text-header">' +
field['label'] +
'</div></th>').appendTo(headerRow);
});
- headerHeader.appendTo(header);
var totalWidth = 0;
- $('col', colGroup).each(function(index, col) {
- var width = $(col).width();
- totalWidth += width;
- $(col).css('width', width + 'px');
- });
- $(body).append(colGroup.clone());
return totalWidth;
};
var getValue = function(name, obj) {
- var result=undefined;
+ var result;
if(!Array.isArray(name)) {
name=name.parseKey();
}
- if(name.length!=0) {
+ if(name.length!==0) {
var tmpName=name.shift();
- if(obj[tmpName]!=undefined) {
+ if(obj[tmpName]!==undefined) {
result=obj[tmpName];
}
- if(name.length!=0) {
+ if(name.length!==0) {
result=getValue(name,obj[tmpName]);
}
}
@@ -126,55 +93,18 @@ wok.widget.Grid.prototype = (function() {
var fillBody = function(container, fields) {
var data = this.data;
- var tbody = ($('tbody', container).length && $('tbody', container))
- || $('<tbody></tbody>').appendTo(container);
- tbody.empty();
$.each(data, function(i, row) {
- var rowNode = $('<tr></tr>').appendTo(tbody);
+ var rowNode = $('<tr></tr>').appendTo(container);
$.each(fields, function(fi, field) {
var value = getValue(field['name'], row);
- $('<td><div class="cell-text-wrapper"' +
- (field['makeTitle'] === true
- ? ' title="' + value + '"'
- : ''
- ) + '>' + value.toString() + '</div></td>'
+ $('<td><div class="wok-cell-text"' + (field['makeTitle'] === true ? ' title="' + value + '"' : '' ) + '>' + value.toString() + '</div></td>'
).appendTo(rowNode);
});
});
};
- var fixTableLayout = function(style) {
- $.each([
- this.frozenHeaderContainer,
- this.headerContainer,
- this.frozenBodyContainer,
- this.bodyContainer
- ], function(i, tableNode) {
- $(tableNode).css('table-layout', style || 'fixed');
- });
- };
-
- var initResizing = function(event) {
- var resizer = event.data.resizer;
- var pageX = event.pageX;
- var tailPos = $(this).width() + $(this).offset()['left'];
- var atResizer = Math.abs(pageX - tailPos) <= 2;
- var isResizing = !$(resizer).hasClass('hidden');
- $('body')[(atResizer || isResizing)
- ? 'addClass'
- : 'removeClass'
- ]('resizing');
- };
-
- var clearResizing = function(event) {
- $(event.data.resizer).hasClass('hidden') &&
- $('body').removeClass('resizing');
- };
-
var stylingRow = function(row, className, add) {
var index = $(row).index() + 1;
- $('tr', this.frozenBodyContainer)
- .removeClass(className);
$('tr', this.bodyContainer)
.removeClass(className);
@@ -182,19 +112,18 @@ wok.widget.Grid.prototype = (function() {
return;
}
- $('tr:nth-child(' + index + ')', this.frozenBodyContainer)
- .addClass(className);
$('tr:nth-child(' + index + ')', this.bodyContainer)
.addClass(className);
};
var setBodyListeners = function() {
- if(this['opts']['rowSelection'] != 'disabled') {
+ if(this['opts']['rowSelection'] !== 'disabled') {
$('tr', this.gridBody).on('mouseover', {
grid: this
}, function(event) {
- if (! $(this).hasClass('no-hover'))
+ if (! $(this).hasClass('no-hover')) {
stylingRow.call(event.data.grid, this, 'hover');
+ }
});
$('tr', this.gridBody).on('mouseout', {
@@ -213,128 +142,16 @@ wok.widget.Grid.prototype = (function() {
});
}
- $('.grid-body-view', this.domNode).on('scroll', {
- grid: this
- }, function(event) {
- var grid = event.data.grid;
- $('.grid-header .grid-header-view', grid.domNode)
- .prop('scrollLeft', this.scrollLeft);
- $('.grid-body .grid-frozen-body-view', grid.domNode)
- .prop('scrollTop', this.scrollTop);
- });
};
var setData = function(data) {
this.data = data;
- fillBody.call(this, this.frozenBodyContainer, this['opts']['frozenFields']);
fillBody.call(this, this.bodyContainer, this['opts']['fields']);
setBodyListeners.call(this);
};
var getSelected = function() {
- return this.selectedIndex >= 0
- ? this.data[this.selectedIndex]
- : null;
- };
-
- var startResizing = function(container, event) {
- var grid = event.data.grid;
- wok.widget.Grid.beingResized = grid;
- if(!($('body').hasClass('resizing')
- && $(grid.resizer).hasClass('hidden'))) {
- return;
- }
-
- grid.columnBeingResized = container;
- var pageX = event.pageX;
- var gridOffsetX = grid.domNode.offset()['left'];
- var leftmostOffsetX = $(container).offset()['left'] - gridOffsetX;
- var left = pageX - gridOffsetX;
- var contentHeight = $('.grid-content', grid.domNode).height();
- $(grid.resizerLeftmost).css({
- left: leftmostOffsetX + 'px',
- height: contentHeight + 'px'
- });
- $(grid.resizer).css({
- left: left + 'px',
- height: contentHeight + 'px'
- });
- $(grid.resizerLeftmost).removeClass('hidden');
- $(grid.resizer).removeClass('hidden');
- event.preventDefault();
- };
-
- var endResizing = function(event) {
- var grid = wok.widget.Grid.beingResized;
- if(!$('body').hasClass('resizing')) {
- return;
- }
- $(grid.resizerLeftmost).addClass('hidden');
- $(grid.resizer).addClass('hidden');
- $('body').removeClass('resizing');
- var leftmostOffset = $(grid.columnBeingResized).offset()['left'];
- var left = event.pageX;
- if(leftmostOffset > left) {
- return;
- }
- resizeColumnWidth.call(
- grid,
- $(grid.columnBeingResized).index(),
- left - leftmostOffset
- );
- fixTableLayout.call(grid);
- grid.columnBeingResized = null;
- wok.widget.Grid.beingResized = null;
- };
-
- var resizeColumnWidth = function(index, width) {
- var width = Math.ceil(width);
- var widthArray = [];
- var totalWidth = 0;
- var header = this.headerContainer;
- var body = this.bodyContainer;
- if(this.containerBeingResized === CONTAINER_FROZEN) {
- header = this.frozenHeaderContainer;
- body = this.frozenBodyContainer;
- }
- $('col', header).each(function(i, colNode) {
- var w = index === i ? width : $(colNode).width();
- widthArray.push(w);
- totalWidth += w;
- });
- $.each([header, body], function(i, container) {
- container.css({
- 'table-layout': 'fixed',
- width: totalWidth + 'px'
- });
- $('col:nth-child(' + (index + 1) + ')', container).css({
- width: width + 'px'
- });
- });
-
- if(this.containerBeingResized === CONTAINER_FROZEN) {
- var headerView = $('.grid-header-view', this.domNode);
- var bodyView = $('.grid-body-view', this.domNode);
- $.each([headerView, bodyView], function(i, view) {
- view.css({
- left: totalWidth + 'px'
- });
- });
- }
- };
-
- var positionResizer = function(event) {
- var grid = event.data.grid;
- if($(grid.resizer).hasClass('hidden')) {
- return;
- }
-
- var pageX = event.pageX;
- var gridOffsetX = $(grid.domNode).offset()['left'];
- var leftMost = $(grid.resizerLeftmost).position()['left'];
- var offsetX = pageX - gridOffsetX;
- offsetX = offsetX >= leftMost ? offsetX : leftMost;
- $(grid.resizer).css('left', offsetX + 'px');
+ return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
};
var showMessage = function(msg) {
@@ -368,11 +185,6 @@ wok.widget.Grid.prototype = (function() {
}
};
- var destroy = function() {
- $('body').off('mousemove.grid#' + this['opts']['id'], positionResizer);
- $('body').off('mouseup.grid#' + this['opts']['id'], endResizing);
- };
-
var createDOM = function() {
var containerID = this['opts']['container'];
var container = $('#' + containerID);
@@ -387,118 +199,91 @@ wok.widget.Grid.prototype = (function() {
})).appendTo(container);
this.domNode = domNode;
+ var theTable = $('.wok-table', domNode);
+ var theContainer = $('.wok-grid-content', domNode);
+ var headerContainer = $('.wok-grid-header-container', domNode);
+ var bodyContainer = $('.wok-grid-body-container', domNode);
+ setupHeaders(headerContainer, bodyContainer, this['opts']['fields']);
+ this.theTable = theTable;
+ this.theContainer = theContainer;
+ this.headerContainer = headerContainer;
+ this.bodyContainer = bodyContainer;
+
var height = domNode.height();
var width = domNode.width();
var title = this['opts']['title'];
var titleNode = null;
if(title) {
- titleNode = $('<div class="grid-caption">' + title + '</div>')
- .prependTo(domNode);
+ titleNode = $('<caption class="sr-only">' + title + '</caption>').prependTo(theTable);
}
var toolbarButtons = this['opts']['toolbarButtons'];
var toolbarNode = null;
+ var btnHTML, dropHTML = [];
if(toolbarButtons) {
- toolbarNode = $('<div class="grid-toolbar"></div>');
- if(titleNode) {
- titleNode.after(toolbarNode);
- }
- else {
- toolbarNode.prependTo(domNode);
+ toolbarNode = $('<div class="btn-group"></div>');
+ toolbarNode.prependTo(theContainer);
+ if(toolbarButtons.length > 1) {
+ dropHTML = ['<div class="dropdown menu-flat">',
+ '<button id="wok-dropdown-button-', containerID, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',
+ '<span class="edit-alt"></span>Actions<span class="caret"></span>',
+ '</button>',
+ '<ul class="dropdown-menu"></ul>',
+ '</div>'
+ ].join('');
+ $(dropHTML).appendTo(toolbarNode);
+ $.each(toolbarButtons, function(i, button) {
+ btnHTML = [
+ '<li role="presentation"', button.critical === true ? ' class="critical"' : '', '><a data-toggle="modal"',
+ button.id ? (' id="' + button.id + '"') : '',
+ ' class="', button.disabled === true ? ' disabled' : '', '">',
+ button.class ? ('<i class="' + button.class) + '"></i>' : '',
+ button.label,
+ '</a></li>'
+ ].join('');
+ var btnNode = $(btnHTML).appendTo(toolbarNode[0].children[0].children[1]);
+ button.onClick && btnNode.on('click', button.onClick);
+ });
+ }else {
+ $.each(toolbarButtons, function(i, button) {
+ btnHTML = [
+ '<button data-dismiss="modal" ',
+ button['id'] ? (' id="' + button['id'] + '"') : '',
+ ' class="btn btn-primary',
+ button['class'] ? (' ' + button['class']) : '',
+ '"',
+ button['disabled'] === true ? ' disabled' : '',
+ '>',
+ button['label'],
+ '</button>'
+ ].join('');
+ var btnNode = $(btnHTML).appendTo(toolbarNode);
+ button['onClick'] &&
+ btnNode.on('click', button['onClick']);
+ });
}
- $.each(toolbarButtons, function(i, button) {
- var btnHTML = [
- '<button',
- button['id'] ? (' id="' + button['id'] + '"') : '',
- ' class="grid-toolbar-button',
- button['class'] ? (' ' + button['class']) : '',
- '"',
- button['disabled'] === true ? ' disabled' : '',
- '>',
- button['label'],
- '</button>'
- ].join('');
- var btnNode = $(btnHTML).appendTo(toolbarNode);
- button['onClick'] &&
- btnNode.on('click', button['onClick']);
- });
}
- var frozenHeaderContainer = $('.grid-frozen-header-container', domNode);
- var frozenBodyContainer = $('.grid-frozen-body-container', domNode);
- var frozenWidth = setupHeaders(
- frozenHeaderContainer,
- frozenBodyContainer,
- this['opts']['frozenFields']
- );
- this.frozenHeaderContainer = frozenHeaderContainer;
- this.frozenBodyContainer = frozenBodyContainer;
-
- var headerContainer = $('.grid-header-container', domNode);
- var bodyContainer = $('.grid-body-container', domNode);
- setupHeaders(headerContainer, bodyContainer, this['opts']['fields']);
- this.headerContainer = headerContainer;
- this.bodyContainer = bodyContainer;
-
- fixTableLayout.call(this, 'auto');
+ // var domHeight = domNode && $(domNode).height() || 0;
+ // var toolbarHeight = toolbarNode && $(toolbarNode).height() || 0;
+ // var maskHeight = domHeight - toolbarHeight;
- var gridContentNode = $('.grid-content', domNode);
- var captionHeight = titleNode && $(titleNode).height() || 0;
- var toolbarHeight = toolbarNode && $(toolbarNode).height() || 0;
- gridContentNode.css('top', (captionHeight + toolbarHeight) + 'px');
+ // var maskContainer = $('.wok-grid-loader-container',domNode);
+ // maskContainer.css({'top': toolbarHeight+'px', 'height': maskHeight+'px'});
+ // this.maskContainer = maskContainer;
- var maskNode = $('.grid-mask', domNode);
- maskNode.css('top', captionHeight + 'px');
+ var maskNode = $('.wok-grid-mask', domNode);
this.maskNode = maskNode;
- var messageNode = $('.grid-message', domNode);
- messageNode.css('top', captionHeight + 'px');
+ var messageNode = $('.wok-grid-message', domNode);
this.messageNode = messageNode;
- var headerView = $('.grid-header-view', domNode);
- var bodyView = $('.grid-body-view', domNode);
- headerView.css('left', (frozenWidth) + 'px');
- bodyView.css('left', (frozenWidth) + 'px');
+ //fixTableLayout.call(this);
- var bodyWidth = width - frozenWidth;
- headerContainer.css('width', bodyWidth + 'px');
- bodyContainer.css('width', bodyWidth + 'px');
-
- fixTableLayout.call(this);
-
- var gridBody = $('.grid-body', domNode);
+ var gridBody = $('.wok-grid-body', domNode);
this.gridBody = gridBody;
- this.resizerLeftmost = $('.grid-resizer-leftmost', domNode);
- this.resizer = $('.grid-resizer', domNode);
- var gridHeader = $('.grid-header', domNode);
- $('th', gridHeader).on('mouseover mousemove', {
- resizer: this.resizer
- }, initResizing);
-
- $('th', gridHeader).on('mouseout', {
- resizer: this.resizer
- }, clearResizing);
-
- this.containerBeingResized = CONTAINER_NORMAL;
- $('th', frozenHeaderContainer).on('mousedown', {
- grid: this
- }, function(event) {
- event.data.grid.containerBeingResized = CONTAINER_FROZEN;
- startResizing(this, event);
- });
- $('th', headerContainer).on('mousedown', {
- grid: this
- }, function(event) {
- event.data.grid.containerBeingResized = CONTAINER_NORMAL;
- startResizing(this, event);
- });
-
- $('body').on('mousemove.grid#' + this['opts']['id'], {
- grid: this
- }, positionResizer);
- $('body').on('mouseup.grid#' + this['opts']['id'], endResizing);
var data = this['opts']['data'];
@@ -517,14 +302,13 @@ wok.widget.Grid.prototype = (function() {
onRowSelected: null,
title: null,
toolbarButtons: null,
- frozenFields: null,
fields: null
},
createDOM: createDOM,
setData: setData,
getSelected: getSelected,
reload: reload,
- destroy: destroy,
+ //destroy: destroy,
showMessage: showMessage
};
-})();
+})();
\ No newline at end of file
diff --git a/ui/js/src/wok.line-chart.js b/ui/js/src/wok.line-chart.js
index 3c740e6..3eb3494 100644
--- a/ui/js/src/wok.line-chart.js
+++ b/ui/js/src/wok.line-chart.js
@@ -18,13 +18,15 @@
* limitations under the License.
*/
-/**
+/*
* new wok.widget.LineChart({
* node: 'line-chart-cpu',
* id: 'line-chart',
* type: 'value'
* });
*/
+
+
wok.widget.LineChart = function(params) {
var container = $('#' + params['node']);
container.addClass('chart-container');
@@ -82,6 +84,14 @@ wok.widget.LineChart = function(params) {
}
});
}
+
+ var defs = [
+ '<defs>',
+ '<pattern id="patternbg" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">',
+ '<rect x="0" y="0" width="3" height="6" style="stroke:none; fill: #eeeeee;"></rect>',
+ '</pattern>',
+ '</defs>'
+ ].join('');
var canvasNode = $('#' + canvasID);
canvasNode.length && canvasNode.remove();
@@ -89,25 +99,10 @@ wok.widget.LineChart = function(params) {
'<svg id="', canvasID, '" class="line-chart"',
' height="', height, '" width="', width, '"',
'>',
+ defs,
'<rect height="', height, '" width="', width, '" class="background" />'
];
- for(var x = linesOffset; x < width; x += linesSpace) {
- htmlStr.push(
- '<line x1="', x, '" y1="', 0, '" x2="', x, '" y2="', height, '" />'
- );
- }
-
- linesOffset -= xFactor;
- while(linesOffset < 0) {
- linesOffset = linesSpace + linesOffset;
- }
-
- for(var y = height - linesSpace; y > 0; y -= linesSpace) {
- htmlStr.push(
- '<line x1="', 0, '" y1="', y, '" x2="', width, '" y2="', y, '" />'
- );
- }
var maxValueLabel = i18n['KCHHOST6001M'] + ' ' +
(type === 'value'
@@ -124,12 +119,34 @@ wok.widget.LineChart = function(params) {
chartVAxis.text(maxValueLabel);
}
+
seriesNames = [];
$.each(data, function(i, series) {
var points = series['points'];
var className = series['class'];
var latestPoint = points.slice(-1).pop();
xStart = latestPoint['x'] - period;
+ htmlStr.push('<path',
+ ' class="series', className ? ' ' + className : '', '"',
+ ' d="M 0,92 '
+ );
+ var first = true;
+ $.each(points, function(i, point) {
+ if(first) {
+ first = false;
+ }
+ else {
+ htmlStr.push(' ');
+ }
+
+ var x = xFactor * (point['x'] - xStart);
+ var y = height - yFactor * (type === 'value' ?
+ point['y'] * 100 / maxValue :
+ point['y']
+ );
+ htmlStr.push(x, ',', y);
+ });
+ htmlStr.push(' 310,92z" />');
htmlStr.push('<polyline',
' class="series', className ? ' ' + className : '', '"',
@@ -152,6 +169,7 @@ wok.widget.LineChart = function(params) {
htmlStr.push(x, ',', y);
});
htmlStr.push('" />');
+
});
htmlStr.push('</svg>');
@@ -160,7 +178,7 @@ wok.widget.LineChart = function(params) {
if(!chartLegend) {
chartLegend = $('<div class="chart-legend-container"></div>');
- container.after(chartLegend);
+ container.before(chartLegend);
}
else {
chartLegend.empty();
@@ -169,18 +187,15 @@ wok.widget.LineChart = function(params) {
var wrapper = $('<div class="legend-wrapper"></div>')
.appendTo(chartLegend);
$([
- '<svg class="legend-icon" width="20" height="10">',
- '<line x1="0" y1="5" x2="20" y2="5"/>',
+ '<svg class="legend-icon" width="5" height="40">',
+ '<rect width="5" height="40" />',
'</svg>'
].join('')).appendTo(wrapper);
- $('line', wrapper).css({
- stroke: $(polyline).css('stroke'),
- 'stroke-width': $(polyline).css('stroke-width')
+ $('rect', wrapper).css({
+ fill: $(polyline).css('stroke')
});
var label = data[i]['legend'];
var base = data[i]['base'];
- $('<label class="legend-label">' + label + '</label>')
- .appendTo(wrapper);
var latestPoint = data[i]['points'].slice(-1).pop();
var latestValue = latestPoint['y'];
if(type === 'value') {
@@ -189,11 +204,12 @@ wok.widget.LineChart = function(params) {
formatSettings
);
}
- else {
- latestValue += '%';
+ else {
+ latestValue = { v: latestValue, s: '%' };
}
- $('<div class="latest-value">' + latestValue + '</div>')
- .appendTo(wrapper);
+ $('<div class="latest-value"><span class="number">' + latestValue.v + '</span></div>').appendTo(wrapper);
+ $('<span class="legend-label">'+ latestValue.s +'</span><span class="legend-string">'+ label + '</span>').appendTo(wrapper[0].children[1]);
+
});
};
diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js
new file mode 100644
index 0000000..21aa9fd
--- /dev/null
+++ b/ui/js/src/wok.list.js
@@ -0,0 +1,302 @@
+/*
+ * Project Wok
+ *
+ * Copyright IBM, Corp. 2013-2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+wok.widget.List = function(opts) {
+ "use strict";
+ this.opts = $.extend({}, this.opts, opts);
+ this.createDOM();
+ this.reload();
+};
+
+wok.widget.List.prototype = (function() {
+ "use strict";
+ var htmlStr = [
+ '<div id="{id}-section" class="panel panel-default">',
+ '<div class="panel-heading">',
+ '</div>',
+ '<div id="content-{id}" class="panel-body">',
+ '<div id="{id}-container">',
+ '<div class="wok-list-message clearfix hidden">',
+ '<div class="alert alert-danger fade in" role="alert">',
+ '<p><strong>{message}</strong> ',
+ '<span class="detailed-text"></span></p>',
+ '<p><button class="btn btn-primary btn-xs retry-button">',
+ '{buttonLabel}',
+ '</button></p>',
+ '</div>',
+ '</div>',
+ '<div id="{id}-btn-group" class="btn-group wok-single-button hidden">',
+
+ '</div>',
+ '<div id="{id}" class="row clearfix">',
+ '<div class="wok-list-content">',
+ '<table class="wok-list-table table table-striped" id="list">',
+ '</table>',
+ '</div>',
+ '</div>',
+ '<div class="wok-list-mask hidden">',
+ '<div class="wok-list-loader-container">',
+ '<div class="wok-list-loading">',
+ '<div class="wok-list-loading-icon"></div>',
+ '<div class="wok-list-loading-text">',
+ '{loading}',
+ '</div>',
+ '</div>',
+ '</div>',
+ '</div>',
+ '</div>',
+ '</div>',
+ '</div>'
+ ].join('');
+
+ var getValue = function(name, obj) {
+ var result;
+ if (!Array.isArray(name)) {
+ name = name.parseKey();
+ }
+ if (name.length !== 0) {
+ var tmpName = name.shift();
+ if (obj[tmpName] !== undefined) {
+ result = obj[tmpName];
+ }
+ if (name.length !== 0) {
+ result = getValue(name, obj[tmpName]);
+ }
+ }
+ return (result);
+ };
+
+
+ var fillButton = function(btnContainer){
+ var addOrGenerateBtn = this.opts.toolbarButtons[0];
+ var singleBtnHTML = [
+ '<a class="btn btn-primary" href="#"', (addOrGenerateBtn.id ? (' id="' + addOrGenerateBtn.id + '"') : ''),' role="button">',
+ addOrGenerateBtn.class ? ('<i class="' + addOrGenerateBtn.class) + '"></i> ' : '',
+ addOrGenerateBtn.label,
+ '</a>'
+ ].join('');
+ var singleBtn = $(singleBtnHTML).appendTo(btnContainer);
+ $(singleBtn).click(function(e) {
+ e.preventDefault();
+ });
+ addOrGenerateBtn.onClick && singleBtn.on('click', addOrGenerateBtn.onClick);
+ };
+
+ var fillBody = function(container, fields) {
+
+ var toolbarButtons = this.opts.toolbarButtons;
+ var actionDropdownHtml;
+ var data = this.data;
+ var tbody = ($('tbody', container).length && $('tbody', container)) || $('<tbody></tbody>').appendTo(container);
+ tbody.empty();
+ if (typeof data !== 'undefined' && data.length > 0) {
+ $.each(data, function(i, row) {
+ var rowNode = $('<tr></tr>').appendTo(tbody);
+ var columnNodeHTML;
+ var columnData = '';
+ var state = '';
+ var styleClass = '';
+ if (toolbarButtons) {
+ actionDropdownHtml = [
+ '<td>',
+ '<div class="dropdown menu-flat">',
+ '<button id="wok-dropdown-button-', i, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',
+ '<span class="edit-alt"></span>Actions<span class="caret"></span>',
+ '</button>',
+ '<ul class="dropdown-menu" role="menu" aria-labelledby="action-dropdown-menu-', i, '">',
+ '</ul>',
+ '</div>',
+ '</td>'
+ ].join('');
+ }
+ $.each(fields, function(fi, field) {
+ var value = getValue(field.name, row);
+ if (field.type === 'status' && field.name === 'enabled') {
+ styleClass = (value === true ? '' : ' disabled');
+ state = [
+ '<span class="wok-repository-status ',
+ value === true ? 'enabled' : 'disabled',
+ '"><i class="fa fa-power-off"></i></span>'
+ ].join('');
+ }
+ columnData += (field.type === 'name') ? ('<span class="wok-list-name">' + value.toString() + '</span>') : (field.type !== 'status' ? '<span class="wok-list-loading-icon-inline"></span><span class="wok-list-description">' + value.toString() + '</span>' : '');
+
+ });
+ columnNodeHTML = [
+ '<td>',
+ '<div class="wok-list-cell', styleClass, '">', state,
+ columnData,
+ '</div>',
+ '</td>'
+ ].join('');
+ $(columnNodeHTML).appendTo(rowNode);
+
+ var actionMenuNode = $(actionDropdownHtml).appendTo(rowNode);
+
+ $.each(toolbarButtons, function(i, button) {
+ var btnHTML = [
+ '<li role="presentation"', button.critical === true ? ' class="critical"' : '', '>',
+ '<a role="menuitem" tabindex="-1" data-dismiss="modal"', (button.id ? (' id="' + button.id + '"') : ''), (button.disabled === true ? ' class="disabled"' : ''),
+ '>',
+ button.class ? ('<i class="' + button.class) + '"></i>' : '',
+ button.label,
+ '</a></li>'
+ ].join('');
+ var btnNode = $(btnHTML).appendTo($('.dropdown-menu', rowNode));
+ button.onClick && btnNode.on('click', button.onClick);
+ });
+ });
+ }
+ };
+
+ var stylingRow = function(row, className, add) {
+ var index = $(row).index() + 1;
+ $('tr', this.bodyContainer)
+ .removeClass(className);
+ if (add === false) {
+ return;
+ }
+ $('tr:nth-child(' + index + ')', this.bodyContainer)
+ .addClass(className);
+ };
+
+ var setBodyListeners = function() {
+ if (this['opts']['rowSelection'] != 'disabled') {
+
+ $('tr', this.bodyContainer).on('click', {
+ grid: this
+ }, function(event) {
+ var grid = event.data.grid;
+ if (!$(this).hasClass('generating')) {
+ grid.selectedIndex = $(this).index();
+ stylingRow.call(grid, this, 'selected');
+ grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
+ }
+ });
+ }
+ };
+
+ var setData = function(data) {
+ this.data = data;
+ fillBody.call(this, this.bodyContainer, this.opts.fields);
+ setBodyListeners.call(this);
+ };
+
+ var getSelected = function() {
+ return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
+ };
+
+ var showMessage = function(msg) {
+ $('.detailed-text', this.messageNode).text(msg);
+ $(this.messageNode).removeClass('hidden');
+ };
+
+ var hideMessage = function() {
+ $(this.messageNode).addClass('hidden');
+ };
+
+ var reload = function() {
+ var data = this.opts.data;
+ if (!data) {
+ return;
+ }
+
+ if ($.isArray(data)) {
+ return this.setData(data);
+ }
+
+ if ($.isFunction(data)) {
+ var loadData = data;
+ $(this.maskNode).removeClass('hidden');
+ loadData($.proxy(function(data) {
+ this.setData(data);
+ $(this.maskNode).addClass('hidden');
+ }, this));
+ }
+ };
+
+ var createDOM = function() {
+ var containerID = this.opts.container;
+ var container = $('#' + containerID);
+ var gridID = this.opts.id;
+ var data = this.opts.data;
+ var rowSelection = this.opts.rowSelection || 'single';
+ var domNode = $(wok.substitute(htmlStr, {
+ id: gridID,
+ loading: i18n.KCHGRD6001M,
+ message: i18n.KCHGRD6002M,
+ buttonLabel: i18n.KCHGRD6003M,
+ detailedLabel: i18n.KCHGRD6004
+ })).appendTo(container);
+ this.domNode = domNode;
+
+
+ var titleContainer = $('.panel-heading', domNode);
+ this.titleContainer = titleContainer;
+
+ var title = this.opts.title;
+ var titleNode = null;
+
+ if (title) {
+ titleNode = $('<h3 class="panel-title">' + title + '</h3>').appendTo(titleContainer);
+ }
+
+ var bodyContainer = $('.wok-list-table.table.table-striped', domNode);
+ this.bodyContainer = bodyContainer;
+
+ var singleButtonContainer = $('.wok-single-button', domNode);
+ this.singleButtonContainer = singleButtonContainer;
+
+ var gridBody = $('.wok-list-content', domNode);
+ this.gridBody = gridBody;
+
+ var maskNode = $('.wok-list-mask', domNode);
+ this.maskNode = maskNode;
+
+ var messageNode = $('.wok-list-message', domNode);
+ this.messageNode = messageNode;
+
+
+ fillButton.call(this,this.singleButtonContainer);
+
+ $('.retry-button', domNode).on('click', {
+ grid: this
+ }, function(event) {
+ event.data.grid.reload();
+ });
+
+
+ };
+
+ return {
+ opts: {
+ container: null,
+ id: null,
+ rowSelection: 'single',
+ onRowSelected: null,
+ title: null,
+ toolbarButtons: null,
+ frozenFields: null,
+ fields: null
+ },
+ createDOM: createDOM,
+ setData: setData,
+ getSelected: getSelected,
+ reload: reload,
+ showMessage: showMessage
+ };
+})();
\ No newline at end of file
diff --git a/ui/js/src/wok.login.js b/ui/js/src/wok.login.js
index d9ccae6..13a1da0 100644
--- a/ui/js/src/wok.login.js
+++ b/ui/js/src/wok.login.js
@@ -18,9 +18,12 @@
* limitations under the License.
*/
wok.login_main = function() {
-
+ "use strict";
var selectedLanguage = wok.lang.get();
$('#userLang').val(selectedLanguage);
+ $('#userLang option[value="'+selectedLanguage+'"]').attr("selected", "selected");
+ $('#userLang').next().find('.selectpicker').attr('title',$('#userLang option[value="'+selectedLanguage+'"]').text());
+ $('#userLang').next().children().find('.filter-option').text($('#userLang option[value="'+selectedLanguage+'"]').text());
$('#userLang').on('change', function() {
wok.lang.set($(this).val());
@@ -29,7 +32,7 @@ wok.login_main = function() {
var query = window.location.search;
var error = /.*error=(.*?)(&|$)/g.exec(query);
- if (error && error[1] == "sessionTimeout") {
+ if (error && error[1] === "sessionTimeout") {
$("#messSession").show();
}
@@ -59,7 +62,7 @@ wok.login_main = function() {
var next_url = lastPage ? lastPage.replace(/\"/g,'') : "/";
}
wok.cookie.set('roles',JSON.stringify(data.roles));
- window.location.replace(window.location.pathname.replace(/\/+login.html/, '') + next_url)
+ window.location.replace(window.location.pathname.replace(/\/+login.html/, '') + next_url);
}, function() {
$("#messUserPass").show();
$("#messSession").hide();
diff --git a/ui/js/src/wok.main.js b/ui/js/src/wok.main.js
index 25fed31..1330ac1 100644
--- a/ui/js/src/wok.main.js
+++ b/ui/js/src/wok.main.js
@@ -27,6 +27,7 @@ wok.main = function() {
var tabsHtml = [];
$(tabs).each(function(i, tab) {
var title = tab['title'];
+ var cssClass = tab['css'];
var path = tab['path'];
var mode = tab['mode'];
if (mode != 'none') {
@@ -34,10 +35,10 @@ wok.main = function() {
var disableHelp = (helpPath.length == 0 ? "disableHelp" : helpPath);
tabsHtml.push(
'<li>',
- '<a class="item ', disableHelp,'" href="', path, '">',
+ '<a class="item ', disableHelp,' ',cssClass,'" href="', path, '">',
title,
'</a>',
- '<input id="helpPathId" name="helpPath" value="' + helpPath + '" type="hidden"/>',
+ '<input id="helpPathId" name="helpPath" class="sr-only" value="' + helpPath + '" type="hidden"/>',
'</li>'
);
}
@@ -51,6 +52,7 @@ wok.main = function() {
var $tab = $(this);
var titleKey = $tab.find('title').text();
var title = i18n[titleKey] ? i18n[titleKey] : titleKey;
+ var css = $tab.find('class').text();
var path = $tab.find('path').text();
var roles = wok.cookie.get('roles');
if (roles) {
@@ -60,6 +62,7 @@ wok.main = function() {
tabs.push({
title: title,
path: path,
+ css: css,
mode: mode
});
} else {
@@ -113,7 +116,8 @@ wok.main = function() {
DEFAULT_HASH = defaultTabPath &&
defaultTabPath.substring(0, defaultTabPath.lastIndexOf('.'))
}
- $('#nav-menu').append(genTabs(tabs));
+ $('#nav-menu ul.navbar-nav li.hostname').after(genTabs(tabs));
+ wok.getHostname();
callback && callback();
}, function(data) {
@@ -142,7 +146,7 @@ wok.main = function() {
* point to the tab. If nothing found, inform user the URL is invalid
* and clear location.hash to jump to home page.
*/
- var tab = $('#nav-menu a[href="' + url + '"]');
+ var tab = $('#nav-menu ul li a[href="' + url + '"]');
if (tab.length === 0 && url!='wok-empty.html') {
location.hash = '';
return;
@@ -150,20 +154,14 @@ wok.main = function() {
//Remove the tab arrow indicator for no plugin
if(url=='wok-empty.html'){
- $('.menu-arrow').hide();
$('#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{
- // Animate arrow indicator.
- var left = $(tab).parent().position().left;
- var width = $(tab).parent().width();
- $('.menu-arrow').stop().animate({
- left : left + width / 2 - 10
- });
-
+
// Update the visual style of tabs; focus the selected one.
- $('#nav-menu a').removeClass('current');
- $(tab).addClass('current');
+ $('#nav-menu ul li').removeClass('active');
+ $(tab).parent().addClass('active');
$(tab).focus();
+
// Disable Help button according to selected tab
if ($(tab).hasClass("disableHelp")) {
$('#btn-help').css('cursor', "not-allowed");
@@ -240,7 +238,7 @@ wok.main = function() {
* Register click listener of tabs. Replace the default reloading page
* behavior of <a> with Ajax loading.
*/
- $('#nav-menu').on('click', 'a.item', function(event) {
+ $('#nav-menu ul li').on('click', 'a.item', function(event) {
var href = $(this).attr('href');
// Remove file extension from 'href'
location.hash = href.substring(0,href.lastIndexOf('.'))
@@ -279,7 +277,7 @@ wok.main = function() {
$('#peers').on('click', function() {
// Check if any request is in progress
- if ($('.popover', '#peers').is(':visible') || searchingPeers == true)
+ if ($('.dropdown', '#peers').is('.open') || searchingPeers == true)
return
$('#search-peers').show();
@@ -294,7 +292,7 @@ wok.main = function() {
$('#no-peers').removeClass('hide-content');
for(var i=0; i<data.length; i++){
- $('.dropdown', '#peers').append("<a href='"+data[i]+"' target='_blank'>"+data[i]+"</a>");
+ $('.dropdown-menu ', '#peers').append("<li><a href='"+data[i]+"' target='_blank'>"+data[i]+"</a></li>");
}
searchingPeers = false;
});
@@ -329,6 +327,28 @@ wok.main = function() {
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.
@@ -361,10 +381,15 @@ wok.checkHelpFile = function(path) {
return url;
};
+wok.getHostname = function(e) {
+ host = window.location.hostname;
+ $('span.host-location').text(host);
+ return host;
+}
wok.openHelp = function(e) {
var tab = $('#nav-menu a.current');
var url = $(tab).parent().find("input[name='helpPath']").val();
window.open(url, "Wok Help");
e.preventDefault();
-};
+};
\ No newline at end of file
diff --git a/ui/js/src/wok.message.js b/ui/js/src/wok.message.js
index bd650e0..ce6ba25 100644
--- a/ui/js/src/wok.message.js
+++ b/ui/js/src/wok.message.js
@@ -18,101 +18,48 @@
* limitations under the License.
*/
wok.message = function(msg, level, node) {
- var container = node || $('#messageField');
+ "use strict";
+ var container = node || $('#alert-fields');
if ($(container).size() < 1) {
- container = $('<div id="messageField"/>').appendTo(document.body);
+ container = $('<div id="alert-fields"/>').appendTo($('#alert-container'));
}
- var message = '<div class="message ' + (level || '') + '" style="display: none;">';
+ var message = '<div role="alert" class="alert ' + (level || '') + ' alert-dismissible fade in" style="display: none;">';
if(!node) {
- message += '<div class="close">X</div>';
+ message += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times-circle"></i></span></button>';
}
- message += '<div class="content">' + msg + '</div>';
+ message += msg;
message += '</div>';
var $message = $(message);
$(container).append($message);
+ $message.alert();
$message.fadeIn(100);
setTimeout(function() {
$message.fadeOut(2000, function() {
+ $message.alert('close');
$(this).remove();
+ $(container).remove();
+ if ($(container).children().length < 1) {
+ $(container).remove();
+ }
});
}, 4000);
-
- $(container).on("click", ".close", function(e) {
- $(this).parent().fadeOut(200, function() {
- $(this).remove();
- });
- });
-};
-
-/**
- * A public function of confirm box.
- *
- * @param msg
- * type:[object]
- * @param msg.title
- * The title of the confirm box.
- * @param msg.content
- * The main text of the confirm box.
- * @param msg.confirm
- * The text of the confirm button.
- * @param msg.cancel
- * the text of the cancel button.
- * @param confirmCallback
- * the callback function of click the confirm button.
- * @param cancelCallback
- * The callback function of click the cancel and X button.
- */
-wok.confirm = function(settings, confirmCallback, cancelCallback) {
- if ($('#confirmbox-container ').size() < 1) {
- $(document.body).append('<div id="confirmbox-container" class="bgmask"></div>');
- }
- var confirmboxHtml = '<div class="confirmbox">';
- confirmboxHtml += '<header>';
- confirmboxHtml += '<h4 class="title">' + (settings.title || '') + '</h4>';
- confirmboxHtml += '<div class="close cancel">X</div>';
- confirmboxHtml += '</header>';
- confirmboxHtml += '<div class="content">';
- confirmboxHtml += settings.content + '</div>';
- confirmboxHtml += '<footer>';
- confirmboxHtml += '<div class="btn-group">';
- confirmboxHtml += '<button id="button-confirm" class="btn-small"><span class="text">' + (settings.confirm || i18n['KCHAPI6004M']) + '</span></button>';
- confirmboxHtml += '<button id="button-cancel" class="btn-small cancel"><span class="text">' + (settings.cancel || i18n['KCHAPI6003M']) + '</span></button>';
- confirmboxHtml += '</div>';
- confirmboxHtml += '</footer>';
- confirmboxHtml += '</div>';
- var confirmboxNode = $(confirmboxHtml);
- $('#confirmbox-container').append(confirmboxNode);
- confirmboxNode.fadeIn();
-
- $('#confirmbox-container').on("click", "#button-confirm", function(e) {
- if (confirmCallback) {
- confirmCallback();
- }
- confirmboxNode.fadeOut(1, function() {
- $('#confirmbox-container').remove();
- });
- });
- $('#confirmbox-container').on("click", ".cancel", function(e) {
- if (cancelCallback) {
- cancelCallback();
- }
- confirmboxNode.fadeOut(1, function() {
- $('#confirmbox-container').remove();
- });
- });
};
wok.message.warn = function(msg, node) {
- wok.message(msg, 'warn', node);
+ "use strict";
+ wok.message(msg, 'alert-warning', node);
};
wok.message.error = function(msg, node) {
- wok.message(msg, 'error', node);
+ "use strict";
+ wok.message(msg, 'alert-danger', node);
};
wok.message.error.code = function(code) {
- msg = code + ": " + i18n[code]
- wok.message(msg, 'error');
+ "use strict";
+ msg = code + ": " + i18n[code];
+ wok.message(msg, 'alert-danger');
};
wok.message.success = function(msg, node) {
- wok.message(msg, 'success', node);
+ "use strict";
+ wok.message(msg, 'alert-success', node);
};
diff --git a/ui/js/src/wok.window.js b/ui/js/src/wok.window.js
index ef00a77..d50fc6d 100644
--- a/ui/js/src/wok.window.js
+++ b/ui/js/src/wok.window.js
@@ -18,13 +18,16 @@
* limitations under the License.
*/
wok.window = (function() {
+ "use strict";
var _windows = [];
var _listeners = {};
- var open = function(settings) {
- var settings = jQuery.type(settings) === 'object' ? settings : {
+ var open = function(settings, target) {
+ settings = jQuery.type(settings) === 'object' ? settings : {
url: settings
};
+ target = (typeof target === 'undefined') ? 'modalWindow' : target;
+
var windowID = settings['id'] || 'window-' + _windows.length;
if ($('#' + windowID).length) {
@@ -33,14 +36,15 @@ wok.window = (function() {
_windows.push(windowID);
_listeners[windowID] = settings['close'];
- var windowNode = $('<div></div>', {
- id: windowID,
- 'class': settings['class'] ? settings['class'] + ' bgmask remove-when-logged-off' : 'bgmask remove-when-logged-off'
- });
+ var windowNode = $('<div id="' + windowID + '" class="modal-dialog"></div>');
- $(windowNode).css(settings['style'] || '');
+ $('#' + target).modal('show');
- $(windowNode).appendTo('body').on('click', '.window .close', function() {
+ $('#' + target).on('hidden.bs.modal', function() {
+ $('#' + windowID).remove();
+ });
+
+ $(windowNode).appendTo('#' + target).on('click', '.window .close', function() {
wok.window.close();
});
@@ -54,15 +58,16 @@ wok.window = (function() {
var close = function() {
var windowID = _windows.pop();
- if(_listeners[windowID]) {
+ if (_listeners[windowID]) {
_listeners[windowID]();
_listeners[windowID] = null;
}
- delete _listeners[windowID];
+ $('#' + windowID).parent().modal('toggle');
+ $('#' + windowID).parent().on('hidden.bs.modal', function() {
+ delete _listeners[windowID];
+ $('#' + windowID).remove();
+ })
- $('#' + windowID).fadeOut(100, function() {
- $(this).remove();
- });
};
return {
diff --git a/ui/js/widgets/grid.js b/ui/js/widgets/grid.js
deleted file mode 100644
index 1f47495..0000000
--- a/ui/js/widgets/grid.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * Project Wok
- *
- * Copyright IBM, Corp. 2015
- *
- * Code derived from Project Kimchi
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-$(function(){
-$.widget("wok.grid", {
- options: {
- enableSorting: true
- },
- _create: function() {
- var that = this;
- this.element.addClass('grid');
- var head = $(this.element.children().get(0));
- var body = $(this.element.children().get(1));
- head.addClass('header c1 bold grey');
- if(this.options.enableSorting){
- head.children().each(function(){
- var addSorting = "<span>"+$(this).html()+"</span>";
- addSorting += "<span><div class='icon-angle-up sort-up'></div><div class='icon-angle-down sort-down'></div></span>";
- $(this).empty().append(addSorting);
- });
- }
- $('.icon-angle-up', head).click(function(){
- that.sort(head.children().index($(this).parent().parent()), true);
- });
- $('.icon-angle-down', head).click(function(){
- that.sort(head.children().index($(this).parent().parent()), false);
- });
- body.addClass('body c1 normal dark-grey');
- body.children().addClass('row');
- this._setRowBackgroud();
- },
- _setRowBackgroud: function(){
- var i=0, classes=['odd', 'even'];
- $(this.element.children().get(1)).children().each(function(){
- $(this).removeClass('odd');
- $(this).removeClass('even');
- $(this).addClass(classes[i]);
- i = i==0?1:0;
- });
- },
- sort: function(column, assending) {
- var head = $(this.element.children().get(0));
- $('.icon-up-dir', head).removeClass('icon-up-dir').addClass('icon-angle-up');
- $('.icon-down-dir', head).removeClass('icon-down-dir').addClass('icon-angle-down');
- var columnCell = $(head.children().get(column));
- if(assending){
- $('.icon-angle-up', columnCell).removeClass('icon-angle-up').addClass('icon-up-dir');
- }else{
- $('.icon-angle-down', columnCell).removeClass('icon-angle-down').addClass('icon-down-dir');
- }
- var container = $(this.element.children().get(1));
- var nodes = [];
- container.children().each(function(){
- nodes.push($(this));
- });
- nodes.sort(function(a, b){
- aVal = $(a.children().get(column)).attr('val');
- bVal = $(b.children().get(column)).attr('val');
- return aVal.localeCompare(bVal);
- });
- if(!assending) nodes.reverse();
- container.empty();
- for(var i=0;i<nodes.length;i++){
- container.append(nodes[i]);
- }
- this._setRowBackgroud();
- },
- filter: function(keyword) {
- keyword = keyword.toLowerCase();
- var container = $(this.element.children().get(1));
- container.children().each(function(){
- var hide = true;
- $(this).children().each(function(){
- if($(this).attr('val')&&$(this).attr('val').toLowerCase().indexOf(keyword)!=-1){
- hide = false;
- return false;
- }
- });
- $(this).css('display', hide?'none':'');
- });
- this._setRowBackgroud();
- },
- addRow: function(rowNode){
- $(rowNode).addClass('row');
- this._setRowBackgroud();
- },
- deleteRow: function(rowNode){
- $(rowNode).remove();
- this._setRowBackgroud();
- },
- _destroy: function() {
- this.element.removeClass('grid');
- var head = $(this.element.children().get(0));
- var body = $(this.element.children().get(1));
- head.removeClass('header c1 bold grey');
- if(this.options.enableSorting){
- head.children().each(function(){
- var oriContent = $($(this).children().get(0)).html()
- $(this).empty().append(oriContent);
- });
- }
- body.removeClass('body c1 normal dark-grey');
- body.children().removeClass('row odd even');
- }
-});
-});
--
1.9.3
More information about the Kimchi-devel
mailing list