From 22769d121a40c4f87e982d56089cbb6b7b2ae2c4 Mon Sep 17 00:00:00 2001
From: vogdb <vozhdb@gmail.com>
Date: Wed, 6 May 2015 20:04:16 +0300
Subject: [PATCH 1/3] Refactor embeddedWrapper to ratioKeeper.

---
 layout/default/css/embeddedWrapper.less | 13 -------------
 layout/default/css/ratioKeeper.less     | 26 +++++++++++++++++++++++++
 library/CM/View/Abstract.js             |  2 +-
 3 files changed, 27 insertions(+), 14 deletions(-)
 delete mode 100644 layout/default/css/embeddedWrapper.less
 create mode 100644 layout/default/css/ratioKeeper.less

diff --git a/layout/default/css/embeddedWrapper.less b/layout/default/css/embeddedWrapper.less
deleted file mode 100644
index 30967304e..000000000
--- a/layout/default/css/embeddedWrapper.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.embeddedWrapper {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-}
-
-.embeddedWrapper-object {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
diff --git a/layout/default/css/ratioKeeper.less b/layout/default/css/ratioKeeper.less
new file mode 100644
index 000000000..7acaeed49
--- /dev/null
+++ 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/View/Abstract.js b/library/CM/View/Abstract.js
index 3ba77b3f1..9b2c00220 100644
--- 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;

From 8934b1c1f2ea82e63e7b309b3eb165b000c34a26 Mon Sep 17 00:00:00 2001
From: vogdb <vozhdb@gmail.com>
Date: Thu, 7 May 2015 13:18:46 +0300
Subject: [PATCH 2/3] Create ratioKeeper smarty tag.

---
 .../CM/SmartyPlugins/block.ratioKeeper.php    | 37 +++++++++++++++
 .../SmartyPlugins/block.ratioKeeperTest.php   | 45 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 library/CM/SmartyPlugins/block.ratioKeeper.php
 create mode 100644 tests/library/CM/SmartyPlugins/block.ratioKeeperTest.php

diff --git a/library/CM/SmartyPlugins/block.ratioKeeper.php b/library/CM/SmartyPlugins/block.ratioKeeper.php
new file mode 100644
index 000000000..abf0fd331
--- /dev/null
+++ b/library/CM/SmartyPlugins/block.ratioKeeper.php
@@ -0,0 +1,37 @@
+<?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/tests/library/CM/SmartyPlugins/block.ratioKeeperTest.php b/tests/library/CM/SmartyPlugins/block.ratioKeeperTest.php
new file mode 100644
index 000000000..e7f0c624c
--- /dev/null
+++ 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));
+    }
+}

From 3699d4a07f691bf66da9ac06f108e7128cd66ebf Mon Sep 17 00:00:00 2001
From: vogdb <vozhdb@gmail.com>
Date: Thu, 7 May 2015 14:03:38 +0300
Subject: [PATCH 3/3] Streamline of block.ratioKeeper.

---
 library/CM/SmartyPlugins/block.ratioKeeper.php | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/library/CM/SmartyPlugins/block.ratioKeeper.php b/library/CM/SmartyPlugins/block.ratioKeeper.php
index abf0fd331..fe0da258e 100644
--- a/library/CM/SmartyPlugins/block.ratioKeeper.php
+++ b/library/CM/SmartyPlugins/block.ratioKeeper.php
@@ -18,10 +18,11 @@ function smarty_block_ratioKeeper($params, $content, Smarty_Internal_Template $t
         }
 
         $output = '<div class="ratioKeeper">';
-        $output .= '<div class="ratioKeeper-ratio" style="padding-bottom: ' . $ratio . '%;' . ($width ? (' width: ' . $width . 'px;') : '') . ' "></div>';
+        $output .= '<div class="ratioKeeper-ratio" style="padding-bottom: ' . $ratio . '%;'
+            . ($width ? (' width: ' . $width . 'px;') : '') . ' "></div>';
 
         $contentAttrs = isset($params['contentAttrs']) ? $params['contentAttrs'] : [];
-        if(isset($contentAttrs['class'])){
+        if (isset($contentAttrs['class'])) {
             $contentAttrs['class'] .= ' ratioKeeper-content';
         } else {
             $contentAttrs['class'] = 'ratioKeeper-content';
@@ -30,8 +31,8 @@ function smarty_block_ratioKeeper($params, $content, Smarty_Internal_Template $t
         $contentAttrs['el'] = 'div';
         $contentAttrs['content'] = $content;
         $output .= smarty_function_tag($contentAttrs, $template);
-        $output .= '</div>';
 
+        $output .= '</div>';
         return $output;
     }
 }