droppe / lu Goto Github PK

This should work in tandem with list and container.

List and Container will be primary responsible for identifying what to select.

The parser should allow developers to pre load required components before execution.
The paser should relay on Jquery to do deep dom traversals.

Build/fix Switcher

-Events cleanup
-Exports logic

-Event Cleanup
-Exports Cleanup

build an alert control; also merge together Container, Loader, and Tip

JS Code
HTML examples
Functional completeness
Documentation + Example in Primer
Unit testing (work with Kiro)

Container should be merged with loader. Container should additionally take a content setting. This setting should accept either a string or a URL. If it is a URL the content should be a-synced in and then an Iframe should be created with the height and width of the container and a src of the url. If the setting is a string, it should be escaped and then injected into the container.

Whenever content is injected, the container should set it's height/width to the contents height/width unless already specified w/CSS.

Also, keep in mind that the container should be as generic as possible. It's instances should respond to use case specific events and apply styles.

Yay! Root Canals are awesome.

Buttons seem to have stopped working. A Next button doesn't seem to trigger a "next" event, nor does a Select button trigger a "select" event. Investigating.

Since Athena uses CSS for its hooks throughout, can we add classes to the html tag as we are initializing? This would help with ensuring things render correctly when Athena does not load properly. For example, $(html).addClass("athena-pending") while the athena framework is loading, and $(html).toggleClass("athena-pending athena-ready") after the ready event fires?

The primary use case is something like a carousel. I'd like to be able to avoid the flash of unstyled content if I know JavaScript is working, but when JavaScript is disabled, let the carousel display all of its items.

Hi Robert, I just cloned a fresh copy of AthenaUIFramework, and when I go to carousel_a.html in my browser, I get an error stating "data is not defined". Do you also get that error, or do you have outstanding changes that aren't yet checked in? Thanks! --Jim

A dual state switch button that is specified as:

  <button data-lu="Button:Switch" data-lu-config="{
    'Button:Switch': {
      states: 'a b'
    }
  }" type="button">AB</button>

should disable itself when both state a and state b are active.

Build does not compress controls.

Build/fix Tabs control

JS Code
HTML examples
Functional completeness
Documentation + Example in Primer
Unit testing (work with Kiro)

-Event Cleanup
-Logic for identifying what to select should be moved to list.
-Exports Cleanup

This is probably solved by application programming, but there is the case when a Carousel is in a Tab. In that case, the Tab knows when the Carousel is and is not visible and so, the Tab can trigger a "pause" event on hide and a "play" event on show.

This should take a space delimited string of events in action, and cycle through them on the event specified in on.

Unit testing caught this one.

Details: Calling pause, then play, then pause, then play, skips items intermittently.
Cause: the timer
Solution: When the carousel is paused, the timer in the recurse() function should be cleared, otherwise the function will continue executing.

Build/fix Tip control

JS Code
HTML examples
Functional completeness
Documentation + Example in Primer
Unit testing (work with Kiro)

Local Storage errors are thrown in early versions of IE. I suspect this is an issue with inject. Please Investigate, fix it if it the error is in Lu, or file a ticket for inject.

Delegates may solve this problem....

Not 100% sure on this, but if you're trying to trigger events on page load from Component A to Component B where B is later in the DOM, since B is parsed after A, it never picks up the event.

MVP is:

• Asks for a path to output lu.js and Lu controls to.
• Asks what version of Lu controls to copy.
  • Subsequently, can grep for what versions are available.
• Accepts command line args
• Will combine underscore mixins, ptClass, and lu.js
  • Only if specified by user.
• Asks for a compilation level and then compiles both lu.js and Lu controls at that level.

Build/fix Carousel control.

JS Code
HTML examples
Functional completeness
Documentation + Example in Primer
Unit testing (work with Kiro)

-Events Cleanup
-Exports Cleanup

-Events Cleanup
-Exports Cleanup

This should fàcade browser developer consoles where available and catch console calls when a browser console is not avaliable.

Build/fix Dropdown control

JS Code
HTML examples
Functional completeness
Documentation + Example in Primer
Unit testing (work with Kiro)

-Events Cleanup
-Exports Logic
-Form Controls should be moved to the ui Level

-Events Cleanup
-Exports Cleanup

This can be achieved by hijacking $.fn.on. Controls should always be aware of all events triggered on the node used in their instantiation even if propagation is stopped.

-Events Cleanup
-Exports Cleanup

Steps to repro:

1. Checkout latest AthenaUIFramework
2. Start server: node server.js
3. In Chrome, open: http://localhost:3000/examples/Tip.html

Stacktrace:

Uncaught TypeError: Object #<klass> has no method 'trigger'
Athena.execute.setData.executed                                         /scripts/libraries/athena/athena.js:194
_.each._.forEach                                                                       underscore.js:82
execute                                                                                        /scripts/libraries/athena/athena.js:193
Athena.execute                                                                          /scripts/libraries/athena/athena.js:240
jQuery.extend.each                                                                   jquery-1.7.js:660
jQuery.fn.jQuery.each                                                               jquery-1.7.js:274
Athena.execute                                                                          /scripts/libraries/athena/athena.js:237
require.ensure.ensureExecutionCallback                            inject.js:1279
execute                                                                                        inject.js:1015
afterDownload                                                                            inject.js:977
afterDownload                                                                            inject.js:977
afterDownload                                                                            inject.js:977
afterDownload                                                                            inject.js:977

Also, Tip:Right seems to still work...

When setting List.index(n), where n > the list size, it does not trigger an out-of-bounds event.

Clicking on 'athena-data="Button"' elements on the in_arbys page, regardless of DOM placement or config/no config, causes a "event is undefined" jQuery error. All other types of buttons work fine (e.g. Button:Next, etc.).

-Event Cleanup
-Exports Cleanup

Instantiate non-athena elements as athena elements when observed

Example:

<div class="tab-control" data-athena="Tabs">
  <ul class="tab-panels" data-athena="List">
    <li id="a1" class="athena-selected" data-athena="Container">
      <img width="600" height="229" src="http://www.arbys.com/assets/templates/arbys/images/ultimateAngusMainImage.png" alt="Ultimate Angus Sandwiches">
    </li>
    <li id="a2" data-athena="Container">
      <img width="600" height="305" src="http://www.arbys.com/assets/images/sandwiches_melts_category.png" alt="Roast Beef and Curly Fries">
    </li>
    <li id="a3" data-athena="Container">
      <img width="375" height="219" src="http://www.arbys.com/assets/images/market_fresh_sandwiches_category.png" alt="Old School Sandwich Deliciousness">
    </li>
  </ul>
  <!-- BUG: if the div below is uncommented, the control stops working -->
  <!--<div class="tab-list-container">-->
    <ul class="tab-list" data-athena="List">
      <li class="athena-selected">
        <a href="#a1" data-athena="Button:Select">Image A1</a>
      </li>
      <li>
        <a href="#a2" data-athena="Button:Select">Image A2</a>
      </li>
      <li>
        <a href="#a3" data-athena="Button:Select">Image A3</a>
      </li>
    </ul>
  <!--</div>-->
</div>

//TODO: USING JSON.STRINGIFY WILL BREAK IN OLDER BROWSERS
Athena.decorate = function( $element, keys, settings ) {
var nodeKeys = ( $element.attr( ATTR ) ) ? $element.attr( ATTR ).split( ' ' ) : [];
keys = _.union( nodeKeys, keys );
settings = settings;
if( settings ) {
return $element.attr( ATTR, keys.join( ' ' ) ).attr( ATTR + '-config', JSON.stringify( settings ) );
}
return $element.attr( ATTR, keys.join( ' ' ) );
};

I've refactored Tabs to work as a master List and slaved Containers (removing the second slaved List). Oliver pointed out that as a result of this, there's a slightly-confusing issue now due to the fact that the master List adds "athena-selected" to the selected list item, while the related tab-panel Container has an "athena-hidden" class which gets removed. It would be clearer if both the list item and the container were flagged with an "athena-selected" class. This issue is due to the fact that Lists add a class while Containers remove a class. So, to fix, possibly extend Container to a TabContainer class which works with "athena-selected" instead of "athena-hidden".