commit 010aa553ad0379e04b763ce630e7554c4fa9f9f9 Author: Alexander Yakovlev Date: Tue Nov 28 00:14:03 2017 +0700 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e5b6514 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +/dist +/vendor +/composer.lock +/node_modules diff --git a/index.html b/index.html new file mode 100644 index 0000000..f792693 --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + +

New slide

Choose files

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

+ +

+ + + + + + diff --git a/js/main.coffee b/js/main.coffee new file mode 100644 index 0000000..24cc48b --- /dev/null +++ b/js/main.coffee @@ -0,0 +1,62 @@ +jQuery(document).ready(() -> + jQuery("#masonryslide-container").hide() +) + +jQuery(document).on('click', '#pack', () -> + container = jQuery("#masonryslide-container") + container.show() + jQuery("#masonryslide").width(container.width() - 100) + jQuery("#masonryslide").height(container.height() - 300) + + slide = document.getElementById('masonryslide') + 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 + + fr = new FileReader() + fr.onload = ((aImg) -> + (e) -> + aImg.src = e.target.result + d = jQuery("

") + d.append(aImg) + grid.append(d) + grid.packery('layout') + jQuery(document).trigger("masonryloadedImg") + )(img) + fr.readAsDataURL(file) + + 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') + ) +) + +getFileData = () -> + data = [] + jQuery("#masonryslide .grid-item").each(() -> + file = {} + file.data = $(this).find("img").attr("src") # base64 string + file.relx = $(this).css("left") + file.rely = $(this).css("top") + file.height = $(this).css("height") + file.width = $(this).css("width") + file.x = x + file.x = y + data.push(file) + ) + return data + +jQuery("#pngdownload").click(() -> + data = getFileData() + jQuery.post(ajaxurl, data, (response) -> + window.location.href = response.redirect + ) +) diff --git a/main.css b/main.css new file mode 100644 index 0000000..17fb288 --- /dev/null +++ b/main.css @@ -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; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..dd5929c --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "dependencies": { + "coffee-loader": "^0.9.0", + "coffeescript": "^2.0.2", + "uglifyjs-webpack-plugin": "^1.1.1", + "webpack": "^3.8.1" + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..c4318ff --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,33 @@ +const path = require('path'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); + +module.exports = { + entry: { + js: './js/main.coffee' + }, + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'main.js' + }, + module: { + rules: [ + { + test: /\.coffee$/, + use: [ + { + loader: 'coffee-loader', + options: { + sourceMap: true + } + } + ] + } + ] + }, + plugins: [ + // new UglifyJsPlugin() + ], + resolve: { + extensions: [ '.coffee', '.js' ] + } +};