Rename "drag" JS files, write basic readme, create an entry point for all controls

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

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

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.

modules/system/assets/ui/docs/drag.md

@@ -0,0 +1,6 @@
+# Drag
+
+Allows the dragging of things.
+
+# Example
+

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*.
-

modules/system/assets/ui/js/drag.js

@@ -0,0 +1,5 @@
+/*
+=require drag.value.js
+=require drag.sort.js
+=require drag.scroll.js
+*/

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
+*/

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";