1// dynamische focus area berechungen 2(function($){ 3 // private fields 4 var resizeTimer = null; 5 6 // public methods 7 $.fn.focusArea = function(options){ 8 // defaults 9 options = options || {}; 10 if(typeof options.prefocus === 'undefined') options.prefocus = null; 11 if(typeof options.postfocus === 'undefined') options.postfocus = null; 12 if(typeof options.resizeListener === 'undefined') options.resizeListener = false; 13 if(typeof options.resizeDelay === 'undefined') options.resizeDelay = 500; 14 15 // call pre-focus function if it was specified 16 if(typeof options.prefocus === 'function') options.prefocus.call(); 17 18 // ajdust focus for all selected elements 19 this.each(function(index, element){ 20 adjustFocus($(element)); 21 }); 22 23 // call post-focus function if it was specified 24 if(typeof options.postfocus === 'function') options.postfocus.call(); 25 26 // set focusarea to listen to resize events 27 if(options.resizeListener === true){ 28 var elements = this; 29 $(window).on("resize", function(event){ 30 clearTimeout(resizeTimer); 31 resizeTimer = setTimeout(function(){ 32 clearTimeout(resizeTimer); 33 $(elements).focusArea(options); 34 }, options.resizeDelay); 35 }); 36 } 37 }; 38 39 // private methods 40 var zentrieren = function ($el, scale){ 41 var imageHeight = parseInt($el.attr("data-focus-img-h")); 42 var imageWidth = parseInt($el.attr("data-focus-img-w")); 43 var containerHeight = $el.innerHeight(); 44 var containerWidth = $el.innerWidth(); 45 46 return { 47 top: Math.max(0, Math.floor( (imageHeight - containerHeight / scale) / 2 )), 48 left: Math.max(0, Math.floor( (imageWidth - containerWidth / scale) / 2 )), 49 width: Math.min(imageWidth, containerWidth / scale), 50 height: Math.min(imageHeight, containerHeight / scale) 51 } 52 }; 53 54 var verschieben = function($el, scale){ 55 // rückgabevariable 56 var result = { 57 top: 0, 58 left: 0, 59 height: 0, 60 width: 0 61 }; 62 63 // höhe 64 var containerHeight = $el.innerHeight() / scale; 65 var imageHeight = parseInt($el.attr("data-focus-img-h")); 66 var focusTop = parseInt($el.attr("data-focus-y")); 67 var focusHeight = parseInt($el.attr("data-focus-h")); 68 var focusMitte = focusTop + (focusHeight / 2); 69 70 if (containerHeight >= imageHeight){ 71 // bild ist zu wenig hoch, ganzes bild auswählen 72 result.height = imageHeight; 73 } else if (containerHeight / 2 < focusMitte){ 74 // focusarea ist unterhalb der containermitte, bild hochschieben bis mitte oder maximal unterer rand 75 var max = (imageHeight - containerHeight); 76 var distanz = focusMitte - (containerHeight / 2); 77 result.top = parseInt(Math.min(max, distanz)); 78 result.height = containerHeight; 79 } else { 80 // container füllen 81 result.height = containerHeight; 82 } 83 84 85 // breite 86 var containerWidth = $el.innerWidth() / scale; 87 var imageWidth = parseInt($el.attr("data-focus-img-w")); 88 var focusLeft = parseInt($el.attr("data-focus-x")); 89 var focusWidth = parseInt($el.attr("data-focus-b")); 90 var focusMitte = focusLeft + (focusWidth / 2); 91 92 if (containerWidth >= imageWidth){ 93 // bild ist zu schmal, ganze breite benutzen 94 result.width = imageWidth; 95 } else if(containerWidth / 2 < focusMitte){ 96 // focusarea ist rechts der containermitte, bild nach links schieben bis mitte oder maximal rechter rand 97 var max = (imageWidth - containerWidth); 98 var distanz = focusMitte - (containerWidth / 2); 99 result.left = parseInt(Math.min(max, distanz)); 100 result.width = containerWidth; 101 } else { 102 // container füllen 103 result.width = containerWidth; 104 } 105 106 return result; 107 }; 108 109 var adjustFocus = function($el){ 110 // variablen 111 var scale = 1; 112 var dimensions = {}; 113 114 // werte für berechnungen 115 var containerH = $el.innerHeight(); 116 var containerW = $el.innerWidth(); 117 var focusHeight = parseInt($el.attr("data-focus-h")); 118 var focusWidth = parseInt($el.attr("data-focus-b")); 119 120 // check ob focusarea gesetzt 121 if(focusHeight <= 0 || focusWidth <= 0){ 122 // kein fokuspunkt gewählt, auf breite oder höhe skaliert zentrieren 123 var heightRatio = parseInt($el.attr("data-focus-img-h")) / containerH; 124 var widthRatio = parseInt($el.attr("data-focus-img-w")) / containerW; 125 if(heightRatio > 1 && widthRatio > 1) { 126 if (heightRatio > widthRatio) { 127 scale = 1 / widthRatio; 128 } else { 129 scale = 1 / heightRatio; 130 } 131 } else { 132 scale = 1; 133 } 134 dimensions = zentrieren($el, scale); 135 136 } else {
137 // fokusarea gesetzt, check ob genug platz oder skaliert werden muss 138 // verhältnisse berechnen 139 var heightRatio = focusHeight / containerH; 140 var widthRatio = focusWidth / containerW; 141 if (heightRatio <= 1 && widthRatio <= 1){ 142 // fokusarea kleiner als container, nur schieben 143 scale = 1; 144 145 } else if(heightRatio > widthRatio){ 146 // bildhöhe auf containerhöhe skaliert, breite zentrieren 147 scale = 1 / heightRatio; 148 149 }else{ 150 // bildbreite auf containerbreite skaliert, höhe zentrieren 151 scale = 1 / widthRatio; 152 153 } 154 dimensions = verschieben($el, scale); 155 } 156 157 var url = "/_kirchenweb/_ausgabeseiten/scaledImage.php" + 158 "?imagefile=" + $el.attr("data-imagefile") + 159 "&imagedomainpath=" + $el.attr("data-imagepath") + 160 "&version=" + $el.attr("data-version") + 161 "&destX=" + Math.min(Math.round(dimensions.width * scale), containerW) + 162 "&destY=" + Math.min(Math.round(dimensions.height * scale), containerH) + 163 "&offsetX=" + Math.round(dimensions.left) + 164 "&offsetY=" + Math.round(dimensions.top) + 165 "&selectionBreite=" + Math.round(dimensions.width) + 166 "&selectionHoehe=" + Math.round(dimensions.height); 167 168 $el.find("img").attr({ 169 "src" : url, 170 "alt" : $el.attr("data-alt"), 171 "data-lightbox-text" : $el.attr("data-lightbox-text") 172 }); 173 174 if(Math.ceil(dimensions.width * scale) < containerW || Math.ceil(dimensions.height * scale) < containerH){ 175 var $blurDiv = $('<div class="focusarea-blur"></div>'); 176 $blurDiv.css({ 177 backgroundImage: "url(" + url + ")" 178 }); 179 $el.prepend($blurDiv); 180 } 181 }; 182})(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.