packery and display images

This commit is contained in:
Alexander Yakovlev 2017-11-26 01:05:52 +07:00
parent 815d89edad
commit 6af56953be
4 changed files with 74 additions and 54 deletions

View File

@ -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)
)
)

View File

@ -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
}

View File

@ -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"
}

View File

@ -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"