https://www.fencingandlandscapesupplies.co.uk/skin/frontend/base/d…/js/utilities/messages.js?v=8.0.0-0-Beta18

1window.Zoey.require(['jQuery', 'pix.globalEvents', 'dc.layout'], function($, globalEvents, layout) {
2    "use strict";
3    var MESSAGE_TYPE_SUCCESS ='success';
4    var MESSAGE_TYPE_ERROR ='error';
5    var MESSAGE_TYPE_IMPORTANT ='important';
6    var MESSAGE_TYPE_WARNING ='warning';
7    var MESSAGE_TYPE_NOTICE ='notice';
8
9    var types = {};
10    types[MESSAGE_TYPE_SUCCESS] = {
11        classes: 'alert-success', icon: 'icon-tick'
12    };
13    types[MESSAGE_TYPE_ERROR] = {
14        classes: 'alert-error', icon: 'icon-exclamation-mark'
15    };
16    types[MESSAGE_TYPE_IMPORTANT] = {
17        classes: 'alert-important', icon: 'icon-exclamation-mark'
18    };
19    types[MESSAGE_TYPE_WARNING] = {
20        classes: 'alert-warning', icon: 'icon-exclamation-mark'
21    };
22    types[MESSAGE_TYPE_NOTICE] = {
23        classes: 'alert-notice', icon: 'icon-exclamation-mark'
24    };
25
26    var _messages = [];
27
28    var _uniqueId = (function(){
29        var _id = 0;
30        return {
31            generate: function(){
32                return ++_id;
33            }
34        };
35    })();
36
37    function _getMessageConfig(message){
38        if(typeof message !== 'object'){
39            for(var i = 0, len = _messages.length; i < len; i++) {
40                var messageId = _messages[i].id;
41                if(messageId === message)
42                    return _messages[i];
43            }
44        } else
45            return _messages[_messages.indexOf(message)];
46
47        return null;
48    }
49
50
51    function ZoeyMessages() {
52        this._container = null;
53        this._initialTop = null;
54        this._positionState = null;
55        this._setElements();
56    }
57
58    ZoeyMessages.prototype = {
59        _setElements: function(){
60            this._container = $('#messages');
61            if(!this._container.length) {

62                this._container = $('<div id="messages">');
63                const layout = $('.page-empty-content.design-center-wrapper');
64                if (layout && layout.length) {
65                    layout.prepend(this._container);
66                } else {
67                    // This was put here for private site decoy registration
68                    // which will remove the entire body of the page and replace it
69                    // with its own HTML.
70                    $(document.body).prepend(this._container);
71                }
72            }
73            this._container.css({
74                position: 'absolute',
75                width: '100%',
76                top: 0,
77                left: 0,
78                transition: 'transform 0.3s ease-in',
79                zIndex: 999999999999
80            });
81            this._initialTop = 0;
82            this._positionState = 'absolute';
83        },
84        _getMessageList: function (type) {
85            var messagesUl = this._container.find('.messages');
86
87            if(!messagesUl.length){
88                messagesUl = $('<ul class="messages full-width-element">');
89                this._container.html(messagesUl);
90
91                Zoey.require('dc.fullWidthElementHelper', function(fullWidthElementHelper) {
92                    fullWidthElementHelper.setFullWidthItemStyles(messagesUl);
93                })
94            }
95
96            var list = messagesUl.find('.'+type+'-msg');
97            if(!list.length){
98                list = $('<li class="' + type + '-msg ' + types[type].classes + '">');
99                messagesUl.append(list);
100            }
101
102            var ul = list.children('ul');
103            if (!ul.length) {
104                ul = $('<ul>');
105                list.append(ul);
106            }
107            return ul;
108        },
109        _setMessage: function(messageConfig){
110            var message = messageConfig.message;
111            var duration = parseInt(messageConfig.duration, 10);
112            var element = $(`
113                <li class="alert-${message.type}">
114                    <div class="full-width-content-element ${types[message.type].classes} ${types[message.type].icon}">
115                        <span><span class="icon-close"></span>${message.text}</span>
116                    </div>
117                </li>
118            `);
119            element.on('click', '.icon-close', this.removeMessage.bind(this, messageConfig.id));
120            this._getMessageList(message.type).append(element);
121            if(!isNaN(duration)) setTimeout(this.removeMessage.bind(this, messageConfig.id), duration);
122
123            return {
124                id: messageConfig.id,
125                duration: duration,
126                message: message,
127                element: element
128            };
129        },
130        checkMessagesPosition(evt) {
131            if (this._positionState === 'absolute') {
132                if (window.scrollY > this._initialTop) {
133                    this._positionState = 'fixed';
134                    
135                    var stickyNavHeight = $('.zoey-sticky-nav-container').outerHeight() || 0;
136                    this.getContainer().css({
137                        position: 'fixed',
138                        top: 0,
139                        transform: `translateY(${stickyNavHeight}px)`
140                    })
141                }
142            } else if (this._positionState === 'fixed') {
143                if (window.scrollY <= this._initialTop) {
144                    this._positionState = 'absolute';
145                    this.getContainer().css({
146                        position: 'absolute',
147                        top: this._initialTop,
148                        transform: 'none'
149                    })
150                }
151            }
152        },
153        getContainer: function() {
154            return this._container;
155        },
156        setContainerTop(top) {
157            if (this._positionState === 'absolute') {
158                this._container.css('top', top);
159            }
160            this._initialTop = top;
161            this.checkMessagesPosition();
162        },
163        canMoveContainer: function() {
164            return !this.getContainer().find('.__zoey_message_logged_in_as_customer_after_sso').length;
165        },
166        onCanMoveContainer: function(callback) {
167            var specificMessage = this.getContainer().find('.__zoey_message_logged_in_as_customer_after_sso').get(0);
168            var parentEL = specificMessage.parentElement
169            if (!parentEL.hasMutationObserver) {
170                parentEL.hasMutationObserver = true;
171                var x = new MutationObserver(function (e) {
172                    if (
173                        e[0].removedNodes

174                        && Array.from(e[0].removedNodes).includes(specificMessage)
175                    ) {
176                        x.disconnect();
177                        parentEL.hasMutationObserver = false;
178                        callback();
179                    }
180                });
181                x.observe(parentEL, { childList: true });
182            }
183        },
184        getMessageById: function(id){
185            if(!id)
186                return null;
187
188            return _messages.filter(function(msg){
189                return msg.id === id;
190            })[0];
191        },
192        addMessage: function(message, options){
193            if(message){
194                if(Object.prototype.toString.call(message) === "[object String]"){
195                    message = {text: message, type: MESSAGE_TYPE_NOTICE};
196                }
197
198                var id = _uniqueId.generate();
199                options = options || {};
200                var tmp = this._setMessage({
201                    id: id,
202                    message: message,
203                    duration: typeof options.duration !== 'undefined' ? options.duration : 10000,
204                    dismissable: typeof options.duration !== 'undefined' ? options.dismissable : true,
205                });
206                _messages.push(tmp);
207
208                return id;
209            }
210            return null;
211        },
212        addSuccess: function(message, options){
213            return this.addMessage({
214                text: message,
215                type: MESSAGE_TYPE_SUCCESS
216            }, options);
217        },
218        addError: function(message, options){
219            return this.addMessage({
220                text: message,
221                type: MESSAGE_TYPE_ERROR
222            }, options);
223        },
224        addImportant: function(message, options){
225            return this.addMessage({
226                text: message,
227                type: MESSAGE_TYPE_IMPORTANT
228            }, options);
229        },
230        addWarning: function(message, options){
231            return this.addMessage({
232                text: message,
233                type: MESSAGE_TYPE_WARNING
234            }, options);
235        },
236        addNotice: function(message, options){
237            return this.addMessage({
238                text: message,
239                type: MESSAGE_TYPE_NOTICE
240            }, options);
241        },
242        removeMessage: function(message){
243            var config = _getMessageConfig(message);
244            if(config){
245                var index = _messages.indexOf(config);
246                _messages.splice(index, 1);
247                var element = this._container.find(config.element);
248                var parent = element.parent();
249                element.remove();
250                if(!parent.children().length){
251                    parent.remove();
252                }
253            }
254
255            return this;
256        },
257        removeAllMessages: function(){
258            _messages.splice(0, _messages.length);
259            this._container.html('');
260            return this;
261        },
262        addAjaxMessages: function(messages, options) {
263            for (var key in messages) {
264                if (messages.hasOwnProperty(key)) {
265                    this.addMessage(messages[key], options);
266                }
267            }
268
269            return this;
270        },
271        addTimeoutsFromMessages: function() {
272            this._container.find('li').each((index, element) => {
273                const duration = parseInt(element.getAttribute('data-duration'), 10);
274                if (!isNaN(duration) && duration > 0) {
275                    setTimeout(() => {
276                        $(element).remove();
277                    }, duration);
278                }
279            });
280            return this;
281        }
282    };
283
284    var zoeyMessages = new ZoeyMessages();
285
286    globalEvents.add('documentLoaded', function(){
287        // Adding it as a module.
288        zoeyMessages._setElements(); 
289        zoeyMessages.addTimeoutsFromMessages();
290    });
291
292    globalEvents.add('windowScroll', (evt) => {
293        zoeyMessages.checkMessagesPosition(evt);
294    });
295
296    window.Zoey.export('pix.modules.ZoeyMessages', zoeyMessages);
297});