Hitskin.com
here is the image upload script for MYBB on IMGUR. can it be redone for forumotion?
- Code:
$(document).ready(function() {
// loading styles
$('<link>').appendTo('head').attr({
type: 'text/css',
rel: 'stylesheet',
href: '/files/0018/14/a0/44968.css'
});
$('<div class="dropzone"><input class="button" type="button" value="Загрузить на Imgur.com">').appendTo('#imageupload-left');
$('#image_upload .button').val('Загрузить на Uploads.ru');
/*! imgur 2.0.4 | (c) 2016 Pedro Rog?:copyright:rio | MIT License */
! function(a, b) {
"use strict";
"function" == typeof define && define.amd ? define([], b) : "object" == typeof exports ? module.exports = b() : a.Imgur = b()
}(this, function() {
"use strict";
var a = function(b) {
if (!(this && this instanceof a)) return new a(b);
if (b || (b = {}), !b.clientid) throw "Provide a valid Client Id here: http://api.imgur.com/";
this.clientid = b.clientid, this.endpoint = "https://api.imgur.com/3/image", this.callback = b.callback || void 0, this.dropzone = document.querySelectorAll(".dropzone"), this.run()
};
return a.prototype = {
createEls: function(a, b, c) {
var d, e = document.createElement(a);
for (d in b) b.hasOwnProperty(d) && (e[d] = b[d]);
return c && e.appendChild(document.createTextNode(c)), e
},
insertAfter: function(a, b) {
a.parentNode.insertBefore(b, a.nextSibling)
},
post: function(a, b, c) {
var d = new XMLHttpRequest;
d.open("POST", a, !0), d.setRequestHeader("Authorization", "Client-ID " + this.clientid), d.onreadystatechange = function() {
if (4 === this.readyState) {
if (!(this.status >= 200 && this.status < 300)) throw new Error(this.status + " - " + this.statusText);
var a = "";
try {
a = JSON.parse(this.responseText)
} catch (b) {
a = this.responseText
}
c.call(window, a)
}
}, d.send(b), d = null
},
createDragZone: function() {
var b;
b = this.createEls("input", {
type: "file",
accept: "image/*"
}), Array.prototype.forEach.call(this.dropzone, function(c) {
c.appendChild(b), this.status(c), this.upload(c)
}.bind(this))
},
loading: function() {
var a, b;
a = this.createEls("div", {
className: "loading-modal"
}), b = this.createEls("img", {
className: "loading-image",
src: "/files/0018/14/a0/56875.svg"
}), a.appendChild(b), document.getElementById('image-area-tcon-computer').appendChild(a)
},
status: function(a) {
var b = this.createEls("div", {
className: "status"
});
this.insertAfter(a, b)
},
matchFiles: function(a, b) {
var c = b.nextSibling;
if (a.type.match(/image/) && "image/svg+xml" !== a.type) {
document.body.classList.add("busy"), c.classList.remove("bg-success", "bg-danger"), c.innerHTML = "";
var d = new FormData;
d.append("image", a), this.post(this.endpoint, d, function(a) {
document.body.classList.remove("busy"), "function" == typeof this.callback && this.callback.call(this, a)
}.bind(this))
} else c.classList.remove("bg-success"), c.classList.add("bg-danger"), c.innerHTML = "Invalid archive"
},
upload: function(a) {
var b, c, d, e, f = ["dragenter", "dragleave", "dragover", "drop"];
a.addEventListener("change", function(f) {
if (f.target && "INPUT" === f.target.nodeName && "file" === f.target.type)
for (c = f.target.files, d = 0, e = c.length; e > d; d += 1) b = c[d], this.matchFiles(b, a)
}.bind(this), !1), f.map(function(b) {
a.addEventListener(b, function(a) {
a.target && "INPUT" === a.target.nodeName && "file" === a.target.type && ("dragleave" === b || "drop" === b ? a.target.parentNode.classList.remove("dropzone-dragging") : a.target.parentNode.classList.add("dropzone-dragging"))
}, !1)
})
},
run: function() {
var a = document.querySelector(".loading-modal");
a || this.loading(), this.createDragZone()
}
}, a
});
var feedback = function(res) {
if (res.success === true) {
var s = res.data.link.replace(/(\.[^\.]+)$/, 's$1');
var m = res.data.link.replace(/(\.[^\.]+)$/, 'm$1');
function typeInTextarea(el, newText) {
var start = el.prop("selectionStart")
var end = el.prop("selectionEnd")
var text = el.val()
var before = text.substring(0, start)
var after = text.substring(end, text.length)
el.val(before + newText + after)
el[0].selectionStart = el[0].selectionEnd = start + newText.length
el.focus()
return false
}
$('<div id="image-insert-format" class="imgur"><strong>Вставить как:</strong><br><select id="imgur-option" class="imgur"><option value=\'1\'>Превью</option><option value=\'2\' selected>Оригинал</option></select></div>').appendTo('#imageupload-left');
$('<div id="load-image-container" class="imgur"><img class="imgur-preview" src="' + s + '" original-title="Вставить"></div><div id="insert-image-tip" class="imgur"><span>Нажмите на изображение, чтобы вставить в форму.</span></div>').appendTo('#imageupload-right');
$('<a id="action-insert-textarea" class="imgur">Вставить</a><a id="action-clean-uploaded" class="imgur">Очистить</a><a id="action-delete-image" class="imgur">Удалить файл</a>').prependTo('#image-area-actions');
$("#action-delete-image.imgur").click(function() {
if (confirm("Вы действительно хотите удалить загруженный файл с сервера?")) {
$.ajax({
url: 'https://api.imgur.com/3/image/' + res.data.deletehash,
type: 'DELETE',
headers: {
"Authorization": "Client-ID cc86a8de0e7c459"
},
success: function(result) {
$('#image-insert-format.imgur, #load-image-container.imgur, #insert-image-tip.imgur, #action-insert-textarea.imgur, #action-delete-image.imgur, #action-clean-uploaded.imgur').remove();
}
});
}
});
$("#action-insert-textarea.imgur, .imgur-preview").click(function() {
$("#image-area").hide();
var option = $("#imgur-option.imgur").val();
if (option == 1) {
typeInTextarea($("#main-reply"), '[url="' + res.data.link + '"][img]' + m + '[/img][/url]');
} else if (option == 2) {
typeInTextarea($("#main-reply"), '[img]' + res.data.link + '[/img]');
}
});
$("#image_upload .button,.dropzone,#action-clean-uploaded.imgur, #action-return, #action-insert-textarea").click(function() {
$('#image-insert-format.imgur, #load-image-container.imgur, #insert-image-tip.imgur, #action-insert-textarea.imgur, #action-delete-image.imgur, #action-clean-uploaded.imgur').remove();
});
$("#action-insert-textarea, #action-clean-uploaded.imgur, #action-delete-image.imgur").click(function() {
$('#image_upload .button').css({
"opacity": "1",
"cursor": "pointer"
}).prop("disabled", false);
});
}
};
$(".dropzone, #action-return, #action-insert-uploaded").click(function() {
$('#uploaded-images').empty().hide();
$('#image-insert-format,#insert-all-images-container,#insert-image-tip').hide();
$('#action-insert-uploaded,#action-clean-uploaded,#action-drop-files').hide();
$('#load-image-container,#imageQueue,#upload-button-container').hide();
$('#image-width,#image-thumb-width').hide();
$('#image_upload .button').css({
"opacity": "0.5",
"cursor": "not-allowed"
}).prop("disabled", true);
});
$('#image_upload .button').click(function() {
$('.dropzone').css({
"opacity": "0.5"
});
$('.dropzone input[type="file"]').css({
"cursor": "not-allowed"
}).prop("disabled", true);
});
$('#action-return, #action-insert-uploaded, #action-clean-uploaded, #action-drop-files').click(function() {
$('#image_upload .button').css({
"opacity": "1",
"cursor": "pointer"
}).prop("disabled", false);
$('.dropzone').css({
"opacity": "1"
});
$('.dropzone input[type="file"]').css({
"cursor": "pointer"
}).prop("disabled", false);
});
new Imgur({
clientid: 'cc86a8de0e7c459',
callback: feedback
});
});
Facebook
Twitter
Pinterest
Youtube
