hivesolutions/uxf

Simple client side framework for people who want fast results

uxf's Issues

Support for changing the a component's data-object after being set

Description

When the data-object attribute is set for a component, it can no longer be changed by calling uxobject("newname"). The underlying code actively ignores the change, testing if that value is already set and returning in case it is.

A situation where it would be desirable to be able to change the data-object is when implementing the "reset" method when there are two components operating over the same HTML element and one is already handling the "reset" method (not the one we want). The reset method called is that of the component defined in "data-object".

Performing uxreset on a dropdown does not erase label

Description

When performing "uxreset" on a "dropdown" component, the input is erased, the selected list item is unselected, but the label in the button still shows the selection.

Tagfield support for not allowing duplicate values

Description

The tag field currently allows selecting the same value from the data source twice, creating duplicate tags. In some situations it is required to only allow selecting one tag once (making it disappear from the data source when selected).

uxcountries plugin to convert country representations

Description

Need to be able to convert between different country representations (eg: PT -> Portugal).

Support for listening to drop-field's blur and focus events

Description

It's currently not possible to listen to the focus and blur events on a "drop-field". The only way to do it is to bind these events on the underlying "text-field" which violates the desired encapsulation.

Support for html tags in drop-down button

Description

Currently, to set the content of .button-drop-down there's a data attribute data-name in the <ul> element, like this:

<ul class="drop-down drop-down-size" data-name="{{ 'Your size'|locale }} ({{ country|locale }})" data-input="size">
...

This produces the following html

<div class="drop-down-container visible">
  <div class="button button-drop-down drop-down-size">Your size (France)</div>
...
</div>

With this approach is not possible to include html notation in the .button-drop-down contents, to produce something like this

<div class="drop-down-container visible">
  <div class="button button-drop-down drop-down-size">Your size <span class="scale">France</span></div>
  ...
</div>

Drop-down part change trigger

Description

Even if input value changes automatically trigger a change event, that does not occur with hidden inputs, so it must be done manually.

So, I suggest to change the following lines in uxf/js/ui/drop_down.part.js:
input.val(original); -> input.val(original).trigger('change');
value && input.val(value); -> value && input.val(value).trigger('change');

Feature detection and decoration

Description

It should be possible to "query" the body of a document to find out if a certain feature is available under the current execution environment (caniuseit).

eg: jQuery.hasfeature("transition")

Notes

This features is required for the proper enabling of the hardware accelerated overlay

Drop-down part support for reset

Drop-down part

Reset

It would be nice if it was possible to revert the drop-down back to its initial state (regarding both the presented text and the hidden input value).

Tagfield value_unselect event

Description

There is currently no way to listen for when a tag as removed from the tagfield.

Solution

Currently tagfield changes can be listened to through the events fired by the underlying dropfield (eg: value_select). There is no way to know when tags are unselected this way though. Perhaps the tagfield should trigger value_change, value_select and value_unselect events itself.

Dropfield has no classes indicating when the list is open or closed

Description

The dropfield component has no classes indicating when the list is open or closed. This is required for when special styles are to be applied in the dropfield when the list is open (for example).

Embedded support for lazy loading of images

Description

It should be possible to load image items using a lazy loading strategy avoiding extra bandwidth usage and having a more uniform and up-to-date experience.

The images should be loaded once the user reaches the proper y scroll position of the image.

Estimation

0.5 days

Inspiration

http://luis-almeida.github.io/unveil/

Support for not defining non-localizable tags

Description

All javascript template tags are localized in case a matching string is found in the localization bundle, however, this is not always desirable. Support for defining which tags should not be localized would solve this issue.

Dropdown components have no support for uxvalue

Descriptions

Most components respond to uxvalue(), like "dropfield" for example, however "dropdown" does not. To guarantee that components have an uniform way of accessing their values, this should be implemented for dropdown as well.

Support for ISO country codes data source

Description

The iso countries data source uses the country name as both the identifier and the display value:

https://github.com/hivesolutions/uxf/blob/ceaea455126c5b7c35f9daec17d723d905eb4692/js/data/data_source_isocountries.part.js

https://github.com/hivesolutions/uxf/blob/ceaea455126c5b7c35f9daec17d723d905eb4692/js/locale/base.en_iso.part.js

It would be useful to have a data source where the identifier values are two letter iso country codes.

Add data-error support do dropdown

Description

UXF form components usually have support for displaying an error (eg: textfield, dropfield), but dropdown doesn't.

Clear error on open of form ajax

Add support for disabling "apply" in filter component

Description

The filter component runs apply for each instantiated template, which can make things slow when the number of instances is too big. Adding support to disable this operation when not required can make it faster when needed.

Dropdowns don't have a class "selected" on the selected <li> element

Description

In drop-downs the selected element

doesn't have class "selected" (or any other name). It's not possible to apply a style to the selected element without using JS.

The button-filter puts the "selected" class on the selected <li>.

Checkfields toggle when check-field-label is clicked even when disabled

Description

With the following code, when the user clicks the "check-field" nothing happens because it's disabled (expected behaviour). However, when the user clicks the label the "check-field" still toggles.

<div class="check-input disabled">
      <input type="checkbox" class="check-field disabled" disabled="1" value="1" data-checked="1" />
      <label class="check-field-label">Label</label>
</div>

Solution

Make the "check-field-label" click event abort when the "check-field" is disabled.

Show all tagfield options on focus

Description

It would be desirable in some scenarios to show the user the options he has available in the tagfield the moment he focuses on it. This is for scenarios where the number of options is small and the available options are not obvious to the user.

Solution

This doesn't seem like a tagfield concern per se, however if there was a way to manually trigger it to show all options, then this issue could be solved by the application using the component. This support should probably be added at the level of the dropfield, since the tagfield uses the dropfield behaviours and this may be desirable for both situations.

Drop-down part support for enable/disable

Drop-down part

Enable/disable

It would be nice if it was possible to enable/disable the drop-down (meaning: applying a "disabled" class, disabling the click event, clearing the input and possibly closing the drop-down) based on an event.

Change event not called when a checkfield/radiofield's label is clicked

Description

Clicking a radio field's label changes the radio field's selection state, however, it doesn't trigger the "change" event like clicking on the box does. The same happens for checkfields.