https://ei.se/download/18.50174f1f174bf24f31512148/1615800228812/data-button.js

1/* data button v.0.1 */
2
3svDocReady(function () {
4   var Keys = {
5      SPACE: 32
6   };
7   
8   dataButton = function() {
9      var init = function($context) {
10         $context.find("[data-button='open-button'], [data-button='toggle-button'], [data-button='close-button']").each(function() {
11            var button = jQuery(this);
12            var duration = button.attr("data-button-transition-duration");
13            var options = {
14               type: button.attr("data-button"),
15               blur: button.attr("data-button-blur") === "true",
16               controlsId: button.attr("data-button-controls-id") || button.attr("data-button-controls-class"),
17               pressedClass: button.attr("data-button-pressed-class"),
18               expanded: button.attr("data-button-expanded") || false,
19               groupName: button.attr("data-button-group"),
20               groupSkipTransition: button.attr("data-button-group-skip-transition"),
21               focusTarget: button.attr("data-button-focus-target"),
22               transition: button.attr("data-button-transition"),
23               transitionClose: button.attr("data-button-controls-transition-close"),
24               transitionDuration: typeof duration !== "undefined" ? parseInt(duration) : duration,
25               onStateChange: function(state) {}
26            };
27            button.dataButton(options);
28         });
29      };
30      return {
31         init: init
32      };
33   } ();
34   
35   var transitionMirrorMap = {
36      "show": "hide",
37      "slideDown": "slideUp",
38      "slideUp": "slideDown",
39      "fade": "fade"
40   };
41   
42   var methods = {
43      init: function (options) {
44         var thisButton = jQuery(this);
45         
46         if (typeof options.transitionClose === "undefined" && 
47             typeof options.transition !== "undefined") {
48            options.transitionClose = transitionMirrorMap[options.transition];
49         }
50         
51         var oldOptions = getOptions(thisButton);
52         
53         if (typeof oldOptions !== "undefined") {
54            var newOptions = jQuery.extend({}, oldOptions, options);
55            thisButton.data("button-options", newOptions);
56            return;
57         } else {
58            options = jQuery.extend({}, jQuery.fn.dataButton.defaults, options);
59            thisButton.data("button-options", options);
60         }
61         
62         if (options.groupName) {
63            thisButton.attr("data-button-group", options.groupName);
64         }
65         
66         if (options.controlsId && options.controlsId.length > 0) {
67            thisButton.attr("aria-controls", options.controlsId);
68         }
69         
70         switch (options.type) {
71            case "open-button":
72               if (!hasAttr(thisButton, "aria-expanded")) {
73                  thisButton.attr("aria-expanded", "false");
74               }
75               break;
76            case "close-button":
77               if (!hasAttr(thisButton, "aria-expanded")) {
78                  thisButton.attr("aria-expanded", "true");
79               }
80               break;
81            case "toggle-button":
82               if (!hasAttr(thisButton, "aria-pressed")) {
83                  thisButton.attr("aria-pressed", "false");
84               }
85               if (!hasAttr(thisButton, "aria-expanded")) {
86                  thisButton.attr("aria-expanded", "false");
87               }
88               break;
89            default:
90         }
91         
92         if (options.expanded) {
93            openButton(thisButton, jQuery.extend({}, options, {transition: "show"}));
94         }
95         
96         thisButton.on("click keypress", function(e) {
97            if (e.type === "click" || e.which == Keys.SPACE) {
98               e.preventDefault();
99               var thisButton = jQuery(this);
100               var options = getOptions(thisButton);
101               
102               switch (options.type) {
103                  case "open-button":
104                     openButton(thisButton, options);
105                  	break;
106                  case "close-button":
107                     closeButton(thisButton, options);
108                     break;
109                  case "toggle-button":
110                     toggleButton(thisButton, options);
111                     break;
112                  default:
113               }
114               
115               if (options.focusTarget && options.focusTarget.length > 0) {
116                  var focusTarget = options.focusTarget;

117                  jQuery("." + focusTarget).trigger("focus");
118               }
119            }
120         });
121      },
122      open: openButton,
123      close: closeButton,
124      toggle: toggleButton
125   };
126   
127   function toggleButton(button, options) {
128      if (button.attr("aria-expanded") === "false") {
129         openButton(button, options);
130      } else {
131         closeButton(button, options);
132      }
133   }
134   
135   function openButton(button, options) {
136      var openTargetId = options.controlsId;
137      var $openTarget = jQuery("#" + openTargetId + ", ." + openTargetId);
138      var transition = options.transition;
139      
140      button.addClass(options.pressedClass);
141      
142      if (options.blur) {
143         var blurElement = jQuery(".ei-blur");
144         if (options.modal) {
145            jQuery("body").addClass("ei-modal-open");
146         }
147         
148         if (options.transition === "show") {
149            blurElement.show();
150         } else {
151            blurElement.fadeIn(options.transitionDuration);
152         }
153         
154         var blurOptions = getOptions(blurElement);
155         blurOptions.controlsId = openTargetId;
156         blurOptions.transitionClose = options.transitionClose;
157         blurElement.attr("data-button-controls-id", openTargetId);
158         blurElement.attr("aria-controls", openTargetId);
159         blurElement.attr("aria-expanded", "true");
160      }
161      
162      if (options.groupName) {
163         var $groupButtons = jQuery("[data-button-group=" + options.groupName + "][aria-pressed='true']").not(button);
164      	
165         if ($groupButtons.length > 0) {
166            var closeOptions = {};
167            if (options.groupSkipTransition) {
168               transition = "show";
169               closeOptions.transitionClose = "hide";
170            }
171            $groupButtons.dataButton("close", closeOptions);
172         }
173      }
174      
175      switch (transition) {
176         case "show":
177         	$openTarget.show();
178            break;
179         case "fade":
180            $openTarget.fadeIn(options.transitionDuration);
181            break;
182         case "slideDown":
183            $openTarget.slideDown(options.transitionDuration);
184            break;
185         case "slideUp":
186            $openTarget.slideUp(options.transitionDuration);
187            break;
188         default:
189            $openTarget.show();
190      }
191      
192      stateChange(options, true);
193   }
194   
195   function closeButton(button, options) {
196      var closeTargetId = options.controlsId;
197      var $closeTarget = jQuery("#" + closeTargetId + ", ." + closeTargetId);
198      
199      button.removeClass(options.pressedClass);
200      
201      var blurControls = jQuery(".ei-blur").attr("data-button-controls-id");
202      if (blurControls === options.controlsId) {
203         var blurElement = jQuery(".ei-blur");
204         if (options.transitionClose === "show") {
205            blurElement.hide();
206         } else {
207            blurElement.fadeOut(options.transitionDuration);
208         }
209         blurElement.attr("aria-expanded", "false");
210      }
211      
212      switch (options.transitionClose) {
213         case "hide":
214            $closeTarget.hide();
215            break;
216         case "fade":
217            $closeTarget.fadeOut(options.transitionDuration);
218            break;
219         case "slideDown":
220            $closeTarget.slideDown(options.transitionDuration);
221            break;
222         case "slideUp":
223            $closeTarget.slideUp(options.transitionDuration);
224            break;
225         default:
226            $closeTarget.hide();
227      }
228      jQuery("body").removeClass("ei-modal-open");
229      
230      stateChange(options, false);
231   }
232   
233   function stateChange(options, open) {
234      if (options.onStateChange) {
235         options.onStateChange({options: options, open: open});
236      }
237      
238      jQuery("[aria-controls=" + options.controlsId + "]").each(function() {
239         jQuery("[aria-controls=" + options.controlsId + "]").each(function() {
240            var $button = jQuery(this);
241            var options = $button.data("button-options");
242            
243            if (options.pressedClass) {
244               $button.toggleClass(options.pressedClass, open);
245            }
246            $button.attr("aria-pressed", open);
247            $button.attr("aria-expanded", open);
248         });
249      });
250   }
251   
252   function hasAttr(element, attributeName) {
253      return typeof element.attr(attributeName) !== "undefined";
254   }
255   
256   function getOptions(button) {
257      return button.data("button-options");
258   }
259   
260   jQuery.fn.dataButton = function(methodOrOptions, methodArguments) {
261      var objs = this;
262      for (var i = 0; i < objs.length; i++) {
263         var obj = objs[i];
264         if (methods[methodOrOptions]) {
265            var method = methods[methodOrOptions];
266            var options = getOptions(jQuery(this));
267            if (options) {
268               if (methodArguments) {
269                  options = jQuery.extend({}, options, methodArguments);
270               }
271               method.apply(obj, [jQuery(obj), options]);
272            } else {
273               console.error("dataButton not inittialized for object", this);
274            }
275         } else if (typeof methodOrOptions === "object" || !methodOrOptions) {
276            methods.init.apply(obj, arguments);
277         } else {
278            console.error("Method " + methodOrOptions + " does not exist on jQuery.dataButton", obj);
279         }
280      }
281      return this;
282   };
283   
284   jQuery.fn.dataButton.defaults = {
285      transition: "show",
286      transitionClose: "hide",
287      transitionDuration: 100
288   };
289   
290   var $blurElement = jQuery("<a href='#' class='ei-blur' aria-expanded='true' data-button='close-button' role='button' aria-label='Stäng popup'></a>");
291   jQuery("body").append($blurElement);
292   dataButton.init(jQuery(document));
293});