From 66934d22a943abbc2fccbb098d1957cb6549c051 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 4 Jan 2012 15:20:07 +0530 Subject: [PATCH] theme.js -> theme.json; make timeline themed --- source/Ox.UI/Ox.UI.js | 24 ++++++++++----- source/Ox.UI/js/Core/Ox.Theme.js | 7 +---- .../js/Video/Ox.SmallVideoTimelineImage.js | 29 ++++++++++--------- source/Ox.UI/themes/classic/json/classic.json | 12 ++++++++ source/Ox.UI/themes/modern/json/modern.json | 12 ++++++++ source/Ox/js/Core.js | 2 +- tools/build/build.py | 4 +-- 7 files changed, 61 insertions(+), 29 deletions(-) create mode 100644 source/Ox.UI/themes/classic/json/classic.json create mode 100644 source/Ox.UI/themes/modern/json/modern.json diff --git a/source/Ox.UI/Ox.UI.js b/source/Ox.UI/Ox.UI.js index a3e01de9..0c06829e 100644 --- a/source/Ox.UI/Ox.UI.js +++ b/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('') @@ -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() { - dfd.resolve(); - }); + if (/\.json$/.test(file)) { + 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'); diff --git a/source/Ox.UI/js/Core/Ox.Theme.js b/source/Ox.UI/js/Core/Ox.Theme.js index f678fdb0..e8ab1135 100644 --- a/source/Ox.UI/js/Core/Ox.Theme.js +++ b/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; }()); diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 1ab470bc..020aa987 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/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' ? - [255, 255, 0, 128] : - (y == top || y == bottom - 1) ? - [255, 255, 0, 255] : [255, 255, 0, 64], + var alpha = self.options.type == 'player' ? 128 + : (y == top || y == bottom - 1) ? 255 : 64, + color = Ox.Theme[self.theme].timeline.result, 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' ? - [rgb[0], rgb[1], rgb[2], 128] : - [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64], + var alpha = self.options.type == 'player' ? 128 + : (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] : - (y == top + 1 || y == bottom - 1) ? - [0, 0, 0, 128] : [255, 255, 255, 128], + var alpha = 128, + color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; diff --git a/source/Ox.UI/themes/classic/json/classic.json b/source/Ox.UI/themes/classic/json/classic.json new file mode 100644 index 00000000..89adfb50 --- /dev/null +++ b/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] + } +} \ No newline at end of file diff --git a/source/Ox.UI/themes/modern/json/modern.json b/source/Ox.UI/themes/modern/json/modern.json new file mode 100644 index 00000000..09e12961 --- /dev/null +++ b/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] + } +} \ No newline at end of file diff --git a/source/Ox/js/Core.js b/source/Ox/js/Core.js index 1ece5e38..3c06c929 100644 --- a/source/Ox/js/Core.js +++ b/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'; diff --git a/tools/build/build.py b/tools/build/build.py index c5087c9a..0a3575d5 100755 --- a/tools/build/build.py +++ b/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')\