From c299e3a7e7763de5d101518b341c7146d48f2978 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Sat, 28 Mar 2015 13:36:01 -0700 Subject: [PATCH] Performance improvements in Media Manager drag-select implementation. --- modules/backend/assets/js/october-min.js | 7 ++-- .../assets/js/october.foundation.element.js | 18 +++++++--- .../mediamanager/assets/css/mediamanager.css | 33 ++++++++++-------- .../mediamanager/assets/js/mediamanager.js | 23 +++++++------ .../assets/less/mediamanager.less | 34 ++++++++++++------- .../widgets/mediamanager/partials/_body.htm | 10 +++--- 6 files changed, 77 insertions(+), 48 deletions(-) diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js index 54213234c..bdf584bda 100644 --- a/modules/backend/assets/js/october-min.js +++ b/modules/backend/assets/js/october-min.js @@ -96,8 +96,11 @@ if(el.classList) el.classList.add(className);else el.className+=' '+className;},removeClass:function(el,className){if(el.classList) el.classList.remove(className);else -el.className=el.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');},absolutePosition:function(element){var top=document.body.scrollTop,left=0 -do{top+=element.offsetTop||0;top-=element.scrollTop||0;left+=element.offsetLeft||0;element=element.offsetParent;}while(element) +el.className=el.className.replace(new RegExp('(^|\\b)'+className.split(' ').join('|')+'(\\b|$)','gi'),' ');},absolutePosition:function(element,ignoreScrolling){var top=ignoreScrolling===true?0:document.body.scrollTop,left=0 +do{top+=element.offsetTop||0;if(ignoreScrolling!==true) +top-=element.scrollTop||0 +left+=element.offsetLeft||0 +element=element.offsetParent}while(element) return{top:top,left:left}},getCaretPosition:function(input){if(document.selection){var selection=document.selection.createRange() selection.moveStart('character',-input.value.length) return selection.text.length} diff --git a/modules/backend/assets/js/october.foundation.element.js b/modules/backend/assets/js/october.foundation.element.js index 1f9d5ab33..713dc7547 100644 --- a/modules/backend/assets/js/october.foundation.element.js +++ b/modules/backend/assets/js/october.foundation.element.js @@ -42,15 +42,23 @@ el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }, - absolutePosition: function(element) { - var top = document.body.scrollTop, + /* + * Returns element absolution position. + * If the second parameter value is false, the scrolling + * won't be added to the result (which could improve the performance). + */ + absolutePosition: function(element, ignoreScrolling) { + var top = ignoreScrolling === true ? 0 : document.body.scrollTop, left = 0 do { top += element.offsetTop || 0; - top -= element.scrollTop || 0; - left += element.offsetLeft || 0; - element = element.offsetParent; + + if (ignoreScrolling !== true) + top -= element.scrollTop || 0 + + left += element.offsetLeft || 0 + element = element.offsetParent } while(element) return { diff --git a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css index 5542764c0..a432f607b 100644 --- a/modules/cms/widgets/mediamanager/assets/css/mediamanager.css +++ b/modules/cms/widgets/mediamanager/assets/css/mediamanager.css @@ -84,9 +84,6 @@ div[data-control="media-manager"] .media-list li h4 a:hover { color: #0181b9; text-decoration: none; } -div[data-control="media-manager"] .media-list li:hover h4 a { - display: block; -} div[data-control="media-manager"] .media-list li p.size { font-size: 12px; color: #95a5a6; @@ -176,9 +173,6 @@ div[data-control="media-manager"] .media-list.list h4 { div[data-control="media-manager"] .media-list.list h4 a { right: 15px; } -div[data-control="media-manager"] .media-list.list li:hover h4 { - padding-right: 35px; -} div[data-control="media-manager"] .media-list.tiles li { width: 167px; margin-bottom: 25px; @@ -232,9 +226,6 @@ div[data-control="media-manager"] .media-list.tiles li.selected .icon-container div[data-control="media-manager"] .media-list.tiles li.selected h4 { color: #2581b8; } -div[data-control="media-manager"] .media-list.tiles li:hover h4 { - padding-right: 20px; -} div[data-control="media-manager"] .media-list.tiles i.icon-chain-broken { margin-top: 47px; } @@ -310,6 +301,11 @@ div[data-control="media-manager"] [data-control="item-list"] { position: relative; display: table-cell; } +div[data-control="media-manager"] .control-scrollpad { + position: absolute; + left: 0; + top: 0; +} div[data-control="media-manager"] .scroll-wrapper { position: relative; } @@ -405,19 +401,28 @@ body:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hove body:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover h4 { color: #2581b8; } -body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover:not(:active) { +body:not(.no-select) div[data-control="media-manager"] .media-list.tiles li:hover h4 { + padding-right: 20px!important; +} +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover:not(:active) { background: #4da7e8 !important; } -body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover:not(:active) i, -body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover:not(:active) p.size { +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover:not(:active) i, +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover:not(:active) p.size { color: #ecf0f1; } -body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover:not(:active) h4 { +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover:not(:active) h4 { color: white; } -body:not(.no-select) div[data-control="media-manager"] .media-list .list li:hover:not(:active) .icon-container { +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover:not(:active) .icon-container { border-right-color: #4da7e8 !important; } +body:not(.no-select) div[data-control="media-manager"] .media-list.list li:hover h4 { + padding-right: 35px!important; +} +body:not(.no-select) div[data-control="media-manager"] .media-list li:hover h4 a { + display: block; +} @media (max-width: 1280px) { div[data-control="media-manager"] .media-list.list li { width: 230px; diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js index 7b3ee5cd1..5bd6adc95 100644 --- a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js +++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js @@ -34,6 +34,7 @@ this.navigationAjax = null this.dblTouchTimer = null this.dblTouchFlag = null + this.itemListPosition = null // // Initialization @@ -157,15 +158,15 @@ } MediaManager.prototype.initScroll = function() { - this.$el.find('[data-control="item-list"]').scrollpad() + this.$el.find('.control-scrollpad').scrollpad() } MediaManager.prototype.removeScroll = function() { - this.$el.find('[data-control="item-list"]').scrollpad('dispose') + this.$el.find('.control-scrollpad').scrollpad('dispose') } MediaManager.prototype.scrollToTop = function() { - this.$el.find('[data-control="item-list"]').scrollpad('scrollToStart') + this.$el.find('.control-scrollpad').scrollpad('scrollToStart') } // @@ -520,11 +521,11 @@ // Drag-select // - MediaManager.prototype.getRelativePosition = function(element, pageX, pageY) { - var absolutePosition = $.oc.foundation.element.absolutePosition(element) + MediaManager.prototype.getRelativePosition = function(element, pageX, pageY, startPosition) { + var absolutePosition = startPosition !== undefined ? startPosition : $.oc.foundation.element.absolutePosition(element, true) return { - x: (pageX - absolutePosition.left + this.scrollContentElement.scrollLeft), + x: (pageX - absolutePosition.left), // There is no horizontal scroll y: (pageY - absolutePosition.top + this.scrollContentElement.scrollTop) } } @@ -937,8 +938,10 @@ this.itemListElement.addEventListener('mousemove', this.proxy(this.onListMouseMove)) document.addEventListener('mouseup', this.proxy(this.onListMouseUp)) + this.itemListPosition = $.oc.foundation.element.absolutePosition(this.itemListElement, true) + var pagePosition = $.oc.foundation.event.pageCoordinates(ev), - relativePosition = this.getRelativePosition(this.itemListElement, pagePosition.x, pagePosition.y) + relativePosition = this.getRelativePosition(this.itemListElement, pagePosition.x, pagePosition.y, this.itemListPosition) this.selectionStartPoint = relativePosition this.selectionStarted = false @@ -951,11 +954,11 @@ if (this.selectionStarted) { var items = this.itemListElement.querySelectorAll('[data-type="media-item"]:not([data-root])'), - selectionPosition = $.oc.foundation.element.absolutePosition(this.selectionMarker) + selectionPosition = $.oc.foundation.element.absolutePosition(this.selectionMarker, true) for (var index = 0, len = items.length; index < len; index++) { var item = items[index], - itemPosition = $.oc.foundation.element.absolutePosition(item) + itemPosition = $.oc.foundation.element.absolutePosition(item, true) if (this.doObjectsCollide( selectionPosition.top, @@ -989,7 +992,7 @@ MediaManager.prototype.onListMouseMove = function(ev) { var pagePosition = $.oc.foundation.event.pageCoordinates(ev), - relativePosition = this.getRelativePosition(this.itemListElement, pagePosition.x, pagePosition.y) + relativePosition = this.getRelativePosition(this.itemListElement, pagePosition.x, pagePosition.y, this.itemListPosition) var deltaX = relativePosition.x - this.selectionStartPoint.x, deltaY = relativePosition.y - this.selectionStartPoint.y diff --git a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less index 81b001756..6b5e97c28 100644 --- a/modules/cms/widgets/mediamanager/assets/less/mediamanager.less +++ b/modules/cms/widgets/mediamanager/assets/less/mediamanager.less @@ -147,10 +147,6 @@ div[data-control="media-manager"] { } } - &:hover h4 a { - display: block; - } - p.size { font-size: 12px; color: #95a5a6; @@ -240,10 +236,6 @@ div[data-control="media-manager"] { right: 15px; } } - - li:hover h4 { - padding-right: 35px; - } } &.tiles { @@ -286,10 +278,6 @@ div[data-control="media-manager"] { .media-selected-tiles(); } - li:hover h4 { - padding-right: 20px; - } - i.icon-chain-broken { margin-top: 47px; } @@ -365,6 +353,12 @@ div[data-control="media-manager"] { display: table-cell; } + .control-scrollpad { + position: absolute; + left: 0; + top: 0; + } + .scroll-wrapper { position: relative; } @@ -473,12 +467,26 @@ body:not(.no-select) { li:hover { .media-selected-tiles(); } + + li:hover h4 { + padding-right: 20px!important; + } } - .list { + &.list { li:hover:not(:active) { .media-selected-list(); } + + li:hover h4 { + padding-right: 35px!important; + } + } + + li { + &:hover h4 a { + display: block; + } } } } diff --git a/modules/cms/widgets/mediamanager/partials/_body.htm b/modules/cms/widgets/mediamanager/partials/_body.htm index 26c1520b0..2d9924042 100644 --- a/modules/cms/widgets/mediamanager/partials/_body.htm +++ b/modules/cms/widgets/mediamanager/partials/_body.htm @@ -29,10 +29,12 @@
-
-
-
- makePartial('item-list') ?> +
+
+
+
+ makePartial('item-list') ?> +