This is very much beta code but wanted to share how to add history to the Enyo2 Panels control.  For flavor, I even added html5 history support so if you’re using a Panels controls as the main view controller (like Pane in Enyo1), you get quick back button support.

Here’s the code as well as a quick example (full screen and in jsfiddle):

enyo.kind({
    name:"extras.Panels",
    kind:"enyo.Panels",
    published:{
        history:""
    },
    create:function() {
        this.historyChanged();
        this.inherited(arguments);
        this.createComponent({kind:"Signals", onBack:"back", onpopstate:"statePopped"});
        enyo.dispatcher.listen(window, "popstate");
    },
    historyChanged:function() {
        this.history = this.history || [];
    },
    back:function() {
        this.history.pop(); // current
        if(this.history.length > 0) {
            var last = this.history.pop();
            this.setIndex(last);
        }
    },
    indexChanged:function() {
        this.inherited(arguments);
        if(this.history[this.history.length-1] !== this.index) {
            this.pushState();
        }
    },
    pushState:function() {
        if(window.history.pushState) {
            var c = this.getControls();
            window.history.pushState({index:this.index}, "", "#"+c[this.index].name);
        }
        this.history.push(this.index);
    },
    statePopped:function(source, event) {
        if(event.state) {
            this.back();
        }
    }
});

If you’re looking to support other browsers, you might check out history.js which appears to be a nice polyfill for the history API.

In enyo v1, making an input control appear focused was easy: simply set alwaysLooksFocused to true.  In enyo v2, the styling is delegated to an InputDecorator but it doesn’t provide this same property.  Fortunately, it’s easy to add to a custom subkind.

enyo.kind({
	name:"extras.InputDecorator",
	kind:"onyx.InputDecorator",
	published:{
		alwaysLooksFocused:false,
	},
	create:function() {
		this.inherited(arguments);
		this.alwaysLooksFocusedChanged();
	},
	alwaysLooksFocusedChanged:function() {
		this.addRemoveClass("onyx-focused", this.alwaysLooksFocused);
	},
	receiveBlur:function() {
		if(!this.alwaysLooksFocused) {
			this.inherited(arguments);
		}
	}
});

Had a random idea to implement a <style> tag in Enyo for global runtime CSS manipulation.  I’m thinking it might be handy to resize a bunch of elements as a result of window resize, for example.  I wrote a quick example in enyo v1 and ported the couple differences for v2.

You can either set the entire CSS via its published css property or set individual blocks via the set(classSpec, styleObject) method.

Thoughts?

Edit: Make a quick update to enable removing CSS from a selector by passing a null.  See the example below for removing the border from the children of .app.

Here it is live:

CSS transitions are a really easy way to add basic animation to an enyo app.  It works on (seemingly) any CSS property and takes JavaScript out of the picture.   With Pirate’s Dice (which is still not fully functional …), I’m using them to zoom the background when starting a new game.  I’m also trying to support multiple resolutions (phones in portrait and landscape, tablets, and desktop) using media queries.

Read More

There are two ways to create a scrim in enyo: globally through enyo.scrim or through the enyo.Scrim kind.  In either case, the scrim “fades” the entire view (usually in order to show a modal dialog or a spinner).  Another use case I’m currently experimenting with in Pirate’s Dice is a local scrim — one that only fades a particular portion of the app.

Read More

Created a new Accordion control this evening in my enyo-extras repository.  If you’re not familiar with this style control, jQuery has a similar example.  Take a look and feel free to fork and make improvements!

Next iteration will support scrolling content and horizontal display.

While it’s probably not fair to call this “daily” any longer, I’m going to stick with it anyway.

You may have heard that enyo has found its way onto the legacy devices via a new Maps application in the App Catalog.  To test things out, I tried to deploy Score Keeper onto my Pre2.  It deploys successfully but there are definitely some bugs to sort out.  One way I intend to clean up the UI is by including a phone-specific stylesheet through a dynamic depends.js file.

Read More

I wouldn’t have expected to write so much about events in enyo but there’s a lot of depth to cover.  I previously posted about an Animated Grid Layout control I created which I later used in Score Keeper for the board selection.  I have a similar requirement for the main panes of InContact but also need to reorder the items.

Read More