TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Performance improvements in Media Manager drag-select implementation.

This commit is contained in:
alekseybobkov 2015-03-28 13:36:01 -07:00
parent 9be05a0488
commit c299e3a7e7
6 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/backend/assets/js/october-min.js vendored
View File

@ -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}

18
modules/backend/assets/js/october.foundation.element.js
View File

@ -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 {

33
modules/cms/widgets/mediamanager/assets/css/mediamanager.css
View File

@ -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;

23
modules/cms/widgets/mediamanager/assets/js/mediamanager.js
View File

@ -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

34
modules/cms/widgets/mediamanager/assets/less/mediamanager.less
View File

@ -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;
}
}
}
}

10
modules/cms/widgets/mediamanager/partials/_body.htm
View File

@ -29,10 +29,12 @@
<div class="layout">
<div class="layout-row">
<!-- Main area - list -->
<div data-control="item-list" class="control-scrollpad">
<div class="scroll-wrapper"> <!-- This element is required for the scrollpad control -->
<div id="<?= $this->getId('item-list') ?>" >
<?= $this->makePartial('item-list') ?>
<div data-control="item-list">
<div class="control-scrollpad">
<div class="scroll-wrapper"> <!-- This element is required for the scrollpad control -->
<div id="<?= $this->getId('item-list') ?>" >
<?= $this->makePartial('item-list') ?>
</div>
</div>
</div>
</div>