packery and display images
This commit is contained in:
parent
815d89edad
commit
6af56953be
|
@ -1,56 +1,42 @@
|
|||
ShelfPack = require('@mapbox/shelf-pack')
|
||||
Packery = require('packery')
|
||||
|
||||
jQuery(document).ready(() ->
|
||||
jQuery("#masonryslide-container").hide()
|
||||
)
|
||||
|
||||
jQuery(document).on('click', '#pack', () ->
|
||||
jQuery("#masonryslide-container").show()
|
||||
jQuery("#masonrylibrary").empty()
|
||||
container = jQuery("#wpwrap")
|
||||
canvas = document.getElementById("masonryslide")
|
||||
canvas.width = canvas.style.width = container.width() - 100
|
||||
canvas.height = canvas.style.height = container.height() - 300
|
||||
jQuery("#masonrylibrary").css({
|
||||
position: 'absolute'
|
||||
right: '9999px'
|
||||
}).show()
|
||||
sprite = new ShelfPack(container.width(), container.height())
|
||||
container = jQuery("#masonryslide-container")
|
||||
container.show()
|
||||
jQuery("#masonryslide").width(container.width() - 100)
|
||||
jQuery("#masonryslide").height(container.height() - 300)
|
||||
|
||||
images = []
|
||||
bins = []
|
||||
promise = Promise.resolve()
|
||||
slide = document.getElementById('masonryslide')
|
||||
grid = new Packery(slide, {
|
||||
itemSelector: "img"
|
||||
percentPosition: true
|
||||
columnWidth: 100
|
||||
})
|
||||
for file in document.getElementById('masonryslide-files').files
|
||||
promise.then(() ->
|
||||
return new Promise(
|
||||
(resolve, reject) ->
|
||||
fr = new FileReader()
|
||||
fr.onload = () ->
|
||||
img = new Image
|
||||
img.src = fr.result
|
||||
jQuery("#masonrylibrary")[0].append(img)
|
||||
img = jQuery("#masonrylibrary img").last()
|
||||
images[file.name] = img
|
||||
bins.push({
|
||||
id: file.name
|
||||
width: jQuery(img).width()
|
||||
height: jQuery(img).height()
|
||||
})
|
||||
resolve()
|
||||
fr.readAsDataURL(file)
|
||||
)
|
||||
)
|
||||
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()
|
||||
jQuery(aImg).width("100%")
|
||||
grid.layout()
|
||||
resolve()
|
||||
)(img)
|
||||
fr.readAsDataURL(file)
|
||||
|
||||
promise.then(() ->
|
||||
console.log bins
|
||||
console.log images
|
||||
bins = sprite.pack(bins)
|
||||
|
||||
context = canvas.getContext('2d')
|
||||
for i in bins
|
||||
context.drawImage(images[i.id], i.x, i.y, i.w, i.h)
|
||||
|
||||
# jQuery("#masonrylibrary img").remove()
|
||||
items = jQuery(slide).find('img').draggable()
|
||||
grid.bindUIDraggableEvents(items)
|
||||
)
|
||||
)
|
||||
|
||||
|
|
15
masonry.php
15
masonry.php
|
@ -35,7 +35,8 @@ function masonryslides_js($hook) {
|
|||
);
|
||||
wp_enqueue_script(
|
||||
'masonryslides_js',
|
||||
plugins_url('dist/main.js', __FILE__)
|
||||
plugins_url('dist/main.js', __FILE__),
|
||||
['jquery', 'jquery-ui-core', 'jquery-ui-draggable']
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -47,12 +48,12 @@ function masonryslides_newslide() {
|
|||
<p>You can select as many files as you'd like.</p>
|
||||
<p><button id="pack">Pack the images</button></p>
|
||||
<div id="masonryslide-container">
|
||||
<canvas id="masonryslide"></canvas>
|
||||
<p>Right-click on this image and select "Save As' to save as an image.</p>
|
||||
<button id="pngdownload">Download as PNG</button>
|
||||
<button id="pdfdownload">Download as PDF</button>
|
||||
<button id="pptdownload">Download as PPT</button>
|
||||
<div id="masonryslide"></div>
|
||||
<p>
|
||||
<button id="pngdownload">Download as PNG</button>
|
||||
<button id="pdfdownload">Download as PDF</button>
|
||||
<button id="pptdownload">Download as PPT</button>
|
||||
</p>
|
||||
</div>
|
||||
<div id="masonrylibrary" style="display: none;"></div>
|
||||
<?php
|
||||
}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@mapbox/shelf-pack": "^3.1.0",
|
||||
"coffee-loader": "^0.9.0",
|
||||
"coffeescript": "^2.0.2",
|
||||
"packery": "^2.1.1",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"webpack": "^3.8.1"
|
||||
}
|
||||
|
|
41
yarn.lock
41
yarn.lock
|
@ -2,10 +2,6 @@
|
|||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@mapbox/shelf-pack@^3.1.0":
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@mapbox/shelf-pack/-/shelf-pack-3.1.0.tgz#1edea9c0bf6715b217171ba60646c201af520f6a"
|
||||
|
||||
abbrev@1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
|
||||
|
@ -531,6 +527,10 @@ des.js@^1.0.0:
|
|||
inherits "^2.0.1"
|
||||
minimalistic-assert "^1.0.0"
|
||||
|
||||
desandro-matches-selector@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
|
||||
|
||||
detect-libc@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
|
||||
|
@ -677,6 +677,10 @@ estraverse@^4.1.0, estraverse@^4.1.1:
|
|||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
|
||||
|
||||
ev-emitter@^1.0.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
|
||||
|
||||
event-emitter@~0.3.5:
|
||||
version "0.3.5"
|
||||
resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
|
||||
|
@ -769,6 +773,12 @@ find-up@^2.0.0, find-up@^2.1.0:
|
|||
dependencies:
|
||||
locate-path "^2.0.0"
|
||||
|
||||
fizzy-ui-utils@^2.0.0:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.5.tgz#d72debc74d2c9d272dbcbb7b001707897f6c3210"
|
||||
dependencies:
|
||||
desandro-matches-selector "^2.0.0"
|
||||
|
||||
flush-write-stream@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
|
||||
|
@ -859,6 +869,10 @@ get-caller-file@^1.0.1:
|
|||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
|
||||
|
||||
get-size@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.2.tgz#555ea98ab8732e0c021e9e23e2219adcbe398e98"
|
||||
|
||||
get-stream@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
|
||||
|
@ -1116,6 +1130,10 @@ isstream@~0.1.2:
|
|||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
|
||||
|
||||
jquery-ui@^1.12.1:
|
||||
version "1.12.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
|
||||
|
||||
jsbn@~0.1.0:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
||||
|
@ -1484,6 +1502,14 @@ osenv@^0.1.4:
|
|||
os-homedir "^1.0.0"
|
||||
os-tmpdir "^1.0.0"
|
||||
|
||||
outlayer@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
|
||||
dependencies:
|
||||
ev-emitter "^1.0.0"
|
||||
fizzy-ui-utils "^2.0.0"
|
||||
get-size "^2.0.2"
|
||||
|
||||
p-finally@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
|
||||
|
@ -1498,6 +1524,13 @@ p-locate@^2.0.0:
|
|||
dependencies:
|
||||
p-limit "^1.1.0"
|
||||
|
||||
packery@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/packery/-/packery-2.1.1.tgz#ec3711e96562b5ae206641e06854f899064a1b55"
|
||||
dependencies:
|
||||
get-size "^2.0.2"
|
||||
outlayer "^2.0.0"
|
||||
|
||||
pako@~1.0.5:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
|
||||
|
|
Loading…
Reference in New Issue