https://thomashof-burscheid.de/wbs/static/clients/js/wbsclient.js

1
2/*
3 *  WBSCLIENT
4 *
5 *  Examples: wbsclient_examples.html
6 *
7 *  WBSCLIENT.init({ company_id: 3, widget_id: 1, language: null });
8 *
9 *  WBSCLIENT.isSomebodyLoggedIn(function(response) {
10 *      // working with results
11 *  });
12 *
13 *  WBSCLIENT.loadLoginWindow(function(response) {});
14 *  WBSCLIENT.loadLoginIframe({ position: 'center' }, function(response) {});
15 *
16 *  // other ways to init:
17 *  
18 *  // default login form
19 *  WBSCLIENT.company(3).init({ widget_id: null }).loadLoginWindow();
20 *
21 *  WBSCLIENT.company(3).logout();
22 *  WBSCLIENT.company(3).removeLoginIframe(); *
23 */
24
25(function(window) {
26    "use strict";
27
28    if(window.WBSCLIENT) {
29        return;
30    }
31
32    var WBSCLIENT = {
33        data: {
34            company_id: null,
35            client_id: null,
36            widget_id: null, // form widget
37            language: null, // form language
38            width: 500,
39            height: 400,
40            autocloseAfterSubmit: true,
41            skipFormForLoggedIn: true,
42            cleanupCallbackQueue: false,
43            host: 'https://widgets.worldsoft-wbs.com'
44        },
45        result: {},
46        childIframeResult: [],
47        errorLog: [],
48        callbackQueue: [],
49        redirectInProgress: [],
50        events: {
51            loginCheckingInProgress: false,            
52            lastLoggedInClient: false,
53            isSameClient: false,
54            logoutActionInProgress: false,
55            lastRequestStatus: false,
56            logoutSuccess: false,
57            iframeLoaded: false,
58            triggerLoginByToken: false
59        },        
60
61        clear: function(skipErrorLogAndQueues) {
62            this.result = {};
63            if(!skipErrorLogAndQueues) {
64                this.errorLog = [];
65                //this.callbackQueue = [];
66            }
67            for (var event in this.events) {
68                if(event !== 'iframeLoaded') {
69                    this.events[event] = false;
70                }
71            }
72        },
73
74        init: function(data) {
75            this.clear();
76            for (var item in data) {
77               this.data[item] = data[item];
78            }
79            return this;
80        },
81
82        company: function(companyId) {
83            this.data.company_id = companyId;
84            return this;
85        },
86
87        autoclose: function(bAutoclose) {
88            this.data.autocloseAfterSubmit = bAutoclose ? true : false;
89            return this;
90        },
91
92        skipForLoggedIn: function(bSkip) {
93            this.data.skipFormForLoggedIn = bSkip ? true : false;
94            return this;
95        },
96
97        isLoggedIn: function(responseCallback) {
98            var $this = this;
99            this.events.loginCheckingInProgress = true;
100            this.requestData(function() {
101
102                var isLoggedIn = false;
103                if($this.data.client_id) {
104                    isLoggedIn = ($this.events.lastRequestStatus &&
105                            $this.events.lastLoggedInClient && $this.events.isSameClient) ? true : false;
106                } else {
107                    isLoggedIn = ($this.events.lastRequestStatus && $this.events.lastLoggedInClient) ? true : false;
108                }
109
110                if(responseCallback) {
111                    responseCallback(isLoggedIn ? $this.result : false);
112                }
113            });
114        },
115
116        // alias
117        isSomebodyLoggedIn: function(responseCallback) {
118            this.data.client_id = null;
119            return this.isLoggedIn(responseCallback);
120        },
121
122        // alias
123        isClientLoggedIn: function(clientId, responseCallback) {
124            this.data.client_id = clientId;
125            return this.isLoggedIn(responseCallback);
126        },
127
128        logout: function(responseCallback) {
129            var $this = this;
130            if(!this.data.company_id) {
131                this.errorLog.push('Company id is required.');
132                return;
133            }
134
135            this.events.logoutActionInProgress = true;
136            
137            var url = this.data.host + '/access/logout/' + this.data.company_id;
138
139            this.requestData(function(response) {
140                $this.events.logoutActionInProgress = false;

141                if(response === 'success') {
142                    $this.events.logoutSuccess = true;
143                }
144
145                if(responseCallback) {
146                    responseCallback(response);
147                }
148            }, url, true);
149        },
150
151        logoutClickEvent: function(selector, callback) {
152            var $this = this;
153            
154            jQuery(document).off('click', selector).on('click', selector, function(event) {
155                event.preventDefault();
156                var lnk = jQuery(this).attr('href');
157                
158                $this.logout(function(result) {
159                    if(callback) {
160                        callback(result);
161                    } else if(lnk) {
162                        window.location = lnk;
163                    }
164                });
165            });
166
167            return this;
168        },
169
170        triggerLoginByToken: function(token, bWithUserData, responseCallback) {
171            var $this = this;
172            if(!this.data.company_id) {
173                this.errorLog.push('Company id is required.');
174                return;
175            }
176
177            this.events.triggerLoginByToken = true;
178
179            var url = this.data.host + '/access/authenticate-by-token/' + this.data.company_id + '?token=' + token;
180
181            this.requestData(function(response) {
182                $this.events.triggerLoginByToken = false;
183                if(bWithUserData) {
184                    $this.isSomebodyLoggedIn(function (response) {
185                        if (responseCallback) {
186                            responseCallback(response);
187                        }
188                    });
189                } else {
190                    if (responseCallback) {
191                        responseCallback(response);
192                    }
193                }
194            }, url, true);
195        },
196
197        /*
198         * This method should be activated on click, otherwise it will be blocked by browser.
199         */
200        loadLoginWindow: function(callbackOnClose) {
201            var $this = this;
202            this.openWindow(function() {
203                $this.isSomebodyLoggedIn(function(result) {
204                    if(callbackOnClose) {
205                        callbackOnClose(result);
206                    }
207                });
208            }, '?skipLoggedInClient=' + ($this.data.skipFormForLoggedIn ? 1 : 0));
209        },
210
211        loadLoginIframe: function(data, responseCallback) {
212            var script_src = this.data.host + (this.data.language ? '/' + this.data.language : '') + '/access/form/' +
213                    this.data.company_id + (this.data.widget_id ? '/' + this.data.widget_id : '') + '.js';
214
215            if(this.events.iframeLoaded === script_src) {
216                this.removeLoginIframe(data);
217            }
218
219            this.events.iframeLoaded = script_src;
220            
221            var $this = this;
222            this.callbackQueue.push(function() {
223                $this.isSomebodyLoggedIn(function(result) {
224                    if(responseCallback) {
225                        responseCallback(result);
226                    }
227                });
228            });            
229
230            script_src = script_src + '?skey=' + (1 + Math.random()) + '&height=' + (this.data.height ? this.data.height : '') +
231                    '&skipLoggedInClient=' + (this.data.skipFormForLoggedIn ? 1 : 0);
232
233            var script = document.createElement('script');
234            script.async = true;
235            script.src = script_src;
236
237            if(data && data.selector) {
238                var el = document.querySelector(data.selector);
239                if(el) {
240                    el.appendChild(script);
241                }
242            } else {
243                var el = this.createPopupDiv(data);
244                el.appendChild(script);
245                document.body.appendChild(el);
246            }
247        },
248
249        removeLoginIframe: function(data) {
250            if(data && data.selector) {
251                var el = document.querySelector(data.selector);
252                if(el) {
253                    jQuery(el).html('');
254                }
255            } else {
256                var child = document.querySelector('iframe[src*="' + '/access/form/' + this.data.company_id +
257                    (this.data.widget_id ? '/' + this.data.widget_id : '') + '"]');
258                jQuery(child).parent().remove();
259            }
260
261            this.events.iframeLoaded = false;

262            return this;
263        },
264
265        addToQueue: function(callback) {
266            if(callback && typeof callback === 'function') {
267                this.callbackQueue.push(callback);
268            }
269            return this;
270        }
271    };
272
273    // Helpers.
274    
275    WBSCLIENT.requestData = function (responseCallback, replaceUrl, skipData) {
276        this.clear(true);
277
278        var url = replaceUrl ? replaceUrl : this.getUrl();
279        if(!url) { return; }
280        
281        var $this = this;
282        $this.events.lastRequestStatus = false;
283        
284        jQuery.ajax({
285            type: 'GET',
286            url: url,
287            dataType: "jsonp",
288            crossDomain: true,
289            success: function (data) {
290                if(!skipData) {
291                    if(data) {
292                        $this.result = data;
293                    }
294                    $this.events.lastRequestStatus = true;
295                    $this.events.loginCheckingInProgress = false;
296
297                    if(data && data.id && data.company_id && data.company_id == $this.data.company_id) {
298                        $this.events.lastLoggedInClient = data.id;
299                        if($this.data.client_id) {
300                            $this.events.isSameClient = ($this.data.client_id == data.id) ? true : false;
301                        }
302                    }
303                }
304
305                if(responseCallback) {
306                    responseCallback(data);
307                }
308            }
309        });
310    };
311
312    WBSCLIENT.openWindow = function(callbackOnClose, sUrlParams) {
313        if(!this.data.company_id) {
314            this.errorLog.push('Company id is required.');
315            return;
316        }
317
318        var url = this.getUrl(true) + (sUrlParams ? sUrlParams : '');
319
320        var sParams = 'height=' + this.data.height + ',width=' + this.data.width;
321
322        var child = window.open(url, '_blank', sParams + ',menubar=no,location=no,resizable=yes,scrollbars=yes,status=no');
323        
324        if(callbackOnClose && typeof callbackOnClose === 'function') {
325            var timer = setInterval(function() {
326                if (typeof child !== 'undefined' && child.closed) {
327                    callbackOnClose();
328                    clearInterval(timer);
329                }
330            }, 500);
331        }
332    };
333
334    WBSCLIENT.getUrl = function(bFormUrl) {
335        if(!this.data.company_id) {
336            this.errorLog.push('Company id is required.');
337            return;
338        }
339
340        if(!bFormUrl) {
341            return this.data.host + '/access/check/' + this.data.company_id;
342        }
343
344        return this.data.host + (this.data.language ? '/' + this.data.language : '') + '/access/form/' 
345                + this.data.company_id + (this.data.widget_id ? '/' + this.data.widget_id : '');
346    };
347
348    WBSCLIENT.createPopupDiv = function(data) {
349        var el = document.createElement("div");
350
351        if(data && data.element && data.element.id) {
352            el.id = data.element.id;
353        }
354
355        this.applyPopupDivDefaultSettings(el, data);
356
357        if(data && data.element && data.element.class) {
358            el.setAttribute('class', data.element.class);
359        }
360
361        if(data && data.element && data.element.style && typeof data.element.style === 'object') {
362            for (var item in data.element.style) {
363                el.style[item] = data.element.style[item];
364            }
365        }
366
367        return el;
368    };
369
370    WBSCLIENT.applyPopupDivDefaultSettings = function(el, data) {
371        el.style.position = 'fixed';
372        el.style.width = this.data.width;
373        el.style.height = this.data.height;
374        el.style.border = '1px #eee solid';
375        el.style.overflow = 'auto';
376        el.style.display = 'block';
377        el.style.backgroundColor = '#fff';
378
379        var position = data && data.position ? data.position : 'center';
380        if(position === 'top-left') {
381            el.style.left = '20px';
382            el.style.top = '0px';
383        } else if(position === 'top-right') {
384            el.style.right = '20px';
385            el.style.top = '0px';
386        } else if(position === 'bottom-right') {
387            el.style.right = '20px';
388            el.style.bottom = '0px';
389        } else if(position === 'bottom-left') {
390            el.style.left = '20px';
391            el.style.bottom = '0px';
392        } else if(position === 'center') {
393            el.style.left = (window.innerWidth - this.data.width) / 2;
394            el.style.top = (window.innerHeight - this.data.height) / 2;
395            if(el.style.left < 0) el.style.left = 0;
396            if(el.style.top < 0) el.style.top = 0;
397        }
398    };
399
400    function addEventListener(func) {
401		if ('addEventListener' in window) {
402			window.addEventListener('message', func, false);
403		} else if ('attachEvent' in window) { //IE
404			window.attachEvent('onmessage', func);
405		}
406	}
407
408    // unused
409    function removeEventListener(func) {
410		if ('removeEventListener' in window) {
411			window.removeEventListener('message', func, false);
412		} else if ('detachEvent' in window) { //IE
413			window.detachEvent('onmessage', func);
414		}
415	}
416
417    function parseMessage(msg) {
418        if(msg && typeof msg === 'string' && msg.substr(0, 22) === '[wbsClientChildWindow]') {
419            return JSON.parse(msg.replace('[wbsClientChildWindow]', ''));
420        }
421
422        return false;

423    }
424
425    function runCallbackQueue(childIframe) {
426        for (var func in WBSCLIENT.callbackQueue) {
427            WBSCLIENT.callbackQueue[func](childIframe);
428        }
429
430        if(WBSCLIENT.data.cleanupCallbackQueue) {
431            WBSCLIENT.callbackQueue = []; /* do not clean until page is refreshed! */
432        }
433    }
434
435    function removeOrCloseChild(src) {
436        if(src) {
437            src.close();
438        }
439        var child = document.querySelector('iframe[src*="' + '/access/form/' + WBSCLIENT.data.company_id +
440                    (WBSCLIENT.data.widget_id ? '/' + WBSCLIENT.data.widget_id : '') + '"]');
441        jQuery(child).parent('div').remove();
442    }
443
444    addEventListener(function(event) {
445        if(event.origin !== WBSCLIENT.data.host && (event.origin + '/wbs') !== WBSCLIENT.data.host) return;
446
447        var data = parseMessage(event.data);
448        if(!data) return;
449
450        WBSCLIENT.childIframeResult.push(data);
451        
452        if(data.calledFrom === 'form' || data.calledFrom === 'default') { /* this is triggered only by access/login forms */
453            if(data.clientSessionExists && WBSCLIENT.data.skipFormForLoggedIn) {
454                removeOrCloseChild(event.source);
455                runCallbackQueue(event);
456            }
457        } else if(data.calledFrom === 'confirm') { /* this is triggered by all forms */
458            if(WBSCLIENT.data.autocloseAfterSubmit) {
459                removeOrCloseChild(event.source);
460            }
461            runCallbackQueue(event);
462        } else if(data.calledFrom === 'checkout' || data.calledFrom === 'form-with-blank') { /* this is triggered by checkout forms */
463            runCallbackQueue(event);
464        }     
465    });
466
467    window.WBSCLIENT = WBSCLIENT;
468
469})(typeof window !== "undefined" ? window : this);