Toggle WIP

src/pat/toggle/README.md

@@ -0,0 +1,26 @@
+---
+permalink: "pat/toggle/"
+title: Toggle
+---
+
+# Toggle pattern
+
+Toggles things
+
+## Configuration
+
+| Option | Type | Default | Description |
+|:-:|:-:|:-:|:-:|
+| target | string | null | selector of the target elements to toggle ('undefied')
+| targetScope | null | selector of a target scope element in anchestors ('global')
+| attribute | string | null | element attribute which will be toggeled ('class')
+| event | string | null |  event which will trigger toggling ('click')
+
+## Examples
+
+## Toggle itself
+
+<button type="button"
+        class="btn btn-default pat-toggle"
+             data-pat-toggle="value:btn-lg;">This button goes bigger/smaller!</button>
+

src/pat/toggle/toggle.js

@@ -0,0 +1,93 @@
+import $ from "jquery";
+import Base from "patternslib/src/core/base";
+
+export default Base.extend({
+        name: "toggle",
+        trigger: ".pat-toggle",
+        parser: "mockup",
+        defaults: {
+            attribute: "class",
+            event: "click",
+            targetScope: "global",
+        },
+        init: function () {
+            var self = this;
+
+            if (!self.options.target) {
+                self.$target = self.$el;
+            } else if (self.options.targetScope === "global") {
+                self.$target = $(self.options.target);
+            } else {
+                //self.$target = self.$el[self.options.menu](self.options.target);
+                self.$target = self.$el
+                    .parents(self.options.targetScope)
+                    .first()
+                    .find(self.options.target);
+            }
+
+            if (!self.$target || self.$target.length === 0) {
+                $.error('No target found for "' + self.options.target + '".');
+            }
+
+            self.on(self.options.event, function (e) {
+                self.toggle();
+                e.stopPropagation();
+                e.preventDefault();
+            });
+        },
+        isMarked: function () {
+            var self = this;
+            var marked = false;
+
+            for (var i = 0; i < this.$target.length; i = i + 1) {
+                if (self.options.attribute === "class") {
+                    if (this.$target.eq(i).hasClass(this.options.value)) {
+                        marked = true;
+                    } else {
+                        marked = false;
+                        break;
+                    }
+                } else {
+                    if (
+                        this.$target.eq(i).attr(this.options.attribute) ===
+                        this.options.value
+                    ) {
+                        marked = true;
+                    } else {
+                        marked = false;
+                        break;
+                    }
+                }
+            }
+            return marked;
+        },
+        toggle: function () {
+            var self = this;
+            if (self.isMarked()) {
+                self.remove();
+            } else {
+                self.add();
+            }
+        },
+        remove: function () {
+            var self = this;
+            self.emit("remove-attr");
+            if (self.options.attribute === "class") {
+                self.$target.removeClass(self.options.value);
+            } else {
+                self.$target.removeAttr(self.options.attribute);
+            }
+            self.emit("attr-removed");
+        },
+        add: function () {
+            var self = this;
+            self.emit("add-attr");
+            if (self.options.attribute === "class") {
+                self.$target.addClass(self.options.value);
+            } else {
+                self.$target.attr(self.options.attribute, self.options.value);
+            }
+            self.emit("added-attr");
+        },
+    });
+

src/patterns.js

@@ -43,7 +43,7 @@ import "./pat/select2/select2";
 //import "./pat/texteditor/pattern";
 //import "./pat/thememapper/pattern";
 //import "./pat/tinymce/pattern";
-//import "./pat/toggle/pattern";
+import "./pat/toggle/toggle";
 //import "./pat/toolbar/pattern";
 //import "./pat/tooltip/pattern";
 import "./pat/tree/tree";