initial commit
This commit is contained in:
commit
010aa553ad
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/dist
|
||||
/vendor
|
||||
/composer.lock
|
||||
/node_modules
|
||||
21
index.html
Normal file
21
index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<html>
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<body>
|
||||
<h1>New slide</h1>
|
||||
<h3>Choose files</h3>
|
||||
<p><input id="masonryslide-files" type="file" multiple="multiple" accept="image/*"></p>
|
||||
<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">
|
||||
<div id="masonryslide"></div>
|
||||
<p class="clear">
|
||||
<button id="pngdownload">Download as PNG</button>
|
||||
</p>
|
||||
</div>
|
||||
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
|
||||
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js'></script>
|
||||
<script defer src='dist/main.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
62
js/main.coffee
Normal file
62
js/main.coffee
Normal file
|
|
@ -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("<div class='grid-item'></div>")
|
||||
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
|
||||
)
|
||||
)
|
||||
25
main.css
Normal file
25
main.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
8
package.json
Normal file
8
package.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"coffee-loader": "^0.9.0",
|
||||
"coffeescript": "^2.0.2",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"webpack": "^3.8.1"
|
||||
}
|
||||
}
|
||||
33
webpack.config.js
Normal file
33
webpack.config.js
Normal file
|
|
@ -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' ]
|
||||
}
|
||||
};
|
||||
Loading…
Reference in a new issue