mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Fixing DnD, removing LESS, cleaning code
- 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
parent
5de77dc6fb
commit
5b0a8f157d
@ -14,6 +14,11 @@
|
||||
position: relative;
|
||||
border: #444 3px solid;
|
||||
border-radius: 3px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.preview-tile:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.preview-tile:hover {
|
||||
@ -103,29 +108,9 @@
|
||||
* Drag n drop styles.
|
||||
*/
|
||||
|
||||
.preview-tile.ui-draggable-dragging {
|
||||
opacity: 0.3;
|
||||
.preview-tile-drop-proxy {
|
||||
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;
|
||||
}
|
||||
@ -8,14 +8,12 @@ body {
|
||||
* Application layout
|
||||
*/
|
||||
|
||||
@toolbar-height: 104px;
|
||||
|
||||
.column-wrapper {
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: @toolbar-height;
|
||||
top: 104px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
16
index.html
16
index.html
@ -8,14 +8,12 @@
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Julian Descottes">
|
||||
<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/less" type="text/css" href="css/style.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="css/tools.less">
|
||||
<link rel="stylesheet/less" 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/less" type="text/css" href="css/preview-film-section.less">
|
||||
|
||||
<script src="js/lib/less-1.3.3-min.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" type="text/css" href="css/reset.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/tools.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -87,7 +85,7 @@
|
||||
|
||||
<!-- Core libraries: -->
|
||||
<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/bootstrap/bootstrap.js"></script>
|
||||
|
||||
|
||||
@ -48,114 +48,43 @@
|
||||
var frameCount = this.framesheet.getFrameCount();
|
||||
|
||||
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.createInterstitialTile_(frameCount));
|
||||
|
||||
var needDragndropBehavior = (frameCount > 1) ? true : false;
|
||||
|
||||
var needDragndropBehavior = (frameCount > 1);
|
||||
if(needDragndropBehavior) {
|
||||
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
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
||||
var tiles = $(".preview-tile");
|
||||
// Each preview film tile is draggable.
|
||||
tiles.draggable( {
|
||||
//containment: '.left-nav',
|
||||
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" ).sortable({
|
||||
placeholder: "preview-tile-drop-proxy",
|
||||
update: $.proxy(this.onUpdate_, this)
|
||||
});
|
||||
$( "#preview-list" ).disableSelection();
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
|
||||
var activeFrame;
|
||||
// When we drag from an element, the drag could start from a nested DOM element
|
||||
// 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);
|
||||
ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
|
||||
var originFrameId = parseInt(ui.item.data("tile-number"), 10);
|
||||
var targetInsertionId = $('.preview-tile').index(ui.item);
|
||||
|
||||
var dropTarget = $(event.target);
|
||||
if(dropTarget.data("tile-type") == "interstitial") {
|
||||
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;
|
||||
}
|
||||
this.framesheet.moveFrame(originFrameId, targetInsertionId);
|
||||
this.framesheet.setCurrentFrameIndex(targetInsertionId);
|
||||
|
||||
|
||||
$('#preview-list').removeClass("show-interstitial-tiles");
|
||||
|
||||
this.framesheet.setCurrentFrameIndex(activeFrame);
|
||||
|
||||
// TODO(vincz): move localstorage request to the model layer?
|
||||
// TODO(grosbouddha): move localstorage request to the model layer?
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* TODO(vincz): clean this giant rendering function & remove listeners.
|
||||
@ -181,13 +110,13 @@
|
||||
|
||||
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
|
||||
|
||||
var canvasPreviewDuplicateAction = document.createElement("button");
|
||||
canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
|
||||
canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
|
||||
canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
|
||||
canvasPreviewDuplicateAction.className = "tile-overlay duplicate-frame-action";
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
||||
var cloneFrameButton = document.createElement("button");
|
||||
cloneFrameButton.setAttribute('rel', 'tooltip');
|
||||
cloneFrameButton.setAttribute('data-placement', 'right');
|
||||
cloneFrameButton.setAttribute('title', 'Duplicate this frame');
|
||||
cloneFrameButton.className = "tile-overlay duplicate-frame-action";
|
||||
previewTileRoot.appendChild(cloneFrameButton);
|
||||
cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
||||
|
||||
// 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.
|
||||
@ -209,9 +138,6 @@
|
||||
|
||||
// Add 'dragndrop handle'.
|
||||
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";
|
||||
previewTileRoot.appendChild(dndHandle);
|
||||
}
|
||||
|
||||
2252
js/lib/jquery-ui-1.10.3.custom.js
vendored
Normal file
2252
js/lib/jquery-ui-1.10.3.custom.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
3017
js/lib/jquery-ui-1.8.23.custom.js
vendored
3017
js/lib/jquery-ui-1.8.23.custom.js
vendored
File diff suppressed because it is too large
Load Diff
@ -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
9
js/lib/less-1.3.3-min.js
vendored
File diff suppressed because one or more lines are too long
@ -137,13 +137,7 @@
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
|
||||
var frameToMove = this.getFrameByIndex(originIndex);
|
||||
this.frames.splice(destinationIndex, 0,frameToMove);
|
||||
|
||||
if(destinationIndex <= originIndex) {
|
||||
originIndex++;
|
||||
}
|
||||
this.removeFrameByIndex(originIndex);
|
||||
this.frames.splice(destinationIndex, 0, this.frames.splice(originIndex, 1)[0]);
|
||||
};
|
||||
|
||||
ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
|
||||
|
||||
@ -36,8 +36,6 @@ body {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-repeat: no-repeat;
|
||||
/*background-size: 34px;
|
||||
background-position: 6px;*/
|
||||
background-size: 28px;
|
||||
background-position: 9px;
|
||||
background-color: rgba(200,200,200, .1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user