https://www.ullmann-farben.de/_ui/responsive/common/daw-basic/js/acc.colorbox-override.js

1//Makes Color Box Responsive
2var cashedColorbox = [];
3var cboxOptions = {
4    width: '95%',
5    height: '95%',
6    maxWidth: '960px',
7    maxHeight: '960px'
8};
9var headerHeight = 65;
10$('.cbox-link').colorbox(cboxOptions);
11
12$(window).resize(function(){
13
14    if(!$('#colorbox').hasClass('variantSelectMobile')){
15        $.colorbox.resize({
16            // resizing the height has been removed because its ruining the colorbox height on mobile phones when opening the keyboard from the bottom of the screen
17            width: window.innerWidth > parseInt(ACC.colorbox.config.maxWidth) ? ACC.colorbox.config.maxWidth : ACC.colorbox.config.width
18        });
19    }
20
21    ACC.colorbox.calculateBodyPadding();
22
23});
24
25
26ACC.colorbox = {
27    config: {
28        maxWidth:"100%",
29        maxHeight:"100%",
30        opacity:0.7,
31        width:"auto",
32        height:"auto",
33        transition:"none",
34        close:'<span class="glyphicon glyphicon-remove"></span>',
35        title:'<div class="headline"><span class="headline-text">{title}</span></div>',
36        class:'share-box',
37        onComplete: function() {
38            $.colorbox.resize();
39            ACC.common.refreshScreenReaderBuffer();
40        },
41        onClosed: function() {
42            if(cashedColorbox.length > 0){
43                cashedColorbox.pop()
44                if(cashedColorbox.length > 0){
45                    ACC.colorbox.open(cashedColorbox[cashedColorbox.length-1].title, cashedColorbox[cashedColorbox.length-1].config, true);
46                }
47            }
48
49            ACC.common.refreshScreenReaderBuffer();
50        }
51    },
52
53    open: function(title,config, cashed){
54        if(!cashed){
55            cashedColorbox.push({
56                title: title,
57                config: config
58            });
59        }
60
61        var config = $.extend({},ACC.colorbox.config,config);
62        ACC.colorbox.config.maxWidth = config.maxWidth;
63        ACC.colorbox.config.maxHeight = config.maxHeight;
64        ACC.colorbox.config.width = config.width;
65        ACC.colorbox.config.height = config.height;
66        // CHANGE REQUIRED: allow header to be disabled for color picker
67        if (config.noHeader === true) {
68            config.title = false; // Colorbox-native way
69            config._skipHeaderPadding = true; // custom internal flag
70        } else {
71            config.title = config.title.replace(/{title}/g, title || '');
72        }
73        return $.colorbox(config);
74    },
75
76    resize: function(){
77        $.colorbox.resize();
78        ACC.colorbox.calculateBodyPadding()
79    },
80
81    close: function(){
82        $.colorbox.close();
83    },
84
85    calculateBodyPadding: function () {
86
87        // KEY FIX: do nothing if popup has no header for color picker
88        if ($.colorbox.settings && $.colorbox.settings._skipHeaderPadding === true) {
89            $('#cboxLoadedContent')
90                .css({
91                    'padding-top': 0,
92                    'margin-top': 0
93                });
94            return;
95        }
96
97        var titleEl = document.getElementById('cboxTitle');
98        if (!titleEl) return;
99
100        var currentHeaderHeight = titleEl.getBoundingClientRect().height;
101
102        if (currentHeaderHeight > headerHeight) {
103            $('#cboxLoadedContent').css(
104                'padding-top',
105                currentHeaderHeight - headerHeight
106            );
107
108            var colorBoxHeight = document.getElementById('colorbox').getBoundingClientRect().height;
109            $.colorbox.resize({
110                height: colorBoxHeight + (currentHeaderHeight - headerHeight)
111            });
112        } else {
113            $('#cboxLoadedContent').css('padding-top', 0);
114        }
115    }
116};
117