Merge pull request #1760 from vogdb/issue-1760

Refactor embeddedWrapper to ratioKeeper
cargomedia · May 7, 2015 · b38d5f9 · b38d5f9
2 parents 779997c + 3699d4a
commit b38d5f9
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 14 deletions.
diff --git a/layout/default/css/embeddedWrapper.less b/layout/default/css/embeddedWrapper.less
diff --git a/layout/default/css/ratioKeeper.less b/layout/default/css/ratioKeeper.less
@@ -0,0 +1,26 @@
+.ratioKeeper {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  width: 100%;
+
+  .ratioKeeper-ratio {
+    display: block;
+    width: 100%;
+    padding-bottom: 100%;
+  }
+
+  .ratioKeeper-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &.centerVertically {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
diff --git a/library/CM/SmartyPlugins/block.ratioKeeper.php b/library/CM/SmartyPlugins/block.ratioKeeper.php
@@ -0,0 +1,38 @@
+<?php
+
+require_once 'function.tag.php';
+
+function smarty_block_ratioKeeper($params, $content, Smarty_Internal_Template $template, $open) {
+    if ($open) {
+        return '';
+    } else {
+        $ratio = 100;
+        if (isset($params['ratio'])) {
+            $ratio = $params['ratio'] * 100;
+        }
+        $width = null;
+        if (isset($params['width']) && isset($params['height'])) {
+            $width = (int) $params['width'];
+            $height = (int) $params['height'];
+            $ratio = (int) (($height / $width) * 100);
+        }
+
+        $output = '<div class="ratioKeeper">';
+        $output .= '<div class="ratioKeeper-ratio" style="padding-bottom: ' . $ratio . '%;'
+            . ($width ? (' width: ' . $width . 'px;') : '') . ' "></div>';
+
+        $contentAttrs = isset($params['contentAttrs']) ? $params['contentAttrs'] : [];
+        if (isset($contentAttrs['class'])) {
+            $contentAttrs['class'] .= ' ratioKeeper-content';
+        } else {
+            $contentAttrs['class'] = 'ratioKeeper-content';
+        }
+
+        $contentAttrs['el'] = 'div';
+        $contentAttrs['content'] = $content;
+        $output .= smarty_function_tag($contentAttrs, $template);
+
+        $output .= '</div>';
+        return $output;
+    }
+}
diff --git a/library/CM/View/Abstract.js b/library/CM/View/Abstract.js
@@ -523,7 +523,7 @@ var CM_View_Abstract = Backbone.View.extend({
     var idSwf = id + '-object', attributes = {
       id: idSwf,
       name: idSwf,
-      styleclass: 'embeddedWrapper-object'
+      styleclass: 'ratioKeeper-content'
     };
 
     var self = this;

diff --git a/tests/library/CM/SmartyPlugins/block.ratioKeeperTest.php b/tests/library/CM/SmartyPlugins/block.ratioKeeperTest.php
@@ -0,0 +1,45 @@
+<?php
+
+require_once CM_Util::getModulePath('CM') . 'library/CM/SmartyPlugins/block.ratioKeeper.php';
+
+class smarty_block_ratioKeeperTest extends CMTest_TestCase {
+
+    /**
+     * @var Smarty_Internal_Template
+     */
+    private $_template;
+
+    public function setUp() {
+        $smarty = new Smarty();
+        $render = new CM_Frontend_Render();
+        $this->_template = $smarty->createTemplate('string:');
+        $this->_template->assignGlobal('render', $render);
+    }
+
+    public function testRenderRatio() {
+        $params = ['ratio' => 1];
+        $this->_assertContains('padding-bottom: 100%', $params);
+        $params = ['ratio' => 0.75];
+        $this->_assertContains('padding-bottom: 75%', $params);
+        $params = ['ratio' => 0.33];
+        $this->_assertContains('padding-bottom: 33%', $params);
+
+        $params = ['height' => 600, 'width' => 900];
+        $this->_assertContains('padding-bottom: 66%', $params);
+        $params = ['height' => 900, 'width' => 600];
+        $this->_assertContains('padding-bottom: 150%', $params);
+    }
+
+    public function testRenderContentAttrs() {
+        $params = ['contentAttrs' => ['class' => 'test']];
+        $this->_assertContains('class="test ratioKeeper-content"', $params);
+    }
+
+    /**
+     * @param string $needle
+     * @param array  $params
+     */
+    private function _assertContains($needle, array $params) {
+        $this->assertContains($needle, smarty_block_ratioKeeper($params, '', $this->_template, false));
+    }
+}