Equal heights for media library elements.

templates/2k11/admin/jquery.syncheight.js

@@ -0,0 +1,95 @@
+/**
+ * syncHeight - jQuery plugin to automagically Snyc the heights of columns
+ * Made to seemlessly work with the CCS-Framework YAML (yaml.de)
+ * @requires jQuery v1.0.3
+ *
+ * http://blog.ginader.de/dev/syncheight/
+ *
+ * Copyright (c) 2007-2013
+ * Dirk Ginader (ginader.de)
+ * Dirk Jesse (yaml.de)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Version: 1.3
+ *
+ * Changelog
+ * * v1.3: compatibility fix for jQuery 1.9.x (removed $.browser)
+ *
+ * Usage:
+	$(window).load(function(){
+		$('p').syncHeight();
+	});
+ */
+
+(function($) {
+    var getHeightProperty = function() {
+		var browser_id = 0;
+		var property = [
+			// To avoid content overflow in synchronised boxes on font scaling, we
+			// use 'min-height' property for modern browsers ...
+			['min-height','0px'],
+			// and 'height' property for Internet Explorer.
+			['height','1%']
+		];
+
+		var bMatch = /(msie) ([\w.]+)/.exec(navigator.userAgent.toLowerCase()) || [],
+			browser = bMatch[1] || "",
+			browserVersion = bMatch[2] || "0";
+
+		// check for IE6 ...
+		if(browser == 'msie' && browserVersion < 7){
+			browser_id = 1;
+		}
+
+        return { 'name': property[browser_id][0],
+                 'autoheightVal': property[browser_id][1] };
+    };
+
+    $.getSyncedHeight = function(selector) {
+        var max = 0;
+        var heightProperty = getHeightProperty();
+		// get maximum element height ...
+		$(selector).each(function() {
+			// fallback to auto height before height check ...
+			$(this).css(heightProperty.name, heightProperty.autoheightVal);
+			var val = $(this).height();
+			if(val > max){
+				max = val;
+			}
+		});
+        return max;
+    };
+
+	$.fn.syncHeight = function(config) {
+		var defaults = {
+			updateOnResize: false,	// re-sync element heights after a browser resize event (useful in flexible layouts)
+            height: false
+		};
+		var options = $.extend(defaults, config);
+
+		var e = this;
+
+		var max = 0;
+        var heightPropertyName = getHeightProperty().name;
+
+        if(typeof(options.height) === "number") {
+            max = options.height;
+        } else {
+            max = $.getSyncedHeight(this);
+        }
+		// set synchronized element height ...
+		$(this).each(function() {
+			$(this).css(heightPropertyName, max+'px');
+		});
+
+		// optional sync refresh on resize event ...
+		if (options.updateOnResize === true) {
+			$(window).resize(function(){
+				$(e).syncHeight();
+			});
+		}
+		return this;
+	};
+})(jQuery);

templates/2k11/admin/js/2k11.admin.js

@@ -93,8 +93,21 @@
       }
     };
 
+    // Accessibility helper script
     AccessifyHTML5({
         header: '#top>div>div',
         footer: '#meta'
     });
+
+    // Wait until content including images is loaded
+    $(window).load(function() {
+        // Equal Heights
+        var $eqHeights = $('body').has('.equal_heights');
+
+        if($eqHeights.size() > 0) {
+            $('.equal_heights').syncHeight({
+                updateOnResize: true
+            });
+        }
+    });
 })(jQuery);

templates/2k11/admin/media_items.tpl

@@ -19,7 +19,7 @@
                 {if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
             </header>
 
-            <div class="clearfix">
+            <div class="clearfix equal_heights">
                 <div class="media_file_preview">
                 {$file.preview}
                 </div>

templates/2k11/admin/media_pane.tpl

@@ -2,6 +2,7 @@
 {* jQuery: No *}
 
 <script src="{serendipity_getFile file='admin/admin_scripts.js'}"></script>
+<script src="{serendipity_getFile file='admin/jquery.syncheight.js'}"></script>
 
 <h2>{$CONST.FIND_MEDIA}</h2>