From f4c97fd1ea5fd0488877dfc3c2e950eb88875c24 Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Sat, 30 May 2015 13:59:33 +1000 Subject: [PATCH] Rename "drag" JS files, write basic readme, create an entry point for all controls --- modules/backend/assets/js/october.js | 18 +---- modules/backend/assets/less/october.less | 25 +------ modules/system/assets/ui/README.md | 69 +++++++++++++++++++ modules/system/assets/ui/docs/drag.md | 6 ++ modules/system/assets/ui/docs/foundation.md | 2 - modules/system/assets/ui/js/drag.js | 5 ++ .../assets/ui/js/drag.scroll.js} | 0 .../assets/ui/js/drag.sort.js} | 0 .../assets/ui/js/drag.value.js} | 0 modules/system/assets/ui/storm.js | 21 ++++++ modules/system/assets/ui/storm.less | 28 ++++++++ .../ui/vendor/mousewheel}/mousewheel.js | 0 12 files changed, 132 insertions(+), 42 deletions(-) create mode 100644 modules/system/assets/ui/README.md create mode 100644 modules/system/assets/ui/docs/drag.md create mode 100644 modules/system/assets/ui/js/drag.js rename modules/{backend/assets/js/october.dragscroll.js => system/assets/ui/js/drag.scroll.js} (100%) rename modules/{backend/assets/js/october.sortable.js => system/assets/ui/js/drag.sort.js} (100%) rename modules/{backend/assets/js/october.dragvalue.js => system/assets/ui/js/drag.value.js} (100%) create mode 100644 modules/system/assets/ui/storm.js create mode 100644 modules/system/assets/ui/storm.less rename modules/{backend/assets/js/vendor => system/assets/ui/vendor/mousewheel}/mousewheel.js (100%) diff --git a/modules/backend/assets/js/october.js b/modules/backend/assets/js/october.js index 28ac2ad63..ec3caaacc 100644 --- a/modules/backend/assets/js/october.js +++ b/modules/backend/assets/js/october.js @@ -7,7 +7,6 @@ * @see october-min.js * -=require vendor/mousewheel.js =require vendor/jquery.touchwipe.js =require vendor/moment.js =require vendor/jquery.autoellipsis.js @@ -18,26 +17,12 @@ =require ../vendor/sweet-alert/sweet-alert.js =require ../vendor/jcrop/js/jquery.Jcrop.js -=require ../../../system/assets/ui/js/foundation.js -=require ../../../system/assets/ui/js/flashmessage.js -=require ../../../system/assets/ui/js/inspector.js -=require ../../../system/assets/ui/js/dropdown.js -=require ../../../system/assets/ui/js/tooltip.js -=require ../../../system/assets/ui/js/toolbar.js -=require ../../../system/assets/ui/js/filter.js -=require ../../../system/assets/ui/js/loader.js -=require ../../../system/assets/ui/js/popover.js -=require ../../../system/assets/ui/js/popup.js -=require ../../../system/assets/ui/js/chart.js -=require ../../../system/assets/ui/js/list.js -=require ../../../system/assets/ui/js/tab.js +=require ../../../system/assets/ui/storm.js =require october.controls.js =require october.utils.js =require october.scrollpad.js =require october.triggerapi.js -=require october.dragscroll.js -=require october.dragvalue.js =require october.verticalmenu.js =require october.navbar.js =require october.sidenav.js @@ -48,7 +33,6 @@ =require october.layout.js =require october.sidepaneltab.js =require october.simplelist.js -=require october.sortable.js =require october.changemonitor.js =require october.balloonselector.js =require october.treelist.js diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less index ecf7f5ff4..37a3bb0de 100644 --- a/modules/backend/assets/less/october.less +++ b/modules/backend/assets/less/october.less @@ -33,31 +33,10 @@ @import "controls/scrollpad.less"; // -// UI Controls +// October Storm UI // -@import "../../../system/assets/ui/less/global.less"; -@import "../../../system/assets/ui/less/site.less"; -@import "../../../system/assets/ui/less/button.less"; -@import "../../../system/assets/ui/less/chart.less"; -@import "../../../system/assets/ui/less/scoreboard.less"; -@import "../../../system/assets/ui/less/breadcrumb.less"; -@import "../../../system/assets/ui/less/flashmessage.less"; -@import "../../../system/assets/ui/less/icon.less"; -@import "../../../system/assets/ui/less/flag.less"; -@import "../../../system/assets/ui/less/form.less"; -@import "../../../system/assets/ui/less/list.less"; -@import "../../../system/assets/ui/less/inspector.less"; -@import "../../../system/assets/ui/less/progressbar.less"; -@import "../../../system/assets/ui/less/pagination.less"; -@import "../../../system/assets/ui/less/dropdown.less"; -@import "../../../system/assets/ui/less/toolbar.less"; -@import "../../../system/assets/ui/less/tooltip.less"; -@import "../../../system/assets/ui/less/filter.less"; -@import "../../../system/assets/ui/less/loader.less"; -@import "../../../system/assets/ui/less/popover.less"; -@import "../../../system/assets/ui/less/popup.less"; -@import "../../../system/assets/ui/less/tab.less"; +@import "../../../system/assets/ui/storm.less"; // // Combines layout and vendor styles diff --git a/modules/system/assets/ui/README.md b/modules/system/assets/ui/README.md new file mode 100644 index 000000000..3e1874f19 --- /dev/null +++ b/modules/system/assets/ui/README.md @@ -0,0 +1,69 @@ +# October Storm + +Welcome to the front-end framework designed for the OctoberCMS back-end area, referred to as *October Storm*. + +## Design consideration + +In this library, each component behaves a bit like PHP. If a component depends on another component, it will include the file using `@import` in LESS or `=require` in JavaScript. Think of it like a namespace `use` reference in PHP. + +Both compilers will exclude duplicates references, so the usage is designed to be compiled in one fell swoop. Meaning one build file per page. Using multiple builds may result in duplication of dependencies. + +> **Note**: Compiling JavaScript depends on October's asset combiner as the `=require` directive was invented here to emulate the LESS `@import` functionality. + +# UI Components + +Components are a mixture of CSS and JavaScript (Controls), or can be solely style-based (Styles) or solely script-based (Scripts). + +Each component has a *strong name*, for example the loading indicator has the name `loader`. For complex components, they can be broken in to child components, for example `loader.stripe`. Not all child components can be used independently of their parents, but this is certainly possible and a nice idea. + +These Controls are available: + +- Form (`form`) +- Drag (`drag`) +- List (`list`) +- Button (`button`) +- Chart (`chart`) +- Scoreboard (`scoreboard`) +- Dropdown (`dropdown`) +- Inspector (`inspector`) +- Flash (`flashmessage`) +- Filter (`filter`) +- Loader (`loader`) +- Tooltip (`tooltip`) +- Toolbar (`toolbar`) +- Popover (`popover`) +- Popup (`popup`) +- Tab (`tab`) + +These Styles are available: + +- Site (`site`) +- Flag (`flag`) +- Icon (`icon`) +- Breadcrumb (`breadcrumb`) +- Pagination (`pagination`) +- Progress Bar (`progressbar`) + +These Scripts are available: + +- Foundation (`foundation`) + +> *Note*: Documentation for each component can be found in the **docs/** directory. + +## Building a collection + +You can either build the entire collection by including the `storm.js` and `storm.less` files found in the root directory. This will result in quite a large file. It includes everything, you know. + +It might be more appropriate to cherry pick the components you need. Just reference them by component name and they should take care of their own dependencies. + +Here is an example, if you just want the loader, add to a file called `build.js`: + + =require path/to/ui/js/loader.js + +Loader is a control, so a StyleSheet file is also needed, also `build.less`: + + @import "path/to/ui/less/loader.less"; + +That's it, you're done! Rinse and repeat for any other components. + +> *Remember*: Only one build should be used on a page to prevent duplication. \ No newline at end of file diff --git a/modules/system/assets/ui/docs/drag.md b/modules/system/assets/ui/docs/drag.md new file mode 100644 index 000000000..3ef2ccb16 --- /dev/null +++ b/modules/system/assets/ui/docs/drag.md @@ -0,0 +1,6 @@ +# Drag + +Allows the dragging of things. + +# Example + diff --git a/modules/system/assets/ui/docs/foundation.md b/modules/system/assets/ui/docs/foundation.md index facd1ac97..baf836498 100644 --- a/modules/system/assets/ui/docs/foundation.md +++ b/modules/system/assets/ui/docs/foundation.md @@ -1,4 +1,2 @@ # Foundation -Welcome to the October client-side administration framework, referred to as *October Storm*. - diff --git a/modules/system/assets/ui/js/drag.js b/modules/system/assets/ui/js/drag.js new file mode 100644 index 000000000..eb48ec43b --- /dev/null +++ b/modules/system/assets/ui/js/drag.js @@ -0,0 +1,5 @@ +/* +=require drag.value.js +=require drag.sort.js +=require drag.scroll.js +*/ \ No newline at end of file diff --git a/modules/backend/assets/js/october.dragscroll.js b/modules/system/assets/ui/js/drag.scroll.js similarity index 100% rename from modules/backend/assets/js/october.dragscroll.js rename to modules/system/assets/ui/js/drag.scroll.js diff --git a/modules/backend/assets/js/october.sortable.js b/modules/system/assets/ui/js/drag.sort.js similarity index 100% rename from modules/backend/assets/js/october.sortable.js rename to modules/system/assets/ui/js/drag.sort.js diff --git a/modules/backend/assets/js/october.dragvalue.js b/modules/system/assets/ui/js/drag.value.js similarity index 100% rename from modules/backend/assets/js/october.dragvalue.js rename to modules/system/assets/ui/js/drag.value.js diff --git a/modules/system/assets/ui/storm.js b/modules/system/assets/ui/storm.js new file mode 100644 index 000000000..6ab737285 --- /dev/null +++ b/modules/system/assets/ui/storm.js @@ -0,0 +1,21 @@ +/* + __ _____ __ __ __ __ _____ __ __ + / \/ | / \|__)|_ |__) (_ | / \|__)|\/| + \__/\__ | \__/|__)|__| \ __) | \__/| \ | | + + +=require ../../../system/assets/ui/js/foundation.js +=require ../../../system/assets/ui/js/flashmessage.js +=require ../../../system/assets/ui/js/inspector.js +=require ../../../system/assets/ui/js/dropdown.js +=require ../../../system/assets/ui/js/tooltip.js +=require ../../../system/assets/ui/js/toolbar.js +=require ../../../system/assets/ui/js/filter.js +=require ../../../system/assets/ui/js/loader.js +=require ../../../system/assets/ui/js/popover.js +=require ../../../system/assets/ui/js/popup.js +=require ../../../system/assets/ui/js/chart.js +=require ../../../system/assets/ui/js/list.js +=require ../../../system/assets/ui/js/drag.js +=require ../../../system/assets/ui/js/tab.js +*/ diff --git a/modules/system/assets/ui/storm.less b/modules/system/assets/ui/storm.less new file mode 100644 index 000000000..94ed54f45 --- /dev/null +++ b/modules/system/assets/ui/storm.less @@ -0,0 +1,28 @@ +/* + __ _____ __ __ __ __ _____ __ __ + / \/ | / \|__)|_ |__) (_ | / \|__)|\/| + \__/\__ | \__/|__)|__| \ __) | \__/| \ | | + +*/ +@import "less/global.less"; +@import "less/site.less"; +@import "less/button.less"; +@import "less/chart.less"; +@import "less/scoreboard.less"; +@import "less/breadcrumb.less"; +@import "less/flashmessage.less"; +@import "less/icon.less"; +@import "less/flag.less"; +@import "less/form.less"; +@import "less/list.less"; +@import "less/inspector.less"; +@import "less/progressbar.less"; +@import "less/pagination.less"; +@import "less/dropdown.less"; +@import "less/toolbar.less"; +@import "less/tooltip.less"; +@import "less/filter.less"; +@import "less/loader.less"; +@import "less/popover.less"; +@import "less/popup.less"; +@import "less/tab.less"; \ No newline at end of file diff --git a/modules/backend/assets/js/vendor/mousewheel.js b/modules/system/assets/ui/vendor/mousewheel/mousewheel.js similarity index 100% rename from modules/backend/assets/js/vendor/mousewheel.js rename to modules/system/assets/ui/vendor/mousewheel/mousewheel.js