joshfire / joshfire-framework

The Joshfire Framework

Joshfire framework

Open Source Multi-device JavaScript framework created and maintained by Joshfire.

The current version of the framework builds upon Backbone.js and require.js. Main features include:

• common views at the core of each application (e.g. layout, list, slide panel)
• an adapter mechanism to tweak the code of certain views when they are run on certain families of devices
• a build system to compile the JavaScript code of an application
• a logging system based on Woodman with a pre-compiler to remove logging code before compilation to save size.
• a few utility classes for usual functionalities.

As opposed to previous versions of the framework, the current version does not impose a particular declaration mechanism for the structure of an app. The router/controller of the app is entirely up to the app developer.

Please note that, while the framework is actively being maintained, the "doc" and "examples" folders are leftovers of the previous version and do not match the current framework. In particular, the examples do not work. Documentation and examples will be updated when time allows...

The documentation of the deprecated previous version can still be checked in the v0.9 branch: https://github.com/joshfire/joshfire-framework/tree/old-master

License

The Joshfire framework is licensed under an MIT license (even the classes that still refer to a dual GPL and Commercial licenses which merely need to be updated)

joshfire-framework's Issues

Philips TV adapter

See Philips branch

Pubsub Infinite loop

When setting children: [] in a UI Tree, pubsub mechanism starts an infinite loop.

Videolist demo - controls & list should fade out

http://framework.joshfire.com/examples/videolist/public/index.leanback.html

set time out to fade out controls & video list
fade in on user action

focusByIndex doesn't update grid coordinates.

the followingline doesn't work well: the grid coordinates are not updated
app.ui.element('/content/itemList').focusByIndex(gotoIndex);

For now, a hack is to do :
app.ui.element('/content/itemGrid').grid.goTo( [gotoIndex, 0] );

tweetmap liste/map to fix ie6

need to fix tweetmap liste/map switcher for ie6.

JsDoc display on ie6

CSS to be fixed

Doc: Add missing JSDoc class descriptions

They appear in the API homepage...

Express version issue

Hi, I'm having trouble using the simple helloworld example, here is what i got when I type

npm install 

npm ERR! Error: No compatible version found: express@'>=2.3.0- <2.4.0-'
npm ERR! Valid install targets:
npm ERR! ["0.14.0","0.14.1","1.0.0beta","1.0.0beta2","1.0.0rc","1.0.0rc2","1.0.0rc3","1.0.0rc4","1.0.0","1.0.1","1.0.2","1.0.3","1.0.4","1.0.5","1.0.6","1.0.7","2.5.0","2.5.1","2.5.2"]
npm ERR!     at installTargetsError (/usr/local/lib/node_modules/npm/lib/cache.js:429:10)
npm ERR!     at /usr/local/lib/node_modules/npm/lib/cache.js:411:17
npm ERR!     at Object.saved [as oncomplete] (/usr/local/lib/node_modules/npm/lib/utils/npm-registry-client/get.js:136:7)
npm ERR! Report this *entire* log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>
npm ERR! 
npm ERR! System Linux 3.0.4-linode38
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /root/joshfire
npm ERR! node -v v0.6.5
npm ERR! npm -v 1.1.0-alpha-6
npm ERR! message No compatible version found: express@'>=2.3.0- <2.4.0-'
npm ERR! message Valid install targets:
npm ERR! message ["0.14.0","0.14.1","1.0.0beta","1.0.0beta2","1.0.0rc","1.0.0rc2","1.0.0rc3","1.0.0rc4","1.0.0","1.0.1","1.0.2","1.0.3","1.0.4","1.0.5","1.0.6","1.0.7","2.5.0","2.5.1","2.5.2"]
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /root/joshfire/npm-debug.log
npm not ok

I'm using

express -v
2.5.2

Integrate Chimney in the release process of an app to remove all logs

In the release command of a command lien tool, add the options to remove every console.log using https://github.com/mikaa123/chimney

Integrate MBP script features (splash, hideurl) into iOS adapter

see mytv app

Contributor license agreement

Copy http://nodejs.org/cla.html ?

videolist example broken on iPad

either ios or leanback version

Add a kitchen sink for UI show-off

use the iframe Youtube player when possible

Youtube players used should be the "new" Youtube player (that uses an iframe, not the embed flash object).
With this new player, Youtube decides to une a flash version of an HTML5 version itself.

On my project, I changed this in the video.youtube element of the iOS adapter (that I use for Android too):

  // options.url : need to be the ID of the Youtube video
  // the src should be like src="http://www.youtube.com/embed/khWXdkryBE4?rel=0"
  this.htmlEl.innerHTML = '<iframe width="' + width + '" height="' + height + '" ' + 
      'src="http://www.youtube.com/embed/' + options.url + '?rel=0" frameborder="0" allowfullscreen></iframe>';

I guess this is obsolete since the new framework based on backbone.js is on its way.

FAQ : why no coffeescript, where is the MVC ?

cleanup beforeX/afterX events

Also research some way to make beforeX handlers able to cancel the method?

add an option for CSS classes on tree.ui definition

Documentation: split part 3 of Getting Started?

Introduces both uiMaster and iOS adapter at the same time...

Blackberry PlayBook adapter

Document the browser adapter

Documentation images do not show on iPad

Documentation images on http://framework.joshfire.com/doc/ do not display on my iPad.

How to reproduce: go on http://framework.joshfire.com/doc/0.9/adapters/node with an iPad 1
figures are broken.
What is expected: see the figures

WebGL map uielement

VideoPlayer send the same event for onPlaying() and onPlay()

When playing a video, the framework should send us these events:

• play (video asked to be played)
• loading (video loading)
• ready (video canPlay)
• playing (at last, video started playing)

Problem: if you look at videoplayer.js, the same event ("playing") is sent for the first and last step... So when receiving 'playing' we can't be sure the video is really playing.

The fix is quite simple but the consequences could be dramatic.

Remove symlinks requirements to fix Windows zip

Require.js implementation will need a few patches to make the examples work and provide a more flexible joshfire/ inclusion path.

tree.ui.set() should try to insert new elements

also check panel.manager implementation

fadeout option in utils/splashscreen

extend in browser adapter?

Clarify commercial license on existing devices (PCs..)

Documentation: include links to code on arduino page

http://framework.joshfire.com/doc/0.9/advanced/arduino

links to github/master?

Integrate Chimney in the release process of an app to remove all logs

In the release command of a command lien tool, add the options to remove every console.log using https://github.com/mikaa123/chimney

UI: show on a children does not work if parent is hidden

Given the following UI tree:
{ id: 'a', autoShow:false, children:[{ id:'b', autoShow:false }] }

If you try to show /a/b without having shown /a, nothing happen.
Is it desired behaviour ?

Wii adapter ?

https://github.com/ryanmcgrath/wii-js

Documentation url does not work

Joshfire docs

-Doc is available online at http://framework.joshfire.com/doc/
+Doc is available online at http://framework.joshfire.com/doc

Remove last slash

fixjsstyle should also fix whitespace/tabs

see samsungtv/utils/navigationhelper.js

Document utils/datasource

Missing background in rss4

background: url(../img/double_lined.png);

no file

ui/list: do not use data-joshfire-child

line 434:

var lastOffset = itemContainer.children().last().data('joshfire-child');

should be replaced (why not use this.items.length ?)

line 578:

var el = container.find('> ' + tagName + '[data-joshfire-child=' + offset + ']')[0];

should read something like

var el = container.find('> ' + tagName + ':eq(' + offset + ')')[0];

Control the minimum time interval between consecutive keypresses

We sometimes need to define a minimum time interval between consecutive keypresses.

On TV in particular, some applications react badly to repeated/extended keypresses on the remote. Doing so can sometimes cause refreshing issues, leading to manipulating DOM elements that aren't updated yet.

Making the application code more robust to unexpected DOM structure can become complex in large code bases. In that case, having a way to control the minimum interval between two keypresses might be useful.

One way to do so without impacting code on the framework side is to redefine the current adapter's processKey method on the client side:

var originalProcessKey = UIElement.prototype.processKey;

// Takes the originalProcessKey and calls it only if it is available.
// Each keypress will make it unavailable for 1s.

var available = true;
var myNewProcessKey = function(event) {

  if (available) {
    available = false;
    originalProcessKey.call(this, event);
    setTimeout(function() { available = true; }, 1000);
  }
}
UIElement.prototype.processKey = myNewProcessKey;

This approach has the benefit of not impacting any code on the framework, and very little on the client side.

However, this approach fails with some view elements.

UIElement#processKey method will call the corresponding action (navUp, navRight, etc.) only if the current view has it, if not, then it will call processKey on the view's origin (this.origin) and will do so until the action is either found or the view has no origin.

Since processKey has been redefined, the new version will be called, which will prevent further call to the original processKey method, making pressing the key ineffective.

A simple way to remedy to this situation would be to add an intermediate call in the framework on each keypresses:

Suppose we are in the UIElement module of an adapter (say googletv for instance):

// Dispatches an event to processKey.
// This can be redefined to allow a delay between
// key presses, often useful on TV.
keyDispatch: function(event) {
  this.processKey(event);
}

With this addition, the above solution would work: we'd only control access to keyDispatch, and processKey will be able to call itself recursively:

var originalKeyDispatch = UIElement.prototype.keyDispatch;

// Takes the originalProcessKey and calls it only if it is available.
// Each keypress will make it unavailable for 1s.

var available = true;
var newKeyDispatch = function(event) {

  if (available) {
    available = false;
    originalKeyDispatch.call(this, event);
    setTimeout(function() { available = true; }, 1000);
  }
}
UIElement.prototype.keyDispatch = newKeyDispatch;

As it currently stands, this little change would need to be rippled to each adapters since key bindings are defined in the adapters' UIElement modules.

Should this approach be kept? Should the framework provide an easier way to control the minimum time interval between consecutive keypresses (maybe as a general helper)?

Philips adapter, video controllers

Currently, we display the video & listen to remote events for play/pause/rewind, ...

We should
Display the videotime line, total time, elapsed time, ..
Display buttons to fire play/rewind, .. events. Some philips remotes don't have those buttons !

Dead links in doc

Thanks Sonny:

Un autre lien mort sur http://framework.joshfire.com/doc/0.9/advanced/performance "Build tools"

http://framework.joshfire.com/doc/0.9/gettingstarted/firstapp3
Le lien vers control.png est mauvais aussi.

"http://framework.joshfire.com/examples/rss3/public/img/control.png"

Provide a general "video" element that switches implementations

and get rid of the "video.mediaelement" class names where they don't make sense

fab prod deploy: force optimize examples & jsdoc first

Implement vertical autoScroll in ui list