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(document).ready(() ->
|
||||||
jQuery("#masonryslide-container").hide()
|
jQuery("#masonryslide-container").hide()
|
||||||
)
|
)
|
||||||
|
|
||||||
jQuery(document).on('click', '#pack', () ->
|
jQuery(document).on('click', '#pack', () ->
|
||||||
jQuery("#masonryslide-container").show()
|
container = jQuery("#masonryslide-container")
|
||||||
jQuery("#masonrylibrary").empty()
|
container.show()
|
||||||
container = jQuery("#wpwrap")
|
jQuery("#masonryslide").width(container.width() - 100)
|
||||||
canvas = document.getElementById("masonryslide")
|
jQuery("#masonryslide").height(container.height() - 300)
|
||||||
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())
|
|
||||||
|
|
||||||
images = []
|
|
||||||
bins = []
|
|
||||||
promise = Promise.resolve()
|
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
|
for file in document.getElementById('masonryslide-files').files
|
||||||
promise.then(() ->
|
img = document.createElement("img")
|
||||||
return new Promise(
|
img.classList.add("obj")
|
||||||
(resolve, reject) ->
|
img.file = file
|
||||||
fr = new FileReader()
|
jQuery("#masonryslide")[0].append(img)
|
||||||
fr.onload = () ->
|
|
||||||
img = new Image
|
fr = new FileReader()
|
||||||
img.src = fr.result
|
fr.onload = ((aImg) ->
|
||||||
jQuery("#masonrylibrary")[0].append(img)
|
(e) ->
|
||||||
img = jQuery("#masonrylibrary img").last()
|
aImg.src = e.target.result
|
||||||
images[file.name] = img
|
if jQuery(aImg).width() > jQuery("#masonryslide").width()
|
||||||
bins.push({
|
jQuery(aImg).width("100%")
|
||||||
id: file.name
|
grid.layout()
|
||||||
width: jQuery(img).width()
|
resolve()
|
||||||
height: jQuery(img).height()
|
)(img)
|
||||||
})
|
fr.readAsDataURL(file)
|
||||||
resolve()
|
|
||||||
fr.readAsDataURL(file)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
promise.then(() ->
|
promise.then(() ->
|
||||||
console.log bins
|
items = jQuery(slide).find('img').draggable()
|
||||||
console.log images
|
grid.bindUIDraggableEvents(items)
|
||||||
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()
|
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
15
masonry.php
15
masonry.php
|
@ -35,7 +35,8 @@ function masonryslides_js($hook) {
|
||||||
);
|
);
|
||||||
wp_enqueue_script(
|
wp_enqueue_script(
|
||||||
'masonryslides_js',
|
'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>You can select as many files as you'd like.</p>
|
||||||
<p><button id="pack">Pack the images</button></p>
|
<p><button id="pack">Pack the images</button></p>
|
||||||
<div id="masonryslide-container">
|
<div id="masonryslide-container">
|
||||||
<canvas id="masonryslide"></canvas>
|
<div id="masonryslide"></div>
|
||||||
<p>Right-click on this image and select "Save As' to save as an image.</p>
|
<p>
|
||||||
<button id="pngdownload">Download as PNG</button>
|
<button id="pngdownload">Download as PNG</button>
|
||||||
<button id="pdfdownload">Download as PDF</button>
|
<button id="pdfdownload">Download as PDF</button>
|
||||||
<button id="pptdownload">Download as PPT</button>
|
<button id="pptdownload">Download as PPT</button>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="masonrylibrary" style="display: none;"></div>
|
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mapbox/shelf-pack": "^3.1.0",
|
|
||||||
"coffee-loader": "^0.9.0",
|
"coffee-loader": "^0.9.0",
|
||||||
"coffeescript": "^2.0.2",
|
"coffeescript": "^2.0.2",
|
||||||
|
"packery": "^2.1.1",
|
||||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||||
"webpack": "^3.8.1"
|
"webpack": "^3.8.1"
|
||||||
}
|
}
|
||||||
|
|
41
yarn.lock
41
yarn.lock
|
@ -2,10 +2,6 @@
|
||||||
# yarn lockfile v1
|
# 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:
|
abbrev@1:
|
||||||
version "1.1.1"
|
version "1.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
|
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"
|
inherits "^2.0.1"
|
||||||
minimalistic-assert "^1.0.0"
|
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:
|
detect-libc@^1.0.2:
|
||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
|
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"
|
version "4.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
|
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:
|
event-emitter@~0.3.5:
|
||||||
version "0.3.5"
|
version "0.3.5"
|
||||||
resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
|
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:
|
dependencies:
|
||||||
locate-path "^2.0.0"
|
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:
|
flush-write-stream@^1.0.0:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
|
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"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
|
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:
|
get-stream@^3.0.0:
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
|
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"
|
version "0.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
|
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:
|
jsbn@~0.1.0:
|
||||||
version "0.1.1"
|
version "0.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
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-homedir "^1.0.0"
|
||||||
os-tmpdir "^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:
|
p-finally@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
|
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
|
||||||
|
@ -1498,6 +1524,13 @@ p-locate@^2.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
p-limit "^1.1.0"
|
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:
|
pako@~1.0.5:
|
||||||
version "1.0.6"
|
version "1.0.6"
|
||||||
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
|
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
|
||||||
|
|
Loading…
Reference in a new issue