https://www.sporting-magazin.de/wp-content/themes/papr/assets/js/jquery.style.switcher.js?ver=1.0

1// https://github.com/camsjams/jquery-style-switcher
2/**
3@author Cameron Manavian
4jQuery Style Switcher
5
6The MIT License (MIT)
7
8Copyright (c) 2014 Cameron Manavian
9
10Permission is hereby granted, free of charge, to any person obtaining a copy
11of this software and associated documentation files (the "Software"), to deal
12in the Software without restriction, including without limitation the rights
13to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14copies of the Software, and to permit persons to whom the Software is
15furnished to do so, subject to the following conditions:
16
17The above copyright notice and this permission notice shall be included in all
18copies or substantial portions of the Software.
19
20THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
26SOFTWARE.
27**/
28
29(function($) {
30    var jStyleSwitcher,
31        _defaultOptions = {
32            hasPreview: true,
33            defaultThemeId: 'jssDefault',
34            fullPath: 'css/',
35            cookie: {
36                expires: "",
37                isManagingLoad: true
38            }
39        },
40        // private
41        _cookieKey = 'jss_selected',
42        _docCookies = {};
43
44    /*\
45    |*|
46    |*|  :: cookies.js ::
47    |*|
48    |*|  A complete cookies reader/writer framework with full unicode support.
49    |*|
50    |*|  revision #1
51    |*|
52    |*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
53    |*|
54    |*|  This framework is released under the GNU Public License, version 3 or later.
55    |*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
56    |*|
57    |*|  Syntaxes:
58    |*|
59    |*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
60    |*|  * docCookies.getItem(name)
61    |*|  * docCookies.removeItem(name[, path[, domain]])
62    |*|  * docCookies.hasItem(name)
63    |*|  * docCookies.keys()
64    |*|
65    \*/
66    _docCookies = {
67        getItem: function(sKey) {
68            if (!sKey) {
69                return null;
70            }
71            return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
72        },
73        setItem: function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
74            if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
75                return false;
76            }
77            var sExpires = "";
78            if (vEnd) {
79                switch (vEnd.constructor) {
80                    case Number:
81                        sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
82                        break;
83                    case String:
84                        sExpires = "; expires=" + vEnd;
85                        break;
86                    case Date:
87                        sExpires = "; expires=" + vEnd.toUTCString();
88                        break;
89                }
90            }
91            document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
92            return true;
93        },
94        removeItem: function(sKey, sPath, sDomain) {
95            if (!this.hasItem(sKey)) {
96                return false;
97            }
98            document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
99            return true;
100        },
101        hasItem: function(sKey) {
102            if (!sKey) {
103                return false;
104            }
105            return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
106        },
107        keys: function() {
108            var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
109            for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
110                aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
111            }
112            return aKeys;
113        }
114    };
115
116    jStyleSwitcher = function($root, config) {
117        return this.init($root, config);
118    };
119
120    jStyleSwitcher.prototype = {
121
122        /**
123         * {Object} DOM reference to style option list
124         */
125        $root: null,
126
127        /**
128         * {Object} configs for the style switcher
129         */
130        config: {},
131
132        /**
133         * {Object} jQuery reference to <link> tag for swapping CSS
134         */
135        $themeCss: null,
136
137        /**
138         * {String} default theme page was loaded with
139         */
140        defaultTheme: null,
141
142        init: function($root, config) {
143            this.$root = $root;
144            this.config = config ? config : {};
145            this.setDefaultTheme();
146            if (this.defaultTheme) {
147                // try cookies
148                if (this.config.cookie) {
149                    this.checkCookie();
150                }
151                // try hover
152                if (this.config.hasPreview) {

153                    this.addHoverEvents();
154                }
155                // finally, add click events
156                this.addClickEvents();
157            } else {
158                this.$root.addClass('jssError error level0');
159            }
160        },
161
162        setDefaultTheme: function() {
163            this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
164            if (this.$themeCss.length) {
165                this.defaultTheme = this.$themeCss.attr('href');
166            }
167        },
168
169        resetStyle: function() {
170            this.updateStyle(this.defaultTheme);
171        },
172
173        updateStyle: function(newStyle) {
174            this.$themeCss.attr('href', newStyle);
175        },
176
177        getFullAssetPath: function(asset) {
178            return this.config.fullPath + asset + '.css';
179        },
180
181        checkCookie: function() {
182            var styleCookie;
183            // if using cookies and using JavaScript to load css
184            if (this.config.cookie && this.config.cookie.isManagingLoad) {
185                // check if css is set in cookie
186                styleCookie = _docCookies.getItem(_cookieKey);
187                if (styleCookie) {
188                    newStyle = this.getFullAssetPath(styleCookie);
189                    // update link tag
190                    this.updateStyle(newStyle);
191                    // update default ref
192                    this.defaultTheme = newStyle;
193                }
194            }
195        },
196
197        addHoverEvents: function() {
198            var self = this;
199            this.$root.find('a').hover(
200                function() {
201                    var asset = $(this).data('theme'),
202                        newStyle = self.getFullAssetPath(asset);
203                    // update link tag
204                    self.updateStyle(newStyle);
205                },
206                function() {
207                    // reset link tag
208                    self.resetStyle();
209                }
210            );
211        },
212
213        addClickEvents: function() {
214            var self = this;
215            this.$root.find('.setColor').on('click',
216                function() {
217                    var asset = $(this).data('theme'),
218                        newStyle = self.getFullAssetPath(asset);
219                    // update link tag
220                    self.updateStyle(newStyle);
221                    // update default ref
222                    self.defaultTheme = newStyle;
223                    // try to store cookie
224                    if (self.config.cookie) {
225                        _docCookies.setItem(_cookieKey, asset, self.config.cookie.expires, '/');
226                    }
227                }
228            );
229        }
230    };
231
232    $.fn.styleSwitcher = function(options) {
233        return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
234    };
235
236
237    function createCookie(name, value, days) {
238        var expires;
239
240        if (days) {
241            var date = new Date();
242            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
243            expires = "; expires=" + date.toGMTString();
244        } else {
245            expires = "";
246        }
247        document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
248    }
249
250    function readCookie(name) {
251        var nameEQ = encodeURIComponent(name) + "=";
252        var ca = document.cookie.split(';');
253        for (var i = 0; i < ca.length; i++) {
254            var c = ca[i];
255            while (c.charAt(0) === ' ')
256                c = c.substring(1, c.length);
257            if (c.indexOf(nameEQ) === 0)
258                return decodeURIComponent(c.substring(nameEQ.length, c.length));
259        }
260        return null;
261    }
262
263    function eraseCookie(name) {
264        createCookie(name, "", -1);
265    }
266
267
268
269    //switcher js initialization
270    $(function() {
271
272        // $('#my_switcher ul').styleSwitcher({
273        //     defaultThemeId: 'papr-dark-css',
274        //     hasPreview: false,
275        //     fullPath: directory_uri.templateUrl + '/assets/css/',
276        //     cookie: {
277        //         expires: 2628000, // 3600 == 1 hour
278        //         isManagingLoad: true
279        //     }
280        // });
281
282        function setStyleCookie() {
283            styleCookieVal = $('body').hasClass('active-dark-mode') ? 'dark' : 'light';
284            Cookies.set('styleCookieName', styleCookieVal, { expires: 7 });
285            // Cookies.set('styleCookieName', styleCookieVal);
286
287        }
288

289        if (Cookies.get('styleCookieName') == 'dark') {
290            $('body').addClass('active-dark-mode');
291        } else if(Cookies.get('styleCookieName') == 'light') {
292            $('body').removeClass('active-light-mode');
293        } else {
294            $('body').removeClass('active-light-mode');
295        }
296
297        // Check Cookie
298        // eraseCookie('jss_selected');
299        var activeStyle = Cookies.get('styleCookieName');
300        if( activeStyle == "dark" ){
301            $('#my_switcher').find('.setColor.dark').addClass('active');
302            $('body').removeClass('active-light-mode').addClass('active-dark-mode');
303        } else if(activeStyle == "light"){
304            $('#my_switcher').find('.setColor.light').addClass('active');
305            $('body').removeClass('active-dark-mode').addClass('active-light-mode');
306        } else {
307            // Swicher Active Class Baseon Body Class
308            if($("body").hasClass("active-dark-mode")){
309                $('#my_switcher').find('.setColor.light').removeClass('active');
310                $('#my_switcher').find('.setColor.dark').addClass('active');
311            }else{
312                $('#my_switcher').find('.setColor.dark').removeClass('active');
313                $('#my_switcher').find('.setColor.light').addClass('active');
314            }
315        }
316        // Set Click
317        $('#my_switcher .setColor').on('click', function() {
318            $(this).closest('ul').find('li').siblings().find('.active').removeClass('active');
319            $(this).addClass('active');
320            setStyleCookie();
321        });
322
323        // Add or Remove Class into body when click swicher
324        $('#my_switcher .setColor.dark').on('click', function() {
325            $('body').removeClass('active-light-mode').addClass('active-dark-mode');
326            setStyleCookie();
327        });
328        $('#my_switcher .setColor.light').on('click', function() {
329            $('body').removeClass('active-dark-mode').addClass('active-light-mode');
330            setStyleCookie();
331        });
332
333    });
334
335})(jQuery);