Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed bug #947 #964

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed bug #947 #964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,15 @@ body {
text-align: left;
}

.tooltip-wrapper {
display: inline-block;
margin: 0;
}

.tooltip-wrapper .layers-button[disabled] {
pointer-events: none;
}

.tooltip-descriptor {
color:#999;
}
Expand Down
12 changes: 3 additions & 9 deletions src/css/toolbox-layers-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@

.layers-button {
margin: 0;
width: 16.66667%;
float : left;
width: 120%;
}

/**
Expand All @@ -66,17 +66,12 @@
cursor: pointer;
}

.layer-item .layer-name,
.layer-item .layer-name-input {
.layer-item .layer-name {
padding: 0 0 0 10px;
flex: 1 auto;
white-space: nowrap;
}

.layer-item .layer-name-input {
width: 80%;
}

.layer-item .layer-name.overflowing-name {
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -87,8 +82,7 @@
}

.layer-item-opacity {
padding: 0 8px 0 8px;
flex: 0 auto;
padding-right: 8px;
}

.current-layer-item,
Expand Down
123 changes: 43 additions & 80 deletions src/js/controller/LayersListController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
(function () {
var ns = $.namespace('pskl.controller');

var TOGGLE_LAYER_SHORTCUT = 'alt+L';

ns.LayersListController = function (piskelController) {
this.piskelController = piskelController;
this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW;
this.startRenamingCurrentLayer_ = this.startRenamingCurrentLayer_.bind(this);
this.onRenameInput_ = this.onRenameInput_.bind(this);
this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW ;
};

ns.LayersListController.prototype.init = function () {
this.isRenaming = false;

this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
this.layerNameInputTemplate_ = pskl.utils.Template.get('layer-name-input-template');
this.rootEl = document.querySelector('.layers-list-container');
this.layersListEl = document.querySelector('.layers-list');
this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
Expand All @@ -27,7 +24,7 @@
this.updateToggleLayerPreview_();

$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};

ns.LayersListController.prototype.renderLayerList_ = function () {
Expand All @@ -53,20 +50,32 @@
var addTooltip = pskl.utils.TooltipFormatter.format('Create a layer', null, [
{key : 'shift', description : 'Clone current layer'}
]);
var addButton = this.rootEl.querySelector('[data-action="add"]');
addButton.setAttribute('title', addTooltip);
var addDiv = this.rootEl.querySelector('[data-action="add"]').parentElement;
addDiv.setAttribute('title', addTooltip);

var moveDownTooltip = pskl.utils.TooltipFormatter.format('Move layer down', null, [
{key : 'shift', description : 'Move to the bottom'}
]);
var moveDownButton = this.rootEl.querySelector('[data-action="down"]');
moveDownButton.setAttribute('title', moveDownTooltip);
var moveDownDiv = this.rootEl.querySelector('[data-action="down"]').parentElement;
moveDownDiv.setAttribute('title', moveDownTooltip);

var moveUpTooltip = pskl.utils.TooltipFormatter.format('Move layer up', null, [
{key : 'shift', description : 'Move to the top'}
]);
var moveUpButton = this.rootEl.querySelector('[data-action="up"]');
moveUpButton.setAttribute('title', moveUpTooltip);
var moveUpDiv = this.rootEl.querySelector('[data-action="up"]').parentElement;
moveUpDiv.setAttribute('title', moveUpTooltip);

var editLayerTooltip = pskl.utils.TooltipFormatter.format('Edit layer name', null,[]);
var editLayerDiv = this.rootEl.querySelector('[data-action="edit"]').parentElement;
editLayerDiv.setAttribute('title', editLayerTooltip);

var mergeLayerTooltip = pskl.utils.TooltipFormatter.format('Merge with layer below', null,[]);
var mergeLayerDiv = this.rootEl.querySelector('[data-action="merge"]').parentElement;
mergeLayerDiv.setAttribute('title', mergeLayerTooltip);

var deleteLayerTooltip = pskl.utils.TooltipFormatter.format('Delete selected layer', null,[]);
var deleteLayerDiv = this.rootEl.querySelector('[data-action="delete"]').parentElement;
deleteLayerDiv.setAttribute('title', deleteLayerTooltip);
};

ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
Expand All @@ -80,6 +89,7 @@

ns.LayersListController.prototype.updateButtonStatus_ = function () {
var layers = this.piskelController.getLayers();
var currentLayer = this.piskelController.getCurrentLayer();
var index = this.piskelController.getCurrentLayerIndex();

var isLast = index === 0;
Expand Down Expand Up @@ -113,53 +123,26 @@
};

ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
if (name == pskl.UserSettings.LAYER_PREVIEW) {
if (name === pskl.UserSettings.LAYER_PREVIEW) {
this.updateToggleLayerPreview_();
}
};

ns.LayersListController.prototype.addLayerItem = function (layer, index) {
var isSelected = this.piskelController.getCurrentLayer() === layer;
var isRenaming = isSelected && this.isRenaming;
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
'layername' : layer.getName(),
'layerindex' : index,
'isselected:current-layer-item' : isSelected,
'opacity' : layer.getOpacity()
'opacity': layer.getOpacity()
});
var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
if (layerItem.offsetWidth < layerItem.scrollWidth) {
var layerNameEl = layerItem.querySelector('.layer-name');
layerNameEl.classList.add('overflowing-name');
layerNameEl.setAttribute('title', layer.getName());
layerNameEl.setAttribute('rel', 'tooltip');
}
if (isSelected) {
layerItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
layerItem.addEventListener('dblclick', this.startRenamingCurrentLayer_);
}
if (isRenaming) {
var layerNameInputHtml = pskl.utils.Template.replace(this.layerNameInputTemplate_, {
'layername' : layer.getName()
});
var layerNameInput = pskl.utils.Template.createFromHTML(layerNameInputHtml);
var layerNameEl = layerItem.querySelector('.layer-name');
layerItem.replaceChild(layerNameInput, layerNameEl);
layerNameInput.removeEventListener('blur', this.onRenameInput_);
layerNameInput.removeEventListener('keydown', this.onRenameInput_);
layerNameInput.addEventListener('blur', this.onRenameInput_);
layerNameInput.addEventListener('keydown', this.onRenameInput_);
layerNameInput.focus();
layerNameInput.select();
}
var opacity = layer.getOpacity();
if (opacity == 1) {
layerItem.querySelector('.layer-item-opacity').style.color = '#ffd700';
} else if (opacity == 0) {
layerItem.querySelector('.layer-item-opacity').style.color = '#969696';
} else {
layerItem.querySelector('.layer-item-opacity').style.color = '#ffffff';
$(layerItem).find('.layer-name')
.addClass('overflowing-name')
.attr('title', layer.getName())
.tooltip();
}
};

Expand All @@ -169,13 +152,8 @@
if (el.classList.contains('button')) {
this.onButtonClick_(el, evt);
} else if (el.classList.contains('layer-name')) {
var currentIndex = this.piskelController.getCurrentLayerIndex();
index = pskl.utils.Dom.getData(el, 'layerIndex');
if (index != currentIndex) {
var currentItem = el.parentElement.parentElement.querySelector('.current-layer-item');
currentItem.removeEventListener('dblclick', this.startRenamingCurrentLayer_);
this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
}
this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
} else if (el.classList.contains('layer-item-opacity')) {
index = pskl.utils.Dom.getData(el, 'layerIndex');
var layer = this.piskelController.getLayerAt(parseInt(index, 10));
Expand All @@ -184,29 +162,14 @@
}
};

ns.LayersListController.prototype.startRenamingCurrentLayer_ = function () {
this.isRenaming = true;
this.renderLayerList_();
};

ns.LayersListController.prototype.onRenameInput_ = function (evt) {
var el = evt.target || evt.srcElement;
if (evt.key === 'Enter') {
this.finishRenamingCurrentLayer_(el, el.value);
} else if (!evt.key || evt.key === 'Escape') {
this.finishRenamingCurrentLayer_(el);
}
};

ns.LayersListController.prototype.finishRenamingCurrentLayer_ = function (input, newName) {
if (newName) {
ns.LayersListController.prototype.renameCurrentLayer_ = function () {
var layer = this.piskelController.getCurrentLayer();
var name = window.prompt('Please enter the layer name', layer.getName());
if (name) {
var index = this.piskelController.getCurrentLayerIndex();
this.piskelController.renameLayerAt(index, newName);
this.piskelController.renameLayerAt(index, name);
this.renderLayerList_();
}
input.removeEventListener('blur', this.onRenameInput_);
input.removeEventListener('keydown', this.onRenameInput_);
this.isRenaming = false;
this.renderLayerList_();
};

ns.LayersListController.prototype.mergeDownCurrentLayer_ = function () {
Expand All @@ -217,22 +180,22 @@

ns.LayersListController.prototype.onButtonClick_ = function (button, evt) {
var action = button.getAttribute('data-action');
if (action == 'up') {
if (action === 'up') {
this.piskelController.moveLayerUp(evt.shiftKey);
} else if (action == 'down') {
} else if (action === 'down') {
this.piskelController.moveLayerDown(evt.shiftKey);
} else if (action == 'add') {
} else if (action === 'add') {
if (evt.shiftKey) {
this.piskelController.duplicateCurrentLayer();
} else {
this.piskelController.createLayer();
}
} else if (action == 'delete') {
} else if (action === 'delete') {
this.piskelController.removeCurrentLayer();
} else if (action == 'merge') {
} else if (action === 'merge') {
this.mergeDownCurrentLayer_();
} else if (action == 'edit') {
this.startRenamingCurrentLayer_();
} else if (action === 'edit') {
this.renameCurrentLayer_();
}
};

Expand Down
39 changes: 21 additions & 18 deletions src/templates/layers-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,36 @@ <h3 class="toolbox-title layers-title">Layers
class="layers-toggle-preview piskel-icon-eye"></div>
</h3>
<div class="toolbox-buttons">

<div class="tooltip-wrapper" data-toggle="tooltip" rel="tooltip" data-html="true" data-placement="top">
<button data-action="add"
class="button layers-button piskel-icon-plus"
rel="tooltip" data-placement="top" ></button>
class="button layers-button piskel-icon-plus"></button>
</div>

<div class="tooltip-wrapper" data-toggle="tooltip" rel="tooltip" data-html="true" data-placement="top">
<button data-action="up"
class="button layers-button piskel-icon-arrow-up-fat"
title="Move layer up" rel="tooltip" data-placement="top" ></button>
class="button layers-button piskel-icon-arrow-up-fat"></button>
</div>

<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="down"
class="button layers-button piskel-icon-arrow-down-fat"
title="Move layer down" rel="tooltip" data-placement="top" ></button>
class="button layers-button piskel-icon-arrow-down-fat"></button>
</div>

<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="edit"
class="button layers-button piskel-icon-pencil"
title="Edit layer name" rel="tooltip" data-placement="top"></button>
class="button layers-button piskel-icon-pencil"></button>
</div>

<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="merge"
class="button layers-button piskel-icon-merge"
title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
class="button layers-button piskel-icon-merge"></button>
</div>

<div class="tooltip-wrapper" rel="tooltip" data-html="true" data-placement="top">
<button data-action="delete"
class="button layers-button piskel-icon-close"
title="Delete selected layer" rel="tooltip" data-placement="top" ></button>
class="button layers-button piskel-icon-close"></button>
</div>

</div>

Expand All @@ -38,13 +45,9 @@ <h3 class="toolbox-title layers-title">Layers
data-layer-index="{{layerindex}}">
<span class="layer-name" data-placement="top">{{layername}}</span>
<span class="layer-item-opacity"
title="Layer opacity ({{opacity}})" rel="tooltip" data-placement="top">
&#945;
title="Layer opacity" rel="tooltip" data-placement="top">
{{opacity}}&#945;
</span>
</li>
</script>

<script type="text/template" id="layer-name-input-template">
<input class="textfield layer-name-input" type="text" autocomplete="off" value="{{layername}}" />
</script>
</div>