NetFlix queue style list reordering using AngularJS

Looking at the code you will see that it was kind of difficult to implement this. I ran into several issues with ng-repeat, it's scope, child isolated scopes and $scope.$broadcast and so on. I will blog about those some other time.

This is implemented a reorder directive (which introduces it's own 'isolate' scope) that must wrap the content inside ng-repeat. The reorder directive itself transcludes [1] the contents. As noted above the reorder directive introduces an 'isolate' scope...which may affect some assumptions made by other included content about the $parent scope. I may have to solve it differently.

In any case, here is the demo:

Plunker

Well, drag and drop reordering is probably a better and direct UI paradigm for this kind of stuff. But this is accessible.

A simple JSON object editor using AngularJS

I want to develop a generic JSON editor, driven by json-schema. In preparation for that I developed a simple AngularJS directive editproperty. This directive lets you edit the object in a single line. Also implemented the new directive editobjectproperty. This displays the object and allows direct editing.

You can play with these directives here:

Note that the object keys are sorted.

This demo does not seem to work on Internet Explorer™ - the reason being IE does not like the directives as elements. May have to convert to directives as attributes.

You can download the implementation of the directive here. The implementation uses '=' (which sets up bi-directional binding) style scope to pass in the object from outer scope into the directive. Here is an excellent video by John Lindquist explaining the '=' scope. It also makes use of the $last variable of the ng-repeat directive to deal with comma formatting. I wish looping structures in all languages had some of these kinds of syntactic sugar such as first, last, non-first, even, odd.

BTW this was an excellent exercise in learning the recursive directive and template behavior of AngularJS.

Plunker

Try out

• Add
• Update
• Remove

use cases.

Well...you will say "What is the big deal? I can edit the JSON object as a simple text much faster"...and you would be right. The power of this will become apparent once I hook it up to JSON-schema. With that the property editor will only allow valid JSON object structure and property values in compliance with JSON-schema. I will be using this to implement Chrome Packaged App Manifest Version 2 Editor App.

I found Jsonary.com which is a similar concept. I will explore writing custom renderers using AngularJS and Twitter Bootstrap.

Todo

• Support object properties
• Support array properties  - partially done. I may have to write a new directive editarray .
• Support direct editing of property name and value in editobject tag
• Dropdown of existing properties to select from to edit or remove

Chrome Packaged App Manifest Version 2 Editor App

Started working on Chrome Packaged App Manifest Version 2 Editor App using AngularJS and Twitter Bootstrap.

Download

One of the cool trick I learned while implementing this is demonstrated by this fiddle. It deals with using AngularJS's ng-repeat with an object, and editing the values of properties of that object within it. It makes a clever use of angular.copy() to isolate input-bound variables.

Todo

• Implement Load and Save using file system API
• Implement complete Manifest Version 2
• Eclipse integration
• [Stretch Goal] Refactor into generic JSON editor...possibly using JSON Schema
• Define manifest version 2 JSON schema.
• Use the schema to implement the editor

Modern Art generator App

Here is a silly packaged app. When launched it shows a chrome-less square window with some modern art animation. Clicking on the directional (N, NE, E, SE, S, SW, W, NW) tridrants it creates a similar chrome-less square window with some modern art animation in that direction. Clicking on the center tridrant closes the window. Here is a sample screenshot:

Try it in another tab!

By clicking in various directions you can create endless modern art on your desktop.

I am trying to create display wall type application...and ended up creating this fun app on the way :)

Enjoy!

TIP: -webkit-app-region CSS property

While looking through the source of windows sample (https://github.com/GoogleChrome/chrome-app-samples/tree/master/windows ) I noticed a CSS property:

-webkit-app-region: drag;

What this does is that if you drag on any element with this style, it moves the whole app window around. No other mouse and keyboard interactions with the elements area are possible though. To work around that you have to use the style:

-webkit-app-region: no-drag;

on the sub-element with which you want to allow normal keyboard and mouse interaction.

This is very handy when you create chrome app windows with 'frame' : 'none' window creation option. In fact, -webkit-app-region works only when you create the window with 'frame' : 'none' . You don't have to implement the logic to support window move.

BTW even when using with 'frame' : 'none' which results in lack of system supplied titlebar and borders, the system menu to move, resize, minimize, maximize, restore and close the window is available by right clicking on the areas defined by:

-webkit-app-region: drag;

The standard keyboard shortcut such as Alt+SPACE on windows can be used to invoke the menu also. The window can be resized using the window edges.

I used it in smart phone browser simulator apps, Desktop App for YouTube and Chrome Packaged App Manifest Version 2 Editor App.

Hope this helps other Chrome App writers.

TIP: Setting title attributes of option tags of select directive of angularjs

The Desktop App for YouTube™ is implemented using Angularjs. In it I use the select directive like this:

<select id="video-titles" multiple="" ng-model="selectedYouTubeVideoArray" ng-options="youTubeVideo.title for youTubeVideo in youTubeVideos">
</select>

The select directive generates the option tags based on the model. However this means that I cannot set the title attributes of option in the markup. I achieved in the JavaScript like this:

// populate the $scope.youTubeVideos array

$scope.youTubeVideos = [];

angular.forEach(data.data.items, function(item) {

    $scope.youTubeVideos.push(new YouTubeVideo(item));

});

// then loop through the options and set title

setTimeout(function()  {

    var options = document.querySelectorAll("#video-titles option");

    if (options) {

        for (var i = 0; i < options.length; i++) {

            options[i].title = options[i].textContent;

        }

    }

}, 0);

Note however that I had to use the setTimeout(..., 0) to set the title so that Angularjs actually gets the chance to create child option tags.

Hope this helps you!

Desktop App for YouTube with embedded videos

In this and this blog entry I talked about Desktop App for YouTube. However in that variant the videos are shown in a separate window. This has to do with the fact that the webview tag cannot show embedded videos in the current stable version of Chrome. However the webview tag in Chrome Canary can show embedded videos. With that I managed to get embedded videos in Desktop App for YouTube that only works with Chrome Canary. Here is the screenshot:

Also added support to popout the video. This basically answers the question someone asked here.You can further make it full screen using the built in control.

Available on Chrome web store.

While implementing this I ran into CSP limitations and capabilities and limitation of embedded sandboxed iframe and webview tags. I got around those issues by using absolute positioning and z-index to posiyion webview at the exactly right sub-rectangle if sandboxed iframe.

Smart phone browser simulators package apps

See this blog post for more details on how to set things up for full effect. Also managed to not require a window decorations. Simply drag the top part to move the window around. Click on home buttons to return to desktop. Add tab buttons create additional windows. And the clock actually works :)

Now I am including the latest zips as they do not seem to crash my Chrome as I had experienced with initial versions of the apps (197381). In any case use at your own risk.

chrgalaxys4.zip

chrgalaxys3.zip

chriphone.zip