1 2WS.Namespace.Create('WS.LightBox', (function () 3{ 4 /** 5 @class LightBox 6 @namespace WS 7 @constructor 8 @param {Array of Object} objects list of objects (.src, .width, .height, [.footer{.title, .descr, .link{.href, .text}}]) 9 @param {Object} [container] container to add lightbox, default : body 10 @param {isEdit} bool is the request form the editor 11 **/ 12 var Class = function (objects, container, isEditor) 13 { 14 // Validation 15 if (!objects || objects.length <= 0) throw 'objects invalid!'; 16 17 this.Footer = false; 18 19 for (var i = 0; i <= objects.length - 1; i++) 20 { 21 if (!objects[i].src) throw "image src invalid!"; 22 if (objects[i].footer) this.Footer = true; 23 } 24 25 this.objects = objects; 26 this.container = (container) ? container : $("body"); 27 this.lightboxModal = this.container.find(".wsLightBox.wsModal"); 28 this.lightbox = this.container.find(".wsLightBox").not(".wsModal"); 29 this.MaxWidth = Math.floor($(window).width() / 4); 30 this.MaxHeight = this.MaxWidth + 35; 31 32 this.isEditor = isEditor && isEditor; 33 34 if (this.lightbox.length == 0) 35 { 36 var editorClass = ""; 37 if (this.isEditor) editorClass = "editorOnly" 38 // Create lightbox 39 var Html = []; 40 Html.push("<div class=\"wsLightBox " + editorClass + "\">"); 41 42 if (window.WS && window.WS.IsMobile) { 43 // ToolBar 44 Html.push("<div>"); 45 Html.push("<div class=\"wsToolBar\">"); 46 Html.push("<div></div>"); 47 Html.push("</div>"); 48 } 49 50 51 52 if (window.WS && window.WS.IsMobile) 53 { 54 Html.push("</div>"); 55 } 56 57 Html.push("<div class=\"wsLightBoxContentWrapper\">") 58 59 // == Arrow left == // 60 Html.push("<div class=\"wsArrowLeftWrapper\">"); 61 Html.push("<div class=\"wsArrowLeft\"></div>"); 62 Html.push("</div>"); 63 64 // == Content == // 65 Html.push("<div class=\"wsContentWrapper\">") 66 67 Html.push("<div>"); 68 Html.push("<div class=\"wsCloseWrapper\"><div class=\"wsClose\">+</div></div>"); 69 if (window.WS && !window.WS.IsMobile) { 70 // ToolBar 71 Html.push("<div class=\"wsToolBar\">"); 72 Html.push("<div></div>"); 73 Html.push("</div>") 74 } 75 76 // ImageContainer, Can be a video later 77 Html.push("<div class=\"wsImg\"></div>"); 78 79 // Footer 80 Html.push("<div class=\"wsFooter\">"); 81 Html.push("<div></div>"); 82 Html.push("<div></div>"); 83 Html.push("<div></div>"); 84 Html.push("</div>"); 85 86 Html.push("</div>"); 87 Html.push("</div>"); 88 89 // == Arrow right == // 90 91 Html.push("<div class=\"wsArrowRightWrapper\">"); 92 Html.push("<div class=\"wsArrowRight\"></div>"); 93 Html.push("</div>"); 94 95 Html.push("</div>"); 96 97 98 Html.push("</div>"); 99 100 this.lightboxModal = $("<div class=\"wsLightBox wsModal " + editorClass + "\"></div>"); 101 this.lightbox = $(Html.join("")); 102 103 // Append to Wrapper 104 this.container.append(this.lightboxModal); 105 this.container.append(this.lightbox); 106 } 107 108 if (window.WS && window.WS.IsMobile) { 109 this.lightbox.addClass("wsMobile"); 110 } 111 else 112 { 113 //default value base with the screen reesolution 114 this.lightbox.find(".wsImage").css({ "width": this.MaxWidth, "height": this.MaxHeight + 35 }); 115 } 116 117 if (this.IsEditor) 118 { 119 this.lightboxModal.addClass("editorOnly"); 120 this.lightbox.addClass("editorOnly"); 121 } 122 123 //check screen resolution 124 CheckIfMobile(); 125 126 // Add Handlers 127 AddHandler.apply(this); 128 }; 129 130 // Private Method(s) 131 var AddHandler = function () 132 { 133 var Me = this; 134 135 this.lightboxModal.off("click"); 136 this.lightboxModal.on("click", function () { Me.Hide(); }); 137 138 var Close; 139 if (Me.isEditor) Close = this.lightbox; 140 else Close = this.lightbox.find(".wsClose"); 141 142 Close.off("click"); 143 Close.on("click", function () { Me.Hide(); $("body").css("overflow", "visible"); }); 144 145 if (!Me.isEditor) { 146 var ArrowLeftWrapper = this.lightbox.find(".wsArrowLeftWrapper"); 147 var ArrowRightWrapper = this.lightbox.find(".wsArrowRightWrapper"); 148 149 var Content = this.lightbox.find(".wsLightBoxContentWrapper"); 150 151 Content.off("swipeleft, swiperight") 152 .on("swipeleft", function () { 153 Me.Next(); 154 }) 155 .on("swiperight", function () { 156 Me.Previous(); 157 }); 158 159 160 ArrowLeftWrapper.off("click"); 161 ArrowLeftWrapper.on("click", function () { Me.Previous(); }); 162 163 ArrowRightWrapper.off("click"); 164 ArrowRightWrapper.on("click", function () { Me.Next(); }); 165 } 166 167 }; 168 169 //get the maximun dimention of the image 170 var GetDimension = function (width, height) 171 { 172 // dimensions from screen resolution 173 var ScreenY = parseInt(($(window).height() * 0.8)); 174 var ScreenX = parseInt(($(window).width() * 0.8)); 175 //maybe check screen rez to see if we need to lower(if screen width < 700) the arrow...dont fit in small cell phone 176 177 // Max Size 178 if (width > ScreenX || height > ScreenY) 179 { 180 var ratio = 1; 181 if (width > height) 182 { 183 //widthbase 184 ratio = height / width; 185 if ((ScreenY / ScreenX) < ratio) 186 { 187 ratio = width / height; 188 height = ScreenY; 189 width = height * ratio; 190 } 191 else 192 { 193 width = ScreenX; 194 height = width * ratio; 195 } 196 } 197 else 198 { 199 // heightbase 200 ratio = width / height; 201 if ((ScreenX / ScreenY) < ratio) 202 { 203 ratio = height / width; 204 width = ScreenX; 205 height = width * ratio; 206 } 207 else 208 { 209 height = ScreenY; 210 width = height * ratio; 211 } 212 } 213 } 214
215 return { "width": width, "height": height }; 216 } 217 218 //calcul the image natural dimenssion and apply it to the object(image) 219 var CalculImgDim = function () 220 { 221 var Me = this; 222 223 //show the lightbox with 224 this.lightboxModal.css("display", "block"); 225 226 227 //hide the image div and start the spinner 228 $(".wsImg").hide(); 229 var spinner = $("<div class=\"wsLoadingFlexContainer\"><div class=\"wsLoadingSpinnerBlack\"></div></div>"); 230 this.lightbox.append(spinner); 231 232 //Image 233 var index = this.objects.idx 234 var object = this.objects[index]; 235 var img = new Image(); 236 img.onload = function () 237 { 238 object.width = img.naturalWidth; 239 object.height = img.naturalHeight; 240 241 //bind the image and get maxHeight and width 242 var dim = Bind(Me.lightbox, Me.lightboxModal, object, index, Me.objects.length, Me.MaxWidth, Me.MaxHeight); 243 Me.MaxWidth = dim.width; 244 Me.MaxHeight = dim.height; 245 246 //stop loading spinner and show the image div 247 spinner.remove(); 248 $(".wsImg").show(); 249 250 //start preload next image 251 PreloadNextImage(Me.objects, index, Me.objects.length); 252 }; 253 254 img.src = object.src; 255 } 256 257 //bind the image and the arrow 258 var Bind = function (element, elementModal, object, index, nbobject, MaxWidth, MaxHeight) 259 { 260 // toolbar 261 if (nbobject > 1) { 262 element.find(".wsToolBar > div:first-child").text(index + 1 + " / " + nbobject); 263 element.find(".wsToolBar > div:first-child").css("height", "30px"); 264 element.find(".wsToolBar > div:first-child").css("display", "inline-block"); 265 } 266 267 // img 268 var Dimension = GetDimension(object.width, object.height); 269 object.width = Dimension.width; 270 object.height = Dimension.height; 271 if (object.width > MaxWidth) MaxWidth = object.width; 272 if (object.height > MaxHeight) MaxHeight = object.height; 273 274 // LightBox dimensions, position 275 var FooterH = 100; 276 var HBox = MaxHeight + ((this.Footer) ? FooterH : 0) + 5; 277 var Top = ($(window).height() - HBox) / 2; 278 element.css({ "width": "100%", "height": HBox, "top": Top }); 279 280 if (window.WS && window.WS.IsMobile) 281 { 282 element.find(".wsImg").css({ "background-image": "url(\"" + object.src + "\")"}); 283 } 284 else { 285 element.find(".wsImg").css({ "width": object.width, "height": object.height, "background-image": "url(\"" + object.src + "\")", "background-size": object.width + "px " + object.height + "px" }); 286 } 287 288 // init footer 289 element.find(".wsFooter").css("display", "none"); 290 var title = element.find(".wsFooter > div:nth-child(1)"); 291 var descr = element.find(".wsFooter > div:nth-child(2)"); 292 var link = element.find(".wsFooter > div:nth-child(3)"); 293 title.empty(); 294 descr.empty(); 295 link.empty(); 296 297 298 299 // arrows 300 element.find(".wsArrowRight, .wsArrowLeft").css("display", "none"); 301 if (nbobject > 1) { element.find(".wsArrowRight, .wsArrowLeft").css("display", "block"); } 302 303 // opacity 304 element.find(".wsArrowRight, .wsArrowLeft").css({ "opacity": 1, "cursor": "pointer" }); 305 if ((index + 1) >= nbobject) element.find(".wsArrowRight").css({ "opacity": 0.5, "cursor": "auto" }); 306 if ((index - 1) < 0) element.find(".wsArrowLeft").css({ "opacity": 0.5, "cursor": "auto" }); 307 308 if (object.footer) 309 { 310 // display footer 311 element.find(".wsFooter").css("display", "block"); 312 313 var otitle = (object.footer.title) ? object.footer.title : ""; 314 var odescr = (object.footer.descr) ? object.footer.descr : ""; 315 var olink = (object.footer.link && object.footer.link.href && object.footer.link.text) ? $("<a href=\"" + object.footer.link.href + "\" target=\"_blank\">" + object.footer.link.text + "</a>") : "";
316 title.text(otitle); 317 descr.text(odescr); 318 link.html(olink); 319 } 320 321 elementModal.css("display", "block"); 322 323 element.addClass("open"); 324 $("body").css("overflow", "hidden"); 325 326 //return the max dim value 327 return { width: MaxWidth, height: MaxHeight }; 328 }; 329 330 //preload the next image if possible 331 var PreloadNextImage = function (objects, index, length) 332 { 333 if (index + 1 < length) 334 { 335 var img = new Image(); 336 img.onload = function () { /*preload completed*/ } 337 338 img.src = objects[index + 1].src; 339 } 340 }; 341 342 //if is mobile add wsMobile to the arrow to make them smaller 343 var CheckIfMobile = function () 344 { 345 if ($(window).width() < 720) 346 { 347 $('.wsLightBoxContentWrapper .wsArrowLeft').css({ "width": "25px", "height": "25px" }); 348 $('.wsLightBoxContentWrapper .wsArrowRight').css({ "width": "25px", "height": "25px" }); 349 $('.wsLoadingSpinnerBlack').css("font-size", "50%"); 350 } 351 else 352 { 353 $('.wsLightBoxContentWrapper .wsArrowLeft').css({ "width": "30px", "height": "30px", }); 354 $('.wsLightBoxContentWrapper .wsArrowRight').css({ "width": "30px", "height": "30px" }); 355 $('.wsLoadingSpinnerBlack').css("font-size", "70%"); 356 } 357 358 }; 359 360 // Public Method(s) 361 (function (Methods) 362 { 363 /** 364 Display the LightBox 365 366 @method Show 367 @param {Number} [indexstart] position to start (images) 368 **/ 369 Methods.Show = function (indexstart) 370 { 371 this.objects.idx = (indexstart && indexstart >= 0 && indexstart <= this.objects.length) ? indexstart : 0; 372 373 //calcul the image dimenssion and bind it after 374 CalculImgDim.apply(this); 375 }; 376 377 /** 378 Hide the LightBox 379 380 @method Hide 381 **/ 382 Methods.Hide = function () 383 { 384 this.lightboxModal.css("display", "none"); 385 this.lightbox.removeClass("open"); 386 $("body").css("overflow", "initial"); 387 }; 388 389 /** 390 Remove LightBox from Container 391 392 @method Remove 393 **/ 394 Methods.Remove = function () 395 { 396 this.lightboxModal.remove(); 397 this.lightbox.remove(); 398 }; 399 400 /** 401 Display Next Image 402 403 @method Next 404 **/ 405 Methods.Next = function () 406 { 407 if (!this.objects[this.objects.idx + 1]) return; 408 409 this.objects.idx += 1; 410 //calcul the image dimenssion and bind it after 411 CalculImgDim.apply(this); 412 }; 413 414 /** 415 Display Previous Image 416 417 @method Previous 418 **/ 419 Methods.Previous = function () 420 { 421 if (!this.objects[this.objects.idx - 1]) return; 422 423 this.objects.idx -= 1; 424 //calcul the image dimenssion and bind it after 425 CalculImgDim.apply(this); 426 }; 427 428 })(Class.prototype); 429 430 return Class; 431})());
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.