mirror of
https://github.com/Karaka-Management/jsOMS.git
synced 2026-01-30 18:28:39 +00:00
Removing/Adding UI Elements?!
This commit is contained in:
parent
4a65669d87
commit
8bbe20288f
129
UI/Button.js
129
UI/Button.js
|
|
@ -1,129 +0,0 @@
|
|||
/**
|
||||
* Form manager class.
|
||||
*
|
||||
* @author OMS Development Team <dev@oms.com>
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
* @copyright 2013 Dennis Eichhorn
|
||||
* @license OMS License 1.0
|
||||
* @version 1.0.0 * @since 1.0.0
|
||||
*/
|
||||
(function (jsOMS)
|
||||
{
|
||||
"use strict";
|
||||
|
||||
/** @namespace jsOMS.UI */
|
||||
jsOMS.Autoloader.defineNamespace('jsOMS.UI');
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {Object} app Application
|
||||
*
|
||||
* @method
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Button = function (app)
|
||||
{
|
||||
this.app = app;
|
||||
this.actions = {};
|
||||
};
|
||||
|
||||
/**
|
||||
* Bind button.
|
||||
*
|
||||
* @param {string} [id] Button id (optional)
|
||||
*
|
||||
* @method
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Button.prototype.bind = function (id)
|
||||
{
|
||||
if (typeof id !== 'undefined') {
|
||||
this.bindButton(document.getElementById(id));
|
||||
} else {
|
||||
let buttons = document.getElementsByTagName('button'),
|
||||
length = buttons.length;
|
||||
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (buttons[i].getAttribute('data-action') !== null) {
|
||||
this.bindButton(buttons[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Bind button.
|
||||
*
|
||||
* @param {Element} e Button element
|
||||
*
|
||||
* @method
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Button.prototype.bindButton = function (e)
|
||||
{
|
||||
let actions = JSON.parse(e.getAttribute('data-action')),
|
||||
actionLength = actions.length,
|
||||
self = this;
|
||||
|
||||
// For everey action an event is registered
|
||||
for (let i = 1; i < actionLength; i++) {
|
||||
// todo: right now one event type can only exist once... needs fixing!!!
|
||||
this.app.eventManager.addGroup(actions[i - 1].type, e.id + actions[i - 1].type);
|
||||
this.app.eventManager.setDone(e.id + actions[i - 1].type, function ()
|
||||
{
|
||||
// todo: how to pass result from previous action to next action?!
|
||||
self.runAction(e, actions[i]);
|
||||
});
|
||||
}
|
||||
|
||||
// Register event for first action
|
||||
e.addEventListener('click', function ()
|
||||
{
|
||||
self.runAction(this, actions[0]);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Add action callback.
|
||||
*
|
||||
* @param {string} name Action identifier
|
||||
* @param {function} callback Action callback
|
||||
*
|
||||
* @method
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Button.prototype.add = function (name, callback)
|
||||
{
|
||||
this.actions[name] = callback;
|
||||
};
|
||||
|
||||
/**
|
||||
* Run event action.
|
||||
*
|
||||
* @param {Element} e Button
|
||||
* @param {Object} action Action
|
||||
*
|
||||
* @method
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Button.prototype.runAction = function (e, action)
|
||||
{
|
||||
let self = this;
|
||||
|
||||
this.actions[action.type](action, function ()
|
||||
{
|
||||
self.app.eventManager.trigger(e.id, e.id + action.type, false);
|
||||
});
|
||||
};
|
||||
}(window.jsOMS = window.jsOMS || {}));
|
||||
164
UI/Element/Input.js
Normal file
164
UI/Element/Input.js
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
/**
|
||||
* Form manager class.
|
||||
*
|
||||
* @author OMS Development Team <dev@oms.com>
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
* @copyright 2013 Dennis Eichhorn
|
||||
* @license OMS License 1.0
|
||||
* @version 1.0.0 * @since 1.0.0
|
||||
*/
|
||||
(function (jsOMS)
|
||||
{
|
||||
"use strict";
|
||||
|
||||
/** @namespace jsOMS.UI.Element.Element*/
|
||||
jsOMS.Autoloader.defineNamespace('jsOMS.UI.Element.Element');
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @constructor
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Element.Input = function (actions)
|
||||
{
|
||||
this.actions = actions;
|
||||
};
|
||||
|
||||
/**
|
||||
* Unbind input element
|
||||
*
|
||||
* @param {Object} input Input element
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Element.Input.prototype.unbind = function (input)
|
||||
{
|
||||
this.app.inputManager.getKeyboardManager().unbind(input);
|
||||
input.removeEventListener('change', changeBind, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Bind input elment
|
||||
*
|
||||
* @param {Object} input Input elment
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Element.Input.prototype.bind = function (input)
|
||||
{
|
||||
let self = this;
|
||||
|
||||
input.addEventListener('change', function changeBind(event)
|
||||
{
|
||||
/* Handle remote datalist/autocomplete input element */
|
||||
let listId, list;
|
||||
if (typeof (listId = this.getAttribute('list')) !== 'undefined' && (list = document.getElementById(listId)).getAttribute('data-list-src') !== 'undefined') {
|
||||
self.addRemoteDatalistOptions(this, list);
|
||||
}
|
||||
|
||||
/* Handle html defined functions */
|
||||
let change;
|
||||
if (typeof (change = this.getAttribute('data-change-func')) !== 'undefined') {
|
||||
change(this);
|
||||
}
|
||||
|
||||
/* Handle pre-defined dynamic change events */
|
||||
let ref;
|
||||
if (typeof (ref = this.getAttribute('data-ref')) !== 'undefined') {
|
||||
let e = document.getElementById(ref);
|
||||
|
||||
switch (e.tagName) {
|
||||
case 'ul':
|
||||
break;
|
||||
case 'table':
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let dataButton;
|
||||
if (typeof (dataButton = input.getAttribute('data-button')) !== 'undefined') {
|
||||
this.app.inputManager.getKeyboardManager().bind(input, 13, function ()
|
||||
{
|
||||
document.getElementById(dataButton).click();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Add remote datalist options
|
||||
*
|
||||
* This only applies for datalists that have remote options
|
||||
*
|
||||
* @param {Object} input Input elment
|
||||
* @param {Object} datalist Datalist elment
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Element.Input.prototype.addRemoteDatalistOptions = function (input, datalist)
|
||||
{
|
||||
this.clearDatalistOptions(datalist);
|
||||
|
||||
let request = new jsOMS.Message.Request();
|
||||
request.setData(input.value);
|
||||
request.setType(jsOMS.Message.Response.ResponseType.JSON);
|
||||
request.setUri(datalist.getAttribute('data-list-src'));
|
||||
request.setMethod(jsOMS.Message.Request.RequestMethod.POST);
|
||||
request.setRequestHeader('Content-Type', 'application/json');
|
||||
request.setSuccess(function (xhr)
|
||||
{
|
||||
try {
|
||||
let o = JSON.parse(xhr.response),
|
||||
response = new jsOMS.Message.Response(o),
|
||||
responseLength = response.count(),
|
||||
tempResponse = null,
|
||||
success = null;
|
||||
|
||||
for (let k = 0; k < responseLength; k++) {
|
||||
tempResponse = response.getByIndex(k);
|
||||
console.log(tempResponse);
|
||||
|
||||
let option = null,
|
||||
data = tempResponse.getData(),
|
||||
length = data.length;
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
option = document.createElement('option');
|
||||
option.value = tempResponse.value;
|
||||
option.text = tempResponse.text;
|
||||
|
||||
datalist.appendChild(option);
|
||||
}
|
||||
}
|
||||
} catch (exception) {
|
||||
self.app.logger.error('Invalid JSON object: ' + xhr, 'FormManager');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
request.send();
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove all datalist options from datalist
|
||||
*
|
||||
* @param {Object} datalist Datalist elment
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @author Dennis Eichhorn <d.eichhorn@oms.com>
|
||||
*/
|
||||
jsOMS.UI.Element.Input.prototype.clearDatalistOptions = function (datalist)
|
||||
{
|
||||
let length = datalist.options.length;
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
datalist.remove(0);
|
||||
}
|
||||
};
|
||||
}(window.jsOMS = window.jsOMS || {}));
|
||||
Loading…
Reference in New Issue
Block a user