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