From 831f28e84db262376bb9cc45abc85081b5e7861f Mon Sep 17 00:00:00 2001
From: alekseybobkov <aleksey.bobkov@gmail.com>
Date: Sun, 14 Dec 2014 22:34:37 -0800
Subject: [PATCH] Implemented and styled the toolbar

---
 .../widgets/table/assets/css/table.css        |  44 ++++++++
 .../table/assets/images/table-icons.gif       | Bin 0 -> 1489 bytes
 .../backend/widgets/table/assets/js/table.js  | 100 ++++++++++++++++--
 .../widgets/table/assets/less/table.less      |  55 ++++++++++
 4 files changed, 192 insertions(+), 7 deletions(-)
 create mode 100644 modules/backend/widgets/table/assets/images/table-icons.gif

diff --git a/modules/backend/widgets/table/assets/css/table.css b/modules/backend/widgets/table/assets/css/table.css
index c3a17057a..523d0967a 100644
--- a/modules/backend/widgets/table/assets/css/table.css
+++ b/modules/backend/widgets/table/assets/css/table.css
@@ -98,6 +98,50 @@
 .table-control table.data td:last-child {
   border-right: none;
 }
+.table-control .toolbar {
+  background: white;
+  border-bottom: 1px solid #bdc3c7;
+}
+.table-control .toolbar a {
+  color: #323e50;
+  padding: 10px;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.table-control .toolbar a:hover {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+.table-control .toolbar a:before {
+  display: inline-block;
+  content: ' ';
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  position: relative;
+  top: 3px;
+  background: transparent url(../images/table-icons.gif) no-repeat;
+  background-position: 0 0;
+  background-size: 32px auto;
+}
+.table-control .toolbar a.add-table-row-above:before {
+  background-position: 0 -56px;
+}
+.table-control .toolbar a.delete-table-row:before {
+  background-position: 0 -113px;
+}
+@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+  .table-control .toolbar a:before {
+    background-position: 0px -9px;
+    background-size: 16px auto;
+  }
+  .table-control .toolbar a.add-table-row-above:before {
+    background-position: 0 -39px;
+  }
+  .table-control .toolbar a.delete-table-row:before {
+    background-position: 0 -66px;
+  }
+}
 /*
  * String editor
  */
diff --git a/modules/backend/widgets/table/assets/images/table-icons.gif b/modules/backend/widgets/table/assets/images/table-icons.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fee3716fbe5b8ea33fbc49db507bdfb68e21436a
GIT binary patch
literal 1489
zcmZ?wbhEHbRA5-du!xP})8{XrK7IQ5@#FjV?>~I_pk*KU|Nnmm1_s6d+!4M33NDEy
zi9p)MzM>#8IXksPAt^OIGtXA({qFrr3YjUkO5vuy2EGN(sTr9bRYj@6RemAKRoTgw
zDN6Qs3N{s16}bhusU?XD6}dTi#a0!zN{K1?NvT#qHb_`sNdc^+B->WW5hS4iveP-g
zC{@8!&r~<rz{pU++)~fb)Wp)zP)EVYz|dIV&_LhFQrFPX%Ea8t&`bdelz_GsrKDK}
zxwt{?0`hE?GD=Dctn~HE%ggo3jrH=2()A53EiLs8jP#9+bb%^#i!1X=5-W7`ij`p|
zxTF>*7iAWdWaj57fJ{tG$}cUkRRX#c;)UD-UthSvdBu8Q59uZ6=jvA^7U&!58R+Nc
zg8T(mU0f2Bif{&2)x{x|1*!T$sm1xFMaii^<;pP4z_7z_5lA7>HCFybnZQU%%yG$2
zF3nBNEAe!(RRYTBrDUd9nHd?Hq?uWm>l&Myo9mhwCz|M5CK;sZni`v@C0QCL8JJrd
z!py;@-_69_*}&M`)!f<Gz|hdu#KOSQ)WXrx)X>1q(#*uz8K&1Wuec;JFF6%vcP7wo
zs9qPmdaay`QWHz^i$e1Ab6}|;AS1sdzc?emK*8BrLBlsOIWrH$*9658#LF(JMVV!(
zDQ-pixeDMww#vlffTUD|#AK5cL)|2cv=m*FWb-uLq!c4V-L%BSl$7LDlT<S!GbO10
z6mkPkALuB3P)b2cIWQq$as)Bq`2fg)=cLp;VD>2j<`c&M|Nj2@{p;tC@87<D`TXhQ
zhxhN^zIpxX<%{Rfo<4c}=;4F=_wL@gee33p>({PcxqRv3h4bgmo;iK$<cZ_QjvhID
z=-`3<`}XeHy=&)=?c26)*}Q4vhV|>#u35cm<%;FYmM&SmXyJnS^XAT(J!|HS>C>i8
znLKIYg#NzXp6;&Bj`p_Jmgc6$hWfhNn(C^`it@73lH#Jmg8aPPob0U3jP$hBl;otu
zg!s7FnCPg;i14t`kl>)e0DnJUA8#*D4|g|L7iT9&2YWkP8*3{|3v)A56JsM_2G!Hm
z(bm$`P*+n`QC3n^ke8E{k(QE_5El~_5f%~@;OFDz;pXDxU}s}xVP;|k7B)XwfFv7(
z4zS>102NFO%>Og80{(4S<GDJ^@K)^RX9*g8DVft|JfGveYE$>G10}iAmvYyhiB7ZS
z?`ap_RJ3bJ(aDe#^NjgKxMta{4!f_m`fg$4*$ovwdfodT=t?!k3h&KRxpQ~f?DrK*
zYkpq)-W^#iQW)Ff<`>f>9A6;Y*_T*dIeE%dt4W?NvFTDwvsG;7wX4mTwyZhafH}l~
zWzF&pbw(zP>(#fe+_-CZbW;8F`kubpw#<g3`G-~<=|6oqEN<eS%U9+UmS*3`xOJ-d
zW>Cx3M~|1a-8p;j_JixM%d*})`FM4k`j;g;KbbB4RXzV!$1yhpZVdx@)oS|>SA#P)
zBrYj<yKist^mVt5J4G*A-m!S0nK)TPaODO|_V*H-Tsz&`d{~PfO_BKhrEt#7<9EDz
SPiw@5JfD<)Oox+!!5RQQgF+Pm

literal 0
HcmV?d00001

diff --git a/modules/backend/widgets/table/assets/js/table.js b/modules/backend/widgets/table/assets/js/table.js
index 23dbe28a9..968da55d5 100644
--- a/modules/backend/widgets/table/assets/js/table.js
+++ b/modules/backend/widgets/table/assets/js/table.js
@@ -53,9 +53,13 @@
         // A reference to the header table
         this.headerTable = null
 
+        // A reference to the toolbar
+        this.toolbar = null
+
         // Event handlers
         this.clickHandler = this.onClick.bind(this)
         this.keydownHandler = this.onKeydown.bind(this)
+        this.toolbarClickHandler = this.onToolbarClick.bind(this)
 
         if (this.options.postback && this.options.clientDataSourceClass == 'client')
             this.formSubmitHandler = this.onFormSubmit.bind(this)
@@ -86,8 +90,8 @@
         // Initialize helpers
         this.navigation = new $.oc.table.helper.navigation(this)
 
-        // Create header and data tables
-        this.buildTables()
+        // Create the UI
+        this.buildUi()
 
         // Register event handlers
         this.registerHandlers()
@@ -128,6 +132,10 @@
 
         if (this.options.postback && this.options.clientDataSourceClass == 'client')
             this.$el.closest('form').bind('oc.beforeRequest', this.formSubmitHandler)
+
+        var toolbar = this.getToolbar()
+        if (toolbar)
+            toolbar.addEventListener('click', this.toolbarClickHandler);
     }
 
     Table.prototype.unregisterHandlers = function() {
@@ -137,6 +145,12 @@
         this.el.removeEventListener('keydown', this.keydownHandler);
         this.keydownHandler = null
 
+        var toolbar = this.getToolbar()
+        if (toolbar)
+            toolbar.removeEventListener('click', this.toolbarClickHandler);
+
+        this.toolbarClickHandler = null
+
         if (this.formSubmitHandler) {
             this.$el.closest('form').unbind('oc.beforeRequest', this.formSubmitHandler)
             this.formSubmitHandler = null
@@ -167,10 +181,14 @@
         return this.cellProcessors[columnName]
     }
 
-    Table.prototype.buildTables = function() {
+    Table.prototype.buildUi = function() {
         this.tableContainer = document.createElement('div')
         this.tableContainer.setAttribute('class', 'table-container')
 
+        // Build the toolbar
+        if (this.options.toolbar)
+            this.buildToolbar()
+
         // Build the headers table
         this.tableContainer.appendChild(this.buildHeaderTable())
 
@@ -181,6 +199,46 @@
         this.updateDataTable()
     }
 
+    Table.prototype.buildToolbar = function() {
+        if (!this.options.adding && !this.options.deleting)
+            return
+
+        this.toolbar = document.createElement('div')
+        this.toolbar.setAttribute('class', 'toolbar')
+
+        if (this.options.adding) {
+            var addBelowButton = document.createElement('a')
+            addBelowButton.setAttribute('class', 'btn add-table-row-below')
+            addBelowButton.setAttribute('data-cmd', 'record-add-below')
+            this.toolbar.appendChild(addBelowButton)
+
+            if (this.navigation.paginationEnabled() || !this.options.rowSorting) {
+                // When the pagination is enabled, or sorting is disabled,
+                // new records can only be added to the bottom of the
+                // table.
+                addBelowButton.textContent = 'Add row'
+            } else {
+                addBelowButton.textContent = 'Add row below'
+
+                var addAboveButton = document.createElement('a')
+                addAboveButton.setAttribute('class', 'btn add-table-row-above')
+                addAboveButton.textContent = 'Add row above'
+                addAboveButton.setAttribute('data-cmd', 'record-add-above')
+                this.toolbar.appendChild(addAboveButton)
+            }
+        }
+
+        if (this.options.deleting) {
+            var deleteButton = document.createElement('a')
+            deleteButton.setAttribute('class', 'btn delete-table-row')
+            deleteButton.textContent = 'Delete row'
+            deleteButton.setAttribute('data-cmd', 'record-delete')
+            this.toolbar.appendChild(deleteButton)
+        }
+
+        this.tableContainer.appendChild(this.toolbar)
+    }
+
     Table.prototype.buildHeaderTable = function() {
         var headersTable = document.createElement('table'),
             row = document.createElement('tr')
@@ -492,6 +550,10 @@
         }
     }
 
+    Table.prototype.getToolbar = function() {
+        return this.tableContainer.querySelector('div.toolbar')
+    }    
+
     // EVENT HANDLERS
     // ============================
 
@@ -517,7 +579,7 @@
     }
 
     Table.prototype.onKeydown = function(ev) {
-        if (ev.keyCode == 65 && ev.altKey) {
+        if (ev.keyCode == 65 && ev.altKey && this.options.adding) {
             if (!ev.shiftKey) {
                 // alt+a - add record below
                 this.addRecord('below')
@@ -530,9 +592,9 @@
             return
         }
 
-        if (ev.keyCode == 68 && ev.altKey) {
+        if (ev.keyCode == 68 && ev.altKey && this.options.deleting) {
             // alt+d - delete record
-            this.deleteRecord('above')
+            this.deleteRecord()
 
             this.stopEvent(ev)
             return
@@ -555,6 +617,25 @@
         }
     }
 
+    Table.prototype.onToolbarClick = function(ev) {
+        var target = this.getEventTarget(ev),
+            cmd = target.getAttribute('data-cmd')
+
+        switch (cmd) {
+            case 'record-add-below': 
+                this.addRecord('below')
+            break
+            case 'record-add-above': 
+                this.addRecord('above')
+            break
+            case 'record-delete': 
+                this.deleteRecord()
+            break
+        }
+
+        this.stopEvent(ev)
+    }
+
     // PUBLIC METHODS
     // ============================
 
@@ -572,6 +653,7 @@
         // Remove references to DOM elements
         this.dataTable = null
         this.headerTable = null
+        this.toolbar = null
 
         // Dispose cell processors
         this.disposeCellProcessors()
@@ -707,7 +789,11 @@
         recordsPerPage: false,
         data: null,
         postback: true,
-        postbackHandlerName: 'onSave'
+        postbackHandlerName: 'onSave',
+        adding: true,
+        deleting: true,
+        toolbar: true,
+        rowSorting: false
     }
 
     // TABLE PLUGIN DEFINITION
diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less
index 098883b0a..873c47851 100644
--- a/modules/backend/widgets/table/assets/less/table.less
+++ b/modules/backend/widgets/table/assets/less/table.less
@@ -124,6 +124,61 @@
             border-right: none;
         }
     }
+
+    .toolbar {
+        background: white;
+        border-bottom: 1px solid #bdc3c7;
+
+        a {
+            color: #323e50;
+            padding: 10px;
+            .opacity(0.5);
+
+            &:hover {
+                .opacity(1);
+            }
+
+            &:before {
+                display: inline-block;
+                content: ' ';
+                width: 16px;
+                height: 16px;
+                margin-right: 8px;
+                position: relative; 
+                top: 3px;
+                background: transparent url(../images/table-icons.gif) no-repeat;
+                background-position: 0 0;
+                background-size: 32px auto;
+            }
+
+            &.add-table-row-above:before {
+                background-position: 0 -56px;
+            }
+
+            &.delete-table-row:before {
+                background-position: 0 -113px;
+            }
+        }
+    }
+}
+
+@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    .table-control .toolbar {
+        a {
+            &:before {
+                background-position: 0px -9px;
+                background-size: 16px auto;
+            }
+
+            &.add-table-row-above:before {
+                background-position: 0 -39px;
+            }
+
+            &.delete-table-row:before {
+                background-position: 0 -66px;
+            }
+        }
+    }
 }
 
 /*