1/* 2 Autor: Janine Gerke 3 4 Anwendungsbeispiele Ãbersicht: 5 folgende Möglichkeiten stehen zur Verfügung: 6 - Automatischer Aufruf einer Lightbox über ein <a>-Tag - Lightbox öffnet sich per Klick auf den Link 7 - Erstellung einer Lightbox per JS - Ligthbox öffnet sich per Klick auf den Link 8 - Erstellung einer Lightbox per JS - Lightbox öffnet sich sofort, wenn das JS ausgeführt wird 9 - Direkter Aufruf eines Links über JS - Lightbox öffnet sich sofort, wenn das JS ausgeführt wird 10 11 Methodenübersicht: 12 create(lbObj, type, options) 13 Kreiert eine Lightbox (wird per Klick auf das Element 'lbObj' geöffnet) 14 lbObj : a Tag dessen Link in einer Lightbox geöffnet wird, wenn man klickt 15 type : Art der Lightbox. Je nach Typ variieren die verschiednen Einstellungen 16 "link", "content", "image", "flashVideo", "video", "default" 17 options : Zusätzliche Optionen. (Ãberschreiben die Standardwerte, die über den Typen gesetzt werden) 18 19 openIFrame(src, options) 20 Ãffnet eine Quelle direkt per IFrame in einer Lightbox (wird direkt geöffnet) 21 src : Link, der geöffnet werden soll 22 options : Zusätzliche Optionen. (Ãberschreiben die Standardwerte) 23 24 openContent(idOfContentToShow, options) 25 Ãffnet den Inhalt eines HTML-Elements in einer Lightbox (wird direkt geöffnet) 26 idOfContentToShow : id des HTML-Elements 27 options : Zusätzliche Optionen. (Ãberschreiben die Standardwerte) 28 29 close() 30 SchlieÃt die aktuell geöffnete Lightbox 31 32 openFormAction($form,options) 33 opens a Formaction within an iframe 34 standard dimension is height: 1024, width: 1280 35 $form : a JQuery-wrapped form object with an attribute "action" 36 37 38 Anwendungsbeispiele: 39 Automatischer Aufruf einer Lightbox über ein <a>-Tag - Lightbox öffnet sich per Klick auf den Link 40 - Der Link braucht eine Klasse "showLinkPerLightbox" 41 42 Bsp: 43 <a href="/ec/cms2/1010/loginResponse.do" class="showLinkPerLightbox" title = "Actebis Partner Marketing Center">Klick mich</a> 44 45 Ãber den Link können Optionen übergeben werden. Dafür das Attribut "toptions" mit den entsprechenden Optionen versehen. 46 -> Ist nur in Kombination mit der Klasse "showLinkPerLightbox" nutzbar 47 Syntax: toptions="[option1]=[value1];[options2]=[value2]" 48 49 Bsp: toptions="title=newTitle;height=100" 50 51 Erstellung einer Lightbox per JS - Ligthbox öffnet sich per Klick auf den Link 52 Bsp: 53 <a href="/ec/cms2/1010/loginResponse.do" id="myLoginResponse" title = "Actebis Partner Marketing Center">Klick mich</a> 54 55 Javascript: 56 Lightbox.create($(#myLoginResponse), "link"); 57 58 Als 3. Parameter können optionen mitgegeben werden: 59 Lightbox.create($(#myLoginResponse), "link", { 60 height: "140" 61 ,width: "200" 62 }); 63 64 Erstellung einer Lightbox per JS - Lightbox öffnet sich sofort, wenn das JS ausgeführt wird 65 Bsp: 66 <a href="/ec/cms2/1010/loginResponse.do" id="myLoginResponse" title = "Actebis Partner Marketing Center">Klick mich</a> 67 68 Javascript: 69 Lightbox.create($(#myLoginResponse), "link", { 70 open: true 71 }); 72 73 Mit dem Parameter "open: true" wird die Lightbox direkt geöffnet. Natürlich können hier auch weitere Parameter mitgegeben werden 74 75 Direkter Aufruf eines Links über JS - Lightbox öffnet sich sofort, wenn das JS ausgeführt wird 76 Lightbox.openIFrame = function(src, options); 77 78 Bsp: Lightbox.openIFrame = function("http://www.google.de", {title: "Google"}); 79 80 Using Bootstrap modal instead of colorbox: 81 Lighboxes that show remote content in an iFrame (type "link" or direct "openIframe()" call) check for the option 82 "bootstrapEnabled". When this is set to true instead of the jQuery colorbox a Bootstrap modal dialog will open. 83 84 Using a loading indicator: 85 Lightboxes that show remote content in an iFrame (type "link" or direct "openIframe()" call) check for the option 86 "loadingAnimationPath". When there is an image URL in this parameter, this image will be displayed until the iFrame has loaded. 87 88 89*/ 90 91function PegasosLightbox() { 92 93 /*Reihenfolge der Optionen: 94 self.defaultOptions 95 wird überschrieben von self.type.XXX.options 96 wird überschrieben von options die an die Funktion show übergeben werden bzw den optionen die über "toptions" im Link angegeben werden 97 */ 98 99 var self = this; 100 101 self.currentOptions = {}; 102 103 //Bootstrap 3 template 104 self.modalTemplateBS3 = "<div class=\"modal\" tabindex=\"-1\" role=\"dialog\">\n" + 105 " <div class=\"modal-dialog\" role=\"document\">\n" + 106 " <div class=\"modal-content\" style=\"height:100%;\">\n" + 107 " <div class=\"modal-header\" style=\"height:5%;\"><span class='modal-title'></span>\n" + 108 " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n" +
109 " <span aria-hidden=\"true\">×</span>\n" + 110 " </button>\n" + 111 " </div>\n" + 112 " <div class=\"modal-body\" style=\"height:95%\">\n" + 113 " </div>\n" + 114 " </div>\n" + 115 " </div>\n" + 116 "</div>"; 117 118 // Bootstrap 5 template 119 self.modalTemplateBS5 = "<div class=\"modal fade\" tabindex=\"-1\" role=\"dialog\">\n" + 120 " <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n" + 121 " <div class=\"modal-content\" style=\"height:100%;\">\n" + 122 " <div class=\"modal-header\" style=\"height:5%;\">\n" + 123 " <h5 class=\"modal-title\"></h5>\n" + 124 " <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n" + 125 " </div>\n" + 126 " <div class=\"modal-body\" style=\"height:95%\">\n" + 127 " </div>\n" + 128 " </div>\n" + 129 " </div>\n" + 130 "</div>"; 131 132 self.isBootstrap5 = function() { 133 return typeof bootstrap !== 'undefined' && bootstrap.Modal; 134 }; 135 136 self.create = function(lbObj, type, options) { 137 //kreieren 138 if ($(lbObj).length > 0) { 139 this.currentOptions = generateOptions(type, options); 140 141 adjustLightboxDimensionsToViewport(this.currentOptions); 142 143 if (this.currentOptions.bootstrapEnabled === true && self.type[type].prepareModal){ 144 self.createModal(lbObj, type); 145 } else { 146 $(lbObj).colorbox(this.currentOptions); 147 } 148 } 149 150 }; 151 152 self.createModal = function(lbObj, type){ 153 // choose template based on Bootstrap version 154 var template = self.isBootstrap5() ? self.modalTemplateBS5 : self.modalTemplateBS3; 155 //var $modal = $(self.modalTemplate); 156 var $modal = $(template); 157 $modal.addClass("lightboxModal"); 158 159 $modal.on("shown.bs.modal", function(){ 160 pegasos.lightbox.isOpen = true; 161 }); 162 163 $modal.on("hidden.bs.modal", function(){ 164 pegasos.lightbox.isOpen = false; 165 self.currentOptions = {}; 166 }); 167 168 if (typeof this.currentOptions.title !== "undefined" && this.currentOptions.title.length > 0) { 169 $modal.find(".modal-header .modal-title").html(this.currentOptions.title); 170 } 171 172 if (self.isBootstrap5()) { 173 $modal.find(".modal-dialog").css({ 174 "max-width": this.currentOptions.width + "px" 175 }).css("height", this.currentOptions.height); 176 } else { 177 $modal.find(".modal-dialog").css("width", this.currentOptions.width).css("height", this.currentOptions.height); 178 } 179 180 self.type[type].prepareModal($modal,lbObj.attr("href")); 181 182 lbObj.on("click", function(event){ 183 event.preventDefault(); 184 event.stopPropagation(); 185 186 // show modal based on Bootstrap version 187 if (self.isBootstrap5()) { 188 // Bootstrap 5 189 var modalInstance = bootstrap.Modal.getOrCreateInstance($modal[0]); 190 modalInstance.show(); 191 } else { 192 $modal.modal(); 193 } 194 }); 195 }; 196 197 self.openIFrame = function(src, options) { 198 199 if (options == undefined) { 200 options = {}; 201 } 202 203 addProperties({href: src}, options); 204 205 this.currentOptions = generateOptions("link", options); 206 adjustLightboxDimensionsToViewport(this.currentOptions); 207 208 if (this.currentOptions.bootstrapEnabled === true && self.type.link.prepareModal){ 209 var lbObj = $("<a href='"+src+"'/>"); 210 self.createModal(lbObj,"link"); 211 lbObj.click(); 212 } else { 213 $.colorbox(this.currentOptions); 214 } 215 }; 216 217 self.openContent = function(idOfContentToShow, options) { 218 219 if (options == undefined) { 220 options = {}; 221 } 222 223 addProperties({href: "#" + idOfContentToShow,open: true}, options); 224 225 this.currentOptions = generateOptions("content", options); 226 adjustLightboxDimensionsToViewport(this.currentOptions); 227 $.colorbox(this.currentOptions); 228 }; 229 230 self.doOnClose = function() { 231 pegasos.lightbox.isOpen = false;
232 this.currentOptions = {}; 233 $("body").css("overflow",pegasos.overflowValue); 234 }; 235 236 self.close = function() { 237 $.colorbox.close(); 238 var $lightboxModal =$(".lightboxModal"); 239 if ($lightboxModal.length > 0) { 240 if ($lightboxModal.length > 0) { 241 if (self.isBootstrap5()) { 242 // Bootstrap 5 243 var modalInstance = bootstrap.Modal.getInstance($lightboxModal[0]); 244 if (modalInstance) { 245 modalInstance.hide(); 246 } 247 } else { 248 // Bootstrap 3 249 $lightboxModal.modal("hide"); 250 } 251 } 252 } 253 }; 254 255 self.reset = function() { 256 $.colorbox.remove(); 257 if (typeof $.colorbox.init === "function"){ 258 $.colorbox.init(); 259 } 260 $(".lightboxModal").remove(); 261 }; 262 263 self.translation = { 264 "close" : "" 265 ,"next" : "" 266 ,"previous" : "" 267 ,"current" : "" 268 }; 269 270 self.defaultOptions = {// 271 overlayClose:false, 272 escKey: true, 273 openLinksInParent: false, 274 opacity: "0.5", 275 close: self.translation.close, 276 fastIframe : false, //important for onComplete Event so it fires AFTER iframe is loaded 277 next: self.translation.next, 278 previous: self.translation.previous, 279 current: self.translation.current.image, 280 onOpen: function() { 281 pegasos.lightbox.isOpen = true; 282 var $body = $("body"); 283 pegasos.overflowValue = $body.css("overflow"); 284 $body.css("overflow", "hidden"); 285 }, 286 onClosed: function() { 287 self.doOnClose(); 288 } 289 }; 290 291 self.type = { 292 "link" : { 293 iframe:true, 294 width:900, 295 height:500, 296 current: self.translation.current.link, 297 onComplete : function () { 298 manipulateIframeBody(); 299 }, 300 prepareModal: function($modal, href){ 301 var $loadingAnimation = undefined; 302 if (self.currentOptions.loadingAnimationPath && self.currentOptions.loadingAnimationPath.length > 0){ 303 $loadingAnimation = $("<div style=\"width:100%;height:100%;text-align: center;\">" + 304 "<span style='display:inline-block;height:100%;vertical-align: middle'></span>" + 305 "<img style='vertical-align: middle;' src='" + self.currentOptions.loadingAnimationPath + "'></img>" + 306 "</div>"); 307 308 $modal.find(".modal-body").append($loadingAnimation); 309 } 310 311 var $iframe = $("<iframe frameborder=\"0\" style=\"width:100%;height:100%\"></iframe>"); 312 $modal.find(".modal-body").append($iframe); 313 $iframe.hide(); 314 315 $modal.on("shown.bs.modal", function(){ 316 if ($iframe.attr("src") != href){ 317 $iframe.on("load", function(){ 318 if ($loadingAnimation !== undefined){ 319 $loadingAnimation.hide(); 320 } 321 $iframe.show(); 322 manipulateIframeBody($(this)); 323 }); 324 $iframe.attr("src",href); 325 } 326 }); 327 } 328 }, 329 "content" : { 330 inline:true, 331 width:900, 332 height:500 333 }, 334 "image" : { 335 //width: "100" 336 }, 337 "flashVideo" : { 338 width:530, 339 height:450, 340 inline:true, 341 href:"#flashmoviecontainer" , 342 current: self.translation.current.video 343 }, 344 "video" : { 345 width:530, 346 height:450, 347 iframe:true, 348 current: self.translation.current.video 349 }, 350 "default" : { 351 //width: "10" 352 } 353 }; 354 355 self.init = function(){ 356 _initTranslations(); 357 }; 358 359 var _initTranslations = function() { 360 var MSGS = new Translation(); 361 self.translation = { 362 "close" : MSGS.get("label.core.close") 363 ,"next" : MSGS.get("label.datatables.paginate.next") 364 ,"previous" : MSGS.get("label.datatables.paginate.previous") 365 ,"current": { 366 "image": MSGS.get("label.lightbox.current.image", ["{current}","{total}"]) 367 , "link": MSGS.get("label.lightbox.current.link", ["{current}","{total}"]) 368 , "flashVideo": MSGS.get("label.lightbox.current.video", ["{current}","{total}"]) 369 , "video": MSGS.get("label.lightbox.current.video", ["{current}","{total}"]) 370 } 371 }; 372 }; 373 374 var _createTranslation = function(currentOptions,type) { 375 currentOptions.close = self.translation.close; 376 currentOptions.next = self.translation.next; 377 currentOptions.previous = self.translation.previous; 378 if (typeof (self.translation.current[type]) === "undefined"){ 379 currentOptions.current = self.translation.current.image; 380 } 381 else { 382 currentOptions.current = self.translation.current[type]; 383 } 384 }; 385 386 // Private methods 387 var addProperties = function(source, target) { 388 for (var property in source) { 389 target[property] = source[property]; 390 } 391 }; 392 393 //Kreiere die Optionen ausgehend von den Defaultwerten, über die Type-Optionen, über die manuell eingestellten Werte 394 var generateOptions = function(type,options) { 395 var currentOptions = jQuery.extend({}, self.defaultOptions); 396 397 if (!type || !(type in self.type)) { 398 type = "notice"; 399 } 400 //currentOptions um die Werte des Typs erweitern 401 addProperties(self.type[type], currentOptions); 402 403 //currentOptions um die manuellen Werte erweitern 404 if (options) { 405 addProperties(options, currentOptions); 406 } 407 408 _createTranslation(currentOptions,type); 409 410 return currentOptions; 411 } 412 413 //Passt die Höhe und Breite der Lightbox auf den Viewport an, wenn die LB gröÃer ist als der VP 414 //Passt ebenfalls die MaxHeight und Max-Width an
415 var adjustLightboxDimensionsToViewport = function(options) { 416 var viewportHeight = $(window).height(); 417 var viewportWidth = $(window).width(); 418 419 //just change value if it is available. Otherwise correct size will be taken automatically 420 if (typeof(options.height) != "undefined") { 421 if (viewportHeight && options.height > viewportHeight) { 422 options.height = viewportHeight; 423 } 424 } 425 if (typeof(options.width) != "undefined") { 426 if (viewportWidth && options.width > viewportWidth) { 427 options.width = viewportWidth; 428 } 429 } 430 431 //set max values to viewport 432 if (viewportHeight && (typeof(options.maxHeight) == "undefined" || options.maxHeight > viewportHeight)) { 433 options.maxHeight = viewportHeight; 434 } 435 if (viewportWidth && (typeof(options.maxWidth) == "undefined" || options.maxWidth > viewportWidth)) { 436 options.maxWidth = viewportWidth; 437 } 438 } 439} 440 441function manipulateIframeBody ($iframe) { 442 if (!$iframe){ 443 $iframe = $(".cboxIframe"); 444 } 445 446 var $iframeContents = $iframe.contents(); 447 var $iframeBody = $iframeContents.find("body"); 448 449 $iframeBody.attr("id","cboxBody"); 450 $iframeBody.addClass("cboxBody"); 451 452 if ($("body.usesBT").length > 0){ 453 $iframeBody.addClass("usesBT"); 454 } 455 456 if (Lightbox.currentOptions.openLinksInParent === true){ 457 $iframeBody.on("click","a", function (e,ui){ 458 if (parent && this.href){ 459 parent.location.href = this.href; 460 return false; 461 } 462 }); 463 }; 464 465 if (Lightbox.currentOptions.escKey === true) { 466 /* 467 Liegt der Fokus einmal auf dem Iframe greifen die Events der Colorbox nicht mehr. 468 Daher muss hier erneut ein keydown gesetzt werden, um die Colorbox per ESC-Key schlieÃen zu können 469 */ 470 var $iframeHtml = $iframeContents.find("html"); 471 $iframeHtml.keydown(function(event) { 472 var charCode = event.charCode || event.keyCode || event.which; 473 if (charCode === 27) { 474 event.preventDefault(); 475 476 477 if (typeof bootstrap !== 'undefined' && bootstrap.Modal) { 478 var $lightboxModal = $(".lightboxModal"); 479 if ($lightboxModal.length > 0) { 480 var modalInstance = bootstrap.Modal.getInstance($lightboxModal[0]); 481 if (modalInstance) { 482 modalInstance.hide(); 483 } 484 } 485 } else { 486 $.colorbox.close(); 487 } 488 } 489 }); 490 } 491} 492 493function getToptions($lbObj) { 494 var option = {}; 495 496 var optionStr = $lbObj.attr("toptions"); 497 if (optionStr != null && optionStr != undefined && optionStr.length > 0) { 498 var optionArray = optionStr.split(';'); 499 for (var i=0; i<optionArray.length; i++) { 500 var optionKeyValueStr = optionArray[i]; 501 502 if (optionKeyValueStr != null && optionKeyValueStr != undefined && optionKeyValueStr.length > 0) { 503 504 var optionKeyValue = optionKeyValueStr.split('='); 505 var key = optionKeyValue[0]; 506 var value = optionKeyValue[1]; 507 508 var optionTmp = {}; 509 optionTmp[key] = value; 510 511 jQuery.extend(option, optionTmp); 512 } 513 } 514 } 515 516 return option; 517} 518 519var Lightbox = new PegasosLightbox(); 520 521$(document).ready(function() { 522 523 pegasos.lightbox = { 524 "isOpen" : false 525 } 526 527 Lightbox.init(); 528 529 var linkPerLightboxList = $(".showLinkPerLightbox"); 530 for (var i = 0; i < linkPerLightboxList.length; i++) { 531 var $$ = $(linkPerLightboxList[i]); 532 var option = getToptions($$); 533 Lightbox.create($$, "link",option); 534 } 535 536 var contentPerLightboxList = $(".showContentPerLightbox"); 537 for (var i = 0; i < contentPerLightboxList.length; i++) { 538 var $$ = $(contentPerLightboxList[i]); 539 var option = getToptions($$); 540 Lightbox.create($$, "content",option); 541 } 542});
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.