https://mpipv2.nykfil.com.ph/olis/Blocks/CloneOfWebPatterns/Javascript/SilkUI.en.js?2085

1// Silk UI Class
2function SilkUIObject(){
3
4    // that object
5    var that = this;
6
7    // Current Version
8    var Version = "3.1.3 (2017-05-05)";
9
10    // page Overlay for device emulation
11    var PageOverlay = false;
12
13    // page size
14    var deviceWidth = 0 ;
15
16    // timers controll
17    var timers = {};
18
19    // Debug Mode
20    var DebugMode = false;
21
22
23
24
25
26
27
28
29
30
31    // PATTERNS ************************************************************************************
32
33    // Silk UI Modal
34    var Modal;
35    
36    // Dropdowns
37    var Dropdowns;
38    
39    // Accordion vertical
40    var AccordionVertical;
41    
42    // SectionIndex
43    var SectionIndex;
44    
45    // Range Sliders
46    var RangeSlider;
47
48    // SectionExpandable
49    var SectionExpandable;
50
51
52
53
54
55
56    // PUBLIC FUNCTIONS ***************************************************************************
57    
58
59
60
61    // Function to debug on browser console
62    // Only debug when debug mode is true
63    that.DebugConsole = function(msg, flag){
64        
65        // If debug active or flag true
66        if(DebugMode || flag == true){
67            /*console.debug("Silk UI Debug : "+msg);*/
68            console.log("Silk UI Debug : "+msg);
69        }
70    }
71    
72
73    // Get Device
74    that.GetDevice = function(){
75
76        return SilkDeviceDetect.getDevice();
77    }
78    
79
80    // IE11 and IE10 Metro for tablet
81    that.isMetro = function() {
82        
83        var errorName = null;
84        var supported = null; 
85        
86        try {
87            new ActiveXObject("");
88        }
89        catch (e) {
90            // FF has ReferenceError here
91            errorName = e.name; 
92        }     
93        try {
94            supported = !!new ActiveXObject("htmlfile");
95        } catch (e) {
96            supported = false;
97        }
98        if(errorName != 'ReferenceError' && supported==false){
99            supported = false;
100        }else{
101            supported =true;
102        }
103        
104        if(!supported && (SilkDeviceDetect.getBrowserVersion() == "ie11" || SilkDeviceDetect.getBrowserVersion() == "ie10")){
105            return true;
106        }else{
107            return false;
108        }
109        
110    }
111    
112
113
114    // return browser version
115    that.GetBrowserVersion = function(){
116        var bversion = SilkDeviceDetect.getBrowserVersion();
117        return bversion;
118    }   
119       
120    
121    // Get version
122    that.GetVersion = function(){
123        return Version;
124    }
125
126
127    // Clear browser cookies
128    that.ClearCookies = function(){
129        SilkDeviceDetect.setCookie("DEVICE_SIMULATION", "false");
130        SilkDeviceDetect.clearCookie("DEVICE_TYPE"); 
131        return "Done!";
132    };
133    
134    
135    
136    // Get Transition callback to use
137    // Function from David Walsh: http://davidwalsh.name/css-animation-callback
138    that.whichTransitionEvent = function(){
139      var t,
140          el = document.createElement("fakeelement");
141
142      var transitions = {
143        "transition"      : "transitionend",
144        "OTransition"     : "oTransitionEnd",
145        "MozTransition"   : "transitionend",
146        "WebkitTransition": "webkitTransitionEnd"
147      }
148
149      for (t in transitions){
150        if (el.style[t] !== undefined){
151          return transitions[t];
152        }
153      }
154    }
155
156        
157    
158    
159    
160    
161    
162
163    // PRIVATE FUNCIONS ***********************************************************************************************************************
164
165    // add overlay for device emulation
166    function addOverlay() {
167        
168
169        // if simulation device
170        if(SilkDeviceDetect.isSimulationDevice()){
171            
172            /* set size and device  */    
173            $(".ResponsiveOverlay_Device").html(SilkDeviceDetect.getDevice()+ " " + SilkDeviceDetect.getDeviceWidth()+ "x" + SilkDeviceDetect.getDeviceHeight());
174        }
175        else{
176
177            /* set size and device  */    
178            $(".ResponsiveOverlay_Device").html(SilkDeviceDetect.getDeviceWidth() + "x" + SilkDeviceDetect.getDeviceHeight());            
179        }
180
181        // reset delay event
182        waitForFinalEvent(removeOverlay, 2000, 'removeOverlay');
183
184
185        // check if overlay
186        if (PageOverlay == false) {
187
188            // show overlay overlay
189            $('.ResponsiveOverlay').css("display", "block");
190            setTimeout(function(){ $('.ResponsiveOverlay').addClass("show"); }, 1);
191            
192            // disable scroll
193            $(document.body).css("overflow", "hidden");
194
195            // if device simulation
196            if(SilkDeviceDetect.isDeviceSimulation()){
197
198                // show background        
199                $('.ResponsiveOverlay_bg').css("display", "block");
200                setTimeout(function(){ $('.ResponsiveOverlay_bg').addClass("show"); }, 1);
201            }
202
203            // set false
204            PageOverlay = true;
205        }
206
207  
208
209
210    }
211    
212    
213
214    // remove overlay for device emulation
215    function removeOverlay() {
216
217        // check overlay
218        if (PageOverlay == true) {
219
220            // enable scroll
221            $(document.body).css("overflow", "visible");    
222
223            // hide background        
224            $('.ResponsiveOverlay_bg').removeClass("show");
225            setTimeout(function(){ $('.ResponsiveOverlay_bg').css("display", "none"); }, 250);
226 
227            // hide device simulation controll       
228            $('.ResponsiveOverlay').removeClass("show");
229            setTimeout(function(){ $('.ResponsiveOverlay').css("display", "none"); }, 250);
230
231            // se false
232            PageOverlay = false;

233        }
234    }
235
236
237
238    // mmanage timers
239    function waitForFinalEvent(callback, ms, uniqueId) {        
240        if (timers[uniqueId]) {
241            clearTimeout (timers[uniqueId]);
242        }        
243        timers[uniqueId] = setTimeout(callback, ms);
244    };
245
246
247    // refresh page
248    function debugRefreshPage(){
249
250        // set event timer to refresh page
251        if(Math.abs(deviceWidth - SilkDeviceDetect.getDeviceWidth()) >= 30) {
252
253            // if device simulation
254            if(SilkDeviceDetect.isDeviceSimulation()){
255                location.reload();
256            }else{
257                removeOverlay();
258            }
259        }
260
261        // set device size
262        deviceWidth = SilkDeviceDetect.getDeviceWidth();
263    }
264
265
266
267
268
269    // add orientation class on .Page
270    function addOrientation() {
271
272        
273        // remove classes
274        $(".Page").removeClass('landscape').removeClass('portrait');
275        
276        // add class
277        $(".Page").addClass(SilkDeviceDetect.getOrientation());
278        return true;
279    };
280    
281
282    // set orientation event
283    that.orientationChange = function(event)  {
284        setTimeout(function(){ addOrientation(); }, 500);
285
286    };  
287    
288
289
290     // event change width window
291    function onWindowResize(event) {
292        // if not iframe
293        if(!SilkDeviceDetect.isIframe() && !SilkDeviceDetect.isMobile()){
294            
295            if(Math.abs(deviceWidth - SilkDeviceDetect.getDeviceWidth()) >= 30){
296                // add overlay
297                addOverlay();
298                
299                // add delay to refresh page
300                waitForFinalEvent(debugRefreshPage, 1500, 'refreshPage');
301            }
302            else{
303                //check page Orientation
304                addOrientation();
305            }
306        }
307    };
308    
309    // events to simulation device
310    function initSimulationDevice(){
311            
312
313        // add event to show/hide simulation device options
314        $(".ResponsiveOverlay .OpenClose").click(function(){
315
316            // if visible
317            if($(".ResponsiveOverlay .ResponsiveOverlay_Bottom").css('display') == "block"){
318                $(".ResponsiveOverlay .ResponsiveOverlay_Bottom").hide();
319              }else{
320                $(".ResponsiveOverlay .ResponsiveOverlay_Bottom").show();
321            }
322        });
323
324         // add event to active/desable simulation device
325        $(".ResponsiveOverlay_Bottom input.BtnRespOverlay").change(function(){
326
327            // if selected
328            if($(this).is(':checked')){
329                SilkDeviceDetect.setCookie("DEVICE_SIMULATION", "true");
330            }else{
331                that.ClearCookies();
332            }
333
334            // reload page
335            location.reload();
336        });
337
338
339        // cancel remve overlay on mouseOver
340        $(".ResponsiveOverlay").mouseover(function() {
341            clearTimeout (timers['removeOverlay']);
342            clearTimeout (timers['refreshPage']);
343        });
344
345        // add evento to remove overlay
346        $(".ResponsiveOverlay").mouseout(function() {
347            waitForFinalEvent(removeOverlay, 1000, 'removeOverlay');
348            waitForFinalEvent(debugRefreshPage, 1000, 'refreshPage');
349        });
350
351
352        // if addEventListener resize
353        if (window.addEventListener) {
354            window.addEventListener("resize", onWindowResize, false);                
355        } else if (window.attachEvent) { // IE 8 and addEventListener not supported browsers
356            window.attachEvent('onresize', function() {
357                onWindowResize();
358            });
359        }  
360    }
361
362
363
364
365
366    // Change  desktop class on .Page when resizing
367    setDesktopSizeClass = function(){
368        
369        // get window size
370        var windowW = SilkDeviceDetect.getDeviceWidth();
371
372        // set device default
373        var ndevice = "desktop small";
374
375        if (windowW >= 1920) {
376            ndevice = "desktop hd";
377        } else if (windowW >= 1600){
378            ndevice = "desktop big";
379        } else if (windowW >= 1366){
380            ndevice = "desktop";
381        } else { 
382           ndevice = "desktop small";
383        }
384        
385        // remove classes
386        $(".Page").removeClass("desktop small hd big tablet phone");
387        
388        // add new class
389        $(".Page").addClass(ndevice);
390        
391    }
392
393
394
395
396
397    // Execute for debug 
398        
399    // object: function (required)
400    // msg: string (required)
401    // patameters: array      
402    // behavior: string 
403    
404    that.Execute = function(func, msg, parameters, behavior){
405
406        
407        // check parameters
408        if(!parameters){ parameters = []; }
409        if(!behavior){ behavior = "AllDevices"; }
410
411        // Only on page loaded
412        $(document).ready(function(){
413
414            // execute funcion
415            try {
416                func.parameters = parameters;
417                func.call();
418            }
419            catch(exception){ 
420                // Send log to console
421                that.DebugConsole(msg, true);
422            } 
423        });
424
425    }    
426   
427   
428   
429    // Attach FastClick    
430    if(($(".Page").hasClass("phone") || $(".Page").hasClass("tablet")) && typeof(FastClick) != "undefined") {
431        window.addEventListener('load', function() {
432           new FastClick(document.body);
433        }, false);
434    }
435
436    
437    // add SilkUI version class on .Page
438    function addVersion() {
439 
440    var SilkUIVersionString = Version.split(' ')[0];
441       
442        // add/update attribute
443        $(".Page").attr('data-silkversion', SilkUIVersionString );
444        
445        return true;
446    };
447    
448    // On page loaded
449    $(document).ready(function() { 
450
451        //if desktop, set desktop size
452        if($(".Page").hasClass("desktop")){
453            setDesktopSizeClass();
454        }
455        
456        // set device size
457        deviceWidth = SilkDeviceDetect.getDeviceWidth();
458        
459        
460        // check if is device simulation or development mode
461        if(SilkDeviceDetect.isDeviceSimulation() || SilkDeviceDetect.isDevelopmentMode()){
462
463            initSimulationDevice();
464
465        }
466           
467           
468           
469         // orientation
470        // if metro
471        if(that.isMetro()){
472            
473            var matchMediaQuery = window.matchMedia("(min-width: " + ((SilkDeviceDetect.getDeviceWidth() + SilkDeviceDetect.getDeviceHeight()) / 2) + "px)");
474            matchMediaQuery.addListener(that.orientationChange);
475            
476        }else{
477            
478            if (window.addEventListener) {
479                window.addEventListener("orientationchange", that.orientationChange, false);
480            } else if (window.attachEvent) { // IE 8 and addEventListener not supported browsers
481                window.attachEvent("orientationchange", that.orientationChange, false);
482            }
483        
484        }
485        
486        
487        // windows resize to change small desktop, desktop, desktop big, desktop hd
488        if(!SilkDeviceDetect.isMobile() && !SilkDeviceDetect.isSimulationDevice())
489        {
490            if (window.addEventListener) {
491                window.addEventListener("resize", setDesktopSizeClass, false);                
492            } else if (window.attachEvent) { // IE 8 and addEventListener not supported browsers
493                window.attachEvent('onresize', function() {
494                    setDesktopSizeClass();
495                });
496            }
497        }
498        
499        addVersion();
500        
501
502    });
503
504}
505
506
507// console debug - exception for browsers with console closed
508if (!window.console) console = { log: function(){} };
509
510
511// Create Silk UI 
512var SilkUI = new SilkUIObject();