• ?query = parameters
• /path = full path
• :port = port
• :user = user
• :pass = password

• = fragment

• / = root

If a javascript file is not available or already loaded it should be loaded.

Custom Autoloader.require(); function.

Code like the following is bad since it will cause exceptions/errors:

document.getElementById(key).checked

Make sure to check that the element actually exists.

Currently requests generated by the action manager don't have a multiple send prevention mechanism. This feature is implemented for forms and should be implemented here as well.

Preferably this should be done in the message.request action itself.

Currently method defaults are not used. They are supported since ECMAScript 6.

Instead of generating a new url it should be possible to replace the current url partially.

This would require to parse something like {!self}.

Instead of making it behave differently from the phpOMS they should behave the same way and have similar if not the same methods.

Resource: http://www.javascriptkit.com/javatutors/touchevents2.shtml

Allow multiple swipeareas. This way developers can sepcify swipe actions based on application and swipe areas.

https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd

https://googlechrome.github.io/samples/service-worker/custom-offline-page/

Implement coverage reports by using jasmine and istanbul.

Currently the data-href is only implemented for tables but this would be useful for all elements?!

Checkout https://github.com/ApoorvSaxena/lozad.js/blob/master/src/lozad.js as reference

Create template which should be re-used.

Create general UI behavior class. Some general behavior that is not related to tables, forms etc. should be handled in this class.

E.g. data-href object from issue #28.

Many components make use of the event manager which could result in overwriting existing events.

• General events
• ActionManager
• KeyboardManager
• TouchManager
• MouseManager
• Voice/CommandManager

The oLib should be split in multiple components similar to the backend (e.g. ArrayUtils, DomUtils, etc...).

Currently many elements are bound in a more abstract class e.g. Form and not in the View e.g. FormView. Maybe it makes more sense to bind the functionality always in the View and not in the managing class.

Same goes for Tables, Media module etc. The editor is doing the binding in the Editor class and not in the controller.

The button injection could/should be pulled up and a general action handler should be specified. This way not only button actions will be able to trigger actions but also other events:

1. Link click
2. Scrolling (which I personnaly don't like)
3. Keystrokes in input fields
4. Mouse clicks in general

Form elements, that are not inside of the form should be merged with the ones that are. For that a merge function should be implemented in the oLib.

Another alternative is to create your own selector for querySelector and querySelectorAll which could return a joined list/array.

Potential layout for selecting node that matches two selectors (only one result):

jsOMS.querySelector('.selector1, selector[type=2]', baseNode(optional));

Potential layout for selecting nodes that match two selectors (list/array of results):

jsOMS.querySelectorAll('.selector1, selector[type=2]', baseNode(optional));

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/issues/develop/files/Asset/AssetManager.js?selectedLabels%5B0%5D=9&orderField=path&order=asc&honorSelectedPaths=0&issueId=7248388#inspectioncomment-90794508

Implement phpOMS matrix class

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/issues/develop/files/UI/Input/Voice/VoiceManager.js?orderField=path&order=asc&honorSelectedPaths=0&issueId=24685301#inspectioncomment-90794666

Events so fare can be created sync and async depending on the implementation. It would be better to make it sync/async depending on a option flag.

http://mbostock.github.io/protovis/ex/matrix.html

Use import in scss in order to create a combined chart css file.

Right now the max min calculation for the axis max/min is always calculated the same way. It would be smarter to set a default calculation but allow a dynamic calculation via callbacks.

The charts objects are very unorganized and many methods could get cleaned up by simply pulling out functionality.

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/issues/develop/files/Autoloader.js?orderField=path&order=asc&honorSelectedPaths=0&issueId=7248398#inspectioncomment-28905530

The dataset should be optimized in the chart object not beforehand. For the stacked chart to work it always needs to know the y position of the previous dataset. At the same time the markers are not positioned correctly yet!

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/issues/develop/files/Log/Logger.js?orderField=path&order=asc&honorSelectedPaths=0&issueId=7248404#inspectioncomment-90794602

Create Masonry like ordering but with dynamic width/height elements either floating or flexbox.

Could be very complex especially by considering smaller resolution as special case and resizable windows.

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/issues/develop/files/Event/EventManager.js?orderField=path&order=asc&honorSelectedPaths=0&issueId=24685344#inspectioncomment-90794710

Swipe should be redirected to arrow keys.

Redirect swipe after validation to the corresponding keyobard input.

This way the behaviour has to be implemented only once.

see https://scrutinizer-ci.com/g/Orange-Management/jsOMS/code-structure/develop/js-file/Chart%2FChartAbstract.js&issueId=7248416#inspectioncomment-90794533

Right now a type can only be used once. Using the same type multiple times can cause weird problems. See task create workflow.

For simple tables a short table handling should be implemented. This should only be viable for none-paginated tables.

Long tables which are paginated and result from db queries need to have the same features but should not be part of this first basic implementation.

Draft Solution

Make sure to integrate this into the UIManager.js. Additional steps for implementing the code below are the addition of click events on icons in the table which trigger the sorting and filtering.

The filtering should also result from user inpunt (maybe similarly to excel table filtering?).

construct(id)
{
    this.id = id;
}

sortBy(column, order = 'ASC')
{
    let table = document.getElementById(this.id),
        row1 = null,
        row2 = null,
        swap = false;

    const length = table.rows.length;

    do {
        for (let i = 1; i < length - 1; ++i) {
            swap = false;

            row1 = table.rows[i].getElementsByTagName('TD')[column];
            row2 = table.rows[i + 1].getElementsByTagName('TD')[column];

            if (this.checkOrder()) {
                swap = true;
                break;
            }
        }

        if (swap) {
            table.rows[i].parentNode.insertBefore(table.rows[i + 1], table.rows[i]);
        }
    } while(swap)
}

checkOrder(row1, row2, order)
{
    switch (order) {
        case 'ASC':
            return row1['data-value'].toLowerCase() > row2['data-value'].toLowerCase();
        case 'DESC':
            return row1['data-value'].toLowerCase() < row2['data-value'].toLowerCase()
    };
}

filterBy(column, filter)
{
	let table = document.getElementById(this.id);

    const length = table.rows.length;

    for (let i = 0; i < length - 1; ++i) {
        if (table.rows[i]['data-value'].match(filter)) {
            // todo: remove class hidden - see basic oLib.js features
        } else {
            // todo: add class hidden - see basic oLib.js features
        }
    }
}

Logging if hasOwnProperty fails will help finding bugs which otherwise will be difficult to detect.

Currently it is possible to accidentally submit a form multiple times. The formview should have some internal timer to prevent this (e.g. no submit within 0.3 sec).

This could be a problem for forms that don't submit data but request data. Maybe this should only be done for none-GET forms.

When submitting a form the view collects data from all form elements and from form elements which have the form= set to the same id. The problem with this is that a form element which is part of the form and has set the form= will be part of the list two times. This needs to be fixed.

Solution:
Before returning the element array it should be traversed and filtered for duplicates.

Instead of loading the whole page again maybe use JS to only load specific content elements and replace them (main content) like youtube etc.

Maybe even make this smart enough to fully load a page and then only replace the html that is different from the current page? This way the api doesn't have to respond with very specific content elements. At the same time specific content elements could be served way faster! Don't know which is better for now?!

Simulate event "click" (right click):

http://stackoverflow.com/questions/7914684/trigger-right-click-using-pure-javascript

Currently if all conditions are met for an event it will trigger. If the event is persistent (doesn't get removed after triggering) it will from then on always get triggered even if only one subcondition is triggering. This can be OK but there could be situation where the event should be persistent but all conditions for triggering the event should be reset.

Implement an option to reset the event after triggering it. This will only be used if the event is persistent.

Implement button injection for forms. Buttons need to be implemented with type="button" and formaction="...". The formaction attribute has to contain the request uri which will always get triggerd as post request.

This will be useful in order to request e.g. ui elements from the api that are not loaded.

Messages and actions should be stored in one place. Messages and actions should be used for both respectively since they can be designed similarly.

First example would be the request/redirect callback, which looks the same for both. On the other hand they could look and work differently in the future which means they need to be handled separately.

Templates by nature get added and removed from a page (often in order to reuse existing html to minimize the html load). The problem with templates is that they need to register in the ActionManager.js. A listener currently is only registered once per id.

Since templates often keep the same id for some elements this results in a problem because the new template will not register a new listener.

Possible solutions:

1. Force unique ids for templates during setup (pro: fast and easy initial solution, con: action event pollution not solved)
2. Whenever a dom element with action elements is removed, also unregister the listeners (pro: clean solution, con: difficult to implement)

Solution 2 will be implemented. Maybe this can be performed in the dom removing action events or a dom listener would be required to listen for these dom elements.