packery with drag & drop
This commit is contained in:
parent
816c1cab53
commit
2d1e801b1b
|
@ -1,5 +1,3 @@
|
|||
Packery = require('packery')
|
||||
|
||||
jQuery(document).ready(() ->
|
||||
jQuery("#masonryslide-container").hide()
|
||||
)
|
||||
|
@ -10,37 +8,36 @@ jQuery(document).on('click', '#pack', () ->
|
|||
jQuery("#masonryslide").width(container.width() - 100)
|
||||
jQuery("#masonryslide").height(container.height() - 300)
|
||||
|
||||
promise = Promise.resolve()
|
||||
slide = document.getElementById('masonryslide')
|
||||
grid = new Packery(slide, {
|
||||
itemSelector: "img"
|
||||
percentPosition: true
|
||||
columnWidth: 100
|
||||
slide.innerHTML = ""
|
||||
grid = jQuery(slide).packery({
|
||||
itemSelector: ".grid-item"
|
||||
columnWidth: 400
|
||||
})
|
||||
for file in document.getElementById('masonryslide-files').files
|
||||
img = document.createElement("img")
|
||||
img.classList.add("obj")
|
||||
img.file = file
|
||||
jQuery("#masonryslide")[0].append(img)
|
||||
|
||||
fr = new FileReader()
|
||||
fr.onload = ((aImg) ->
|
||||
(e) ->
|
||||
aImg.src = e.target.result
|
||||
if jQuery(aImg).width() > (jQuery("#masonryslide").width() / 3)
|
||||
jQuery(aImg).width("33%")
|
||||
grid.layout()
|
||||
resolve()
|
||||
d = jQuery("<div class='grid-item'></div>")
|
||||
d.append(aImg)
|
||||
grid.append(d)
|
||||
grid.packery('layout')
|
||||
jQuery(document).trigger("masonryloadedImg")
|
||||
)(img)
|
||||
fr.readAsDataURL(file)
|
||||
|
||||
promise.then(() ->
|
||||
items = jQuery(slide).find('img').draggable()
|
||||
grid.bindUIDraggableEvents(items)
|
||||
jQuery(document).on("masonryloadedImg", () ->
|
||||
items = jQuery('#masonryslide .grid-item')
|
||||
if items.length == document.getElementById('masonryslide-files').files.length
|
||||
items.draggable()
|
||||
jQuery("#masonryslide").packery('bindUIDraggableEvents', items).packery('layout')
|
||||
)
|
||||
)
|
||||
|
||||
jQuery("#pngdownload").click(() ->
|
||||
canvas = document.getElementById("masonryslide")
|
||||
document.location.href = canvas.toDataUrl("image/png")
|
||||
)
|
||||
|
|
25
main.css
Normal file
25
main.css
Normal file
|
@ -0,0 +1,25 @@
|
|||
/* jQuery UI Draggable adds ui-draggable-dragging */
|
||||
.grid-item.ui-draggable-dragging,
|
||||
/* Packery adds class while transitioning to drop position */
|
||||
.grid-item.is-positioning-post-drag {
|
||||
background: #C90;
|
||||
z-index: 2; /* keep dragged item on top */
|
||||
}
|
||||
.packery-drop-placeholder {
|
||||
outline: 3px dashed #444;
|
||||
outline-offset: -6px;
|
||||
/* transition position changing */
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.grid-item {
|
||||
float: left;
|
||||
max-width: 390px;
|
||||
margin: 5px;
|
||||
}
|
||||
.grid-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.grid-item:hover {
|
||||
cursor: move;
|
||||
}
|
|
@ -33,10 +33,15 @@ function masonryslides_js($hook) {
|
|||
'masonryslides_libcss',
|
||||
plugins_url('main.css', __FILE__)
|
||||
);
|
||||
wp_enqueue_script(
|
||||
'packery',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js',
|
||||
['jquery']
|
||||
);
|
||||
wp_enqueue_script(
|
||||
'masonryslides_js',
|
||||
plugins_url('dist/main.js', __FILE__),
|
||||
['jquery', 'jquery-ui-core', 'jquery-ui-draggable']
|
||||
['jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'packery']
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -49,7 +54,7 @@ function masonryslides_newslide() {
|
|||
<p><button id="pack">Pack the images</button></p>
|
||||
<div id="masonryslide-container">
|
||||
<div id="masonryslide"></div>
|
||||
<p>
|
||||
<p class="clear">
|
||||
<button id="pngdownload">Download as PNG</button>
|
||||
<button id="pdfdownload">Download as PDF</button>
|
||||
<button id="pptdownload">Download as PPT</button>
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
"dependencies": {
|
||||
"coffee-loader": "^0.9.0",
|
||||
"coffeescript": "^2.0.2",
|
||||
"packery": "^2.1.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"webpack": "^3.8.1"
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue