https://moratelindo.co.id/eng/js/modules/color-themes.js

1$(function () {
2    var colorThemesCss = {
3        default: 'main-default',
4        cyan: 'main-cyan',
5        green: 'main-green',
6        red: 'main-red',
7        yellow: 'main-yellow',
8        blue: 'main-blue'
9    };
10
11    var $colorItems = $('.color-themes > li');
12
13
14    var COOKIE_THEME = 'color-theme';
15    var curCookieTheme = getCookie(COOKIE_THEME);
16    if (curCookieTheme) {
17        var $colorThemePreloader = $('.color-theme-preloader');
18        if($colorThemePreloader.length){  //replace img for logo(preload v1)
19            var newSrc = replaceSrcForImg(curCookieTheme, $colorThemePreloader.attr('src'));
20            var tempImg = new Image();
21            tempImg.src = newSrc;
22            tempImg.onload = function(){
23                $colorThemePreloader.attr('src', newSrc).css('visibility', 'visible');
24            };
25        }
26        setTheme(curCookieTheme);
27        replaceMarkerForMaps(curCookieTheme);
28        replaceImages(curCookieTheme);
29        setActiveItem(curCookieTheme);
30    }
31    else {
32        pageShow();
33    }
34
35    function setActiveItem(theme) {
36        $colorItems.removeClass('is-active');
37        $colorItems.each(function () {
38            if ($(this).data('color') === theme) {
39                $(this).addClass('is-active');
40            }
41        });
42    }
43
44    function setTheme(theme) {
45        var $linkTheme = $('link[data-themecolor]'),
46            curTheme = $linkTheme.data('themecolor'),
47            attrEl = $linkTheme.attr('href');
48        if (curTheme === theme) {
49            return;
50        }
51        attrEl = attrEl.replace(colorThemesCss[curTheme] + '.css', colorThemesCss[theme] + '.css');
52        $linkTheme.data('themecolor', theme);
53        $linkTheme.attr('href', attrEl);
54        setCookie(COOKIE_THEME, theme);
55    }
56
57    function replaceSrcForImg(theme, src) {
58        var curSrc = src.split('.');
59        var srcUpd = curSrc[curSrc.length - 2].split('-');
60        if (srcUpd[srcUpd.length - 1] === theme) {
61            return src;
62        }
63        srcUpd[srcUpd.length - 1] = theme;
64        srcUpd = srcUpd.join('-');
65        curSrc[curSrc.length - 2] = srcUpd;
66        return curSrc.join('.');
67    }
68
69    function replaceImages(theme) {
70        var $imgTheme = $('.color-theme'),
71            imgThemeNum = $imgTheme.length,
72            countImg = 0;
73        $imgTheme.each(function () {
74            var img = new Image();
75            var newSrc = replaceSrcForImg(theme, $(this).attr('src'));
76            if (!newSrc) {
77                countImg++;
78                return;
79            }
80            $(this).attr('src', newSrc);
81            img.src = newSrc;
82            img.onload = function () {
83                countImg++;
84                if (countImg === imgThemeNum) {
85                    pageShow();
86                }
87            };
88        });
89    }
90
91    function replaceMarkerForMaps(theme) {
92        var $map = $('.b-google-map.map-theme');
93        if ($map.length > 0) {
94
95            var newSrc = replaceSrcForImg(theme, $('.marker-template').attr('src'));
96            if (!newSrc) {
97                return;
98            }
99            $('.marker-template').attr('src', newSrc);
100            $map.trigger('replace_marker');
101        }
102        $('.color-theme').each(function () {
103            var curSrc = $(this).attr('src').split('.');
104            var srcUpd = curSrc[curSrc.length - 2].split('-');
105            var srcNewTheme;
106            if (srcUpd[srcUpd.length - 1] === theme) {
107                return;
108            }
109            srcUpd[srcUpd.length - 1] = theme;
110            srcUpd = srcUpd.join('-');
111            curSrc[curSrc.length - 2] = srcUpd;
112            srcNewTheme = curSrc.join('.');
113            $(this).attr('src', srcNewTheme);
114
115        });
116    }
117
118
119
120    $colorItems.on('click', function () {
121        $colorItems.removeClass('is-active');
122        $(this).addClass('is-active');
123        var curElement = $(this).data('color');
124        setTheme(curElement); //replacement of color elements
125        replaceMarkerForMaps(curElement);
126        replaceImages(curElement);//replacement pictures for style
127    });

128
129    $('[data-reset]').on('resetColors', function () {
130        setTheme('default');
131        replaceMarkerForMaps('default');
132        replaceImages('default');
133        setCookie(COOKIE_THEME, 'default');
134        setActiveItem('default');
135    });
136
137    function pageShow() {
138        setTimeout(function () {
139            $('.mask-l').animate({'opacity': 0}, 800, function(){
140                $(this).css('display', 'none');
141
142            });
143        }, 400);
144    }
145});