Merge pull request #3167 from jwplayer/task/resize-listener-css

Implement resize-listener css in js module
jwplayer · Nov 6, 2018 · 5c39e11 · 5c39e11
2 parents ac16115 + eb241ad
commit 5c39e11
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/src/js/utils/css.js b/src/js/utils/css.js
@@ -10,6 +10,9 @@ export function css(selector, styles, playerId, important) {
         const el = document.createElement('div');
         style(el, styles);
         let styleCSSText = el.style.cssText;
+        if (Object.prototype.hasOwnProperty.call(styles, 'content') && styleCSSText) {
+            styleCSSText = `${styleCSSText} content: "${styles.content}";`;
+        }
         if (important && styleCSSText) {
             styleCSSText = styleCSSText.replace(/;/g, ' !important;');
         }

diff --git a/src/js/view/utils/resize-listener.js b/src/js/view/utils/resize-listener.js
@@ -1,24 +1,51 @@
 import { requestAnimationFrame, cancelAnimationFrame } from 'os/utils/request-animation-frame';
 import { createElement } from 'os/utils/dom';
+import { css, style } from 'os/utils/css';
 
 export default class ResizeListener {
 
     constructor(element, callback) {
-        const hiddenHtml = '<div class="jw-resize-trigger"><div class="jw-expand-trigger">' +
-            '<div style="height:1px;"></div></div><div class="jw-contract-trigger"></div></div>';
-        const hiddenElement = createElement(hiddenHtml);
-        const expandElement = hiddenElement.firstChild;
+        const topLeft = {
+            display: 'block',
+            position: 'absolute',
+            top: 0,
+            left: 0
+        };
+
+        const stretch = {
+            width: '100%',
+            height: '100%'
+        };
+
+        css('.jw-contract-trigger::before', Object.assign({
+            content: '',
+            overflow: 'hidden',
+            width: '200%',
+            height: '200%'
+        }, topLeft));
+
+        const hiddenHtml = '<div style="opacity:0;visibility:hidden;overflow:hidden;">' + // resizeElement
+            '<div>' + // expandElement
+            '<div style="height:1px;">' + // expandChild
+            '</div></div>' +
+            '<div class="jw-contract-trigger">' + // contractElement
+            '</div></div>';
+        const resizeElement = createElement(hiddenHtml);
+        const expandElement = resizeElement.firstChild;
         const expandChild = expandElement.firstChild;
         const contractElement = expandElement.nextSibling;
 
         if (getComputedStyle(element).position === 'static') {
-            element.style.position = 'relative';
+            style(element, { position: 'relative' });
         }
 
+        style([expandElement, contractElement], Object.assign({ overflow: 'auto' }, topLeft, stretch));
+        style(resizeElement, Object.assign({}, topLeft, stretch));
+
         this.expandElement = expandElement;
         this.expandChild = expandChild;
         this.contractElement = contractElement;
-        this.hiddenElement = element.appendChild(hiddenElement);
+        this.hiddenElement = element.appendChild(resizeElement);
         this.element = element;
         this.callback = callback;
         this.resizeRaf = -1;
@@ -48,7 +75,7 @@ export default class ResizeListener {
     resetTriggers() {
         const currentWidth = this.currentWidth;
         this.contractElement.scrollLeft = currentWidth * 2;
-        this.expandChild.style.width = currentWidth + 1 + 'px';
+        style(this.expandChild, { width: currentWidth + 1 });
         this.expandElement.scrollLeft = currentWidth + 1;
         this.lastWidth = currentWidth;
     }