maslosoft / binder Goto Github PK

Add events to fancytree, ie:

fancytree: {data: app.model.Content.PageItemTree, on: {click: func, mousedown: func}}

Events should include:

• mousedown
• click
• dblclick
• activate
• deactivate
• drop

This might be useful in one (more?) scenario:

Let's name event validate-all

1. User omitted required field
2. Submits data - here validate-all event be used
3. Server side validation is performed
4. Server side generated error message is displayed
5. Non-valid fields should be highlighted - by event validate-all

This could have options, like:

event.data.showResults = {
    success: false, // Don't show success validation
    error: true // Show error validation
};

Solution with showResults could be used to emphasize invalidated inputs, rather than all.

Cons: This could lead to massive validation calls on complex forms.
Maybe also could limit to some particular model or by callback etc.

The most important is to allow auto sizes, which should by default use properties:

• autoXs
• autoSm
• autoMd
• autoLg

And should add CSS classes like following:

• col-xs
• col-sm
• col-md
• col-lg

Add option to pass view model for tree selection via checkboxes. Proposed syntax:

<div data-bind="fancytree: {
    data: app.model.Tree, 
    selected: app.model.MySelectedItems, 
    options: {checkbox: true}
}">

This should update selected items when checkbox is cheched.

log binding should simply console.log any value passed.

This should also output element, to which it is attached.

When reloading data, especially on htmlValue, it is probably leaking mem, check if can be mitigated by using node disposal mechanism from ko.

• Rename folder dev to docs

• Make headers dependent if embedded, possibly detected by checking if defined('YII_DEBUG') or other constant.

• When embedded into page - display only header and docs - but also include models and customized CSS

• When standalone display styles etc.

• Need to rename all app.<fields> to koBalin.<fields>, and use in next point

• Need to alter applyBindings to only act on part containing documentation

Currently even if nodes are same, the grid gets reloaded. It should update only when something was changed.

NOTE: Each change should trigger update, also on invisible column, as later some widgets might rely on it.

Ko punches offer syntax sugar to ko, intergrate it too.
https://mbest.github.io/knockout.punches/

Specially important part is Namespaced dynamic bindings, ie:

ko.bindingHandlers.data = {
    getNamespacedHandler: function(binding) {
        return {
            update: function(element, valueAccessor) {
                element.setAttribute('data-' + binding, ko.unwrap(valueAccessor()));
            }
        };
    }
};

When using over relative displayed container, drop indicator might be below this container

There should be noinit build target, so it could be manually initialized.

Files should have -noinit suffix, ie:

ko.balin.min.js
ko.balin.js�
ko.balin-noinit.min.js
ko.balin-noinit.js

noinit target should not contain _init.coffee

See #12 for details, still to implement:

• mousedown
• drop

Should incorporate sticky-kit.

Should automatically un-stuck by default on small screens. But this mustshould be configurable too.

Proposed syntax:

Most simple initialization:

<div data-bind="sticky: true"</div>

With options:

<div data-bind="sticky: {bottoming: true}"</div>

When modifying content from external tools, it must update view model too, possibly at the end of queue via setTimeout with 0 value.
Test scanario:

1. Select heading
2. Click center text
3. Click clear-block (should revert text align to left)
4. Save
   Current:
   Text reverts back to center
   Expected:
   Text remain left floated

Bundle build should contain all basic deps:

knockout
knockout-sortable
knockout-es5
ko-balin

This is meant to work with any validator, implementing "interface".

There is need to support multiple validators, ie:

RequiredValidator
UrlValidator

Proposed syntax:

<input ... data-bind="validator:  {class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}"

For multiple validators it should be refined as array:

<input ... data-bind="validator:  [{class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}, {class: Maslosoft.Validators.Required, param1: true, param2: 'This is required'}]"

After validation it should add (configurable) css class, ie error to input/active element.

And add (configurable) css class to parent element, ie has-error.

After sucessfull validation. there should be added success clases.

Validation must work for input, textarea, but also for contenteditable fields.

Error messages:

There is open matter of where error messages should be added, possibly on init There should be added predefined element (if not exists). This element could be defined like that:

div.error-messages

Should create use div with css class error-messages (or help-block for bs compat), as in zen coding.

Option 2:

Set observable variable with messages. Then it could be used anywhere.

This actually should be part of concrete validator implementation, not validator binding handler
Example:

<input ... data-bind="validator:  {class: Maslosoft.Validators.Required, errors: observableArray, param1: true, param2: 'This is required'}"

This has implication, that when reordering dragged name is of last selected folder, not dragged one.

Reordering operation however works properly.

Maybe event should bubble up or something like that.

Currently dnd reorder saving need to be handled externally.

Dnd should update viewmodel.

Possibly some glitches might arise, as when updating view model tree will be re-evaluated, and node will be already rearanged.

Tree drag and drop must be simplified, with possibility to ovverride by options.

It should be as simple as:

<div data-bind="fancytree: {data: app.model.Tree.children, dnd: true, onDrop: action}" />

Where action should get node and parent node or somthing similar.

It might be the case when treegrid is not visible/evaluated.

    Expanders.prototype.updateExpanders = function() {
      var defer, one;
      one = (function(_this) {
        return function(item, data) {
          var hasChildren;
          hasChildren = data.children && data.children.length; // HERE error is raised
          if (hasChildren) {
            item.find('.no-expander').hide();
            return item.find('.expander').show();
          } else {
            item.find('.expander').hide();
            return item.find('.no-expander').show();
          }
        };
      })(this);

This should allow:

validator: {class: someClass}
validator: {_class: OtherClass}

to be both valid

This should allow jumstart new validator by providing basic validator messaging implementaion.

Here's similar concept in php:

    /**
     * Custom error message. May contain special placeholders, ie: {attribute}, {value}
     * which will be replaced with attribute label or value, depending on validator.
     * @var string
     */
    public $message = null;
    private $messages = [];

    public function addError($message, $params = [])
    {
        if (!empty($this->message))
        {
            $message = $this->message;
        }
        if (!empty($params))
        {
            $message = str_replace(array_keys($params), $params, $message);
        }
        $this->messages[] = $message;
    }

    public function getErrors()
    {
        return $this->messages;
    }

See http://jsbin.com/zopod/1/edit?html,css,js,output for popover dynamic initialization.

Should have option to point to content id by selector.

data-bind="popover: title, content: someContent"
data-bind="popover: title, contentId: selector"

The proportions binding handler could set height of element, based on proportions to it's width.

Things to consider:

• When to update height? On resize? What if layout will change without resize?

See Maslosoft/IlmatarWidgets#46

These might contain margins etc. which might alter apperance while should not

Current:

Expanding or collapsing node causes attached event to fire, ie. it causes selecting node and action call.

Expected:

Should only expand/collapse node.

Example:
Initial:

After dnd:

After remote reload:

To make it more responsive it should only set width CSS style to pixel value and height to auto.
Additionally max-width and max-height to 100%

awesome-rating has already knockout binding built-in, should be easy to include.
See: https://github.com/bandraszyk/awesome-rating

1. Tags
   1. Should have btn btn-default styles
   2. Additionally padding: .2em 0.4em; and margin: .1em;
   3. Proper floats/display as required by select2
2. Input
   1. Need class form-control
   2. Additionally border: none; and box-shadow: none;

More on styling https://stackoverflow.com/a/21903469/5444623

And shown only when needed. This should prevent flickering. Maybe...

There are several more binding handlers available in misc folder.

These should be migrated into coffee classes.

As the fanscytree is no longer maintaned

Create model binding, for example:

<img data-bind="model: app.model.Image, fields: [id, name, title]" />

Should create (line breaks for clarity, should be in one line):

<img data-model="{
    id: '1231029438120498', 
    name: 'lots-of-bees.jpg', 
    title: 'Lots of bees!', 
    _class:'Maslosoft.Mangan.Model.Image
'}" />

Notice that _class field should be added regardless of fields set.
Param fields should be optional, defaulting to all model fields.
This could be used for wysiwyg links, images, videos to store extra data.