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

Fixing DnD, removing LESS, cleaning code

Browse Source 
- Updating DnD to use Sortable instead of draggable/dropppable
(updating deps as well).
- much simpler logic for DnD
- Remove LESS for now since it's a bit yet overkill
- fix moveFrame function
This commit is contained in:
Vince 2013-06-13 00:04:39 +02:00
parent 5de77dc6fb
commit 5b0a8f157d
12 changed files with 2292 additions and 3181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/preview-film-section.less → css/preview-film-section.css
View File

@ -14,6 +14,11 @@
position: relative; position: relative;
border: #444 3px solid; border: #444 3px solid;
border-radius: 3px; border-radius: 3px;
margin: 5px 0;
}
.preview-tile:first-child {
margin-top: 0;
} }
.preview-tile:hover { .preview-tile:hover {
@ -103,29 +108,9 @@
* Drag n drop styles. * Drag n drop styles.
*/ */
.preview-tile.ui-draggable-dragging { .preview-tile-drop-proxy {
opacity: 0.3; border: 3px dashed gold;
height: 90px;
border-radius: 9px;
background-color: rgba(255, 215,0, 0.2);
} }
.preview-tile.droppable-active {
background-color: pink;
}
.interstitial-tile.droppable-hover-active {
background-color: purple;
}
.preview-tile.droppable-hover-active {
background-color: yellow;
}
.interstitial-tile {
visibility: hidden;
background-color: blue;
height: 10px;
}
.show-interstitial-tiles .interstitial-tile {
visibility: visible;
}

0
css/reset.less → css/reset.css
View File

4
css/style.less → css/style.css
View File

@ -8,14 +8,12 @@ body {
* Application layout * Application layout
*/ */
@toolbar-height: 104px;
.column-wrapper { .column-wrapper {
text-align: center; text-align: center;
font-size: 0; font-size: 0;
position: absolute; position: absolute;
left: 0; left: 0;
top: @toolbar-height; top: 104px;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }

0
css/tools.less → css/tools.css
View File

16
index.html
View File

@ -8,14 +8,12 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Julian Descottes"> <meta name="author" content="Julian Descottes">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="css/reset.less"> <link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet/less" type="text/css" href="css/style.less"> <link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet/less" type="text/css" href="css/tools.less"> <link rel="stylesheet" type="text/css" href="css/tools.css">
<link rel="stylesheet/less" type="text/css" href="css/bootstrap/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet/less" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
<link rel="stylesheet/less" type="text/css" href="css/preview-film-section.less"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
<script src="js/lib/less-1.3.3-min.js" type="text/javascript"></script>
</head> </head>
<body> <body>
@ -87,7 +85,7 @@
<!-- Core libraries: --> <!-- Core libraries: -->
<script src="js/lib/jquery-1.8.0.js"></script> <script src="js/lib/jquery-1.8.0.js"></script>
<script src="js/lib/jquery-ui-1.8.23.custom.js"></script> <script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
<script src="js/lib/pubsub.js"></script> <script src="js/lib/pubsub.js"></script>
<script src="js/lib/bootstrap/bootstrap.js"></script> <script src="js/lib/bootstrap/bootstrap.js"></script>

116
js/controller/PreviewFilmController.js
View File

@ -48,114 +48,43 @@
var frameCount = this.framesheet.getFrameCount(); var frameCount = this.framesheet.getFrameCount();
for (var i = 0, l = frameCount; i < l ; i++) { for (var i = 0, l = frameCount; i < l ; i++) {
this.container.append(this.createInterstitialTile_(i));
this.container.append(this.createPreviewTile_(i)); this.container.append(this.createPreviewTile_(i));
} }
this.container.append(this.createInterstitialTile_(frameCount));
var needDragndropBehavior = (frameCount > 1);
var needDragndropBehavior = (frameCount > 1) ? true : false;
if(needDragndropBehavior) { if(needDragndropBehavior) {
this.initDragndropBehavior_(); this.initDragndropBehavior_();
} }
}; };
/**
* @private
*/
ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
var interstitialTile = document.createElement("div");
interstitialTile.className = "interstitial-tile";
interstitialTile.setAttribute("data-tile-type", "interstitial");
interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
return interstitialTile;
};
/** /**
* @private * @private
*/ */
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () { ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
var tiles = $(".preview-tile");
// Each preview film tile is draggable. $( "#preview-list" ).sortable({
tiles.draggable( { placeholder: "preview-tile-drop-proxy",
//containment: '.left-nav', update: $.proxy(this.onUpdate_, this)
stack: '.preview-tile',
cursor: 'move',
revert: true,
start: function(event, ui) {
// We only show the fake interstitial tiles when starting the
// drag n drop interaction. We hide them when the DnD is done.
$('#preview-list').addClass("show-interstitial-tiles");
},
stop: function() {
$('#preview-list').removeClass("show-interstitial-tiles");
}
});
// Each preview film tile is a drop target. This allow us to swap two tiles.
// However, we want to be able to insert a tile between two other tiles.
// For that we created fake interstitial tiles that are used as drop targets as well.
var droppableTiles = $(".interstitial-tile");
$.merge(droppableTiles, tiles);
droppableTiles.droppable( {
accept: ".preview-tile",
tolerance: "pointer",
activeClass: "droppable-active",
hoverClass: "droppable-hover-active",
drop: $.proxy(this.onDrop_, this)
}); });
$( "#preview-list" ).disableSelection();
}; };
/** /**
* @private * @private
*/ */
ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) { ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
var activeFrame; var originFrameId = parseInt(ui.item.data("tile-number"), 10);
// When we drag from an element, the drag could start from a nested DOM element var targetInsertionId = $('.preview-tile').index(ui.item);
// inside the drag target. We normalize that by taking the correct ancestor:
var originTile = $(event.srcElement).closest(".preview-tile");
var originFrameId = parseInt(originTile.data("tile-number"), 10);
var dropTarget = $(event.target); this.framesheet.moveFrame(originFrameId, targetInsertionId);
if(dropTarget.data("tile-type") == "interstitial") { this.framesheet.setCurrentFrameIndex(targetInsertionId);
var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
// In case we drop outside of the tile container
if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
return;
}
//console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
this.framesheet.moveFrame(originFrameId, targetInsertionId);
activeFrame = targetInsertionId;
// The last fake interstitial tile is outside of the framesheet array bound.
// It allow us to append after the very last element in this fake slot.
// However, when setting back the active frame, we have to make sure the
// frame does exist.
if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
activeFrame = targetInsertionId - 1;
}
} else {
var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
// In case we drop outside of the tile container
if(isNaN(originFrameId) || isNaN(targetSwapId)) {
return;
}
//console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
this.framesheet.swapFrames(originFrameId, targetSwapId);
activeFrame = targetSwapId;
}
// TODO(grosbouddha): move localstorage request to the model layer?
$('#preview-list').removeClass("show-interstitial-tiles");
this.framesheet.setCurrentFrameIndex(activeFrame);
// TODO(vincz): move localstorage request to the model layer?
$.publish(Events.LOCALSTORAGE_REQUEST); $.publish(Events.LOCALSTORAGE_REQUEST);
}; };
/** /**
* @private * @private
* TODO(vincz): clean this giant rendering function & remove listeners. * TODO(vincz): clean this giant rendering function & remove listeners.
@ -181,13 +110,13 @@
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber)); previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
var canvasPreviewDuplicateAction = document.createElement("button"); var cloneFrameButton = document.createElement("button");
canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip'); cloneFrameButton.setAttribute('rel', 'tooltip');
canvasPreviewDuplicateAction.setAttribute('data-placement', 'right'); cloneFrameButton.setAttribute('data-placement', 'right');
canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame'); cloneFrameButton.setAttribute('title', 'Duplicate this frame');
canvasPreviewDuplicateAction.className = "tile-overlay duplicate-frame-action"; cloneFrameButton.className = "tile-overlay duplicate-frame-action";
previewTileRoot.appendChild(canvasPreviewDuplicateAction); previewTileRoot.appendChild(cloneFrameButton);
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber)); cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
// is to make this update function (#createPreviewTile) less aggressive. // is to make this update function (#createPreviewTile) less aggressive.
@ -209,9 +138,6 @@
// Add 'dragndrop handle'. // Add 'dragndrop handle'.
var dndHandle = document.createElement("div"); var dndHandle = document.createElement("div");
dndHandle.setAttribute('rel', 'tooltip');
dndHandle.setAttribute('title', 'Drag\'n drop');
dndHandle.setAttribute('data-placement', 'right');
dndHandle.className = "tile-overlay dnd-action"; dndHandle.className = "tile-overlay dnd-action";
previewTileRoot.appendChild(dndHandle); previewTileRoot.appendChild(dndHandle);
} }

2252
js/lib/jquery-ui-1.10.3.custom.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

3017
js/lib/jquery-ui-1.8.23.custom.js vendored
View File

File diff suppressed because it is too large Load Diff

14
js/lib/jquery-ui-package-info.txt
View File

@ -1,14 +0,0 @@
jquery-ui-1.8.23.custom.js was generated at: http://http://jqueryui.com/download
and contains:
jQuery ui core:
core
widget
position
mouse
Interactions:
Draggable
Droppable
Resizable

9
js/lib/less-1.3.3-min.js vendored
View File

File diff suppressed because one or more lines are too long

8
js/model/FrameSheet.js
View File

@ -137,13 +137,7 @@
}; };
ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) { ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
var frameToMove = this.getFrameByIndex(originIndex); this.frames.splice(destinationIndex, 0, this.frames.splice(originIndex, 1)[0]);
this.frames.splice(destinationIndex, 0,frameToMove);
if(destinationIndex <= originIndex) {
originIndex++;
}
this.removeFrameByIndex(originIndex);
}; };
ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) { ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {

2
resources/proto-ui-1/main.css
View File

@ -36,8 +36,6 @@ body {
height: 46px; height: 46px;
width: 46px; width: 46px;
background-repeat: no-repeat; background-repeat: no-repeat;
/*background-size: 34px;
background-position: 6px;*/
background-size: 28px; background-size: 28px;
background-position: 9px; background-position: 9px;
background-color: rgba(200,200,200, .1); background-color: rgba(200,200,200, .1);