forked from Public/pics
Initial commit.
This is to be the new HashRU website based on the Aaronweb.net/Kabuki CMS.
This commit is contained in:
38
public/js/ajax.js
Normal file
38
public/js/ajax.js
Normal file
@@ -0,0 +1,38 @@
|
||||
function HttpRequest(method, url, payload, callback, context) {
|
||||
if (!window.XMLHttpRequest) {
|
||||
return;
|
||||
}
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
var async = typeof callback !== 'undefined';
|
||||
|
||||
if (async) {
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (request.responseText !== null && request.status === 200) {
|
||||
var obj = JSON.parse(request.responseText);
|
||||
if (obj.error) {
|
||||
alert(obj.error);
|
||||
return;
|
||||
}
|
||||
else {
|
||||
callback(obj, context);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (method === 'get') {
|
||||
request.open('GET', url, async);
|
||||
request.send(null);
|
||||
} else {
|
||||
request.open('POST', url, async);
|
||||
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
request.send(payload);
|
||||
}
|
||||
|
||||
return request;
|
||||
};
|
||||
178
public/js/autosuggest.js
Normal file
178
public/js/autosuggest.js
Normal file
@@ -0,0 +1,178 @@
|
||||
/*
|
||||
Copyright (c) 2015, Aaron van Geffen
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification, are permitted
|
||||
provided that the following conditions are met:
|
||||
|
||||
- Redistributions of source code must retain the above copyright notice, this list of conditions
|
||||
and the following disclaimer.
|
||||
- Redistributions in binary form must reproduce the above copyright notice, this list of conditions
|
||||
and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function AutoSuggest(opt) {
|
||||
if (typeof opt.inputElement === "undefined" || typeof opt.listElement === "undefined" || typeof opt.baseUrl === "undefined" || typeof opt.appendCallback === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.input = document.getElementById(opt.inputElement);
|
||||
this.input.autocomplete = "off";
|
||||
this.list = document.getElementById(opt.listElement);
|
||||
this.appendCallback = opt.appendCallback;
|
||||
this.baseurl = opt.baseUrl;
|
||||
|
||||
var self = this;
|
||||
this.input.addEventListener('keydown', function(event) {
|
||||
self.doSelection(event);
|
||||
}, false);
|
||||
this.input.addEventListener('keyup', function(event) {
|
||||
self.onType(this, event);
|
||||
}, false);
|
||||
}
|
||||
|
||||
AutoSuggest.prototype.doSelection = function(event) {
|
||||
if (typeof this.container === "undefined" || this.container.children.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.keyCode) {
|
||||
case 13: // Enter
|
||||
event.preventDefault();
|
||||
this.container.children[this.selectedIndex].click();
|
||||
break;
|
||||
|
||||
case 38: // Arrow up
|
||||
case 40: // Arrow down
|
||||
event.preventDefault();
|
||||
this.findSelectedElement().className = '';
|
||||
this.selectedIndex += event.keyCode === 38 ? -1 : 1;
|
||||
if (this.selectedIndex < 0) {
|
||||
this.selectedIndex = this.container.children.length - 1;
|
||||
} else if (this.selectedIndex === this.container.children.length) {
|
||||
this.selectedIndex = 0;
|
||||
}
|
||||
var new_el = this.findSelectedElement().className = 'selected';
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.findSelectedElement = function() {
|
||||
return this.container.children[this.selectedIndex];
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.onType = function(input, event) {
|
||||
if (event.keyCode === 13 || event.keyCode === 38 || event.keyCode === 40) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tokens = input.value.split(/\s+/).filter(function(token) {
|
||||
return token.length >= 3;
|
||||
});
|
||||
|
||||
if (tokens.length === 0) {
|
||||
if (typeof this.container !== "undefined") {
|
||||
this.clearContainer();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
var request_uri = this.baseurl + '/suggest/?type=tags&data=' + window.encodeURIComponent(tokens.join(" "));
|
||||
var request = new HttpRequest('get', request_uri, {}, this.onReceive, this);
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.onReceive = function(response, self) {
|
||||
self.openContainer();
|
||||
self.clearContainer();
|
||||
self.fillContainer(response);
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.openContainer = function() {
|
||||
if (this.container) {
|
||||
if (!this.container.parentNode) {
|
||||
this.input.parentNode.appendChild(this.container);
|
||||
}
|
||||
return this.container;
|
||||
}
|
||||
|
||||
this.container = document.createElement('ul');
|
||||
this.container.className = 'autosuggest';
|
||||
this.input.parentNode.appendChild(this.container);
|
||||
return this.container;
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.clearContainer = function() {
|
||||
while (this.container.children.length > 0) {
|
||||
this.container.removeChild(this.container.children[0]);
|
||||
}
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.clearInput = function() {
|
||||
this.input.value = "";
|
||||
this.input.focus();
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.closeContainer = function() {
|
||||
this.container.parentNode.removeChild(this.container);
|
||||
};
|
||||
|
||||
AutoSuggest.prototype.fillContainer = function(response) {
|
||||
var self = this;
|
||||
this.selectedIndex = 0;
|
||||
response.items.forEach(function(item, i) {
|
||||
var node = document.createElement('li');
|
||||
var text = document.createTextNode(item.label);
|
||||
node.jsondata = item;
|
||||
node.addEventListener('click', function(event) {
|
||||
self.appendCallback(this.jsondata);
|
||||
self.closeContainer();
|
||||
self.clearInput();
|
||||
});
|
||||
node.appendChild(text);
|
||||
self.container.appendChild(node);
|
||||
if (self.container.children.length === 1) {
|
||||
node.className = 'selected';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function TagAutoSuggest(opt) {
|
||||
AutoSuggest.prototype.constructor.call(this, opt);
|
||||
this.type = "tags";
|
||||
}
|
||||
|
||||
TagAutoSuggest.prototype = Object.create(AutoSuggest.prototype);
|
||||
|
||||
TagAutoSuggest.prototype.constructor = TagAutoSuggest;
|
||||
|
||||
TagAutoSuggest.prototype.fillContainer = function(response) {
|
||||
if (response.items.length > 0) {
|
||||
AutoSuggest.prototype.fillContainer.call(this, response);
|
||||
} else {
|
||||
var node = document.createElement('li')
|
||||
node.innerHTML = "<em>Tag does not exist yet. Create it?</em>";
|
||||
|
||||
var self = this;
|
||||
node.addEventListener('click', function(event) {
|
||||
self.createNewTag(function(response) {
|
||||
console.log('Nieuwe tag!!');
|
||||
console.log(response);
|
||||
self.appendCallback(response);
|
||||
});
|
||||
self.closeContainer();
|
||||
self.clearInput();
|
||||
});
|
||||
|
||||
self.container.appendChild(node);
|
||||
this.selectedIndex = 0;
|
||||
node.className = 'selected';
|
||||
}
|
||||
};
|
||||
|
||||
TagAutoSuggest.prototype.createNewTag = function(callback) {
|
||||
var request_uri = this.baseurl + '/managetags/?create';
|
||||
var request = new HttpRequest('post', request_uri, 'tag=' + encodeURIComponent(this.input.value), callback, this);
|
||||
}
|
||||
218
public/js/crop_editor.js
Normal file
218
public/js/crop_editor.js
Normal file
@@ -0,0 +1,218 @@
|
||||
function CropEditor(opt) {
|
||||
this.opt = opt;
|
||||
|
||||
this.edit_crop_button = document.createElement("span");
|
||||
this.edit_crop_button.className = "btn";
|
||||
this.edit_crop_button.innerHTML = "Edit crop";
|
||||
this.edit_crop_button.addEventListener('click', this.show.bind(this));
|
||||
|
||||
this.thumbnail_select = document.getElementById(opt.thumbnail_select_id);
|
||||
this.thumbnail_select.addEventListener('change', this.toggleCropButton.bind(this));
|
||||
this.thumbnail_select.parentNode.insertBefore(this.edit_crop_button, this.thumbnail_select.nextSibling);
|
||||
|
||||
this.toggleCropButton();
|
||||
}
|
||||
|
||||
CropEditor.prototype.buildContainer = function() {
|
||||
this.container = document.createElement("div");
|
||||
this.container.id = "crop_editor";
|
||||
|
||||
this.position = document.createElement("div");
|
||||
this.position.className = "crop_position";
|
||||
this.container.appendChild(this.position);
|
||||
|
||||
var source_x_label = document.createTextNode("Source X:");
|
||||
this.position.appendChild(source_x_label);
|
||||
|
||||
this.source_x = document.createElement("input");
|
||||
this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||
this.position.appendChild(this.source_x);
|
||||
|
||||
var source_y_label = document.createTextNode("Source Y:");
|
||||
this.position.appendChild(source_y_label);
|
||||
|
||||
this.source_y = document.createElement("input");
|
||||
this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||
this.position.appendChild(this.source_y);
|
||||
|
||||
var crop_width_label = document.createTextNode("Crop width:");
|
||||
this.position.appendChild(crop_width_label);
|
||||
|
||||
this.crop_width = document.createElement("input");
|
||||
this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||
this.position.appendChild(this.crop_width);
|
||||
|
||||
var crop_height_label = document.createTextNode("Crop height:");
|
||||
this.position.appendChild(crop_height_label);
|
||||
|
||||
this.crop_height = document.createElement("input");
|
||||
this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this));
|
||||
this.position.appendChild(this.crop_height);
|
||||
|
||||
this.save_button = document.createElement("span");
|
||||
this.save_button.className = "btn";
|
||||
this.save_button.innerHTML = "Save";
|
||||
this.save_button.addEventListener('click', this.save.bind(this));
|
||||
this.position.appendChild(this.save_button);
|
||||
|
||||
this.abort_button = document.createElement("span");
|
||||
this.abort_button.className = "btn btn-red";
|
||||
this.abort_button.innerHTML = "Abort";
|
||||
this.abort_button.addEventListener('click', this.hide.bind(this));
|
||||
this.position.appendChild(this.abort_button);
|
||||
|
||||
this.image_container = document.createElement("div");
|
||||
this.image_container.className = "crop_image_container";
|
||||
this.container.appendChild(this.image_container);
|
||||
|
||||
this.crop_boundary = document.createElement("div");
|
||||
this.crop_boundary.id = "crop_boundary";
|
||||
this.image_container.appendChild(this.crop_boundary);
|
||||
|
||||
this.original_image = document.createElement("img");
|
||||
this.original_image.id = "original_image";
|
||||
this.original_image.src = this.opt.original_image_src;
|
||||
this.image_container.appendChild(this.original_image);
|
||||
|
||||
this.parent = document.getElementById(this.opt.editor_container_parent_id);
|
||||
this.parent.appendChild(this.container);
|
||||
};
|
||||
|
||||
CropEditor.prototype.setInputValues = function() {
|
||||
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
|
||||
|
||||
if (typeof current.crop_region === "undefined") {
|
||||
var source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
|
||||
crop_ratio = current.crop_width / current.crop_height,
|
||||
min_dim = Math.min(this.original_image.naturalWidth, this.original_image.naturalHeight);
|
||||
|
||||
// Cropping from the centre?
|
||||
if (current.crop_method === "c") {
|
||||
// Crop vertically from the centre, using the entire width.
|
||||
if (source_ratio < crop_ratio) {
|
||||
this.crop_width.value = this.original_image.naturalWidth;
|
||||
this.crop_height.value = Math.ceil(this.original_image.naturalWidth / crop_ratio);
|
||||
this.source_x.value = 0;
|
||||
this.source_y.value = Math.ceil((this.original_image.naturalHeight - this.crop_height.value) / 2);
|
||||
}
|
||||
// Crop horizontally from the centre, using the entire height.
|
||||
else {
|
||||
this.crop_width.value = Math.ceil(current.crop_width * this.original_image.naturalHeight / current.crop_height);
|
||||
this.crop_height.value = this.original_image.naturalHeight;
|
||||
this.source_x.value = Math.ceil((this.original_image.naturalWidth - this.crop_width.value) / 2);
|
||||
this.source_y.value = 0;
|
||||
}
|
||||
}
|
||||
// Cropping a top or bottom slice?
|
||||
else {
|
||||
// Can we actually take a top or bottom slice from the original image?
|
||||
if (source_ratio < crop_ratio) {
|
||||
this.crop_width.value = this.original_image.naturalWidth;
|
||||
this.crop_height.value = Math.floor(this.original_image.naturalHeight / crop_ratio);
|
||||
this.source_x.value = "0";
|
||||
this.source_y.value = current.crop_method.indexOf("t") !== -1 ? "0" : this.original_image.naturalHeight - this.crop_height.value;
|
||||
}
|
||||
// Otherwise, take a vertical slice from the centre.
|
||||
else {
|
||||
this.crop_width.value = Math.floor(this.original_image.naturalHeight * crop_ratio);
|
||||
this.crop_height.value = this.original_image.naturalHeight;
|
||||
this.source_x.value = Math.floor((this.original_image.naturalWidth - this.crop_width.value) / 2);
|
||||
this.source_y.value = "0";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var region = current.crop_region.split(',');
|
||||
this.crop_width.value = region[0];
|
||||
this.crop_height.value = region[1];
|
||||
this.source_x.value = region[2];
|
||||
this.source_y.value = region[3];
|
||||
}
|
||||
};
|
||||
|
||||
CropEditor.prototype.showContainer = function() {
|
||||
this.container.style.display = "block";
|
||||
this.setInputValues();
|
||||
this.positionBoundary();
|
||||
}
|
||||
|
||||
CropEditor.prototype.save = function() {
|
||||
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
|
||||
var payload = {
|
||||
thumb_width: current.crop_width,
|
||||
thumb_height: current.crop_height,
|
||||
crop_method: current.crop_method,
|
||||
crop_width: this.crop_width.value,
|
||||
crop_height: this.crop_height.value,
|
||||
source_x: this.source_x.value,
|
||||
source_y: this.source_y.value
|
||||
};
|
||||
var req = HttpRequest("post", this.parent.action + "?id=" + this.opt.asset_id + "&updatethumb",
|
||||
"data=" + encodeURIComponent(JSON.stringify(payload)), function(response) {
|
||||
this.opt.after_save(response);
|
||||
this.hide();
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
CropEditor.prototype.show = function() {
|
||||
if (typeof this.container === "undefined") {
|
||||
this.buildContainer();
|
||||
}
|
||||
|
||||
// Defer showing and positioning until image is loaded.
|
||||
// !!! TODO: add a spinner in the mean time?
|
||||
if (this.original_image.naturalWidth > 0) {
|
||||
this.showContainer();
|
||||
} else {
|
||||
this.original_image.addEventListener("load", function() {
|
||||
this.showContainer();
|
||||
}.bind(this));
|
||||
}
|
||||
};
|
||||
|
||||
CropEditor.prototype.hide = function() {
|
||||
this.container.style.display = "none";
|
||||
};
|
||||
|
||||
CropEditor.prototype.addEvents = function(event) {
|
||||
var drag_target = document.getElementById(opt.drag_target);
|
||||
drag_target.addEventListener('dragstart', this.dragStart);
|
||||
drag_target.addEventListener('drag', this.drag);
|
||||
drag_target.addEventListener('dragend', this.dragEnd);
|
||||
};
|
||||
|
||||
CropEditor.prototype.dragStart = function(event) {
|
||||
console.log(event);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
CropEditor.prototype.dragEnd = function(event) {
|
||||
console.log(event);
|
||||
};
|
||||
|
||||
CropEditor.prototype.drag = function(event) {
|
||||
console.log(event);
|
||||
};
|
||||
|
||||
CropEditor.prototype.toggleCropButton = function() {
|
||||
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
|
||||
this.edit_crop_button.style.display = typeof current.crop_method === "undefined" ? "none" : "";
|
||||
};
|
||||
|
||||
CropEditor.prototype.positionBoundary = function(event) {
|
||||
var source_x = parseInt(this.source_x.value),
|
||||
source_y = parseInt(this.source_y.value),
|
||||
crop_width = parseInt(this.crop_width.value),
|
||||
crop_height = parseInt(this.crop_height.value),
|
||||
real_width = this.original_image.naturalWidth,
|
||||
real_height = this.original_image.naturalHeight,
|
||||
scaled_width = this.original_image.clientWidth,
|
||||
scaled_height = this.original_image.clientHeight;
|
||||
|
||||
var width_scale = scaled_width / real_width,
|
||||
height_scale = scaled_height / real_height;
|
||||
|
||||
crop_boundary.style.left = (this.source_x.value) * width_scale + "px";
|
||||
crop_boundary.style.top = (this.source_y.value) * height_scale + "px";
|
||||
crop_boundary.style.width = (this.crop_width.value) * width_scale + "px";
|
||||
crop_boundary.style.height = (this.crop_height.value) * height_scale + "px";
|
||||
};
|
||||
Reference in New Issue
Block a user