1/* eslint-disable */ 2 3(function($) { 4 const OuterPadding = 64; 5 const SecondaryOuterPaddingTop = 200; 6 const SecondaryInnerPaddingBottom = 64; 7 const BreakPoint = 768; 8 9 var defaults = { 10 constructCompleteEvent: function(){}, 11 closeCompleteEvent : function(){}, 12 } 13 14 const HTMLElement = { 15 CLOSE_BUTTON : '<button class="close" data-dismiss="modal"><i class="icon-cross-o icon-black"></i></button>', 16 OVERLAY : '<div class="modal-overlay"></div>' 17 } 18 19 const Event = { 20 ESCAPE_KEYCODE : 27, 21 MOUSE_OUT : 'mouseout', 22 MOUSE_OVER : 'mouseover', 23 CLICK : 'click', 24 RESIZE : 'resize' 25 } 26 27 const ClassName = { 28 OVERFLOW_HIDDEN : 'overflow-hidden', 29 SHOW : 'show', 30 ICON_BLUE : 'icon-blue', 31 ICON_CROSS : 'icon-cross-o', 32 ANIMATION : 'animation', 33 SECONDARY_MODAL : 'secondary-modal', 34 LONG_CONTENT : 'long-content' 35 } 36 37 const Selector = { 38 CLOSE : 'close', 39 MODAL : 'modal', 40 MODAL_CONTENT : 'modal-content', 41 MODAL_ACTUAL_CONTENT : 'modal-actual-content', 42 MODAL_OVERLAY : 'modal-overlay', 43 DISMISS_MODAL : 'button[data-dismiss="modal"]' 44 } 45 46 var Modal = function(element, options) { 47 this.element = element; 48 this.options = options; 49 this.modalId = '#' + this.element.attr('data-target'); 50 this.modalDialog = $(this.modalId).find('.' + Selector.MODAL_CONTENT); 51 this.construct(); 52 } 53 54 Modal.prototype = { 55 constructor: Modal, 56 57 templateModal: function() { 58 var _this = this; 59 var browserWidth = this.getBrowserWidth(); 60 var browserHeight = this.getBrowserHeight(); 61 var modalElement = this.modalId; 62 var modalDialog = this.modalDialog; 63 64 var modalHeight; 65 var minHeight; 66 67 // insert close button into modal 68 this.insertCloseButton(); 69 70 // insert overlay & set height for overlay 71 this.insertOverlay(); 72 this.setOverlayHeight(minHeight); 73 74 $('body').addClass(ClassName.OVERFLOW_HIDDEN); 75 //$(this.modalId).addClass(ClassName.SHOW); 76 77 $(this.modalId).addClass(ClassName.SHOW).delay(100).queue(function(){ 78 $(this).addClass(ClassName.ANIMATION); 79 80 // get measurement of modal-content after "show" class appended into the modal 81 modalHeight = _this.getModalHeight(modalDialog); 82 minHeight = _this.getModalMinHeight(modalHeight); 83 84 // check is modal's content height higher than modal's min height 85 var getContentHeight = _this.getContentHeight(modalDialog); 86 var getModalHeightExcludePadding = _this.getModalHeightExcludePadding(modalDialog); 87 88 if(browserWidth > BreakPoint){ 89 if(getContentHeight < getModalHeightExcludePadding){ 90 $(modalDialog).css('height', 'auto'); 91 modalHeight = _this.getModalHeight(modalDialog); 92 minHeight = _this.getModalMinHeight(modalHeight); 93 } 94 } else { 95 $(modalDialog).css('height', '100%'); 96 } 97 98 _this.setModalPosition(browserWidth, browserHeight, modalHeight, minHeight, modalDialog); 99 100 101 /***** 102 Secondary Modal START 103 *****/ 104 if($(this).hasClass(ClassName.SECONDARY_MODAL)){ 105 this.secondaryElement = $(this); 106 this.secondaryModalDialog = $(this).find('.' + Selector.MODAL_CONTENT); 107 if(browserWidth > BreakPoint){ 108 var getContentHeight = _this.getContentHeight(this.secondaryModalDialog); 109 var getSecondaryModalPadding = SecondaryOuterPaddingTop + SecondaryInnerPaddingBottom; 110 if(getContentHeight > (browserHeight - getSecondaryModalPadding)){ 111 // If content in Secondary Modal is longer than browser height 112 this.secondaryElement.addClass(ClassName.LONG_CONTENT); 113 } else { 114 // If content in Secondary Modal is short 115 var modalHeight = _this.getModalHeight(this.secondaryModalDialog); 116 var minHeight = _this.getModalMinHeight(modalHeight); 117 this.secondaryElement.removeClass(ClassName.LONG_CONTENT); 118 // Align vertically centre on screen 119 _this.setSecondaryModalPosition(browserWidth, browserHeight, modalHe
119ight, minHeight, this.secondaryModalDialog); 120 } 121 } 122 } 123 /***** 124 Secondary Modal END 125 *****/ 126 127 $(this).dequeue(); 128 }); 129 130 // mouseover / out 131 $(this.modalId).find(Selector.DISMISS_MODAL).on(Event.MOUSE_OVER, function(){ 132 $(this).find('.' + ClassName.ICON_CROSS).addClass(ClassName.ICON_BLUE); 133 }); 134 135 $(this.modalId).find(Selector.DISMISS_MODAL).on(Event.MOUSE_OUT, function(){ 136 $(this).find('.' + ClassName.ICON_CROSS).removeClass(ClassName.ICON_BLUE); 137 }); 138 139 /* Click on close button / modal's overlay / escape key */ 140 $(this.modalId).find(Selector.DISMISS_MODAL).on(Event.CLICK, this.dismissModal.bind(this)); 141 $(this.modalId).find('.' + Selector.MODAL_OVERLAY).on(Event.CLICK, this.dismissModal.bind(this)); 142 143 var closeBtn = $(this.modalId).find(Selector.DISMISS_MODAL) 144 $(document).on('keyup', function(e){ 145 if(e.keyCode === 27) { 146 closeBtn.trigger('click'); 147 } 148 }) 149 150 // when window resize 151 $(window).on(Event.RESIZE, function(){ 152 browserWidth = _this.getBrowserWidth(); 153 modalHeight = _this.getModalHeight(modalDialog); 154 minHeight = _this.getModalMinHeight(modalHeight); 155 156 // check is modal's content height higher than modal's min height 157 if(browserWidth > BreakPoint){ 158 var getContentHeight = _this.getContentHeight(modalDialog); 159 var getModalHeightExcludePadding = _this.getModalHeightExcludePadding(modalDialog); 160 if(getContentHeight < getModalHeightExcludePadding){ 161 $(modalDialog).css('height', 'auto'); 162 } 163 } else { 164 $(modalDialog).css('height', '100%'); 165 } 166 167 _this.setModalPosition(browserWidth, browserHeight, modalHeight, minHeight, modalDialog); 168 169 /***** 170 Secondary Modal START 171 *****/ 172 if($(modalElement).hasClass(ClassName.SECONDARY_MODAL)){ 173 this.secondaryElement = $(modalElement); 174 this.secondaryModalDialog = $(modalElement).find('.' + Selector.MODAL_CONTENT); 175 if(browserWidth > BreakPoint){ 176 // desktop view 177 var getContentHeight = _this.getContentHeight(this.secondaryModalDialog); 178 var getSecondaryModalPadding = SecondaryOuterPaddingTop + SecondaryInnerPaddingBottom; 179 if(getContentHeight > (browserHeight - getSecondaryModalPadding)){ 180 // If content in Secondary Modal is longer than browser height 181 this.secondaryElement.addClass(ClassName.LONG_CONTENT); 182 } else { 183 // If content in Secondary Modal is short 184 var modalHeight = _this.getModalHeight(this.secondaryModalDialog); 185 var minHeight = _this.getModalMinHeight(modalHeight); 186 this.secondaryElement.removeClass(ClassName.LONG_CONTENT); 187 // Align vertically centre on screen 188 _this.setSecondaryModalPosition(browserWidth, browserHeight, modalHeight, minHeight, this.secondaryModalDialog); 189 } 190 } else { 191 // mobile view 192 _this.setSecondaryModalPosition(browserWidth, browserHeight, modalHeight, minHeight, this.secondaryModalDialog); 193 } 194 } 195 /***** 196 Secondary Modal END 197 *****/ 198 }); 199 }, 200 201 insertCloseButton: function() { 202 $(this.modalId).find('.' + Selector.MODAL_CONTENT).prepend(HTMLElement.CLOSE_BUTTON); 203 }, 204 205 insertOverlay: function() { 206 $(HTMLElement.OVERLAY).insertBefore($(this.modalId).find('.' + Selector.MODAL_CONTENT)); 207 }, 208 209 setOverlayHeight: function(minHeight) { 210 $(this.modalId).find('.' + Selector.MODAL_OVERLAY).css({ 211 'min-height': '100%', 212 'height': minHeight 213 }); 214 }, 215 216 setModalPosition: function(browserWidth, browserHeight, modalHeight, minHeight, modalDialog) { 217 if(minHeight < browserHeight) { 218 if(browserWidth > BreakPoint){ 219 // desktop view 220 modalDialog.css({ 221 top: "50%", 222 marginTop: modalHeight/-2, 223 marginBottom: 0 224 }); 225 } else { 226 // mobile view 227 modalDialog.removeAttr('style'); 228 } 229 } 230 }, 231 232 setSecondaryModalPosition: function(browserWidth, browserHeight, modalHe
232ight, minHeight, modalDialog) { 233 if(browserWidth > BreakPoint){ 234 // desktop view 235 modalDialog.css({ 236 top: "50%", 237 marginTop: modalHeight/-2, 238 marginBottom: 0 239 }); 240 } else { 241 // mobile view 242 modalDialog.removeAttr('style'); 243 } 244 }, 245 246 getContentHeight: function(modalDialog) { 247 return modalDialog.find('.' + Selector.MODAL_ACTUAL_CONTENT).height(); 248 }, 249 250 getModalHeightExcludePadding: function(modalDialog) { 251 return modalDialog.height(); 252 }, 253 254 getModalHeight: function(modalDialog) { 255 return modalDialog.innerHeight(); 256 }, 257 258 getModalMinHeight: function(modalHeight) { 259 return ( OuterPadding * 2 ) + modalHeight; 260 }, 261 262 getBrowserHeight: function() { 263 return $(window).height(); 264 }, 265 266 getBrowserWidth: function() { 267 return $(window).width(); 268 }, 269 270 dismissModal: function(currentTarget) { 271 272 var modalId = '#' + $(currentTarget.currentTarget).parents('.' + Selector.MODAL).attr('id'); 273 $('body').removeClass(ClassName.OVERFLOW_HIDDEN); 274 $(modalId).find('.' + Selector.CLOSE).remove(); 275 $(modalId).removeClass(ClassName.ANIMATION).delay(200).queue(function(){ 276 $(modalId).removeClass(ClassName.SHOW); 277 $(modalId).find('.' + Selector.MODAL_CONTENT).removeAttr('style'); 278 $(modalId).find('.' + Selector.MODAL_OVERLAY).remove(); 279 $(this).dequeue(); 280 }); 281 282 this.options.closeCompleteEvent.call(modalId); 283 }, 284 285 construct: function() { 286 var _this = this; 287 this.element.on(Event.CLICK, function() { 288 _this.templateModal(); 289 _this.options.constructCompleteEvent.call(_this.modalId); 290 }); 291 } 292 } 293 294 $.fn.vmodal = function(options) { 295 var implementOptions = $.extend(true, {}, defaults, options); 296 var vmodal = new Modal($(this), implementOptions); 297 298 return vmodal; 299 }; 300})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.