theme.js -> theme.json; make timeline themed

source/Ox.UI/Ox.UI.js

@@ -92,8 +92,8 @@ Ox.load.UI = function(options, callback) {
         browserSupported ? showIcon() : showWarning(); 
 
         function showIcon() {
-            // SVG transform performs worse than CSS transform
             /*
+            // SVG transform performs worse than CSS transform
             var src = Ox.PATH + 'Ox.UI/themes/' + options.theme + '/svg/symbolLoadingAnimated.svg'
             Ox.loadFile(src, function() {
                 Ox.element('<img>')
@@ -201,13 +201,21 @@ Ox.load.UI = function(options, callback) {
         Ox.loadFile(Ox.PATH + '/Ox.UI/jquery/jquery.js', function() {
             initUI();
             Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json', function(files) {
-                var promises = [];
+                var promises = [], themes = {};
                 files.forEach(function(file) {
                     var dfd = new $.Deferred();
                     promises.push(dfd.promise());
-                    Ox.loadFile(Ox.PATH + file, function() {
+                    if (/\.json$/.test(file)) {
-                        dfd.resolve();
+                        Ox.getJSON(Ox.PATH + file, function(data) {
-                    });
+                            var theme = /\/(\w+)\.json$/.exec(file)[1];
+                            themes[theme] = data;
+                            dfd.resolve();
+                        });
+                    } else {
+                        Ox.loadFile(Ox.PATH + file, function() {
+                            dfd.resolve();
+                        });
+                    }
                 });
                 var dfd = new $.Deferred();
                 promises.push(dfd.promise());
@@ -222,6 +230,9 @@ Ox.load.UI = function(options, callback) {
                 });
                 $.when.apply(null, promises)
                     .done(function() {
+                        Ox.forEach(themes, function(data, theme) {
+                            Ox.Theme[theme] = data;
+                        });
                         $(function() {
                             if (options.showScreen && options.hideScreen) {
                                 Ox.UI.hideLoadingScreen();
@@ -232,7 +243,6 @@ Ox.load.UI = function(options, callback) {
                     .fail(function() {
                         throw new Error('File not found.')
                     });
-                
             });
         });
         
@@ -245,7 +255,7 @@ Ox.load.UI = function(options, callback) {
         Ox.UI.ready = (function() {
             var callbacks = [];
             $(function() {
-                // FIXME: use OX.$foo everywhere!
+                // FIXME: use Ox.$foo everywhere!
                 Ox.$body = Ox.UI.$body = $('body');
                 Ox.$document = Ox.UI.$document = $(document);
                 Ox.$head = Ox.UI.$head = $('head');

source/Ox.UI/js/Core/Ox.Theme.js

@@ -27,7 +27,7 @@ Ox.Theme = (function() {
     }
 
     function renderElement(val, type) {
-        var $element, background, color, lightness = that.lightness[getTheme()];
+        var $element, background, color, lightness = that[getTheme()].lightness;
         if (type == 'hue') {
             background = Ox.rgb(val, 1, lightness.background).map(function(val) {
                 return Math.round(val);
@@ -138,11 +138,6 @@ Ox.Theme = (function() {
             .html(values[+index]);
     };
 
-    that.lightness = {
-        classic: {background: 0.75, color: 0.25},
-        modern: {background: 0.25, color: 0.75}
-    };
-
     return that;
 
 }());

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -10,6 +10,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             'in': 0,
             out: 0,
             results: [],
+            selected: false,
             subtitles: [],
             timeline: '',
             width: 256,
@@ -29,6 +30,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     self.imageHeight = self.options.type == 'player' ? 16 : 18;
     self.imageTop = self.options.type == 'player' ? 0 : 3;
     self.timelineTop = self.options.type == 'player' ? 0 : 4;
+    self.theme = Ox.Theme();
 
     that.css({
         height: self.height + 'px'
@@ -123,15 +125,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     ) + 1;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var color = self.options.type == 'player' ?
+                        var alpha = self.options.type == 'player' ? 128
-                                [255, 255, 0, 128] :
+                                : (y == top || y == bottom - 1) ? 255 : 64,
-                                (y == top || y == bottom - 1) ?
+                            color = Ox.Theme[self.theme].timeline.result,
-                                [255, 255, 0, 255] : [255, 255, 0, 64],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];
                         data[index + 2] = color[2];
-                        data[index + 3] = color[3];
+                        data[index + 3] = alpha;
                     });
                 });
             });
@@ -147,14 +148,17 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
             Ox.loop(left, right, function(x) {
                 Ox.loop(top, bottom, function(y) {
-                    var color = self.options.type == 'player' ?
+                    var alpha = self.options.type == 'player' ? 128
-                            [rgb[0], rgb[1], rgb[2], 128] :
+                            : (y == top || y == bottom - 1) ? 255 : 64,
-                            [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64],
+                        color = Ox.Theme[self.theme].timeline[
+                            self.options.editing ? 'editing'
+                            : self.options.selected ? 'selected' : 'default'
+                        ],
                         index = x * 4 + y * 4 * width;
                     data[index] = color[0];
                     data[index + 1] = color[1];
                     data[index + 2] = color[2];
-                    data[index + 3] = color[3];
+                    data[index + 3] = alpha;
                 });
             });
         } else if (image == 'subtitles') {
@@ -166,12 +170,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     right = Math.round(
                         subtitle.out / self.options.duration * self.imageWidth
                     ) + 1,
-                    top = bottom - subtitle.text.split('\n').length - 3;
+                    top = bottom - subtitle.text.split('\n').length - 2;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var color = y == top ? [0, 0, 0, 0] :
+                        var alpha = 128,
-                            (y == top + 1 || y == bottom - 1) ?
+                            color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255],
-                            [0, 0, 0, 128] : [255, 255, 255, 128],
                             index = x * 4 + y * 4 * width;
                         data[index] = color[0];
                         data[index + 1] = color[1];

source/Ox.UI/themes/classic/json/classic.json

@@ -0,0 +1,12 @@
+{
+    "lightness": {
+        "background": 0.75,
+        "color": 0.25
+    },
+    "timeline": {
+        "default": [0, 0, 0],
+        "editing": [0, 0, 128],
+        "result": [128, 128, 0],
+        "selected": [0, 128, 0]
+    }
+}

source/Ox.UI/themes/modern/json/modern.json

@@ -0,0 +1,12 @@
+{
+    "lightness": {
+        "background": 0.25,
+        "color": 0.75
+    },
+    "timeline": {
+        "default": [255, 255, 255],
+        "editing": [128, 128, 255],
+        "result": [255, 255, 128],
+        "selected": [128, 255, 128]
+    }
+}

source/Ox/js/Core.js

@@ -1,6 +1,6 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 
-// OxJS (c) 2011 0x2620, dual-licensed GPL/MIT, see http://oxjs.org for details
+// OxJS (c) 2012 0x2620, dual-licensed GPL/MIT, see http://oxjs.org for details
 
 'use strict';
 

tools/build/build.py

@@ -19,7 +19,7 @@ def build_oxjs(geo):
     source_path = '../../source/'
     build_path = '../../build/'
     dev_path = '../../dev/'
-    comment = 'OxJS (c) 2011 0x2620, dual-licensed GPL/MIT, see http://oxjs.org for details'
+    comment = 'OxJS (c) 2012 0x2620, dual-licensed GPL/MIT, see http://oxjs.org for details'
 
     # SVGs
     path = source_path + 'Ox.UI/themes/classic/svg/'
@@ -113,7 +113,7 @@ def build_oxjs(geo):
             # svgs are loaded as URLs or dataURLs
             # browser images appear before load
             if path != root and not '_' in path and not filename[0] in '._'\
-                    and not filename.endswith('~') \
+                    and not filename.endswith('~')\
                     and not 'jquery' in filename\
                     and not ('/themes/' in path and filename.endswith('.css'))\
                     and not filename.endswith('.svg')\