https://robust-themes.com/themes/js/colors.js?v=52

1
2replace_colors = {};
3
4
5
6/*
7if (replace_colors[demo_name] != undefined){
8    replacemnt_string = replace_colors[demo_name]
9} else {
10    replacemnt_string = '';
11}
12*/
13
14
15console.log('colors.js')
16
17function colors_onload(){
18
19    if (typeof(DEMO_NAME) == 'undefined'){
20        DEMO_NAME = 'kyoto'
21    }
22
23    $('body').addClass('s_'+DEMO_NAME);
24
25    if (is_BAP){
26        SIX_COLORS = '--accent-color-1,--accent-color-2,--bg-color-1,--bg-color-2'
27    } else {
28        SIX_COLORS = '--accent-1,--accent-2,--light-1,--light-2,--dark-1,--dark-2'
29        
30    }
31
32
33    css_vars_values = {};
34    for (item of SIX_COLORS.split(',')){
35        let val = getComputedStyle(document.documentElement).getPropertyValue(item);
36        css_vars_values[item.replace('--','')] = val
37        $('.cb_colors  li[data-color="'+item+'"] div').css('background-color',val)
38    }
39
40    intiate_pickers()
41    check_colors_inuse()
42    create_color_palettes()
43
44    change_list_color()
45
46
47    //replace_css_vars_start()
48
49    $('.replace_css_btn').click(function(){
50        replacemnt_string = $('.replace_css_input').val();
51        replace_css_vars_start()
52    })
53    
54    
55    $('body').on('click','.pickr',function(){
56        let item = $(this).closest('li').data('color');
57        PICKERS[item].show()
58    });
59
60
61    $('body').on('click','.color_palette',function(){
62        let index = $(this).data('index')
63        palette_selected(PALLETES[index].colors)
64        set_url();
65    })
66    
67    $('body').on('click', '.adj_color span',function(){
68    
69        var section_id =  $(this).closest('div[data-section-id]').attr('id').replace('section-','');
70        var replace_str = $(this).siblings('input').val();
71    
72        //color_replace_json[section_id] = replace_str;
73        //section_color_replace()
74    
75        var color_replace_json_str = JSON.stringify(color_replace_json)
76    
77        let data ={
78            demo:DEMO_NAME,
79            color_replace_json: color_replace_json_str,
80        }
81        $.post('../change_colors_api.php',data,function(res){
82    
83        })
84    
85    })
86
87    $('.cb_color_mode > div').click(function(){
88        $('.cb_color_mode > div').removeClass('active')
89        $(this).addClass('active')
90        change_color_mode($(this).text())
91
92        var accent1 = getComputedStyle(document.documentElement).getPropertyValue('--accent-color-1').replace('#','');
93        var accent2 = getComputedStyle(document.documentElement).getPropertyValue('--accent-color-2').replace('#','');
94        DEMO.colors = accent1 + '-' + accent2 + '-'
95        DEMO['color-mode'] = {}
96        
97        if ($(this).text() == 'Dark'){
98            PALLETES = PALLETES_dark
99            var bg1 = '141313'
100            var bg2 = '1F1F1F'
101            DEMO.color_mode = 'd'
102        } else {
103            PALLETES = PALLETES_light
104            var bg1 = 'F4F5FC'
105            var bg2 = 'FFFFFF'
106            DEMO.color_mode = 'l'
107        }
108
109        DEMO.colors += bg1 + '-' + bg2
110        $('.cb_colors  li[data-color="--bg-color-1"] div').css('background-color','#'+bg1)
111        $('.cb_colors  li[data-color="--bg-color-2"] div').css('background-color','#'+bg2)
112        PICKERS["--bg-color-1"].setColor('#'+bg1)
113        PICKERS["--bg-color-2"].setColor('#'+bg2)
114        create_color_palettes()
115
116        
117        set_url()
118    })
119}
120
121
122
123
124
125function intiate_pickers(){
126    PICKERS = {}
127    for (item of SIX_COLORS.split(',')){
128        PICKERS[item] = Pickr.create({
129            el: '.cb_colors  li[data-color="'+item+'"] div',
130            theme: 'classic',
131            default: css_vars_values[item.replace('--','')].trim(),
132            item:item,
133            components: {
134                preview: true, opacity: true, hue: true,
135                interaction: {
136                    hex: true, rgba: true, input: true, save: true , cancel: true
137                }
138            }
139        });
140        PICKERS[item].on('save', (color, instance) => {
141            instance.hide()
142            if (!PALLETE_SELCTED){

143                get_var_colors_and_set_url()
144            }
145            PALLETE_SELCTED = false
146
147        })
148        PICKERS[item].on('change', (color,eventSource, instance) => {
149            let item = instance.options.item
150            set_color_var(item,color)
151            change_list_color()
152        })
153        PICKERS[item].on('hide', ( instance) => {
154            let item = instance.options.item
155            let color = instance.getSelectedColor()
156            set_color_var(item,color)
157        })
158        PICKERS[item].on('cancel', ( instance) => {
159            let item = instance.options.item
160            let color = instance.getSelectedColor()
161            set_color_var(item,color)
162            instance.hide()
163        })    
164    }
165}
166
167function set_color_var(item,color){
168    var color_val = color.toRGBA().toString(0).replace(/ /g,'')
169    let alpha = color.toRGBA()[3]
170    if ( alpha == 1){
171        color_val = color.toHEXA().toString()
172    }
173    console.log(color_val)
174    document.querySelector(':root').style.setProperty(item, color_val);
175    let c = color.toRGBA().toString(0).replace(')','').replace('rgba(','').split(',')
176    console.log(c)
177    let rgb = c[0]+','+c[1]+','+c[2]
178    document.querySelector(':root').style.setProperty(item+ '-rgb', rgb);
179
180    css_vars_values[item.replace('--','')] = color_val
181}
182
183function replace_css_vars_start(){
184    //replace_css_vars(replacemnt_string)
185
186    for (item of SIX_COLORS.split(',')){
187        let val = getComputedStyle(document.documentElement).getPropertyValue(item);
188        let $input = $('.cb_color_input[data-color="'+item+'"]')
189        $input.val(val)
190        $input.siblings('.cb_color_box').css('background-color',val)
191
192        $('.Qcb_color_box[data-color="'+item+'"]').css('background-color',val)
193    }
194}
195
196
197
198PALLETE_SELCTED = false
199function palette_selected(palette){
200    var i = 0;
201    var  demo_colors = [];
202    for (item of SIX_COLORS.split(',')){
203        let val = palette[i]
204        $('.cb_colors  li[data-color="'+item+'"] div').css('background-color',val)
205        PALLETE_SELCTED = true;
206        PICKERS[item].setColor(val)
207        document.querySelector(':root').style.setProperty(item, val);
208        document.querySelector(':root').style.setProperty(item+ '-rgb', hexToRgb(val));
209        demo_colors.push(val.replace('#',''))
210        css_vars_values[item.replace('--','')] = val
211        i++;
212    }
213    DEMO.colors = demo_colors.join('-')
214
215    change_list_color()
216
217}
218
219function change_list_color(){
220    if (typeof LIST_REPLACE_FUNCTIONS === 'undefined'){
221        return
222    }
223
224    if (typeof default_list_replace_color === 'function') { 
225        default_list_replace_color()
226    }
227    for (list_func of LIST_REPLACE_FUNCTIONS){
228        if (window[list_func]) {
229             window[list_func]();
230        }
231    }
232}
233
234function get_var_colors_and_set_url(){
235    var  demo_colors = [];
236    for (item of SIX_COLORS.split(',')){
237        let val = getComputedStyle(document.documentElement).getPropertyValue(item);
238        demo_colors.push(val.trim().replace('#','').replace(/,/g,'|'))
239    }
240    DEMO.colors = demo_colors.join('-')
241    set_url();
242}
243
244
245function create_color_palettes(){
246    $('.cb_color_palletes_wrap').html('')
247    var index = 0;
248    for (palette of PALLETES){
249        new_pallete_html = create_a_pallete(palette,index)
250        $('.cb_color_palletes_wrap').append(new_pallete_html)
251        index++;
252    }
253
254}
255
256
257function create_a_pallete(palette,index){
258    var pallete_template =`
259    <div class="cb_pallete_item_wrap">
260        <div class="cb_pallete_name">{name}</div>
261        <div class="color_palette" data-index="{index}"> 
262            <div class="cb_palette_colors cb_palette_accent">
263            <div><div class="cb-pal-box" data-color="--accent-1" style="background-color:1"></div><span>{=1}</span></div>
264            <div><div class="cb-pal-box" data-color="--accent-2" style="background-color:2"></div><span>{=2}</span></div>
265            </div>
266            <div class="cb_palette_colors cb_palette_bg">
267            <div><div class="cb-pal-box" data-color="--light-1" style="background-color:3"></div><span>{=3}</span></div>
268            <div><div class="cb-pal-box" data-color="--light-2" style="background-color:4"></div><span>{=4}</span></div>
269            <div><div class="cb-pal-box" data-color="--dark-1" style="background-color:5"></div><span>{=5}</span></div>
270            <div><div class="cb-pal-box" data-color="--dark-2" style="background-color:6"></div><span>{=6}</span></div>
271            </div>
272        </div>
273    </div>`
274
275    var colors_ri = palette.colors
276    pallete_template = pallete_template.replace('{index}',index)
277    pallete_template = pallete_template.replace('{name}',palette.name)
278    for(i=1;i<10;i++){
279        let re = new RegExp(':'+i,"g");
280        pallete_template = pallete_template.replace(re,':'+colors_ri[i-1])
281        let re1 = new RegExp('{='+i+'}', "g")
282        if(colors_ri[i-1]){
283            pallete_template = pallete_template.replace(re1,colors_ri[i-1])
284        } else{
285            pallete_template = pallete_template.replace(re1,'')
286        }
287        
288    }
289    return pallete_template;
290
291}
292
293
294function check_colors_inuse(){
295    var html = $('.page').html()
296    for (item of SIX_COLORS.split(',')){
297        let re = new RegExp(item,"g");
298        let count = (html.match(re) || []).length;
299        if (count == 0){
300            $('.cb_colors  li[data-color="'+item+'"] div').addClass('not-inuse')
301        }
302    }
303
304}
305
306
307
308
309function replace_css_vars(replacemnt_string){
310        for (item of replacemnt_string.split('|')){
311
312            let a =  item.split(',')[0]
313            let b =  item.split(',')[1]
314
315            if (a.includes('#')){
316                var color_val = a
317            } else {
318                var color_val = css_vars_values[short2full(a)]
319            }
320            
321            //let color_val = $('.cb_color_input[data-color="'+short2full(a)+'"]').val()
322
323            let r = document.querySelector(':root')
324            r.style.setProperty(short2full(b), color_val);
325        }
326}
327
328
329function short2full(short){
330    var type = short.charAt(0);

331    var num = short.charAt(1);
332    if (type == 'a'){
333        return '--accent-' 
334    }
335    if (type == 'l'){
336        return '--light-' 
337    }
338    if (type == 'd'){
339        return '--dark-'
340    }
341}
342
343
344
345
346
347
348function section_color_replace(){
349    load_sections(DEMOS[SELECTED_SECTIONS_GROUP],false)
350    
351    $('.addS_sections  div[data-section-id]').each(function (){
352        var this_section_id = $(this).attr('data-section-id')
353        var this_replace_string =  color_replace_json[this_section_id]
354        if (this_replace_string == undefined){
355            return;
356        }
357
358        $('#section-'+this_section_id+ ' .adj_color input').val(this_replace_string)
359        replace_vars_to_tmp(this_section_id)
360
361        replacemnt_string = this_replace_string
362        section_replace_vars(this_section_id,replacemnt_string)
363
364        replace_vars_from_tmp(this_section_id)
365
366    })
367}
368
369
370function section_replace_vars(section_id,replacemnt_string){
371
372    $('#section-'+section_id + ' style,#section-'+section_id + ' svg').each(function (){
373        html = $(this).html()
374        if (!(html.includes('--'))){ return; }
375        for (item of replacemnt_string.split('|')){
376
377            let a =  item.split(',')[0]
378            let b =  item.split(',')[1]
379
380            let replace = short2full(a) + 'tmp-'+ a.charAt(1);
381            let re = new RegExp(replace,"g");
382            html = html.replace(re,short2full(b) + b.charAt(1))
383        }
384        $(this).html(html)
385    })
386
387}
388
389
390function replace_vars_to_tmp(section_id){
391    $('#section-'+section_id + ' style,#section-'+section_id + ' svg').each(function (){
392        html = $(this).html()
393        if (!(html.includes('--'))){ return; }
394        html = html.replace(/--accent-/g,'--accent-tmp-');
395        html = html.replace(/--light-/g,'--light-tmp-');
396        html = html.replace(/--dark-/g,'--dark-tmp-');
397        $(this).html(html)
398    })
399}
400
401function replace_vars_from_tmp(section_id){
402    $('#section-'+section_id + ' style,#section-'+section_id + ' svg').each(function (){
403        html = $(this).html()
404        if (!(html.includes('--'))){ return; }
405        html = html.replace(/--accent-tmp-/g,'--accent-');
406        html = html.replace(/--light-tmp-/g,'--light-');
407        html = html.replace(/--dark-tmp-/g,'--dark-');
408        $(this).html(html)
409    })
410}
411
412/*
413
414function replace_vars(replacemnt_string){
415
416    $('style,svg').each(function (){
417        html = $(this).html()
418        for (item of replacemnt_string.split('|')){
419
420            let a =  item.split(',')[0]
421            let b =  item.split(',')[1]
422
423            let replace = short2full(a) + 'tmp-'+ a.charAt(1);
424            let re = new RegExp(replace,"g");
425            html = html.replace(re,short2full(b) + b.charAt(1))
426        }
427        $(this).html(html)
428    })
429
430}
431*/
432
433
434
435