jidesoft/jidejs

Modern Javascript and HTML5 based UI control toolkit.

jidejs's Issues

"foreach" binding doesn't work with arrays of primitives

At the moment, it is not possible to use a "foreach" binding in a template if it iterates over an array (or ObservableList) that is not an object (such as an array of strings or numbers).

This happens because of how we create a new context (by creating a new object whose prototype is the original data). At that point, we need to verify that what we received actually is an object and create one if it isn't.

Example:

<ul bind="
    foreach: component.values
">
    <template>
        <li><span bind="text: $item"></span></li>
    </template>
</ul>

The above example doesn't work if the values property is an Array/ObservableList of Strings.

This issue should be fixed in jidejs/ui/bind.js createContext function.

Analyse performance

We need to find issues with jide.js performance and try to find things that can be improved and made faster.

For each performance problem that is found, a new issue should be created.

Support Browserify even when using Templates

One problem with the compatibility for Bower is that we seem to be unable to use external template files if we intend to use the 'is' binding to upgrade an element to a control.

The reason for this is quite simple: We can not require some previously unnamed dependency.

An approach that requires a custom browserify transform forces us to push the dependencies to the exported string and from there to the Template element, to the Skin and finally to jidejs/ui/bind where we really need it. That solution is not exactly clean and we need to find out if there is a better way.

Fix jsdoc

The generated jsdoc contains lots of duplications.

Every class is repeated and ever method too, so that every method is documented four times. We need to find a way to prevent that from happening.Perhaps we can use a newer version of jsdoc or we can fix it by modifying the template. Possibly there is something wrong with our jsdoc tags.

Website: Minification breaks some dependencies

When I use the optimize:website task, the gulp-uglify module seems to be having problems with some of the dependencies (CodeMirror and Faker) where it produces encoding errors for certain regular expressions that use unicode ranges.

I'm not sure where that issue comes from (suspects: Gulp, gulp-uglify, uglify) so that needs some more exploration.

Skin.queryComponent never resolves if element has not been upgraded yet

In line 283 in Skin.js, we verify that the source of the event is the element we're looking for, however, we use the wrong property (sorry!). We should use the "source" property instead.

if(element === event.source) {

would be the correct approach.

Website does not work.

The site http://js.jidesoft.com/ referenced on this page doesn't work, are there copies of the documentation anywhere?

Add Observable.fromPromise method

Being able to convert a Promise into an Observable is a useful feature. The method should be compatible with common Promise APIs (such as the new browser standard) and our internal, limited, Promise API.

Exclude unneccesary files from npm

Take a look at our bower.json and exclude similar files from our npm package.

Mail Demo: Fix icon alignment in IE11

The icon alignment for the Mail demo is totally off in IE11 (and probably older IE versions, too). All icons are displayed at the upper left corner instead of being centered.

Improve API Documentation

Currently, the API documentation is incomplete. We need to add more details to it, explain the API better and add more code samples.

This task also includes improving the visual appearance of the API doc.

Restructure Developer Guide

Currently, the Developer Guide is... a mess. We need to restructure it in a way that makes sense.

Suggestion:

• Installation
  • Manual Installation (require.js)
  • Installation with Bower and require.js
  • Installation with NPM & Browserify
  • Yeoman Quickstart - how to use the Yeoman generator for jide.js
• Core Concepts
  • Observable values - introduce Observable, ObservableProperty, EventEmitter and ObservableList
  • Using Controls
  • Using Layouts
  • Control/Skin/Template - explain the separation of concerns in jide.js Controls
  • Template Binding - Explain how the supported bindings work
    • text
    • html
    • content
    • on
    • foreach
    • is
    • Custom Binding - explain how to add a custom binding to jidejs/ui/bind
• Introduction
  • Project creation - create a project using Yeoman with Bower, require.js & gulp.js
  • Customization - use content of Yeoman Quickstart and Custom Controls, best to split into more sections
  • Building - explain how to build an optimized package using the gulp.js task

jidejs/base/Util.isElement throws exception when passed non-object

If the value passed to jidejs/base/Util.isElement is not an object but a primitive value (such as a Number or Boolean), it will throw an exception due to the usage of the "in" operator.

We need to make sure that the argument passed to it is not a primitive value before using the "in" operator.

Add minimal introduction to require.js/AMD to the guide

The little critical feedback I have received so far is focused on expecting people to be familiar with AMD/require.js or to read through their documentation. Which means that we currently require previous knowledge of jide.js or interrupt their learning by forwarding them to the require.js/browserify websites.

Thus we should introduce the require and define functions as part of the guide as if they were a part of jide.js. The same should be done for Browserify.

Add support for asynchronous computed Observable

If the value generated by an Observable.computed (on read) is a Promise, we should notify its listeners only after the Promise has been fulfilled. This will open various possibilities when used in combination with Observable#map, i.e.

var url = Observable('/foo.json');
var json = url.map(function(url) {
  return xhrPromise(url);
}).map(function(content) {
  return JSON.parse(content);
});

jidejs/ui/bind should update on animation frame

In order to prevent useless updates of the DOM, it would be favorable if jidejs/ui/bind scheduled its updates on the browser render loop (using requestAnimationFrame).

This will require a few changes to Observable.computed to allow manual dependency management in addition to the automatic one (we need to calculate dependencies in an async callback).

Promises are never fulfilled unless they are already resolved

The notify function is only invoked after a new listener is added. We need to add a call to notify when the Promise is fulfilled or rejected, too.

Dispatcher.nextTick(notify.bind(promise));

ObservableProperty.install generates incorrect dispose method

When I updated ObservableProperty.install to support settings (no-bubbling, etc), I seem to have forgotten to also update the dispose method.

This means that controls can not be disposed correctly.

Correct version:

installer.dispose = function(instance) {
            for(var i = 0, len = names.length; i < len; ++i) {
                var nameObj = names[i],
                    name = nameObj.name;
                instance[name+'Property'].dispose();
            }
        };

Add Guide for usage with Browserify

We need a new guide/chapter which explains how to use jide.js with Browserify.
It needs to mention deamdify, browserify-jide-template and the different path name when using jide.js with browserify.

With AMD a module name starts with jidejs, i.e. jidejs/ui/control/Button, however, with Browserify, its name is jide/ui/control/Button.

Improve API Documentation generation

It turns out that we're doing it wrong. After some experiments with jsdoc 3.3 (alpha), I was able to find a markup that works (includes inherited members, etc.).

/**
 * This event is fired whenever the user invokes the button, usually through a click or tap within
 * the bounds of the button. If the Button currently has the focus, it might also be fired through keyboard
 * events such as the spacebar or the enter key.
 *
 * It can be observed by listening to the `action` event of a Control.
 *
 * @event module:C#action
 * @type {object}
 * @property {HTMLElement} source - The source of the event
 */

/** 
 * The base class for all buttons.
 * @module C
 */
define(['B'], function(B) {
    /**
     * Creates a new ButtonBase. Must only be invoked by subclasses.
     *
     * @constructor
     * @alias module:C
     * @extends module:B
     * @param {object} config The configuration.
     * @param {boolean} config.enabled `true`, if the button is enabled; `false`, otherwise.
     */
    var exports = function ButtonBase(config) {
        installer(this);
        config = _.defaults(config || {}, { tabIndex: 0 });
        if(!config.skin) config.skin = new ButtonBase.Skin(this, config.element);
        Labeled.call(this, config);
        this.classList.add('jide-buttonbase');
    }
    Class(ButtonBase).extends(Labeled).def({
        /**
         * `true`, if the button is enabled; `false`, otherwise.
         *
         * A disabled button does not react to user interaction. Set the value of this property to `false` if a
         * command is currently not available.
         *
         * @type boolean
         */
        enabled: true,
        /**
         * `true`, if the button is enabled; `false`, otherwise.
         * @type module:A
         */
        enabledProperty: null,
        command: null, commandProperty: null,

        dispose: function() {
            Labeled.prototype.dispose.call(this);
            installer.dispose(this);
        }
    });

    return ButtonBase;
});

It is extremly important to include the var exports = part when defining the constructor. If that line is not present, inheritance documentation will not work.