Skip to content

GitLab

T
tangled
Commit a456ee36 authored by dgozman@chromium.org's avatar dgozman@chromium.org
Browse files
Options

[filebrowser] Yet another animation in gallery ribbon. 

BUG=chromium-os:23434
TEST=See bug.

Review URL: http://codereview.chromium.org/8770044

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@112969 0039d316-1c4b-4281-b951-d872f2087c98
parent 95dacd08
Show whitespace changes
Inline Side-by-side
Showing with 124 additions and 179 deletions
chrome/browser/resources/file_manager/js/image_editor/gallery.css
View file @ a456ee36
......@@ -238,7 +238,7 @@ body {
.gallery .filename-spacer > input {
background-color: transparent;
color: white;
width: 40em;
width: 200px;
border: none;
outline: none;
}
......@@ -252,31 +252,26 @@ body {
/* Thumbnails */
.gallery .ribbon-spacer {
position: relative;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}
.gallery .toolbar .ribbon {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
-webkit-box-flex: 0;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: left;
-webkit-box-pack: start;
width: 280px;
max-width: 100%;
-webkit-transition: max-width 500ms ease-in-out;
z-index: 0;
}
.gallery .toolbar .ribbon[inactive] {
z-index: -1;
}
.gallery[editing] .toolbar .ribbon {
max-width: 0;
}
......@@ -292,18 +287,23 @@ body {
height: 47px;
margin: 2px;
border: 2px solid rgba(255,255,255,0); /* transparent white */
-webkit-transition: margin-left 180ms linear;
}
.gallery .ribbon-image[selected] {
border: 2px solid rgba(255,233,168,1);
}
margin-left: 2px;
-webkit-transition: opacity 200ms linear;
.gallery .toolbar .ribbon.fade-left {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
}
.gallery .ribbon-image[inactive] {
opacity: 0;
pointer-events: none;
.gallery .toolbar .ribbon.fade-right {
-webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
}
.gallery .ribbon-image[selected] {
border: 2px solid rgba(255,233,168,1);
.gallery .toolbar .ribbon.fade-left.fade-right {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px, rgba(0,0,0,1) 230px, rgba(0,0,0,0) 100%);
}
.gallery .image-wrapper {
......@@ -314,34 +314,6 @@ body {
border: 1px solid rgba(0,0,0,0); /* transparent black */
}
.gallery .toolbar .fade {
background-repeat: no-repeat;
background-position: center center;
position: absolute;
z-index: 10;
width: 55px;
height: 100%;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms linear;
}
.gallery .toolbar .fade[active] {
opacity: 1;
}
.gallery[editing] .toolbar .fade[active] {
opacity: 0;
}
.gallery .toolbar .fade.left {
background-image: url(../../images/gallery/thumb_fade_left.png);
}
.gallery .toolbar .fade.right {
background-image: url(../../images/gallery/thumb_fade_right.png);
}
/* Editor buttons */
.gallery .toolbar .edit-bar {
......
chrome/browser/resources/file_manager/js/image_editor/gallery.js
View file @ a456ee36
......@@ -501,24 +501,9 @@ function Ribbon(container, client, metadataProvider, arrowLeft, arrowRight) {
this.arrowRight_.
addEventListener('click', this.selectNext.bind(this, 1, null));
this.fadeLeft_ = this.document_.createElement('div');
this.fadeLeft_.className = 'fade left';
this.container_.appendChild(this.fadeLeft_);
this.bars_ = [];
for (var i = 0; i < 2; i++) {
var bar = this.document_.createElement('div');
bar.className = 'ribbon';
this.container_.appendChild(bar);
this.bars_.push(bar);
}
this.activeBarIndex_ = 0;
ImageUtil.setAttribute(this.bars_[0], 'inactive', false);
ImageUtil.setAttribute(this.bars_[1], 'inactive', true);
this.fadeRight_ = this.document_.createElement('div');
this.fadeRight_.className = 'fade right';
this.container_.appendChild(this.fadeRight_);
this.bar_ = this.document_.createElement('div');
this.bar_.className = 'ribbon';
this.container_.appendChild(this.bar_);
}
Ribbon.PAGING_SINGLE_ITEM_DELAY = 20;
......@@ -529,11 +514,7 @@ Ribbon.prototype.getSelectedItem = function () {
};
Ribbon.prototype.clear = function() {
this.bars_[0].textContent = '';
this.bars_[1].textContent = '';
this.activeBarIndex_ = 0;
ImageUtil.setAttribute(this.bars_[0], 'inactive', false);
ImageUtil.setAttribute(this.bars_[1], 'inactive', true);
this.bar_.textContent = '';
this.items_ = [];
this.selectedIndex_ = -1;
this.firstVisibleIndex_ = 0;
......@@ -639,89 +620,96 @@ Ribbon.prototype.requestPrefetch = function(direction) {
});
};
Ribbon.prototype.updateControls_ = function() {
ImageUtil.setAttribute(this.fadeLeft_, 'active', this.firstVisibleIndex_ > 0);
ImageUtil.setAttribute(this.fadeRight_, 'active',
this.lastVisibleIndex_ + 1 < this.items_.length);
};
Ribbon.ITEMS_COUNT = 5;
Ribbon.prototype.redraw = function() {
// The thumbnails are square.
var itemWidth = this.bars_[0].parentNode.clientHeight;
var width = this.bars_[0].parentNode.clientWidth;
var fullItems = Math.floor(width / itemWidth);
var fullWidth = fullItems * itemWidth;
this.bars_[0].style.width = fullWidth + 'px';
this.bars_[1].style.width = fullWidth + 'px';
// Position the shadows over the first and the last visible thumbnails.
this.fadeLeft_.style.left = 0;
this.fadeRight_.style.right = (width - fullWidth) + 'px';
// TODO(dgozman): use margin instead of 2 here.
var itemWidth = this.bar_.clientHeight - 2;
var fullItems = Ribbon.ITEMS_COUNT;
fullItems = Math.min(fullItems, this.items_.length);
var firstIndex = this.firstVisibleIndex_;
var lastIndex = firstIndex + fullItems - 1;
var right = Math.floor((fullItems - 1) / 2);
if (this.selectedIndex_ <= firstIndex && firstIndex > 0) {
firstIndex = Math.max(0, this.selectedIndex_ - (fullItems >> 1));
lastIndex = firstIndex + fullItems - 1;
}
if (this.selectedIndex_ >= lastIndex && lastIndex < this.items_.length - 1) {
lastIndex = Math.min(this.items_.length - 1,
this.selectedIndex_ + (fullItems >> 1));
firstIndex = lastIndex - fullItems + 1;
}
var fullWidth = fullItems * itemWidth;
this.bar_.style.width = fullWidth + 'px';
this.updateControls_();
var lastIndex = this.selectedIndex_ + right;
lastIndex = Math.max(lastIndex, fullItems - 1);
lastIndex = Math.min(lastIndex, this.items_.length - 1);
var firstIndex = lastIndex - fullItems + 1;
if (this.firstVisibleIndex_ == firstIndex &&
this.lastVisibleIndex_ == lastIndex) {
return;
}
var activeBar = this.bars_[this.activeBarIndex_];
var children = activeBar.childNodes;
var totalDuration = children.length * Ribbon.PAGING_SINGLE_ITEM_DELAY +
Ribbon.PAGING_ANIMATION_DURATION;
if (this.lastVisibleIndex_ == -1) {
this.firstVisibleIndex_ = firstIndex;
this.lastVisibleIndex_ = lastIndex;
}
var direction = 1;
var delay = 0;
if (firstIndex < this.firstVisibleIndex_) {
direction = -1;
delay = (children.length - 1) * Ribbon.PAGING_SINGLE_ITEM_DELAY;
this.bar_.textContent = '';
var startIndex = Math.min(firstIndex, this.firstVisibleIndex_);
var toRemove = [];
for (var index = startIndex + 1;
index <= Math.max(lastIndex, this.lastVisibleIndex_);
++index) {
var box = this.items_[index].getBox(0);
box.style.marginLeft = '0';
this.bar_.appendChild(box);
if (index < firstIndex || index > lastIndex) {
toRemove.push(index);
}
for (var index = 0; index < children.length; ++index) {
setTimeout(
ImageUtil.setAttribute.bind(null, children[index], 'inactive', true),
delay);
delay += direction * Ribbon.PAGING_SINGLE_ITEM_DELAY;
}
// Place inactive bar below active after animation is finished.
setTimeout(
ImageUtil.setAttribute.bind(null, activeBar, 'inactive', true),
totalDuration);
var margin = itemWidth * Math.abs(firstIndex - this.firstVisibleIndex_);
var startBox = this.items_[startIndex].getBox(0);
if (startIndex == firstIndex) {
startBox.style.marginLeft = -margin + 'px';
if (this.bar_.firstChild)
this.bar_.insertBefore(startBox, this.bar_.firstChild);
else
this.bar_.appendChild(startBox);
setTimeout(function() {
startBox.style.marginLeft = '0';
}, 0);
} else {
toRemove.push(startBox);
startBox.style.marginLeft = '0';
if (this.bar_.firstChild)
this.bar_.insertBefore(startBox, this.bar_.firstChild);
else
this.bar_.appendChild(startBox);
setTimeout(function() {
startBox.style.marginLeft = -margin + 'px';
}, 0);
}
if (firstIndex > 0 && this.selectedIndex_ != firstIndex) {
this.bar_.classList.add('fade-left');
} else {
this.bar_.classList.remove('fade-left');
}
if (lastIndex < this.items_.length - 1 && this.selectedIndex_ != lastIndex) {
this.bar_.classList.add('fade-right');
} else {
this.bar_.classList.remove('fade-right');
}
this.firstVisibleIndex_ = firstIndex;
this.lastVisibleIndex_ = lastIndex;
this.activeBarIndex_ = 1 - this.activeBarIndex_;
activeBar = this.bars_[this.activeBarIndex_];
activeBar.textContent = '';
for (var index = firstIndex; index <= lastIndex; ++index) {
var box = this.items_[index].getBox(this.activeBarIndex_);
ImageUtil.setAttribute(box, 'inactive', false);
activeBar.appendChild(box);
var self = this;
setTimeout(function() {
for (var i = 0; i < toRemove.length; i++) {
var index = toRemove[i];
if (i < this.firstVisibleIndex_ || i > this.lastVisibleIndex_) {
var box = this.items_[index].getBox(0);
if (box.parentNode == this.bar_)
this.bar_.removeChild(box);
}
// Place active bar above inactive after animation is finished.
setTimeout(
ImageUtil.setAttribute.bind(null, activeBar, 'inactive', false),
totalDuration);
}
}, 200);
};
Ribbon.prototype.getNextSelectedIndex_ = function(direction) {
......@@ -765,26 +753,16 @@ Ribbon.Item = function(index, url, document, selectClosure) {
this.index_ = index;
this.url_ = url;
this.boxes_ = [];
this.wrappers_ = [];
this.imgs_ = [];
for (var i = 0; i < 2; i++) {
var box = document.createElement('div');
box.className = 'ribbon-image';
box.addEventListener('click', selectClosure);
var wrapper = document.createElement('div');
wrapper.className = 'image-wrapper';
box.appendChild(wrapper);
this.box_ = document.createElement('div');
this.box_.className = 'ribbon-image';
this.box_.addEventListener('click', selectClosure);
var img = document.createElement('img');
wrapper.appendChild(img);
this.wrapper_ = document.createElement('div');
this.wrapper_.className = 'image-wrapper';
this.box_.appendChild(this.wrapper_);
this.boxes_.push(box);
this.wrappers_.push(wrapper);
this.imgs_.push(img);
}
this.img_ = document.createElement('img');
this.wrapper_.appendChild(this.img_);
this.original_ = true;
this.copyName_ = null;
......@@ -792,7 +770,7 @@ Ribbon.Item = function(index, url, document, selectClosure) {
Ribbon.Item.prototype.getIndex = function () { return this.index_ };
Ribbon.Item.prototype.getBox = function (index) { return this.boxes_[index] };
Ribbon.Item.prototype.getBox = function () { return this.box_ };
Ribbon.Item.prototype.isOriginal = function () { return this.original_ };
......@@ -802,13 +780,11 @@ Ribbon.Item.prototype.setUrl = function (url) { this.url_ = url };
Ribbon.Item.prototype.getCopyName = function () { return this.copyName_ };
Ribbon.Item.prototype.isSelected = function() {
return this.boxes_[0].hasAttribute('selected');
return this.box_.hasAttribute('selected');
};
Ribbon.Item.prototype.select = function(on) {
for (var i = 0; i < 2; i++) {
ImageUtil.setAttribute(this.boxes_[i], 'selected', on);
}
ImageUtil.setAttribute(this.box_, 'selected', on);
};
Ribbon.Item.prototype.updateThumbnail = function(canvas) {
......@@ -1019,11 +995,9 @@ Ribbon.Item.prototype.setMetadata = function(metadata) {
'scaleY(' + transform.scaleY + ') ' +
'rotate(' + transform.rotate90 * 90 + 'deg)') :
'';
this.wrapper_.style.webkitTransform = webkitTransform;
for (var i = 0; i < 2; i++) {
this.wrappers_[i].style.webkitTransform = webkitTransform;
var img = this.imgs_[i];
var img = this.img_;
if (metadata.width && metadata.height) {
var aspect = metadata.width / metadata.height;
......@@ -1046,7 +1020,6 @@ Ribbon.Item.prototype.setMetadata = function(metadata) {
}
img.setAttribute('src', url);
}
};
function ShareMode(editor, container, toolbar, shareActions,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment