1/* 2 This JS makes liveEd responsive, still having paddings/borders on blocks. 3 New liveEd will have responsive nature, which will make most of this object obsolete 4 5 liveEd uses "Rows" conception, when several blocks with float:left form row. Several rows are broken with cler:both 6 liveEd have own responsive math, which is kinda duped here. Again - this is obsolete. 7 */ 8 9mwResponsive = { 10 11 pageArea : 'DIV.mwPageArea', // Page area selector 12 pageBlock : 'DIV.mwPageBlock', // Page widget element selector 13 classFloat : 'Float', // Class applied to floating blocks 14 classHost : 'rowHost', // Class applied to first col in a row 15 classPlaceholder : 'Placeholder', // Class applied to placeholder blocks 16 17 blocks : false, // All found page blocks 18 rows : [], // Filtered rows 19 20 /** //** ----= init =--------------------------------------------------------------------------------------\**//** \ 21 * 22 * Initiates responsive math on page. 23 * 24 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 25 init : function () { 26 var $this = this; 27 28 $this.updateRowsData(); 29 30 // Hiding liveEd for small windows 31 jQuery(window).resize( function ($e) { 32 for ( var $i = 0; $i < $this.rows.length; $i++ ) { 33 $this.setRowHeight($this.rows[$i]); 34 } //FOR each row 35 }); //FUNC jQuery.resize 36 37 jQuery(window).resize(); 38 39 }, //FUNC init 40 41 /** //** ----= updateRowsData =------------------------------------------------------------------------------\**//** \ 42 * 43 * Searches for blocks on page and updates rows map. 44 * 45 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 46 updateRowsData : function () { 47 var $this = this; 48 49 $this.blocks = jQuery($this.pageBlock); 50 $this.rows = $this.getRows($this.blocks); 51 52 // Updating found rows widths and heights 53 for ( var $i = 0; $i < $this.rows.length; $i++ ) { 54 $this.setRowWidth($this.rows[$i]); 55 $this.setRowHeight($this.rows[$i]); 56 } //FOR each row 57 58 }, //FUNC updateRowsData 59 60 /** //** ----= isFloat =--------------------------------------------------------------------------------------\**//** \ 61 * 62 * Checks if given element is floating block. This counts any element which behaves like floating block, 63 * either block or placeholder (which inherits initial float property from block) 64 * 65 * @param jQuery $el - Element to check. 66 * 67 * @return bool - Check result. 68 * 69 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 70 isFloat : function ($el) { 71 return $el.hasClass(this.classFloat); 72 }, //FUNC isFloat 73 74 /** //** ----= isHost =--------------------------------------------------------------------------------------\**//** \ 75 * 76 * Checks if given floating block starts new row. 77 * 78 * @param jQuery $el - Element to check. 79 * 80 * @return bool - Check result. 81 * 82 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 83 isHost : function ($el) { 84 return $el.hasClass(this.classHost); 85 }, //FUNC isHost 86 87 /** //** ----= isPlaceholder =------------------------------------------------------------------------------\**//** \ 88 * 89 * Checks if given element is sorting placeholder. 90 * 91 * @param jQuery $el - Element to check. 92 * 93 * @return bool - Check result. 94 * 95 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 96 isPlaceholder : function ($el) { 97 return $el.hasClass(this.classPlaceholder); 98 }, //FUNC isPlaceholder 99 100 /** //** ----= getAreas =--------------------------------------------------------------------------------------\**//** \ 101 * 102 * Searches areas within context or on page body if omited. If area is given as context - 103 * it will be included in results. Returns jQuery object containing found areas. 104 * 105 * @param jQuery [$context] - Context to search within. 106 * 107 * @return jQuery - jQuery object containing found areas. 108 * 109 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 110 getAreas : function ($context) { 111 112 $context = $context || jQuery('BODY'); 113 114 // Looking up for areas within context 115 var $areas = $context.find(this.pageArea); 116 117 // If area given as context, it shold be included too
118 if ( $context.is(this.pageArea) ) 119 $areas = $areas.add($context); 120 121 return $areas; 122 }, //FUNC getAreas 123 124 /** //** ----= getRow =--------------------------------------------------------------------------------------\**//** \ 125 * 126 * Returns row which current block belongs as array of jQuery blocks. If it's not part of a row, returns FALSE. 127 * 128 * @param jQuery $block - Block to return row for. 129 * 130 * @return MIXED - Array with siblings or FALSE if not part of row. 131 * 132 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 133 getRow : function ($block) { 134 135 // If not floating - not part of row 136 // Exception is placeholder - it can happen between floats, and I will need to know which row it is 137 if ( !this.isFloat($block) && !this.isPlaceholder($block) ) 138 return false; 139 140 var $res = []; 141 142 // Searching all blocks before block 143 $block.prevUntil(':not(.' + this.classFloat + ')').each( function () { 144 $res.push( jQuery(this) ); 145 }); //jQuery.each(not floating).callback 146 147 // jQuery prev searches from current to top, which gives reversed order 148 $res.reverse(); 149 150 // Adding self 151 $res.push($block); 152 153 // Searching all blocks after block 154 $block.nextUntil(':not(.' + this.classFloat + ')').each( function () { 155 $res.push( jQuery(this) ); 156 }); //jQuery.each(not floating).callback 157 158 return $res; 159 }, //FUNC getRow 160 161 /** //** ----= getRows =--------------------------------------------------------------------------------------\**//** \ 162 * 163 * Returns rows map from given set of elements. 164 * 165 * @param jQuery $context - Elements context to arrange. 166 * 167 * @return array - Array with found rows map. 168 * 169 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 170 getRows : function ($context) { 171 172 var $row = []; // Will store current row 173 var $rows = [$row]; // Will store all rows, with one there already 174 175 // Storing length for referrence 176 var $l = $context.length; 177 178 // First calculating rows and storing them in array for fast access later 179 for ( var $i = 0; $i < $l; $i++ ) { 180 181 // Shortcut to block 182 var $block = $context.eq($i); 183 184 // Skipping invisible blocks, if they will become visible - they will be recalculated 185 if ( !$block.is(':visible') ) 186 continue; 187 188 if ( this.isFloat($block) ) { 189 190 // Row hosts are starting new row anyway 191 if ( this.isHost($block) ) { 192 $row = []; 193 $rows.push($row); 194 } //IF new row 195 196 // Floating blocks are added into current row 197 $row.push($block); 198 199 } //IF float 200 else if ( $row.length ) { 201 202 // Others are starting new row if needed 203 $row = []; 204 $rows.push($row); 205 206 } //IF new row 207 208 } //FOR each block 209 210 return $rows; 211 }, //FUNC getRows 212 213 /** //** ----= setRowWidth =------------------------------------------------------------------------------\**//** \ 214 * 215 * Updates given row with % dimensions instead of static px. Initially page is rendered with px, resizing 216 * also does px. 217 * 218 * @param array $row - Array with blocks in a row. 219 * @param MIXED [$width] - Numeric width to set. If omited will be calculated from parent area. 220 * Can be given as jQuery area. 221 * @param bool [$px] - Set TRUE to correct widhts into absolute px instead of %. 222 * 223 * @return SELF 224 * 225 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 226 setRowWidth : function ($row, $width, $px) { 227 228 $width = $width || 0; 229 $px = $px || false; 230 231 if ( !$row || !$row.length ) 232 return this; 233 234 if ( $width instanceof jQuery ) { 235 236 // Got parent area to use as source 237 $width = $width.width(); 238 239 } else if ( !$width ) { 240 241 // Nothing given - using parent area of first block (it exists - checked above) 242 $width = $row[0].parent().width(); 243 244 } //IF nothing given 245 246 var $row_width = 0; // Summary row width 247 var $l = $row.length; // Saving row array length for fast access 248 249 // ---- WIDTHS ---- 250 251 // Calculating summary row width 252 for ( var $i = 0; $i < $l; $i++ ) { 253 254 var $block = $row[$i]; 255 256 // Getting width and padding 257 var $block_width = $block.width(); 258 var $block_pad = $block.outerWidth() - $block_width; 259 260 // Adding padding back to width 261 $block_width += $block_pad; 262 263 // Correcting block width - can't be more than area width 264 if ( $block_width > $width ) { 265 $block_width = $width; 266 $block.width($width - $block_pad); 267 }
267 //IF block is too big 268 269 // Adding total 270 $row_width += $block_width; 271 272 // Saving width into block object to do not regain later, 273 // should not interferee with internal properties 274 $block.tmp_width = $block_width; 275 $block.tmp_pad = $block_pad; 276 } //FOR each block in row 277 278 // Nothing to do for empty row (possibly everything was invisible) 279 if ( !$row_width ) 280 return this; 281 282 var $precision = 100; 283 var $total = 100; 284 var $totalPx = $row_width; 285 286 // Converting width for each block 287 for ( var $i = 0; $i < $l; $i++ ) { 288 289 var $block = $row[$i]; 290 291 var $pw = $block.tmp_width; 292 var $w = Math.round($block.tmp_width / ($row_width / 100) * $precision) / $precision; 293 294 // Correcting to total, adding delta to last block 295 $totalPx -= $pw; 296 $total -= $w; 297 298 // Correcting last column if total is not 0 299 if ( $i == $l-1 ) { 300 $pw = $pw + $totalPx; 301 $w = Math.round(($w + $total) * $precision) / $precision; 302 } //IF last element 303 304 if ( $px ) 305 // Setting css in px. Nothing tricky here 306 $block.width($pw); 307 else 308 // Setting width css in %. Using calc() in case padding happen, or classic % width if not 309 $block.css('width', $block.tmp_pad ? 'calc(' + $w + '% - ' + $block.tmp_pad + 'px)' : $w + '%' ); 310 311 } //FOR each block in row 312 313 return this; 314 }, //FUNC setRowWidth 315 316 /** //** ----= setRowHeight =------------------------------------------------------------------------------\**//** \ 317 * 318 * Sets row height, updating all blocks in it with min-height property. 319 * 320 * @param array $row - Array with blocks in a row. 321 * @param int $height - Height to set. 322 * 323 * @return SELF 324 * 325 \**//** -------------------------------------------------------------------= by Mr.V!T @ Morad Media Inc. =----/** //**/ 326 setRowHeight : function ($row, $height) { 327 328 $height = $height || 0; 329 330 var $l = $row.length; // Saving row length for fast access 331 332 // Recalculating height if none given 333 if ( !$height ) { 334 335 for ( var $i = 0; $i < $l; $i++ ) { 336 337 // Ressetting block height to recalculate 338 $row[$i].css('min-height', ''); 339 340 // Getting resulting height 341 var $tmp_height = $row[$i].height(); 342 var $tmp_pad = $row[$i].outerHeight() - $tmp_height; 343 344 $tmp_height += $tmp_pad; 345 346 if ( $tmp_height > $height ) 347 $height = $tmp_height; 348 349 // Saving block pad to count on resize 350 $row[$i].tmp_hieght_pad = $tmp_pad; 351 352 } //FOR each block in row 353 } //IF no height 354 355 // Now updating heights 356 for ( var $i = 0; $i < $l; $i++ ) { 357 $row[$i].css('min-height', $height - $row[$i].tmp_hieght_pad); 358 } //FOR each block in row 359 360 return this; 361 }, //FUNC setRowHeight 362 363} //OBJECT mwResponsive 364 365jQuery( function () { 366 // Initiating right away 367 mwResponsive.init(); 368}); //jQuery.onLoad
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.