From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 11 Jan 2021 07:31:26 +0000 (+0100)
Subject: wait #4135 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b7f3386416634caf394da7db4805c577cd9d9ce8;p=Animations.git

wait #4135 @0.75
---

diff --git a/Discac/Discac.zip b/Discac/Discac.zip
index 15beb02..2f28b24 100644
Binary files a/Discac/Discac.zip and b/Discac/Discac.zip differ
diff --git a/Discac/index.html b/Discac/index.html
index b6ceacc..a8bb00e 100644
--- a/Discac/index.html
+++ b/Discac/index.html
@@ -81,7 +81,7 @@
         .multi-select-menu label {
             color: #464646;
             display: block;
-            padding: 2px 10px;
+            padding: 3px 10px;
             font-size: 16px;
         }
 
@@ -95,7 +95,7 @@
             display: block;
             color: #474747;
             font-size: 0.875em;
-            padding: 0.2em 0.6em;
+            padding: 0.2em 2em 0.2em 0.6em;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -105,6 +105,19 @@
             position: relative;
         }
 
+        .multi-select-button.active {
+            background-color: #66a11a;
+            color: #fff;
+        }
+
+        .multi-select-button.active:after{
+            border-color: #fff transparent transparent transparent;
+        }
+
+        .multi-select-container--open .multi-select-button.active::after{
+            border-color: transparent transparent #fff transparent
+        }
+
         .multi-select-button:after {
             content: "";
             display: inline-block;
@@ -112,7 +125,7 @@
             height: 0;
             border-style: solid;
             border-width: 0.4em 0.4em 0 0.4em;
-            border-color: #999 transparent transparent transparent;
+            border-color: #474747 transparent transparent transparent;
             margin-left: 0.4em;
             vertical-align: 0.1em;
             position: absolute;
@@ -150,8 +163,26 @@
             border-color: transparent transparent #999 transparent;
         }
 
-        #emptyres{
-            padding:0 25px;
+        .checkbox {
+            display: inline-block;
+            width: 19px;
+            height: 19px;
+            background-image: url("checkbox.png");
+            background-size: 19px auto;
+            background-repeat: no-repeat;
+            background-position: 0 100%;
+            margin-right: 5px;
+            vertical-align: top;
+            position: relative;
+            top: 1px;
+        }
+
+        .checkbox[checked] {
+            background-position: 0 0;
+        }
+
+        #emptyres {
+            padding: 0 25px;
         }
 
     </style>
@@ -280,8 +311,15 @@
             });
         });
 
+        updateCheckboxes();
+
+        function updateCheckboxes() {
+            $(":checkbox").checkbox();
+            $(":radio").checkbox();
+        }
+
         function updateChapters() {
-            var hasVisible=false;
+            var hasVisible = false;
             $('nav a').each(function () {
                 var hide = false;
                 var a = $(this);
@@ -302,14 +340,15 @@
                 if (hide) {
                     $(a).hide();
                 } else {
-                    hasVisible=true;
+                    hasVisible = true;
                     $(a).show();
                 }
+                updateCheckboxes();
             });
 
-            if(hasVisible){
+            if (hasVisible) {
                 $("#emptyres").hide();
-            }else{
+            } else {
                 $("#emptyres").show();
             }
 
@@ -321,7 +360,139 @@
         });
 
         updateChapters();
+
+
     });
+    (function ($) {
+        $.propHooks.checked = {
+            set: function (el, value) {
+                if (el.checked !== value) {
+                    el.checked = value;
+                    $(el).trigger('checkboxchange');
+                }
+            }
+        };
+
+        function JQcheckbox(element) {
+            this.element = element;
+            this.type = this.element.attr('type');
+            this.input = element;
+            this.substitute;
+            this.label = element.parents("label");
+            if (this.label.length == 0) {
+                this.label = $('label[for="' + element.attr('id') + '"]');
+            }
+            this.label.attr('data-value', element.attr('value'));
+            this.init();
+        }
+
+        JQcheckbox.prototype = {
+            init: function () {
+                var $this = this;
+                this.element.hide();
+                this.element.next(".checkbox").remove();
+                this.substitute = $('<div class="' + this.type + '"></div>');
+
+                var ignore = ['name', 'id', 'type', 'checked', 'style', 'value', 'class'];
+
+                $.each(this.element.attributes, function (k, v) {
+                    if (ignore == undefined || ignore.indexOf(k) == -1) {
+                        $this.substitute.attr(k, v);
+                    }
+                });
+                this.element.after(this.substitute);
+                this.initEvents();
+                this.initState();
+            },
+            initEvents: function () {
+                var $this = this;
+                this.substitute.off('click');
+                this.substitute.on('click', function () {
+                    $this.click();
+                    return false;
+                });
+
+                this.element.off('checkboxchange');
+                this.element.on('checkboxchange', function () {
+                    $this.initState();
+                });
+                this.label.off('click');
+                this.label.on('click', function (e) {
+                    if (e.target == this) {
+                        $this.click();
+                        return false;
+                    }
+                });
+
+            },
+            click: function () {
+                var change = false;
+                if (this.type == 'radio') {
+                    change = this.check();
+                } else {
+                    change = this.toggle();
+                }
+
+                if (change) {
+                    this.element.trigger('change');
+                }
+            },
+            initState: function () {
+                if (!this.element.prop('checked')) {
+                    this.uncheck();
+                } else {
+                    this.check();
+                }
+            },
+            toggle: function () {
+                this.element.trigger('change');
+                if (this.element.prop('checked')) {
+                    this.uncheck();
+                } else {
+                    this.check();
+                }
+                return true;
+            },
+            check: function () {
+                if (this.type == 'radio') {
+                    try {
+                        $(':radio[name="' + this.element.attr('name') + '"]').not(this.element).each(function () {
+                            $(this).data('checkbox').uncheck();
+                        });
+                    } catch (err) {
+
+                    }
+                }
+
+                if (this.substitute.attr('checked') != 'checked') {
+                    this.substitute.attr('checked', 'checked');
+                    this.element.prop('checked', true);
+                    this.label.attr('data-checked', 'checked');
+                    return true;
+                }
+                return false;
+            },
+            uncheck: function () {
+                this.label.attr('data-checked', null);
+                this.substitute.attr('checked', null);
+                this.element.prop('checked', false);
+            }
+
+
+        };
+
+        jQuery.fn.checkbox = function () {
+            return this.each(function () {
+                var $this = $(this);
+                if ($(this).data('checkbox') != undefined) {
+                    $(this).data('checkbox').initState();
+                    return;
+                }
+                $(this).data('checkbox', new JQcheckbox($this));
+            })
+        };
+    })(jQuery);
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Discac/jquery.multi-select.js b/Discac/jquery.multi-select.js
index 7dca470..8143f30 100644
--- a/Discac/jquery.multi-select.js
+++ b/Discac/jquery.multi-select.js
@@ -141,11 +141,11 @@
             this.$button.empty();
 
             if (selected.length == 0) {
-                this.$button.text(this.settings['noneText']);
+                this.$button.removeClass('active').text(this.settings['noneText']);
             } else if ((selected.length === options.length) && this.settings['allText']) {
-                this.$button.text(this.settings['allText']);
+                this.$button.removeClass('active').text(this.settings['allText']);
             } else {
-                this.$button.text(this.settings['noneText'] + ' : ' + selected.join(', '));
+                this.$button.addClass('active').text(this.settings['noneText'] + ' : ' + selected.join(', '));
             }
         },