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

Horizontal frames (WIP) + Inital DnD + color tuning

Browse Source 
Adding dnd state:
  - DnD state + DnD handle
  - horizontal frames experiment WIP
  - try out gold color for selected tools
This commit is contained in:
Vince
2013-06-07 00:58:39 +02:00
parent 0d0aedc93a
commit 5ff471e58f
3 changed files with 204 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
resources/proto-ui-1/main.js
View File

@@ -1,27 +1,75 @@
$().ready(function(){
var body = $('body');
var mainWrapper = $(".main-wrapper");
var canvas = $("#canvas");
var resizeCanvas = function() {
canvas.height(mainWrapper.height());
canvas.width(mainWrapper.height());
};
var selectTile = function(tileElement) {
$('.preview-item').removeClass('selected');
tileElement.addClass('selected');
if(body.hasClass('hor-list-mode')) {
var index = $('.preview-item:not(.drop-target)').index(tileElement);
console.log(index);
$('.previewlist').animate({
scrollLeft: -100 + 100 * index
}, 300);
}
};
selectTile($('.preview-item').eq(4));
$(document).on('click', '.tile-close', function(evt) {
$(evt.target).closest('.preview-item').remove();
});
$(document).on('click', '.preview-item', function(evt) {
$('.preview-item').removeClass('selected');
$(evt.target).closest('.preview-item').addClass('selected');
selectTile($(evt.target).closest('.preview-item'));
});
$(document).on('click', '#toggle-mode', function(evt) {
$('body').toggleClass('grid-mode');
$(document).on('click', '.tool', function(evt) {
$('.tool').removeClass('selected');
$(evt.target).closest('.tool').addClass('selected');
});
/*
$(document).on('click', '#change-draw-area', function(evt) {
$('body').toggleClass('grid-mode');
});*/
$(window).resize(resizeCanvas);
resizeCanvas();
/**
* Admin stuff
*/
$(document).on('click', '#toggle-frame-mode', function(evt) {
if(body.hasClass('grid-mode')) {
$('body').removeClass('grid-mode');
$('body').addClass('hor-list-mode');
} else if (body.hasClass('hor-list-mode')) {
$('body').removeClass('hor-list-mode');
$('body').addClass('vert-list-mode');
}
else if (body.hasClass('vert-list-mode')) {
$('body').removeClass('vert-list-mode');
$('body').addClass('grid-mode');
}
resizeCanvas();
});
$(document).on('click', '#toggle-dnd-state', function(evt) {
body.toggleClass('dnd-state1');
});
$("#change-draw-area").change(function () {
var str = "";
$("#change-draw-area option:selected").each(function () {
str = $(this).val();
});
$(".canvas .draw-area").attr('class', 'draw-area draw-area-'+ str);
})
});
});