https://kuvataiteilijamatrikkeli.fi/wp-content/cache/minify/c0e36.js

1"use strict"
2/*!
3
4Drawer jQuery plugin
5Version: 0.3 (2020-05-28 10:00)
6Package: Konsepto Front-end Framework
7Author: Mikko Paltamaa / Konsepto
8Website: https://konsepto.fi
9License: The MIT License
10
11
12Description: 
13
14This plugin creates a drawer component that you can use to hide additional functionality or content.
15
16Based on its options, it adds: 
17
18- Clickable toggle button that opens and closes the drawer
19- Hover interactions that works better than plain CSS hover styles (because of delays and animations)
20
21It also adds certain ARIA attributes and assistive texts for screen readers. The result should be quite accessible as a drawer component. It follows WCAG 2.1 guidelines.
22
23The drawer element (selector) can be any container element (often a DIV element). The toggle button should be a BUTTON element or similar (like INPUT type 'button' or A).
24
25You can set closed drawers to be always visible on certain screen withds by defining 'display: block !important' to the drawer element.
26
27You can use 'no-script' HTML class to add plain CSS functionality in case this plugin is not running.
28
29You can use the settings' 'group' parameter to create drawer groups, inside which other drawers will automatically close before opening a new drawer. This allows you to create an accordion component.
30
31See examples below for the available options.
32
33Tested at 2020-05-28: Windows 10: Chrome (latest), NVDA (latest); Samsung Galaxy S7: Chrome (latest).
34
35
36Usage: 
37
38$(selector).drawer([object options]);
39
40Returns: object jQuery
41
42Requires: jQuery
43
44
45Examples: 
46
47
48// Create a drawer for main navigation
49$('#block-main-navigation').drawer();
50
51// Create a drawer for main navigation with all options
52$('#block-main-navigation').drawer({
53	labels: { // Labels (use for translations)
54		'open': 'Open navigation menu', 
55		'close': 'Close navigation menu' 
56	}, 
57	state: 'closed', // Drawer's initial state
58	toggleButton: $('#toggle-navigation-menu-button'), // A jQuery object / an element / a selector string that opens and closes the drawer (should be a button; if null, a new button is created)
59	click: true, // Click interaction
60	clickDelay: 500, // Click delay speed (ms)
61	clickShowSpeed: 500, // Click show speed (ms)
62	clickHideSpeed: 0, // Click hide speed (ms)
63	hoverElement: null, // A jQuery object / an element / a selector string that opens and closes the drawer on hover
64	hover: true, // Hover interaction
65	group: 'header', // Drawer group's name (automatically closes other drawers of the same group when opened)
66	hoverShowSpeed: 500, // Hover show speed (ms)
67	hoverHideSpeed: 500, // Hover hide speed (ms)
68	hoverDelay: 500, // Hover delay speed (ms)
69	transition: 'slide', // Transition: 'slide' (default) or 'fade'
70	easing: 'swing' // Easing: 'swing' (default) or 'linear'
71});
72
73
74Accessibility: 
75
76https://www.w3.org/TR/WCAG21/
77https://www.w3.org/WAI/WCAG21/quickref/
78https://www.w3.org/WAI/tutorials/menus/flyout/
79https://www.accessibility-developer-guide.com/examples/widgets/dropdown/
80
81
82Plugin structure: 
83
84https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js
85
86
87*/
88;;(function($,window,document,undefined){var pluginName="drawer";var lang=($('html').attr('lang')?$('html').attr('lang'):'en');var translations={'en':{labels:{'open':'Open','close':'Close'}},'fi':{labels:{'open':'Open','close':'Close'}},'sv':{labels:{'open':'Open','close':'Close'}}};var defaultOptions={labels:(typeof translations[lang]==='undefined'?(typeof translations[lang.split('-')[0]]==='undefined'?translations['en'].labels:translations[lang.split('-')[0]].labels):translations[lang].labels),state:'closed',group:null,toggleButton:null,click:true,clickShowSpeed:250,clickHideSpeed:250,clickDelay:0,hoverElement:null,hover:true,hoverShowSpeed:500,hoverHideSpeed:500,hoverDelay:500,transition:'slide',easing:'swing',};var groups={};function Plugin(element,options){this._name=pluginName;this.element=element;this.state='closed';this.$element=$(element);this.$toggleButton=$();this.$hoverElement=$();this.settings=$.extend({},defaultOptions,options);this._init();}
89$.extend(Plugin.prototype,{_init:function(){var base=this;if(typeof base.settings.group==='string'){if(typeof groups[base.settings.group]==='undefined'){groups[base.settings.group]=[];}
90groups[base.settings.group].push(base);}
91base._processElements();},_processElements:function(){var base=this;base.$element.removeClass('no-script open closed').addClass('drawer');if(base.settings.toggleButton!==null){base.$toggleButton=$(base.settings.toggleButton);}

92else{if(base.settings.click){base.$toggleButton=$('<button class="toggle-drawer-button">').insertBefore(base.$element);}}
93if(base.settings.hoverElement!==null){base.$hoverElement=$(base.settings.hoverElement);}
94base.$toggleButton.attr('aria-haspopup','true');base.$toggleButton.removeClass('no-script active').addClass('toggle-drawer');if(base.settings.state==='closed'){base.state='closed';base.$element.removeClass('open').addClass('closed');base.$toggleButton.removeClass('active');base.$toggleButton.attr('aria-expanded','false').html('<span class="assistive text">'+base.settings.labels['open']+'</span>');}
95else{base.state='open';base.$element.removeClass('closed').addClass('open');base.$toggleButton.addClass('active');base.$toggleButton.attr('aria-expanded','true').html('<span class="assistive text">'+base.settings.labels['close']+'</span>');}
96base._attachEventHandlers();},_attachEventHandlers:function(){var base=this;if(base.settings.click){base.$toggleButton.addClass('click-interaction');base.$toggleButton.on('click',function(e){base.toggleDrawer();e.preventDefault();});}
97if(base.settings.hover){base.$element.addClass('hover-interaction');base.$hoverElement.on('mouseenter',function(e){if(base.state==='closed'){base.openDrawer('hover');}});base.$hoverElement.on('mouseleave',function(e){if(base.state==='closed'){base.closeDrawer('hover');}});}
98base.$element.on('keyup',function(e){if(e.key==="Escape"){base.closeDrawer();}});},toggleDrawer:function(){var base=this;if(base.state==='closed'){base.openDrawer();}
99else{base.closeDrawer();}},openDrawer:function(interaction){var base=this;var closeDelay=0;if(typeof groups[base.settings.group]!=='undefined'){groups[base.settings.group].forEach(function(drawer){if(drawer.state==='open'){drawer.closeDrawer(interaction);closeDelay=(typeof interaction!=='undefined'&&interaction=='hover'?base.settings.hoverDelay:base.settings.clickDelay)+(typeof interaction!=='undefined'&&interaction=='hover'?base.settings.hoverHideSpeed:base.settings.clickHideSpeed);}});}
100if(typeof interaction==='undefined'||interaction=='click'){base.state='open';base.$element.removeClass('closed').addClass('open');base.$toggleButton.addClass('active');base.$toggleButton.attr('aria-expanded','true').html('<span class="assistive text">'+base.settings.labels['close']+'</span>');}
101var transition=(base.settings.transition==='slide'?'slideDown':'fadeIn');base.$element.stop(true,false);base.$element[transition]((typeof interaction!=='undefined'&&interaction=='hover'?base.settings.hoverShowSpeed:base.settings.clickShowSpeed),base.settings.easing,function(){base.$element.css('overflow','visible');});},closeDrawer:function(interaction){var base=this;if(typeof interaction==='undefined'||interaction=='click'){base.state='closed';base.$element.removeClass('open').addClass('closed');base.$toggleButton.removeClass('active');base.$toggleButton.attr('aria-expanded','false').html('<span class="assistive text">'+base.settings.labels['open']+'</span>');}
102var transition=(base.settings.transition==='slide'?'slideUp':'fadeOut');base.$element.stop(true,false);base.$element.delay((typeof interaction!=='undefined'&&interaction=='hover'?base.settings.hoverDelay:base.settings.clickDelay))[transition]((typeof interaction!=='undefined'&&interaction=='hover'?base.settings.hoverHideSpeed:base.settings.clickHideSpeed),base.settings.easing,function(){base.$element.css('overflow','visible');});}});$.fn[pluginName]=function(options){return this.each(function(){if(!$.data(this,'plugin_'+pluginName)){$.data(this,'plugin_'+pluginName,new Plugin(this,options));}});};})(jQuery,window,document);