support expanding the transform toolbox

This commit is contained in:
Julian Descottes 2017-05-20 18:37:20 +02:00
parent e7d07c5353
commit 4b4cbe47c8
5 changed files with 83 additions and 8 deletions

View File

@ -55,6 +55,10 @@ body {
margin-left: 0;
}
.hidden {
display: none;
}
/**
* TOOLTIPS
*/

View File

@ -3,5 +3,38 @@
}
.transformations-container .tool-icon {
float:left;
margin: 0 0 5px 0;
}
.transformations-container .tools-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 46px;
/* Override the float:left set on tools-wrapper in layout.css; */
float: initial;
}
.transformations-container.show-more .tools-wrapper {
height: auto;
/* Compensate the 5px bottom-margin coming from the tool-icon */
margin-bottom: -5px;
}
.transformations-show-more-link {
position: absolute;
color: #999;
right: 8px;
font-weight: normal;
cursor: pointer;
transition: 0.2s linear;
}
.transformations-show-more-link:hover {
color: white;
}
.show-more .transformations-show-more-link {
color: gold;
}

View File

@ -1,22 +1,29 @@
(function () {
var ns = $.namespace('pskl.controller');
var SHOW_MORE_CLASS = 'show-more';
ns.TransformationsController = function () {
this.tools = [
new pskl.tools.transform.Flip(),
new pskl.tools.transform.Rotate(),
new pskl.tools.transform.Clone(),
new pskl.tools.transform.Center()
new pskl.tools.transform.Center(),
];
this.toolIconBuilder = new pskl.tools.ToolIconBuilder();
};
ns.TransformationsController.prototype.init = function () {
var container = document.querySelector('.transformations-container');
this.toolsContainer = container.querySelector('.tools-wrapper');
container.addEventListener('click', this.onTransformationClick_.bind(this));
this.container = document.querySelector('.transformations-container');
this.container.addEventListener('click', this.onTransformationClick_.bind(this));
this.showMoreLink = this.container.querySelector('.transformations-show-more-link');
this.showMoreLink.addEventListener('click', this.toggleShowMoreTools_.bind(this));
this.createToolsDom_();
this.updateShowMoreLink_();
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
};
ns.TransformationsController.prototype.applyTool = function (toolId, evt) {
@ -30,13 +37,35 @@
ns.TransformationsController.prototype.onTransformationClick_ = function (evt) {
var toolId = evt.target.dataset.toolId;
this.applyTool(toolId, evt);
if (toolId) {
this.applyTool(toolId, evt);
}
};
ns.TransformationsController.prototype.toggleShowMoreTools_ = function (evt) {
var showMore = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
pskl.UserSettings.set(pskl.UserSettings.TRANSFORM_SHOW_MORE, !showMore);
};
ns.TransformationsController.prototype.onUserSettingsChange_ = function (evt, settingName) {
if (settingName == pskl.UserSettings.TRANSFORM_SHOW_MORE) {
this.updateShowMoreLink_();
}
};
ns.TransformationsController.prototype.updateShowMoreLink_ = function () {
var showMoreEnabled = pskl.UserSettings.get(pskl.UserSettings.TRANSFORM_SHOW_MORE);
this.container.classList.toggle(SHOW_MORE_CLASS, showMoreEnabled);
// Hide the link in case there are 4 or less tools available.
this.showMoreLink.classList.toggle('hidden', this.tools.length < 5);
};
ns.TransformationsController.prototype.createToolsDom_ = function() {
var html = this.tools.reduce(function (p, tool) {
return p + this.toolIconBuilder.createIcon(tool, 'left');
}.bind(this), '');
this.toolsContainer.innerHTML = html;
var toolsContainer = this.container.querySelector('.tools-wrapper');
toolsContainer.innerHTML = html;
};
})();

View File

@ -18,6 +18,7 @@
PEN_SIZE : 'PEN_SIZE',
RESIZE_SETTINGS: 'RESIZE_SETTINGS',
COLOR_FORMAT: 'COLOR_FORMAT',
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_WIDTH' : 0,
'MAX_FPS' : 24,
@ -42,6 +43,7 @@
origin : 'TOPLEFT'
},
COLOR_FORMAT: 'hex',
TRANSFORM_SHOW_MORE: false,
},
/**

View File

@ -1,4 +1,11 @@
<div class="toolbox-container transformations-container">
<h3 class="toolbox-title transformations-title">Transform</h3>
<h3 class="toolbox-title transformations-title">
Transform
<span
class="transformations-show-more-link piskel-icon-plus"
title="View more tools"
rel="tooltip" data-placement="top"
></span>
</h3>
<ul class="tools-wrapper"></ul>
</div>