diff --git a/index.css b/index.css new file mode 100644 index 00000000..0f2d7f52 --- /dev/null +++ b/index.css @@ -0,0 +1,59 @@ +body { + margin: 0; +} +body.OxThemeClassic { + background-color: rgb(240, 240, 240); +} +body.OxThemeModern { + background-color: rgb(16, 16, 16); +} + +div { + font-family: Lucida Grande, Segoe UI, DejaVu Sans, Arial; + font-size: 11px; +} +.OxThemeClassic div { + color: rgb(16, 16, 16); +} +.OxThemeModern div { + color: rgb(240, 240, 240); +} + + +.line { + width: 384px; + font-size: 12px; + font-weight: bold; +} + +.link { + font-size: 12px; + cursor: pointer; +} +.link:hover { + text-decoration: underline; +} +.link.selected { + font-weight: bold; + text-decoration: underline; + cursor: default; +} + +.logo { + width: 256px; + height: 128px; + cursor: pointer; +} + +.sections { + width: 512px; +} + +.themes { + width: 80px; +} + +.ui { + position: absolute; + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..7fea7595 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + OxJS - A JavaScript Library for Web Applications + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e91f4743 --- /dev/null +++ b/index.js @@ -0,0 +1,352 @@ +Ox.load(function() { + + var app = { + + $ui: {}, + + data: {}, + + fn: { + + animate: function(callback) { + var css = app.fn.getCSS(), + home = !app.fn.url(); + home && app.$ui.logo.attr({ + src: app.fn.getLogoURL() + }) + Ox.forEach(app.fn.getCSS(), function(css, element) { + app.$ui[element].animate( + css, + 1000, + element == 'logo' ? function() { + !home && app.$ui.logo.attr({ + src: app.fn.getLogoURL() + }); + callback(); + } : void 0 + ); + }); + }, + + getCSS: function() { + return app.fn.url() ? { + panel: { + opacity: 1 + }, + line: { + top: '26px', + left: '4px', + width: '32px', + fontSize: '1px', + opacity: 0 + }, + logo: { + top: '8px', + left: '8px', + width: '32px', + height: '16px' + }, + sections: { + top: '8px', + left: app.window.center - 256 + 'px' + }, + themes: { + top: '8px', + right: '8px' + } + } : { + panel: { + opacity: 0 + }, + line: { + top: app.window.middle + 12 + 'px', + left: app.window.center - 192 + 'px', + width: '384px', + fontSize: '12px', + opacity: 1 + }, + logo: { + left: app.window.center - 128 + 'px', + top: app.window.middle - 128 + 'px', + width: '256px', + height: '128px' + }, + sections: { + top: app.window.middle + 36 + 'px', + left: app.window.center - 256 + 'px' + }, + themes: { + top: app.window.middle + 60 + 'px', + right: app.window.center - 40 + 'px' + } + } + }, + + getIconURL: function() { + return 'source/Ox.UI/themes/' + app.user('theme') + + '/png/icon16.png'; + }, + + getLogoURL: function() { + return 'source/Ox.UI/themes/' + app.user('theme') + + '/png/logo' + (app.fn.url() ? 16 : 128) + '.png' + }, + + getLogoCSS: function() { + return { + boxShadow: '0 0 1px ' + ( + app.user('theme') == 'classic' + ? 'rgb(0, 0, 0)' + : 'rgb(255, 255, 255)' + ) + }; + }, + + hashchange: function() { + var url = app.fn.url(), + section = url.split('/')[0]; + app.fn[!url || !app.url ? 'animate' : 'void'](function() { + if (section && section != app.url.split('/')[0] && !app.foo) { + app.fn.setSection(section); + } + app.url = url; + }); + }, + + load: function() { + var $window = Ox.$(window); + app.fn.setTheme(app.user('theme') || 'classic'); + !app.user('url') && app.user({url: 'about'}); + app.fn.render(); + Ox.getJSON('index.json', function(data) { + app.data = data; + }); + $window.bind({ + hashchange: app.fn.hashchange, + resize: app.fn.resize + }); + window.oxjs = app; // so that you can play with it in the console + Ox.load({UI: {debug: true, theme: app.user('theme')}}, app.fn.render); + }, + + render: function() { + var $body = (Ox.UI ? $ : Ox.$)('body').empty(); + Ox.forEach(app.fn.getCSS(), function(css, element) { + app.$ui[element] = app.ui[element]().css( + Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {}) + ).appendTo($body); + }); + }, + + resize: function() { + app.window = app.fn.window(); + Ox.forEach(app.fn.getCSS(), function(css, element) { + app.$ui[element].css(css); + }); + }, + + setSection: function(section) { + app.$ui.panel.replaceElement(1, app.ui[section]()); + }, + + setTheme: function(theme) { + app.user({theme: theme}); + (Ox.$('#icon') || Ox.$('').attr({ + id: 'icon', + rel: 'shortcut icon', + type: 'image/png' + }).appendTo(Ox.$('head'))).attr({ + href: app.fn.getIconURL() + }); + app.$ui.logo && app.$ui.logo.attr({ + src: app.fn.getLogoURL() + }).css(app.fn.getLogoCSS()); + Ox.Theme ? Ox.Theme(theme) : Ox.$('body').addClass( + 'OxTheme' + Ox.toTitleCase(theme) + ); + }, + + url: function() { + var len = arguments.length, ret; + if (len == 0) { + ret = window.location.hash.substr(1); + } else { + if (len == 2) { + app.foo = true; + } + window.location.hash = '#' + arguments[0]; + if (len == 2) { + app.foo = false; + } + ret = app; + } + return ret; + }, + + void: function(callback) { + callback(); + }, + + window: function() { + return { + center: Math.floor(window.innerWidth / 2), + height: window.innerHeight, + middle: Math.floor(window.innerHeight / 2), + width: window.innerWidth + }; + } + + }, + + ui: { + + about: function() { + return Ox.Element(); + }, + + contact: function() { + return Ox.Element(); + }, + + development: function() { + return Ox.Element(); + }, + + documentation: function() { + return Ox.DocPanel({ + files: app.data.documentation, + getModule: function(item) { + var file = item.file.replace(/^dev\//, ''); + return file.split('/')[0]; + }, + getSection: function(item) { + var file = item.file.replace(/^dev\//, ''); + return item.section || file.split('/')[2].split('.')[0]; + }, + path: 'dev/' + }); + }, + + download: function() { + return Ox.Element() + .html('bzr branch http://code.0x2620.org/oxjs'); + }, + + examples: function() { + return Ox.ExamplePanel({ + examples: app.data.examples, + keywords: /\b(Ox\.[\w]+)\b/g, + path: 'examples/', + replace: [[/\b(Ox[\.\w]+)\b/g, '$1']], + selected: '' + }) + .bindEvent({ + select: function(data) { + app.fn.url( + 'examples' + (data.id ? '/' + data.id : '') + ) + } + }); + }, + + line: function() { + return (Ox.UI ? $ : Ox.$)('
') + .addClass('ui line') + .css({ + top: app.window.middle + 12 + 'px', + left: app.window.center - 192 + 'px', + }) + .html('A JavaScript Library for Web Applications') + }, + + logo: function() { + return (Ox.UI ? $ : Ox.$)('') + .addClass('ui logo') + .attr({ + src: app.fn.getLogoURL() + }) + .bind({ + click: function() { + app.fn.url(app.fn.url() ? '' : app.user('url')); + } + }); + }, + + panel: function() { + return Ox.UI + ? Ox.SplitPanel({ + elements: [ + { + element: Ox.Bar({size: 32}), + size: 32 + }, + { + element: Ox.Element() + } + ], + orientation: 'vertical' + }) + .css({opacity: 0}) + : Ox.$('
') + }, + + readme: function() { + return Ox.Element(); + }, + + sections: function() { + var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui sections'); + [ + 'about', 'readme', 'examples', 'documentation', + 'download', 'development', 'contact' + ].forEach(function(section, i) { + i && $element.append(Ox.$('').html(' | ')); + Ox.$('') + .addClass('link' + ( + app.user('section') == section ? ' selected' : '' + )) + .html(Ox.toTitleCase(section)) + .bind({ + click: function() { + app.$ui.sections.children().removeClass('selected'); + $(this).addClass('selected'); + app.fn.url(section); + } + }) + .appendTo($element); + }); + return $element; + }, + + themes: function() { + var $element = (Ox.UI ? $ : Ox.$)('
').addClass('ui themes'); + ['classic', 'modern'].forEach(function(theme, i) { + i && $element.append(Ox.$('').html(' | ')); + Ox.$('') + .addClass('link' + ( + app.user('theme') == theme ? ' selected' : '' + )) + .html(theme == 'classic' ? 'Light' : 'Dark') + .bind({ + click: function() { + app.$ui.themes.children().removeClass('selected'); + $(this).addClass('selected'); + app.fn.setTheme(theme) + } + }) + .appendTo($element); + }); + return $element; + } + + }, + + user: Ox.localStorage('OxJS'), + + }; + + app.url = app.fn.url(); + app.window = app.fn.window(); + app.fn.load(); + +}); \ No newline at end of file diff --git a/index.json b/index.json new file mode 100644 index 00000000..9b9ad9f8 --- /dev/null +++ b/index.json @@ -0,0 +1,145 @@ +{ + "documentation": [ + "Ox/js/Array.js", + "Ox/js/Collection.js", + "Ox/js/Color.js", + "Ox/js/Constants.js", + "Ox/js/Core.js", + "Ox/js/DOM.js", + "Ox/js/Date.js", + "Ox/js/Encoding.js", + "Ox/js/Fallback.js", + "Ox/js/Format.js", + "Ox/js/Function.js", + "Ox/js/Geo.js", + "Ox/js/HTML.js", + "Ox/js/Hash.js", + "Ox/js/JavaScript.js", + "Ox/js/Math.js", + "Ox/js/Object.js", + "Ox/js/RegExp.js", + "Ox/js/Request.js", + "Ox/js/String.js", + "Ox/js/Type.js", + "Ox.Geo/Ox.Geo.js", + "Ox.Image/Ox.Image.js", + "Ox.UI/jquery/jquery.mousewheel.js", + "Ox.UI/js/Bar/Ox.Bar.js", + "Ox.UI/js/Bar/Ox.Progressbar.js", + "Ox.UI/js/Bar/Ox.Resizebar.js", + "Ox.UI/js/Bar/Ox.Tabbar.js", + "Ox.UI/js/Bar/Ox.Toolbar.js", + "Ox.UI/js/Calendar/Ox.Calendar.js", + "Ox.UI/js/Calendar/Ox.CalendarDate.js", + "Ox.UI/js/Calendar/Ox.ListCalendar.js", + "Ox.UI/js/Code/Ox.DocPage.js", + "Ox.UI/js/Code/Ox.DocPanel.js", + "Ox.UI/js/Code/Ox.ExamplePage.js", + "Ox.UI/js/Code/Ox.ExamplePanel.js", + "Ox.UI/js/Code/Ox.SourceViewer.js", + "Ox.UI/js/Code/Ox.SyntaxHighlighter.js", + "Ox.UI/js/Core/Ox.API.js", + "Ox.UI/js/Core/Ox.App.js", + "Ox.UI/js/Core/Ox.Clipboard.js", + "Ox.UI/js/Core/Ox.Container.js", + "Ox.UI/js/Core/Ox.Element.js", + "Ox.UI/js/Core/Ox.Event.js", + "Ox.UI/js/Core/Ox.Focus.js", + "Ox.UI/js/Core/Ox.GarbageCollection.js", + "Ox.UI/js/Core/Ox.History.js", + "Ox.UI/js/Core/Ox.JQueryElement.js", + "Ox.UI/js/Core/Ox.Keyboard.js", + "Ox.UI/js/Core/Ox.LoadingIcon.js", + "Ox.UI/js/Core/Ox.Progressbar.js", + "Ox.UI/js/Core/Ox.Request.js", + "Ox.UI/js/Core/Ox.Theme.js", + "Ox.UI/js/Core/Ox.URL.js", + "Ox.UI/js/Form/Ox.ArrayEditable.js", + "Ox.UI/js/Form/Ox.ArrayInput.js", + "Ox.UI/js/Form/Ox.Button.js", + "Ox.UI/js/Form/Ox.ButtonGroup.js", + "Ox.UI/js/Form/Ox.Checkbox.js", + "Ox.UI/js/Form/Ox.CheckboxGroup.js", + "Ox.UI/js/Form/Ox.ColorInput.js", + "Ox.UI/js/Form/Ox.ColorPicker.js", + "Ox.UI/js/Form/Ox.DateInput.js", + "Ox.UI/js/Form/Ox.DateTimeInput.js", + "Ox.UI/js/Form/Ox.Editable.js", + "Ox.UI/js/Form/Ox.FileButton.js", + "Ox.UI/js/Form/Ox.FileInput.js", + "Ox.UI/js/Form/Ox.Filter.js", + "Ox.UI/js/Form/Ox.Form.js", + "Ox.UI/js/Form/Ox.FormElementGroup.js", + "Ox.UI/js/Form/Ox.FormItem.js", + "Ox.UI/js/Form/Ox.FormPanel.js", + "Ox.UI/js/Form/Ox.Input.js", + "Ox.UI/js/Form/Ox.InputGroup.js", + "Ox.UI/js/Form/Ox.InsertHTMLDialog.js", + "Ox.UI/js/Form/Ox.Label.js", + "Ox.UI/js/Form/Ox.ObjectArrayInput.js", + "Ox.UI/js/Form/Ox.ObjectInput.js", + "Ox.UI/js/Form/Ox.OptionGroup.js", + "Ox.UI/js/Form/Ox.Picker.js", + "Ox.UI/js/Form/Ox.PlaceInput.js", + "Ox.UI/js/Form/Ox.PlacePicker.js", + "Ox.UI/js/Form/Ox.Range.js", + "Ox.UI/js/Form/Ox.Select.js", + "Ox.UI/js/Form/Ox.SelectInput.js", + "Ox.UI/js/Form/Ox.Spreadsheet.js", + "Ox.UI/js/Form/Ox.TimeInput.js", + "Ox.UI/js/List/Ox.Chart.js", + "Ox.UI/js/List/Ox.IconItem.js", + "Ox.UI/js/List/Ox.IconList.js", + "Ox.UI/js/List/Ox.InfoList.js", + "Ox.UI/js/List/Ox.List.js", + "Ox.UI/js/List/Ox.ListItem.js", + "Ox.UI/js/List/Ox.ListPage.js", + "Ox.UI/js/List/Ox.TextList.js", + "Ox.UI/js/List/Ox.TreeList.js", + "Ox.UI/js/Map/Ox.ListMap.js", + "Ox.UI/js/Map/Ox.Map.js", + "Ox.UI/js/Map/Ox.MapImage.js", + "Ox.UI/js/Map/Ox.MapMarker.js", + "Ox.UI/js/Map/Ox.MapMarkerImage.js", + "Ox.UI/js/Map/Ox.MapPlace.js", + "Ox.UI/js/Map/Ox.MapRectangle.js", + "Ox.UI/js/Map/Ox.MapRectangleMarker.js", + "Ox.UI/js/Menu/Ox.MainMenu.js", + "Ox.UI/js/Menu/Ox.Menu.js", + "Ox.UI/js/Menu/Ox.MenuButton.js", + "Ox.UI/js/Menu/Ox.MenuItem.js", + "Ox.UI/js/Panel/Ox.CollapsePanel.js", + "Ox.UI/js/Panel/Ox.Panel.js", + "Ox.UI/js/Panel/Ox.SplitPanel.js", + "Ox.UI/js/Panel/Ox.TabPanel.js", + "Ox.UI/js/Test/Ox.TestElement.js", + "Ox.UI/js/Test/Ox.TestWidget.js", + "Ox.UI/js/Video/Ox.AnnotationFolder.js", + "Ox.UI/js/Video/Ox.AnnotationPanel.js", + "Ox.UI/js/Video/Ox.BlockVideoTimeline.js", + "Ox.UI/js/Video/Ox.LargeVideoTimeline.js", + "Ox.UI/js/Video/Ox.SmallVideoTimeline.js", + "Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js", + "Ox.UI/js/Video/Ox.VideoEditor.js", + "Ox.UI/js/Video/Ox.VideoEditorPlayer.js", + "Ox.UI/js/Video/Ox.VideoElement.js", + "Ox.UI/js/Video/Ox.VideoPanel.js", + "Ox.UI/js/Video/Ox.VideoPlayer.js", + "Ox.UI/js/Video/Ox.VideoPreview.js", + "Ox.UI/js/Video/Ox.VideoTimelinePlayer.js", + "Ox.UI/js/Window/Ox.Dialog.js", + "Ox.UI/js/Window/Ox.Dialog_.js", + "Ox.UI/js/Window/Ox.Layer.js", + "Ox.UI/js/Window/Ox.Tooltip.js", + "Ox.Unicode/Ox.Unicode.js" + ], + "examples": [ + "cities", + "countries", + "list_of_countries" + ], + "readme": [ + "test1", + "test2" + ] +} \ No newline at end of file