浏览代码

HUE-169. Allow SizeTo to accept percentages

Marcus McLaughlin 15 年之前
父节点
当前提交
63e56231c1

+ 3 - 2
apps/filebrowser/src/filebrowser/templates/edit.mako

@@ -44,9 +44,10 @@
     ${edit.render_field(form["path"], hidden=True, notitle=True)}
     ${edit.render_field(form["encoding"], hidden=True, notitle=True)}
     <h2 class="ccs-hidden">${form["contents"].label_tag() | n}</h2>
-    <div class="fe-divResize" data-filters="SizeTo">${edit.render_field(form["contents"], tag="textarea", notitle=True, attrs=dict(
+    <div class="fe-divResize" data-filters="SizeTo" data-size-to-width="100%" data-size-to-height="100%">${edit.render_field(form["contents"], tag="textarea", notitle=True, attrs=dict(
       data_filters="SizeTo, PostEditor",
-      data_size_to_width="-20")) | n}</div>
+      data_size_to_width="-20",
+      data_size_to_height="100%")) | n}</div>
     <input class="ccs-hidden" type="submit" name="save" value="saveAs">
     <input class="ccs-hidden" type="submit" name="save" value="save">
 </form>

+ 23 - 7
desktop/core/static/js/Source/BehaviorFilters/Behavior.SizeTo.js

@@ -15,7 +15,7 @@
 // limitations under the License.
 /*
 ---
-description: Allows an element to be sized to the dimensions of the jframe portion of the window.
+description: Allows an element with the SizeTo value in its data-filters property to be sized to the dimensions of the jframe portion of the window.
 provides: [Behavior.SizeTo]
 requires: [Widgets/Element.Data]
 script: Behavior.SizeTo.js
@@ -27,13 +27,17 @@ Behavior.addGlobalFilters({
 
 	/*
 		elements are given data properties for data-size-to-height or data-size-to-width
-		these values are offsets. So, for example:
+		these values are either offsets or percentages. So, for example:
 		
 			<div data-filters="SizeTo" data-size-to-height="-100"></div>
 		
-		will size that div to the height of the window -100 pixels. The value must always
-		be a number. Use zero for 100% height/width.
-	*/
+		will size that div to the height of the window -100 pixels and
+                        <div data-filters="SizeTo" data-size-to-width="90%"></div>
+                        
+                will size that div to 90% of the width of the window.
+                
+                Both values are not required, although one is.
+ 	*/
 	SizeTo: function(element, methods) {
 		var sizeTo = {
 			x: element.get('data', 'size-to-width'),
@@ -44,9 +48,19 @@ Behavior.addGlobalFilters({
 			return;
 		}
 		resize = function(x, y){
-			element.setStyle('width', x + (sizeTo.x ? sizeTo.x.toInt() : 0));
-			element.setStyle('height', y + (sizeTo.y ? sizeTo.y.toInt() : 0));
+			if (sizeTo.x) element.setStyle('width', calcSize(x, sizeTo.x));
+			if (sizeTo.y) element.setStyle('height', calcSize(y, sizeTo.y));
 		};
+                var calcSize = function(value, sizeTo) {
+                        if (sizeTo.contains("%")) {
+                                sizeTo = sizeTo.replace("%", "");
+                                sizeTo = parseFloat(sizeTo)/100.0;
+                                return value * sizeTo;
+                        } else {
+                                return value + sizeTo.toInt();
+                        }
+                };
+
 		size = methods.getContainerSize();
 		resize(size.x, size.y);
 		methods.addEvent('resize', resize);
@@ -56,3 +70,5 @@ Behavior.addGlobalFilters({
 	}
 
 });
+
+