From 6af56953be2a7819007648152d03d0e42a6852c3 Mon Sep 17 00:00:00 2001 From: Alexander Yakovlev Date: Sun, 26 Nov 2017 01:05:52 +0700 Subject: [PATCH] packery and display images --- js/main.coffee | 70 ++++++++++++++++++++------------------------------ masonry.php | 15 ++++++----- package.json | 2 +- yarn.lock | 41 ++++++++++++++++++++++++++--- 4 files changed, 74 insertions(+), 54 deletions(-) diff --git a/js/main.coffee b/js/main.coffee index 9669caf..d9fe98f 100644 --- a/js/main.coffee +++ b/js/main.coffee @@ -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) ) ) diff --git a/masonry.php b/masonry.php index 272da5e..6097769 100644 --- a/masonry.php +++ b/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() {

You can select as many files as you'd like.

- -

Right-click on this image and select "Save As' to save as an image.

- - - +
+

+ + + +

-