ninja / ui Goto Github PK

When hovering over a rating star, the css should specify a pointer cursor to indicate interactivity.

Since autocomplete replaces the browsers built in autocomplete, the generate input element should have autocomplete=off. It's a little awkward to do:

$autocomplete.find('input').attr('autocomplete', 'off')

I would like to have some kind of API for all the controls, I found a few things here and there, but nothing official.

Create and document build script process for releasing a Ninja UI version to the CDN on the website.

Add spinner icon to autocomplete until list displays after an AJAX call.

Merge any redundant styles in ninjaui.css to decrease the size.

Lists are no longer completing the autosuggest nor closing the menu after selecting. This is likely a regression caused by the move from document.body to parent object appending.

Specified colors are returning different values. Determine cross browser css attributes to test for, instead.

Create process for generating/maintaining online API documentation. Embed this into ninjaui.com, ideally side by side with live examples.

Most of this work has been accomplished. Adding this issue for tracking.

• test within a single offline web page
• test against every supported version of jQuery at once
• allow testing against the latest version of jQuery only for development

For each object targeted by the 1.0 release, ensure there are at least three passing specifications.

I believe the following would be a good base for a specification of a remake of the Ninja UI into a Derby component library:

Browser compatibility

Based upon majority usage, not all inclusive.

My suggestion is:

• Desktop: IE8+, latest FF, Chrome, Safari
• Mobile: iOS5+, Android ICS stock browser+, WP8+

Usability

Really good and intuitive

Compared to the rest of my points where I believe it's better to leave quite a lot (of people) behind, I think this is one area where it would be beneficial to make sure to put some extra effort in. My suggestion is:

• Good keyboard support
• Good touch event support
• Progressive enhancement - controls should work decent even without JavaScript. Not because JavaScript won't be available in the target browsers, but because A: it'll support a better pattern of writing code and will be easier to implement into existing applications (one can become so frustrated with using libraries where one cannot use normal features, like submitting a form through a click because the "button" is actually an a-tag), and B: it'll, I believe, make it easier to maintain in the long run . Also, this is right in line with Derby's aim and structure.
• Because of above, it'll most likely also be easier to achieve support for screen readers and such. A decent support for less capable people will be a huge win (I'd rather pushing people to update into a newer version of their browser than expecting blind people to suddenly be able to see).
• HTML-wise, not too expressive, but not necessarily minimalistic either (rather focus on functionality, simplicity of CSS and usability in general)
  Another win with a good, standard-like way, which works okay with or without JavaScript, is that it's way easier for others to use your site for various reasons (SEO, other usage of data-mining).

Design / CSS / Effects

Great and intuitive, slick. Really critical.

I think this will be the most critical point for success. Whether we like it or not, without a good design, anyone will almost instantly shrug away. Also, then the developer using Ninja UI will have to do so much more him/her-self. Secondly, a good code simple, quite small, structure for the CSS is also critical. Preferably using something like LESS or Stylus where mixins and variables produces a good structure. Then, implicitly, Ninja UI will be way more customizable than most libraries/frameworks because it will be easy for anyone to go straight into the code and change what they want. CSS is not complicated. Neither is LESS or Stylus. A themeroller way of thinking easily produces extra code, which really is the opposite of customization with this point. Also it's way more complicated to keep up to date, both as a developer of and using Ninja UI.

To summarizing my suggestions:

• Simple, well structured, quite small, code base
• Excellent default design
• Using something like LESS or Stylus with mixins and variables
• Never let any thoughts of having a themeroller in a negative way affect above points

Functionality

Find a balance between how many components and how much each consist. Never loose sight on above points.

My suggestion here is to:

• Rather do one thing a 110% great from above points than trying to add functionality
• Not all inclusive - rather build a good standard functionality which is relatively easy to extend
• Find a balance between functionality in terms of macro and micro - meaning how many different components you will provide each version compared to how customizable and all inclusive each component is
• Good code structure with a good philosophy behind it, which together with not making it all inclusive will make it quite easy to understand, change and extend existing functionality. Not critical, but at least aim for decency.

In general

Tests and Derby's philosophy are nice things to have. Speed must be 90% excellent.

Also, I suggest to keep in mind the following:

• Always keep performance as a priority - performance and speed is critical to usability. This includes size, number of files, JavaScript speed, etcetera. Note that this doesn't mean the code has to be a 100%. Rather I'm a firm believer that 90% better performance can be done at 10% of the time it takes to make something a 100% speedy. Don't waste time but make sure it's good when it comes to performance and speed.
• A decent test suite would be nice, which will ensure longevity and keep developers from becoming frustrated with simple bugs appearing repeatedly with new versions. Not necessary at first though.
• Try to adhere to Derby's philosophy of development as much as possible

Anyway, just my 5 cents. Feel free to let me know your thoughts. I'd happily contribute work if I sense above direction is in line with the remake.

jQuery 1.6 dropped support of assigning the className attribute when creating html objects. Need to replace all className assignments with attribute class for 1.6 compatibility. If possible, keep compatible with 1.5.

Fill out remaining tests for current functions.

Extend tabs to integrate with upcoming slideshow object, creating a folder styler navigation.

Refresh website to be a single page with good overview and example code demos for each object and method.

Internet Explorer does not allow appending HTML to a button. We must therefore wrap the menu with a container just like the autocomplete.

I was creating tabs and what trying to figure out why setting it to 1 always chose the first tab since it wasn't mentioned in the documentation and that everything in javascript is zero based index.

For example:
var tabs = $.ninja.tabs({values: [
{html:"no"},
{html:"yes"}
], value: 1});
Would select "no", and not "yes" as expected.

This was changed easily in the ninjaui code by making "0" the default value and removing the "- 1" in

if (i === options.value - 1) {
$tab.select();
}

Under the tabs function.

Certain options between Ninja objects have different names, though they achieve similar purposes. Rename for consistency.

You can't specify the name for the input field with the normal autocomplete options.

It would be nice to do:

$autocomplete = $.ninja.autocomplete({name: 'q'})

However this just puts the name on the wrapping span.

Currently you have to do the following which is neither obvious or convenient:

$autocomplete.find('input').attr('name', 'q')

Need a 3K Gradiated Unicorn SVG for Konqueror as per our discussion.

Convert current shell script into separate Jake tasks.

The use of proprietary Internet Explorer gradients is causing blue backgrounds on all objects. Remove gradients from IE, altogether and document this difference on the site.

Slider touch events have been disabled by the addition of keyboard navigation. Investigate how to let both live together in peace.

Update all included themes to match the new CSS API.

Depending on where the jQuery plugin is loaded in the page, Google Chrome Frame will not load in time to be called.

• remove forced Google Chrome Frame from Ninja UI JavaScript
• recommend instead via web site documentation: http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

Hi

you could use the jquery ui position utility to manage the collision of your popup.

simple to use, it will open your popup on top of the button if it is on the screen bottom.

In rails2.3.1 $.noConflict() breaks ninja's popup ui.
If I put $ = jQuery above the code, then everything works, but this solution is unacceptable.

Description

When the button is pressed an empty popup shows up below it, but nothing is inside it. "Button Selected" is also printed to the console, so the button registers the select event.

<div class="group-button" style="display:none;">
    <span class="icon"><%= image_tag('tag--plus.png')%></span>
    <span>Groups</span>
    <span class="ninjaSymbol ninjaSymbolMoveDown"></span>
</div>

<li id="groups"></li>

<script>
  (function ($) {
    var $popupList;

    var $buttonPopupList = $.ninja().button({
      html: $('.group-button').html()
    }).select(function () {
            console.log('button selected')
      $popupList = $buttonPopupList.popup({
        html: $.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        }).select(function (event) {
          console.log('Stooge: ' + $(event.html).text());
          $popupList.detach();
        })
      });
    }).deselect(function () {
      $popupList.detach();
    });
    $('#groups').append($buttonPopupList);
  }(jQuery));
</script>
</script>

I placed a breakpoint inside the select event where "button selected was printed" and ran this code inside the console

Success

$.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        })

and it successfully returned

[
  <div class=​"ninja ninjaList">​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  <div class=​"ninja ninjaListSpacer">​</div>​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  <div class=​"ninja ninjaListChoice">​…​</div>​
  </div>​
]

failure

when I did the same thing with this code

$buttonPopupList.popup({
        html: $.ninja().list({
          choices: [
            { html: '<div>Mo</div>' },
            { html: '<div>Larry</div>' },
            { html: '<div>Curly</div>', select: function () { console.log('Hey, Mo!'); }},
            { spacer: true },
            { html: '<div>Shemp</div>' },
            { html: '<div>Joe</div>' },
            { html: '<div>Curly Joe</div>' }
          ]
        })})

it failed

<span class=​"ninja ninjaPopup ninjaInline ninjaShadow" style=​"min-width:​ 91px;​ border-top-left-radius:​ 0.3em 0.3em;​ border-top-right-radius:​ 0.3em 0.3em;​ border-bottom-right-radius:​ 0.3em 0.3em;​ border-bottom-left-radius:​ 0.3em 0.3em;​ top:​ 372px;​ left:​ 335px;​ ">​…​</span>

Conclusion

for some reason, it seems as if ninja.js is not handling the $buttonPopupList = $.ninja().button({ part of the code well

Text Area Expand

Split Ninja Icons into a sub-repo.

Doing my part to discourage the use of hovers, mainly because they create usability problems with touch screens, I've decided to remove our hint method for displaying a hint on hover of Ninja Objects.

Another upside, is less JavaScript and CSS for a feature not likely to be used.

Verify that all your base are belong to us.

Merge any assertions that are outstanding.

Allow user to move through series of html blocks with visual navigation or the keyboard.

Allow slider to receive focus via clicking or tabbing, then move via left and right arrow keys.

Rename Dojo theme to Yugen in deference to the JavaScript framework called Dojo.

Need a 3K Animated Gradiated Unicorn SVG for Konqueror That Farts Glitter: Expanded request.

Display a popup underneath the evented object with mouse over.

Stop and go icons are too visually similar. Further, an octagon for stop is U.S. specific.

My planned change is a simple square, with the same border style to match the yield and go icons.

I need a help-icon, e.g. a "?" inside a circle and an icon which represents a menu, e.g. a folder-icon.

unfortunately the font packs can't easily be extended. Do yo have a kind of font source representation and a description how to add new icons (in a vector format, of couse), how to associate it with a character and how build the browser specific font packages ?