diff --git a/source/Ox.UI/Ox.UI.js b/source/Ox.UI/Ox.UI.js index d234bc19..fa5f85cf 100644 --- a/source/Ox.UI/Ox.UI.js +++ b/source/Ox.UI/Ox.UI.js @@ -29,11 +29,11 @@ Ox.load.UI = function(options, callback) { } ], browserSupported = false, + imageNames = {}, + imageURLs = {}, loadingInterval; browsers.forEach(function(browser) { - // fixme: check if this remains broken in wekbit nightlies - // var match = browser.regexp(navigator.userAgent); var match = browser.regexp.exec(navigator.userAgent); if (match && match[1] >= browser.version) { browserSupported = true; @@ -126,7 +126,6 @@ Ox.load.UI = function(options, callback) { } function showWarning() { - //Ox.print('showWarning') var counter = 0, message = 'Browser not supported, use ' + browsers.map(function(browser, i) { return browser.name + ( @@ -186,7 +185,7 @@ Ox.load.UI = function(options, callback) { Ox.loadFile(Ox.PATH + 'jquery/jquery' + (options.debug ? '' : '.min') + '.js', function() { initUI(); - $.getJSON(Ox.UI.PATH + 'json/Ox.UI.json', function(files) { + Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.files.json', function(files) { var promises = []; if (options.debug == false) { files = files.filter(function(file) { @@ -194,27 +193,30 @@ Ox.load.UI = function(options, callback) { }); files.push('Ox.UI/js/Ox.UI.js'); } - if (options.loadImages == false) { - files = files.filter(function(file) { - return ['png', 'svg'].indexOf(file.split('.').pop()) == -1; - }); - } files.forEach(function(file) { // fixme: opera doesnt fire onload for svg if ($.browser.opera && Ox.endsWith(file, '.svg')) { return; } - //Ox.print('load', file) var dfd = new $.Deferred(); + promises.push(dfd.promise()); Ox.loadFile(Ox.PATH + file, function() { dfd.resolve(); }); - promises.push(dfd.promise()); }); - //Ox.print('promises.length', promises.length) + var dfd = new $.Deferred(); + promises.push(dfd.promise()); + Ox.getJSON(Ox.UI.PATH + 'json/Ox.UI.image' + ( + options.loadImages ? 'Data' : '' + ) + 'URLs.json', function(images) { + imageURLs = images; + Ox.forEach(imageURLs, function(url, key) { + imageNames[url] = key.split('/')[1]; + }); + dfd.resolve(); + }); $.when.apply(null, promises) .done(function() { - //Ox.print('promises done') $(function() { if (options.showScreen && options.hideScreen) { Ox.UI.hideLoadingScreen(); @@ -225,7 +227,8 @@ Ox.load.UI = function(options, callback) { .fail(function() { throw new Error('File not found.') }); - }); + + }); }); } @@ -265,13 +268,17 @@ Ox.load.UI = function(options, callback) { vertical: ['top', 'bottom', 'left', 'right'] }; Ox.UI.elements = {}; - Ox.UI.getImagePath = function(filename) { + Ox.UI.getImageName = function(url) { + return imageNames[url]; + }; + + Ox.UI.getImageURL = function(name, theme) { + theme = theme || Ox.Theme(); // fixme: not the best idea to do this here - if (filename == 'symbolPlay.svg') { - filename = 'symbolRight.svg'; + if (name == 'symbolPlay') { + name = 'symbolRight'; } - return Ox.UI.PATH + 'themes/' + Ox.Theme() + '/' - + filename.split('.').pop() + '/' + filename; + return imageURLs[theme + '/' + name]; }; Ox.UI.hideLoadingScreen = function() { //Ox.print('hideLoadingScreen') diff --git a/source/Ox.UI/js/Core/Ox.DocPage.js b/source/Ox.UI/js/Core/Ox.DocPage.js index 969ece78..5074f01a 100644 --- a/source/Ox.UI/js/Core/Ox.DocPage.js +++ b/source/Ox.UI/js/Core/Ox.DocPage.js @@ -69,7 +69,7 @@ Ox.DocPage = function(options, self) { }) .append( $('') - .attr({src: Ox.UI.getImagePath('symbolDown.svg')}) + .attr({src: Ox.UI.getImageURL('symbolDown')}) .css({ width: '12px', height: '12px', @@ -77,11 +77,11 @@ Ox.DocPage = function(options, self) { }) .click(function() { var $this = $(this), - isExpanded = $this.attr('src') == Ox.UI.getImagePath('symbolDown.svg'); + isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolDown'); $this.attr({ src: isExpanded ? - Ox.UI.getImagePath('symbolRight.svg') : - Ox.UI.getImagePath('symbolDown.svg') + Ox.UI.getImageURL('symbolRight') : + Ox.UI.getImageURL('symbolDown') }); $('.' + className).each(function() { var $this = $(this); diff --git a/source/Ox.UI/js/Core/Ox.LoadingIcon.js b/source/Ox.UI/js/Core/Ox.LoadingIcon.js index f4fd73c7..2acdcb1a 100644 --- a/source/Ox.UI/js/Core/Ox.LoadingIcon.js +++ b/source/Ox.UI/js/Core/Ox.LoadingIcon.js @@ -17,7 +17,7 @@ Ox.LoadingIcon = function(options, self) { }) .options(options || {}) .attr({ - src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') + src: Ox.UI.getImageURL('symbolLoadingAnimated') }) .addClass( 'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size) diff --git a/source/Ox.UI/js/Core/Ox.Theme.js b/source/Ox.UI/js/Core/Ox.Theme.js index 5a27e338..edc6c8ca 100644 --- a/source/Ox.UI/js/Core/Ox.Theme.js +++ b/source/Ox.UI/js/Core/Ox.Theme.js @@ -32,14 +32,13 @@ Ox.Theme = function(theme) { Ox.UI.$body .addClass('OxTheme' + Ox.toTitleCase(theme)) .removeClass('OxTheme' + Ox.toTitleCase(currentTheme)); - $('img:not(.OxVideo)').add('input[type=image]:not(.OxVideo)').each(function() { - var $this = $(this); + $('img:not(.OxVideo)').add('input[type="image"]:not(.OxVideo)').each(function() { + var $this = $(this), + src = $this.attr('src'); $this.attr({ - src: $this.attr('src').replace( - '/Ox.UI/themes/' + currentTheme + '/', - '/Ox.UI/themes/' + theme + '/' - ) + src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme) }); + Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)) }); } return theme; diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js index 68f0184e..4b21a0b1 100644 --- a/source/Ox.UI/js/Form/Ox.Button.js +++ b/source/Ox.UI/js/Form/Ox.Button.js @@ -120,8 +120,8 @@ Ox.Button = function(options, self) { self.title = title; if (self.options.type == 'image') { that.attr({ - src: Ox.UI.getImagePath( - 'symbol' + title[0].toUpperCase() + title.substr(1) + '.svg' + src: Ox.UI.getImageURL( + 'symbol' + title[0].toUpperCase() + title.substr(1) ) }); } else { diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 40087c97..69dbdd3c 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -57,7 +57,7 @@ Ox.Select = function(options, self) { key_down: showMenu }); - Ox.print('Ox.Select', self.options); + //Ox.print('Ox.Select', self.options); $.extend(self, { buttonId: self.options.id + 'Button', @@ -193,7 +193,7 @@ Ox.Select = function(options, self) { id item id @*/ that.selectItem = function(id) { - Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title) + //Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title) self.options.type == 'text' && self.$title.html( Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array ); @@ -213,7 +213,7 @@ Ox.Select = function(options, self) { that.value = function() { if (arguments.length == 0) { - Ox.print('selected::', that.selected()) + //Ox.print('selected::', that.selected()) return that.selected()[0].id; } else { /* diff --git a/source/Ox.UI/js/List/Ox.TreeList.js b/source/Ox.UI/js/List/Ox.TreeList.js index 3888517e..f67c321c 100644 --- a/source/Ox.UI/js/List/Ox.TreeList.js +++ b/source/Ox.UI/js/List/Ox.TreeList.js @@ -91,8 +91,8 @@ Ox.TreeList = function(options, self) { $('') .addClass('OxToggle') .attr({ - src: Ox.UI.getImagePath( - 'symbol' + (data.expanded ? 'Down' : 'Right') + '.svg' + src: Ox.UI.getImageURL( + 'symbol' + (data.expanded ? 'Down' : 'Right') ) }) .css({ @@ -186,8 +186,8 @@ Ox.TreeList = function(options, self) { } }); $img.attr({ - src: Ox.UI.getImagePath( - 'symbol' + (expanded ? 'Down' : 'Right') + '.svg' + src: Ox.UI.getImageURL( + 'symbol' + (expanded ? 'Down' : 'Right') ) }); that.$element.value(item.id, 'expanded', expanded); diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 95ead6e2..6a936e0a 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -64,7 +64,7 @@ Ox.ListMap = function(options, self) { }, id: 'countryCode', resizable: false, // fixme: implement - title: '', visible: true, width: 16 diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index f7f088a2..a7bc12df 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -27,7 +27,7 @@ Ox.Menu Menu Object @*/ Ox.Menu = function(options, self) { - Ox.print(options); + self = self || {}; var that = Ox.Element({}, self) .defaults({ diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index af1c78cf..058e3d03 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -372,7 +372,7 @@ Ox.VideoEditor = function(options, self) { ]), selectable: false, title: $('').attr({ - src: Ox.UI.getImagePath('symbolSet.svg') + src: Ox.UI.getImageURL('symbolSet') }), tooltip: 'Actions and Settings', type: 'image' @@ -400,7 +400,7 @@ Ox.VideoEditor = function(options, self) { }) .appendTo(self.$videobar); self.$videoMenuButton.find('input').attr({ - src: Ox.UI.getImagePath('symbolSet.svg') + src: Ox.UI.getImageURL('symbolSet') }); self.$selectButton = Ox.Button({ @@ -588,7 +588,7 @@ Ox.VideoEditor = function(options, self) { ], max: 2, title: $('').attr({ - src: Ox.UI.getImagePath('symbolSet.svg') + src: Ox.UI.getImageURL('symbolSet') }), tooltip: 'Actions and Settings', type: 'image' @@ -596,7 +596,7 @@ Ox.VideoEditor = function(options, self) { .css({float: 'left'}) .appendTo(self.$annotationsbar); self.$annotationsMenuButton.find('input').attr({ - src: Ox.UI.getImagePath('symbolSet.svg') + src: Ox.UI.getImageURL('symbolSet') }); diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 03b30cfd..d2d7fff6 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -356,8 +356,7 @@ Ox.VideoPlayer = function(options, self) { self.$loadingIcon = $('') .addClass('OxLoadingIcon OxVideo') .attr({ - src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') - .replace('/classic/', '/modern/') + src: Ox.UI.getImageURL('symbolLoadingAnimated', 'modern') }) .appendTo(self.$videoContainer); @@ -365,9 +364,9 @@ Ox.VideoPlayer = function(options, self) { self.$playIcon = $('') .addClass('OxPlayIcon OxVideo') .attr({ - src: Ox.UI.getImagePath( - 'symbol' + (self.options.paused ? 'Play' : 'Pause') + '.svg' - ).replace('/classic/', '/modern/') + src: Ox.UI.getImageURL('symbol' + ( + self.options.paused ? 'Play' : 'Pause' + ), 'modern') }) .appendTo(self.$videoContainer); if (self.options.showIcon) { @@ -633,7 +632,7 @@ Ox.VideoPlayer = function(options, self) { var $this = $(this); $this.children()[1].src = $this.data('resolution') == resolution ? - Ox.UI.getImagePath('symbolCheck.svg') : + Ox.UI.getImageURL('symbolCheck') : Ox.UI.PATH + 'png/transparent.png' }); self.$resolutionButton.html(resolution + 'p'); @@ -664,7 +663,7 @@ Ox.VideoPlayer = function(options, self) { .addClass('OxVideo') .attr({ src: resolution == self.options.resolution ? - Ox.UI.getImagePath('symbolCheck.svg').replace('/classic/', '/modern/') : + Ox.UI.getImageURL('symbolCheck', 'modern') : Ox.UI.PATH + 'png/transparent.png' }) .appendTo($item); @@ -1310,7 +1309,7 @@ Ox.VideoPlayer = function(options, self) { } else { symbol = 'mute'; } - return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/'); + return Ox.UI.getImageURL('symbol' + symbol, 'modern'); } function goToPoint() { @@ -1361,7 +1360,7 @@ Ox.VideoPlayer = function(options, self) { function hideLoadingIcon() { self.$loadingIcon.hide().attr({ - src: Ox.UI.getImagePath('symbolLoading.svg') + src: Ox.UI.getImageURL('symbolLoading') .replace('/classic/', '/modern/') }); } @@ -1752,7 +1751,7 @@ Ox.VideoPlayer = function(options, self) { function showLoadingIcon() { self.$loadingIcon.attr({ - src: Ox.UI.getImagePath('symbolLoadingAnimated.svg') + src: Ox.UI.getImageURL('symbolLoadingAnimated') .replace('/classic/', '/modern/') }).show(); } @@ -1960,9 +1959,9 @@ Ox.VideoPlayer = function(options, self) { function togglePlayIcon() { self.$playIcon.attr({ - src: Ox.UI.getImagePath( + src: Ox.UI.getImageURL( 'symbol' + (self.options.paused ? 'Play' : 'Pause' - )+ '.svg').replace('/classic/', '/modern/') + ), 'modern') }); } diff --git a/tools/build/build.py b/tools/build/build.py index 5925e323..0ad93d54 100755 --- a/tools/build/build.py +++ b/tools/build/build.py @@ -1,5 +1,6 @@ #!/usr/bin/env python #vim: et:ts=4:sw=4:sts=4 +import base64 import json import os import re @@ -51,6 +52,19 @@ for filename in os.listdir(path): svg = svg.replace('#404040', '#FFFFFF').replace('#000000', '#FFFFFF') write_file(path.replace('/classic/', '/modern/') + filename, svg) +imageURLs = {} +imageDataURLs = {} +for theme in ['classic', 'modern']: + path = source_path + 'Ox.UI/themes/' + theme + '/svg/' + for filename in os.listdir(path): + if not filename[0] in '._': + key = theme + '/' + filename[:-4] + imageURLs[key] = os.path.join(path, filename).replace(source_path, '') + data = re.sub('\n\s+', '', read_file(path + filename)) + imageDataURLs[key] = 'data:image/svg+xml;base64,' + base64.b64encode(data) +write_file(build_path + 'Ox.UI/json/Ox.UI.imageURLs.json', json.dumps(imageURLs, indent=4, sort_keys=True)) +write_file(build_path + 'Ox.UI/json/Ox.UI.imageDataURLs.json', json.dumps(imageDataURLs, indent=4, sort_keys=True)) + # symlinks for path, dirnames, filenames in os.walk(source_path): for filename in filenames: @@ -80,7 +94,7 @@ root = source_path + 'Ox.UI/' for path, dirnames, filenames in os.walk(root): for filename in filenames: # theme css files get included by main css - if path != root and not '_' in path and not filename[0] in '._' and filename[-4:] != '.css': + if path != root and not '_' in path and not filename[0] in '._' and filename[-4:] != '.css' and filename[-4:] != '.svg': files.append(os.path.join(path.replace(source_path, ''), filename)) if filename[-3:] == '.js': folder = os.path.split(path)[-1] @@ -92,4 +106,4 @@ for path, dirnames, filenames in os.walk(root): write_file(build_path + 'Ox.UI/js/Ox.UI.js', js) files = json.dumps(sorted(files), indent=4, sort_keys=True) -write_file(build_path + 'Ox.UI/json/Ox.UI.json', files) \ No newline at end of file +write_file(build_path + 'Ox.UI/json/Ox.UI.files.json', files) \ No newline at end of file