mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Generate tool's markup automatically

Browse Source
This commit is contained in:
Vince
2012-09-15 20:25:45 +02:00
parent 1276f338c2
commit 440a6391e9
13 changed files with 39 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -1,4 +1,4 @@
.tools-container { .menubar {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: 100%; height: 30px; width: 100%; height: 30px;

2
css/tools.css
View File

@@ -1,5 +1,3 @@
.tools-container {}
.tools-group { .tools-group {
float: left; float: left;
height: 30px; height: 30px;

16
index.html
View File

@@ -19,23 +19,15 @@
<body> <body>
<!-- Tool section: --> <!-- Tool section: -->
<div id="tools-container" class="tools-container"> <div id="menubar" class="menubar">
<ul class="tools-group"> <ul class="tools-group">
<!-- TODO: Remove that from here or change CSS class naming since
they are framesheet level actions, not tools -->
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li> <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li> <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
</ul> </ul>
<ul class="tools-group"> <ul id="tools-container" class="tools-group"></ul>
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
<li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
<li class="tool-icon tool-circle" data-tool-id="tool-circle" title="Circle tool"></li>
<li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
<li class="tool-icon tool-rectangle-select" data-tool-id="tool-rectangle-select" title="Rectangle selection tool"></li>
<li class="tool-icon tool-shape-select" data-tool-id="tool-shape-select" title="Shape selection tool"></li>
</ul>
<ul class="tools-group"> <ul class="tools-group">
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette"> <li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">

27
js/ToolSelector.js
View File

@@ -20,6 +20,7 @@ pskl.ToolSelector = (function() {
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(), "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect() "shapeSelect" : new pskl.drawingtools.ShapeSelect()
}; };
var currentSelectedTool = toolInstances.simplePen; var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen; var previousSelectedTool = toolInstances.simplePen;
@@ -53,13 +54,26 @@ pskl.ToolSelector = (function() {
selectTool_(toolInstances[tool]); selectTool_(toolInstances[tool]);
// Show tool as selected: // Show tool as selected:
$("#tools-container .tool-icon.selected").removeClass("selected"); $('#menubar .tool-icon.selected').removeClass('selected');
clickedTool.addClass("selected"); clickedTool.addClass('selected');
} }
} }
} }
}; };
/**
* @private
*/
var createToolMarkup_ = function() {
var currentTool, toolMarkup = '';
for (var toolKey in toolInstances) {
currentTool = toolInstances[toolKey];
toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId
+ '" title="' + currentTool.helpText + '"></li>';
}
$('#tools-container').html(toolMarkup);
};
/** /**
* Get state for the checkbox that control the display of the grid * Get state for the checkbox that control the display of the grid
* on the drawing canvas. * on the drawing canvas.
@@ -74,11 +88,13 @@ pskl.ToolSelector = (function() {
return { return {
init: function() { init: function() {
createToolMarkup_();
// Initialize tool: // Initialize tool:
// Set SimplePen as default selected tool: // Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen); selectTool_(toolInstances.simplePen);
// Activate listener on tool panel: // Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_); $("#menubar").click(onToolIconClicked_);
// Show/hide the grid on drawing canvas: // Show/hide the grid on drawing canvas:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]); $.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]);
@@ -88,7 +104,4 @@ pskl.ToolSelector = (function() {
}); });
} }
}; };
})(); })();

3
js/drawingtools/Circle.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Circle = function() { ns.Circle = function() {
this.toolId = "tool-circle" this.toolId = "tool-circle";
this.helpText = "Circle tool";
// Circle's first point coordinates (set in applyToolAt) // Circle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

1
js/drawingtools/Eraser.js
View File

@@ -9,6 +9,7 @@
ns.Eraser = function() { ns.Eraser = function() {
this.toolId = "tool-eraser"; this.toolId = "tool-eraser";
this.helpText = "Eraser tool";
}; };
pskl.utils.inherit(ns.Eraser, ns.SimplePen); pskl.utils.inherit(ns.Eraser, ns.SimplePen);

1
js/drawingtools/Move.js
View File

@@ -8,6 +8,7 @@
ns.Move = function() { ns.Move = function() {
this.toolId = "tool-move" this.toolId = "tool-move"
this.helpText = "Move tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

3
js/drawingtools/PaintBucket.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.PaintBucket = function() { ns.PaintBucket = function() {
this.toolId = "tool-paint-bucket" this.toolId = "tool-paint-bucket";
this.helpText = "Paint bucket tool";
}; };
pskl.utils.inherit(ns.PaintBucket, ns.BaseTool); pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);

3
js/drawingtools/Rectangle.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Rectangle = function() { ns.Rectangle = function() {
this.toolId = "tool-rectangle" this.toolId = "tool-rectangle";
this.helpText = "Rectangle tool";
// Rectangle's first point coordinates (set in applyToolAt) // Rectangle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

1
js/drawingtools/SimplePen.js
View File

@@ -8,6 +8,7 @@
ns.SimplePen = function() { ns.SimplePen = function() {
this.toolId = "tool-pen"; this.toolId = "tool-pen";
this.helpText = "Pen tool"
}; };
this.previousCol = null; this.previousCol = null;

5
js/drawingtools/Stroke.js
View File

@@ -7,8 +7,9 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() { ns.Stroke = function() {
this.toolId = "tool-stroke" this.toolId = "tool-stroke";
this.helpText = "Stroke tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;
this.startRow = null; this.startRow = null;

1
js/drawingtools/selectiontools/RectangleSelect.js
View File

@@ -8,6 +8,7 @@
ns.RectangleSelect = function() { ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select"; this.toolId = "tool-rectangle-select";
this.helpText = "Rectangle selection tool";
ns.BaseSelect.call(this); ns.BaseSelect.call(this);
}; };

1
js/drawingtools/selectiontools/ShapeSelect.js
View File

@@ -8,6 +8,7 @@
ns.ShapeSelect = function() { ns.ShapeSelect = function() {
this.toolId = "tool-shape-select"; this.toolId = "tool-shape-select";
this.helpText = "Shape selection tool";
ns.BaseSelect.call(this); ns.BaseSelect.call(this);
}; };