1789 lines
50 KiB
JavaScript
1789 lines
50 KiB
JavaScript
var ARTICLE_ID = 0;
|
|
var BASE_URL = "http://edgwareroad.org/edit/"
|
|
var edgeArticle = window.edgeArticle = [];
|
|
|
|
var loadArticle = function(id) {
|
|
|
|
// console.log("load article fired");
|
|
$.getJSON("/edit/article/json/", {
|
|
'id': id
|
|
}, function(json) {
|
|
// console.log(json);
|
|
for (var i=0; i < json.length; i++) {
|
|
new Canvas({}, json[i]);
|
|
}
|
|
startPoller();
|
|
});
|
|
}
|
|
|
|
//is used by the poller to call itself 1 second in the future. not sure why im doing this. FIXME: function name at least?
|
|
function delayedRecursion(time) {
|
|
// console.log("delayed recursion called" + time);
|
|
POLLER = setTimeout(startPoller, time);
|
|
}
|
|
|
|
|
|
function startPoller() {
|
|
// console.log("poller called");
|
|
$.getJSON("/edit/poll_changes/", {
|
|
'article_id': ARTICLE_ID,
|
|
'rev_no': REVISION_NO,
|
|
'uuid': UUID
|
|
}, function(data) {
|
|
if (data.ok == 'ok') {
|
|
delayedRecursion(1000);
|
|
} else {
|
|
REVISION_NO = data.rev_id;
|
|
clearTimeout(POLLER);
|
|
delayedRecursion(1000);
|
|
var arr = data.revs;
|
|
for (var a in arr) {
|
|
if (arr.hasOwnProperty(a)) {
|
|
handleRevision(arr[a]);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function addHistoryObject(data) {
|
|
var e = $('<div />').addClass("historyItem").data("data", data).hide();
|
|
var userHtml = "edit by <span class='historyUsername'>" + data.username + "</span>";
|
|
var userLine = $('<div />').addClass("historyUser").html(userHtml).appendTo(e);
|
|
$('.historyItems').prepend(e);
|
|
e.fadeIn();
|
|
}
|
|
|
|
$('.historyUser').live("click", function() {
|
|
var parent = $(this).parent();
|
|
if (parent.children('.historyData').length > 0 && parent.children('.historyData').is(":visible")) {
|
|
parent.children(".historyData").slideUp();
|
|
} else {
|
|
var data = parent.data('data');
|
|
data['page_no'] = getCanvasById(data.page_id).index + 1;
|
|
var html = tmpl("tmpl_historyData", data);
|
|
$('<div />').addClass('historyData').html(html).hide().appendTo(parent).slideDown();
|
|
}
|
|
});
|
|
|
|
//Refer to editor/models.py -> Revisions
|
|
function handleRevision(json) {
|
|
// console.log(json);
|
|
var canvas = json.prop == 'new_page' ? {} : getCanvasById(json.page_id);
|
|
addHistoryObject(json);
|
|
switch (json.prop) {
|
|
|
|
case "new_page":
|
|
var j = JSON.parse(json.new_val);
|
|
new Canvas({}, j);
|
|
break;
|
|
|
|
case "move_page":
|
|
var page_id = json.box_id;
|
|
var c = getCanvasById(page_id);
|
|
c.movePage(json.new_val - 1, true);
|
|
break;
|
|
|
|
case "delete_page":
|
|
var c = getCanvasById(json.new_val);
|
|
c.deleteme(true);
|
|
break;
|
|
|
|
case "new_box":
|
|
if (json.box_type == 'image') {
|
|
var j = JSON.parse(json.new_val);
|
|
new ImageBox(canvas, j.resource, j);
|
|
break;
|
|
}
|
|
else if (json.box_type == 'text') {
|
|
var j = JSON.parse(json.new_val);
|
|
new TextBox(canvas, j);
|
|
break;
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
|
|
case "delete_box":
|
|
var box = canvas.getBox(json);
|
|
box.jq.hide().remove();
|
|
break;
|
|
|
|
case "image_resize":
|
|
var box = canvas.getBox(json);
|
|
var img = JSON.parse(json.new_val);
|
|
box.resize({'width': img.width, 'height': img.height}, false);
|
|
box.jq.find("img").attr("src", img.path);
|
|
break;
|
|
|
|
case "image_crop":
|
|
var box = canvas.getBox(json);
|
|
var img = JSON.parse(json.new_val);
|
|
box.resize({'width': img.width, 'height': img.height}, false);
|
|
box.jq.find('.edgeImage').attr("src", img.path);
|
|
break;
|
|
|
|
default:
|
|
var box = canvas.getBox(json);
|
|
if (json.prop == 'html') {
|
|
box.jq.find('.textbox_canvas_content').html(json.new_val);
|
|
} else {
|
|
var d = {};
|
|
var noPxArr = ['opacity', 'z-index', 'background', 'border-color', 'border-style'];
|
|
if ($.inArray(noPxArr, json.prop)) {
|
|
var val = json.new_val;
|
|
} else {
|
|
var val = toPx(json.new_val);
|
|
}
|
|
d[json.prop] = val;
|
|
//dont try and animate properties like 'transparent', it will fail.
|
|
if (d[json.prop] == 'transparent' || json.old_val == 'transparent') {
|
|
box.jq.css(d);
|
|
} else {
|
|
box.jq.animate(d, "fast");
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
if ($.browser.msie) {
|
|
alert("Sorry, this does not currently work in Internet Explorer.");
|
|
window.location.href = "/";
|
|
return false;
|
|
}
|
|
|
|
if (ARTICLE_ID != 0) {
|
|
loadArticle(ARTICLE_ID);
|
|
} else {
|
|
c = new Canvas();
|
|
}
|
|
|
|
/*
|
|
edgeCanvas = new Canvas();
|
|
edgeBin = new Bin();
|
|
$('#newTextBox').click(function() {
|
|
var index = edgeCanvas.textBoxes.length;
|
|
var t = new TextBox(index, edgeCanvas);
|
|
t.create();
|
|
});
|
|
*/
|
|
|
|
$('.newTextBox').tooltip();
|
|
|
|
$('#newPage').click(function(e) {
|
|
e.preventDefault();
|
|
c = new Canvas();
|
|
});
|
|
|
|
$('.prevPage').click(function() {
|
|
edgeBin.prevPage();
|
|
});
|
|
|
|
$('.nextPage').click(function() {
|
|
edgeBin.nextPage();
|
|
});
|
|
|
|
$('.searchBin').keyup(function() {
|
|
edgeBin.searchString($(this).val());
|
|
});
|
|
|
|
});
|
|
|
|
function getCanvasById(id) {
|
|
for (var e in edgeArticle) {
|
|
if (edgeArticle.hasOwnProperty(e)) {
|
|
if (edgeArticle[e].id == id) {
|
|
return edgeArticle[e];
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var Canvas = function(opts, json) {
|
|
var that = this;
|
|
var defaults = {
|
|
'index': edgeArticle.length,
|
|
'id': 0,
|
|
'height': ARTICLE_HEIGHT,
|
|
'width': ARTICLE_WIDTH,
|
|
'parentID': 'canvasContainer'
|
|
}
|
|
var o = $.extend(defaults, opts);
|
|
if (typeof json != 'undefined') {
|
|
o.id = json.id;
|
|
}
|
|
this.index = o.index;
|
|
this.parent = $('#' + o.parentID);
|
|
|
|
if (o.id == 0) {
|
|
$.getJSON("/edit/new_page/", {
|
|
'article_id': ARTICLE_ID,
|
|
'uuid': UUID
|
|
}, function(data) {
|
|
that.id = data.id;
|
|
});
|
|
} else {
|
|
this.id = o.id;
|
|
}
|
|
|
|
var that = this;
|
|
this.textBoxes = [];
|
|
this.imageBoxes = [];
|
|
this.jq = { };
|
|
this.height = o.height;
|
|
this.width = o.width;
|
|
edgeArticle.push(that);
|
|
this.init();
|
|
if (typeof json != 'undefined') {
|
|
this.loadFromJSON(json);
|
|
} else {
|
|
}
|
|
return this;
|
|
|
|
}
|
|
|
|
Canvas.prototype.getBox = function(json) {
|
|
if (json.box_type == 'image') {
|
|
for (var i in this.imageBoxes) {
|
|
if (this.imageBoxes.hasOwnProperty(i)) {
|
|
if (this.imageBoxes[i].id == json.box_id) {
|
|
return this.imageBoxes[i];
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
} else {
|
|
for (var t in this.textBoxes) {
|
|
if (this.textBoxes.hasOwnProperty(t)) {
|
|
if (this.textBoxes[t].id == json.box_id) {
|
|
return this.textBoxes[t];
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
Canvas.prototype.init = function() {
|
|
var that = this;
|
|
var heightPx = toPx(that.height);
|
|
var widthPx = toPx(that.width);
|
|
var json = {
|
|
'index': that.index
|
|
}
|
|
var html = tmpl("tmpl_canvas", json);
|
|
this.parent.append(html);
|
|
this.jq = $('#' + 'canvas' + that.index.toString());
|
|
this.jq.css({'height': heightPx, 'width': widthPx});
|
|
this.jq.find('.ruler_vert').draggable({
|
|
snap: '.box',
|
|
containment: 'parent',
|
|
axis: 'x'
|
|
});
|
|
this.jq.find('.ruler_horiz').draggable({
|
|
snap: '.box',
|
|
containment: 'parent',
|
|
axis: 'y'
|
|
});
|
|
this.jq.droppable({accept:'.resource, .newTextBox',
|
|
drop: function(ev, ui) {
|
|
var box = $(this).getBox().jq;
|
|
c = edgeArticle[$(this).attr('data-index')];
|
|
if ($(ui.draggable).attr('class') == 'resource ui-draggable') {
|
|
r = edgeBin.allResources[$(ui.draggable).attr("data-index")];
|
|
if (r.mime == 'image') {
|
|
var top = $(this).position().top;
|
|
var left = $(this).position().left;
|
|
var height = parseInt(r.height) / 2;
|
|
// console.log("heightFOO: " + height);
|
|
var width = parseInt(r.width) / 2;
|
|
highest_index = getHighestIndex(c.jq);
|
|
new_index = parseInt(highest_index) + 1;
|
|
// console.log('index: ' + new_index);
|
|
i = new ImageBox(c, r, {css: {'z-index': "" + new_index, 'top':toPx((ev.pageY - top) - height), 'left': toPx((ev.pageX - left) - width)}});
|
|
} else if (r.mime == 'audio' || r.mime == 'video') {
|
|
that.addMedia(r);
|
|
}
|
|
|
|
} else {
|
|
var elem = $(ui.draggable);
|
|
var top = $(this).position().top;
|
|
var left = $(this).position().left;
|
|
if (elem.hasClass('arabic')) {
|
|
t = new TextBox(c, {'html': '<p class="textbox_canvas_text">انقر على مربع التحرير</p>', 'css': {'direction': 'rtl'}});
|
|
} else {
|
|
t = new TextBox(c);
|
|
}
|
|
width = parseInt(t.jq.css('width') / 2);
|
|
height = parseInt(t.jq.css('height') / 2);
|
|
t.setCSS({'top':toPx((ev.pageY - top) - height), 'left': toPx((ev.pageX - left) - width)});
|
|
highest_index = getHighestIndex(c.jq);
|
|
new_index = parseInt(highest_index) + 1;
|
|
t.setCSS({'z-index': new_index});
|
|
}
|
|
// console.log('dropper');
|
|
}
|
|
});
|
|
return this;
|
|
}
|
|
|
|
Canvas.prototype.addMedia = function(resource) {
|
|
var that = this;
|
|
$.getJSON("/edit/add_media/", {
|
|
resource_id: resource.id,
|
|
page_id: that.id
|
|
}, function(response) {
|
|
that.addMediaIcon(resource);
|
|
});
|
|
}
|
|
|
|
Canvas.prototype.addMediaIcon = function(resource) {
|
|
var typ = resource.mime;
|
|
var media_box = this.jq.find('.audio_video');
|
|
$('<img />').addClass('media_icon').addClass(typ + '_icon').attr("src", "/static/images/icons/" + typ + ".png").attr("title", resource.title).data("resource", resource).appendTo(media_box);
|
|
}
|
|
|
|
Canvas.prototype.loadFromJSON = function(json) {
|
|
// alert(JSON.stringify(json));
|
|
// GLOBALFOO = json;
|
|
var imageBoxes = json.imageBoxes;
|
|
var textBoxes = json.textBoxes;
|
|
var videos = json.videos;
|
|
var audios = json.audios;
|
|
// alert(audios.length);
|
|
var that = this;
|
|
for (var i=0; i < imageBoxes.length; i++) {
|
|
var resource = imageBoxes[i].resource;
|
|
var b = new ImageBox(that, resource, imageBoxes[i]);
|
|
// that.imageBoxes.append(b);
|
|
}
|
|
for (var t=0; t < textBoxes.length; t++) {
|
|
var b = new TextBox(that, textBoxes[t]);
|
|
// that.textBoxes.append(b);
|
|
}
|
|
for (var v=0; v < videos.length; v++) {
|
|
var video = videos[v];
|
|
that.addMediaIcon(video);
|
|
}
|
|
for (var a=0; a < audios.length; a++) {
|
|
var audio = audios[a];
|
|
that.addMediaIcon(audio);
|
|
}
|
|
}
|
|
|
|
Canvas.prototype.toObj = function() {
|
|
var that = this;
|
|
var obj = {
|
|
'imageBoxes': that.imageBoxes,
|
|
'textBoxes': that.textBoxes,
|
|
}
|
|
return obj;
|
|
// console.log(json);
|
|
}
|
|
|
|
//this function is not used. FIXME: remove
|
|
Canvas.prototype.save = function() {
|
|
var that = this;
|
|
var url = "/editor/canvas/save/";
|
|
$.getJSON(url, {
|
|
json: JSON.stringify(that.toObj()),
|
|
id: that.id
|
|
}, function() {
|
|
alert("saved");
|
|
});
|
|
}
|
|
|
|
Canvas.prototype.appendBox = function(box) {
|
|
this.jq.append(box.jq);
|
|
if (box instanceof TextBox) {
|
|
this.textBoxes.push(box);
|
|
} else if (box instanceof ImageBox) {
|
|
this.imageBoxes.push(box);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
Canvas.prototype.movePage = function(newOrder, dontSave) {
|
|
var that = this;
|
|
if (typeof(dontSave) === 'undefined') {
|
|
dontSave = false;
|
|
}
|
|
var currentIndex = this.jq.index('.canvas');
|
|
if (newOrder == 0) {
|
|
this.jq.remove().insertBefore($('.canvas').eq(0));
|
|
} else if (newOrder < currentIndex) {
|
|
var prevCanvas = $('.canvas').eq(newOrder - 1);
|
|
this.jq.remove().insertAfter(prevCanvas);
|
|
} else {
|
|
var prevCanvas = $('.canvas').eq(newOrder);
|
|
this.jq.remove().insertAfter(prevCanvas);
|
|
}
|
|
reorderEdgeArticle();
|
|
if (!dontSave) {
|
|
var url = "/edit/move_page/";
|
|
$.getJSON(url, {
|
|
'id': that.id,
|
|
'new_order': newOrder + 1,
|
|
'uuid': UUID
|
|
}, function(response) {
|
|
// console.log(response);
|
|
});
|
|
}
|
|
}
|
|
|
|
Canvas.prototype.deleteme = function(dontSave) {
|
|
var that = this;
|
|
this.jq.remove();
|
|
edgeArticle.splice(that.index,1);
|
|
reorderEdgeArticle();
|
|
if (typeof(dontSave) == 'undefined') {
|
|
dontSave = false;
|
|
}
|
|
if (!dontSave) {
|
|
var url = "/edit/delete_page/";
|
|
$.getJSON(url, {
|
|
'id': that.id
|
|
}, function(response) {
|
|
// console.log(response);
|
|
});
|
|
}
|
|
}
|
|
|
|
function reorderEdgeArticle() {
|
|
edgeArticle.sort(function(a,b) {
|
|
var aIndex = a.jq.index('.canvas');
|
|
var bIndex = b.jq.index('.canvas');
|
|
return aIndex - bIndex;
|
|
});
|
|
$('.canvas').each(function() {
|
|
var thisIndex = $(this).index('.canvas');
|
|
$(this).attr("data-index", thisIndex);
|
|
var c = $(this).children().eq(0).getCanvas();
|
|
c.index = thisIndex;
|
|
});
|
|
}
|
|
|
|
function getHighestIndex(canvas) {
|
|
page_boxes = canvas.find('.box');
|
|
if (page_boxes.length == 0) {
|
|
return 0;
|
|
} else {
|
|
page_boxes = $(page_boxes).sort(compareZIndex);
|
|
highest = $(page_boxes[0]).css('z-index');
|
|
return highest;
|
|
}
|
|
|
|
}
|
|
|
|
function getLowestIndex(canvas) {
|
|
page_boxes = canvas.find('.box');
|
|
page_boxes = $(page_boxes).sort(compareZIndex);
|
|
length = page_boxes.length - 1;
|
|
lowest = $(page_boxes[length]).css('z-index');
|
|
return lowest;
|
|
}
|
|
|
|
|
|
function reSortBoxes (canvas) {
|
|
var page_boxes = canvas.find('.box');
|
|
page_boxes = $(page_boxes).sort(compareZIndex);
|
|
// console.log(page_boxes);
|
|
for (var i=0; i < page_boxes.length; i++) {
|
|
var boxObj = $(page_boxes[i]).find('*').getBox();
|
|
boxObj.setCSS({'z-index': page_boxes.length - i});
|
|
}
|
|
}
|
|
|
|
function compareZIndex(a, b) {
|
|
return parseInt($(b).css('z-index')) - parseInt($(a).css('z-index'));
|
|
// console.log('gjugg');
|
|
// console.log($(b).css('z-index'));
|
|
// console.log('mugg');
|
|
}
|
|
|
|
/*
|
|
|
|
>>> t = new TextBox(0); t.index;
|
|
0
|
|
|
|
@constructor
|
|
@class TextBox TextBox class
|
|
@property {Int} id Id of the box in the back-end. If the id is set to 0, it calls the db and sets the id in the create() method.
|
|
@property {String} html The raw html of the contents of the text box.
|
|
@property {Object} css Key value pairs representing the css for the text box.
|
|
@property {Object} resource The resource in the database this box is based on. For text-boxes, it is not really used, but may be good to have anyway.
|
|
@property {jQuery Object} jq Object representing text box on page. So you can do things like t.jq.css({'background', '#000'}); to change the background color of TextBox t to black.
|
|
*/
|
|
var TextBox = function(canvas, json, index) {
|
|
this.index = index || canvas.textBoxes.length;
|
|
this.id = 0;
|
|
this.html = '';
|
|
this.css = { };
|
|
this.resource = { };
|
|
this.jq = {};
|
|
this.canvas = canvas;
|
|
this.create(json);
|
|
};
|
|
|
|
|
|
/*
|
|
Call this function to create a new Text Box - if passed json, the TextBox is instantiated from the JSON, else it uses defaults.
|
|
>>> t.create(); t.jq.length == 1;
|
|
true
|
|
*/
|
|
|
|
TextBox.prototype.create = function(json) {
|
|
var that = this;
|
|
var defaults = {
|
|
'id': 0,
|
|
'html': '<p class="textbox_canvas_text">Click to edit textbox</p>',
|
|
'resource_id': 0,
|
|
'css': {
|
|
'direction': 'ltr',
|
|
'height': '300px',
|
|
'width': '300px',
|
|
'background-color': '#ffffff',
|
|
'border-style': 'dotted',
|
|
'border-width': '1px',
|
|
'border-color': '#000000',
|
|
'top': '100px',
|
|
'left': '100px',
|
|
'padding-top': '0px',
|
|
'padding-left': '0px',
|
|
'padding-right': '0px',
|
|
'padding-bottom': '0px',
|
|
'opacity': '1',
|
|
'z-index': '1',
|
|
'border-radius': '0px'
|
|
}
|
|
};
|
|
|
|
var opts = $.extend(true, defaults, json);
|
|
// console.log(opts);
|
|
this.id = opts.id;
|
|
this.html = opts.html;
|
|
this.css = opts.css;
|
|
if (this.id == 0) {
|
|
// Create new TextBox in db:
|
|
var optsString = JSON.stringify(opts);
|
|
// console.log(this.id);
|
|
$.getJSON("/edit/textbox/new/", {'json': optsString, 'page_id': that.canvas.id, 'uuid': UUID}, function(response) {
|
|
var id = response.id;
|
|
that.id = id;
|
|
that.jq.attr("data-id", id);
|
|
// REVISION_NO = response.rev_id;
|
|
});
|
|
}
|
|
var elem = this.init();
|
|
this.jq = elem;
|
|
this.canvas.appendBox(that);
|
|
|
|
// edgeCanvas.textBoxes.push(this)
|
|
};
|
|
|
|
/*
|
|
This method is called by create(); it should generally not be called from the outside. Here is where the actual element is created and event handlers added.
|
|
|
|
>>> t.init(); t.jq.attr("data-index");
|
|
0
|
|
*/
|
|
TextBox.prototype.init = function() {
|
|
var that = this;
|
|
var e = $('<div />');
|
|
e.html(tmpl('tmpl_textbox', {'html': that.html})).attr("data-id", that.id).attr("data-index", that.index).css(that.css).addClass("box").addClass("textBox");
|
|
/* Workaround for strange webkit behaviour */
|
|
|
|
if (e.css("position") == "relative" || e.css("position") == '') {
|
|
e.css("position", "absolute");
|
|
}
|
|
// console.log(e.css("position"));
|
|
// GLOB = e.css("position");
|
|
// e.append($('<div />').addClass("boxText"));
|
|
e.draggable({
|
|
snap: '.box, .ruler',
|
|
snapMode: 'outer',
|
|
containment: 'parent',
|
|
stop: function(event, ui) {
|
|
var top = parseInt($(this).position().top).toString();
|
|
var left = parseInt($(this).position().left).toString();
|
|
that.setCSS({'top': top, 'left': left});
|
|
/*
|
|
var id = $(this).attr("data-id");
|
|
var css = {
|
|
'id': id,
|
|
'top': top,
|
|
'left': left
|
|
}
|
|
$.get(url, css, function(response) { });
|
|
var i = parseInt($(this).attr("data-index"));
|
|
*/
|
|
// var thisBox = edgeCanvas.textBoxes[i];
|
|
// thisBox.updateCSS(css);
|
|
}
|
|
}).resizable({
|
|
// containment: '#' + that.canvas.jq.attr("id"),
|
|
containment: that.canvas.jq,
|
|
handles: 'nw, ne, se, sw, n, s, w, e',
|
|
stop: function(event, ui) {
|
|
var top = parseInt($(this).position().top).toString();
|
|
var left = parseInt($(this).position().left).toString();
|
|
var height = $(this).height().toString();
|
|
var width = $(this).width().toString();
|
|
that.setCSS({'height': height, 'width': width, 'top': top, 'left': left});
|
|
/*
|
|
var id = $(this).attr("data-id");
|
|
var json = {
|
|
'id': id,
|
|
'height': height,
|
|
'width': width
|
|
};
|
|
var i = parseInt($(this).attr("data-index"));
|
|
var thisBox = edgeCanvas.textBoxes[i];
|
|
*/
|
|
// thisBox.updateCSS(css);
|
|
}
|
|
});
|
|
return e;
|
|
};
|
|
|
|
/*
|
|
Called by setCSS to send the ajax call to the back-end to update the Css - if called from the outside, it will send the request to the back-end, but not update client-side.
|
|
|
|
>>> t.updateCSS({'background': '#000'}); t.jq.css("background-color");
|
|
'#000000'
|
|
|
|
*/
|
|
TextBox.prototype.updateCSS = function(css) {
|
|
css.id = this.id;
|
|
css.uuid = UUID;
|
|
// console.log(css);
|
|
// isAjaxActive = true;
|
|
$.getJSON("/edit/textbox/update_css/", css, function(response) {
|
|
if (response.status == 1) {
|
|
// REVISION_NO = response.rev_id;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
// isAjaxActive = false;
|
|
});
|
|
};
|
|
|
|
/*
|
|
Call this from the outside to update CSS both client and server-side. css can be any number of key value pairs of css properties to update.
|
|
|
|
>>> t.setCSS({'padding-bottom': '10px', 'padding-top': '15px'}); t.jq.css("padding-bottom")
|
|
"10px"
|
|
*/
|
|
|
|
TextBox.prototype.setCSS = function(css, callServer) {
|
|
/* for (var c in css) {
|
|
if (css.hasOwnProperty(c)) {
|
|
this.css[c] = css[c];
|
|
}
|
|
}
|
|
*/
|
|
this.jq.css(css);
|
|
var srv = callServer == undefined ? true : callServer;
|
|
if (srv) {
|
|
this.updateCSS(css);
|
|
}
|
|
};
|
|
|
|
TextBox.prototype.setHTML = function(html) {
|
|
// console.log(html);
|
|
var that = this;
|
|
$.getJSON("/edit/textbox/set_html/", {'html': html, 'id': that.id, 'uuid': UUID}, function(response) {
|
|
if (response.status == 1) {
|
|
// REVISION_NO = response.rev_id;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
TextBox.prototype.deleteme = function() {
|
|
var that = this;
|
|
this.jq.remove();
|
|
$.get("/edit/textbox/delete/", {
|
|
'id': that.id,
|
|
'uuid': UUID
|
|
}, function(response) {
|
|
// REVISION_NO = response;
|
|
});
|
|
}
|
|
|
|
/*
|
|
refer TextBox -- except here resource is this damned resource object that image boxes need.
|
|
*/
|
|
var ImageBox = function(canvas, resource, json) {
|
|
var that = this;
|
|
this.index = canvas.imageBoxes.length;
|
|
this.id = 0;
|
|
this.css = { };
|
|
this.resource = resource;
|
|
this.jq = {};
|
|
this.css.width = toPx(that.resource.width);
|
|
this.css.height = toPx(that.resource.height);
|
|
this.canvas = canvas;
|
|
this.create(json);
|
|
};
|
|
|
|
ImageBox.prototype.create = function(json) {
|
|
var that = this;
|
|
var defaults = {
|
|
'id': 0,
|
|
'html': tmpl('tmpl_imagebox', {}),
|
|
'resource_id': that.resource.id,
|
|
'page_id': that.canvas.id,
|
|
'css': {
|
|
'height': that.css.height,
|
|
'width': that.css.width,
|
|
'border-style': 'solid',
|
|
'border-width': '0px',
|
|
'border-color': '#000000',
|
|
'z-index': '1',
|
|
'top': '100px',
|
|
'left': '100px',
|
|
'opacity': '1'
|
|
}
|
|
};
|
|
var opts = $.extend(true, defaults, json);
|
|
this.id = opts.id;
|
|
this.html = opts.html;
|
|
this.css = opts.css;
|
|
// console.log(opts.css);
|
|
if (this.id == 0) {
|
|
// Create new TextBox in db:
|
|
var jsonString = JSON.stringify(opts);
|
|
$.getJSON("/edit/imagebox/new/", {'json': jsonString, 'uuid': UUID}, function(response) {
|
|
var id = response.id;
|
|
that.id = id;
|
|
that.jq.attr("data-id", id);
|
|
// REVISION_NO = response.rev_id;
|
|
});
|
|
}
|
|
this.init();
|
|
// var elem = this.init();
|
|
};
|
|
|
|
|
|
//TextBox.prototype.init = function() {
|
|
// var that = this;
|
|
// var e = $('<div />');
|
|
// e.html(that.html).attr("data-id", that.id).attr("data-index", that.index).css(that.css).addClass("box").addClass("textBox");
|
|
// e.append($('<div />').addClass("boxText"));
|
|
|
|
|
|
ImageBox.prototype.init = function() {
|
|
var that = this;
|
|
var e = $('<div />');
|
|
e.attr('data-index', that.index.toString()).attr('data-id', that.id).addClass('box').addClass("imageBox");
|
|
e.css(that.css);
|
|
e.html(that.html);
|
|
var img = $('<img />').addClass("edgeImage").attr("src", that.resource.resized).attr('width', that.resource.width).attr('height', that.resource.height);
|
|
e.append(img);
|
|
this.jq = e;
|
|
this.canvas.appendBox(that);
|
|
this.addEventHandlers();
|
|
}
|
|
|
|
ImageBox.prototype.addEventHandlers = function() {
|
|
var that = this; var e = this.jq;
|
|
e.draggable({
|
|
snap: '.box, .ruler',
|
|
snapMode: 'outer',
|
|
containment: 'parent',
|
|
stop: function(event, ui) {
|
|
var top = parseInt($(this).position().top).toString();
|
|
var left = parseInt($(this).position().left).toString();
|
|
that.setCSS({'top': top, 'left': left});
|
|
}
|
|
}).resizable({
|
|
containment: that.canvas.jq,
|
|
handles: 'nw, se, ne, sw, n, s, w, e',
|
|
aspectRatio: true,
|
|
resize: function (event, ui) {
|
|
var height = $(this).height().toString();
|
|
var width = $(this).width().toString();
|
|
$(this).find('.edgeImage').attr("width", width);
|
|
$(this).find('.edgeImage').attr("height", height);
|
|
},
|
|
stop: function(event, ui) {
|
|
var top = parseInt($(this).position().top).toString();
|
|
var left = parseInt($(this).position().left).toString();
|
|
var height = $(this).height().toString();
|
|
var width = $(this).width().toString();
|
|
that.resize({'height': height, 'width': width});
|
|
that.setCSS({'top': top, 'left': left});
|
|
}
|
|
});
|
|
}
|
|
|
|
ImageBox.prototype.getHtml = function() {
|
|
|
|
}
|
|
|
|
ImageBox.prototype.fromJson = function() {
|
|
|
|
}
|
|
|
|
|
|
ImageBox.prototype.updateCSS = function(css) {
|
|
css.id = this.id;
|
|
css.uuid = UUID;
|
|
$.getJSON("/edit/imagebox/update_css/", css, function(response) {
|
|
if (response.status == 1) {
|
|
// REVISION_NO = response.rev_id;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
ImageBox.prototype.setCSS = function(css, doUpdate) {
|
|
var update = doUpdate == undefined ? true : doUpdate;
|
|
this.jq.css(css);
|
|
if (update) {
|
|
this.updateCSS(css);
|
|
}
|
|
return this;
|
|
};
|
|
|
|
ImageBox.prototype.resize = function(dimensions) {
|
|
var that = this;
|
|
this.setCSS({
|
|
'width': toPx(dimensions.width),
|
|
'height': toPx(dimensions.height)
|
|
}, false);
|
|
this.jq.find('.edgeImage').attr("width", dimensions.width);
|
|
this.jq.find('.edgeImage').attr("height", dimensions.height);
|
|
dimensions.id = this.id;
|
|
dimensions.uuid = UUID;
|
|
if (arguments[1] == false) { return true; }
|
|
$.getJSON("/edit/imagebox/resize/", dimensions, function(response) {
|
|
// console.log(response);
|
|
if (response.status == 1) {
|
|
var path = $.trim(response.path);
|
|
that.jq.find('.edgeImage').attr("src", path);
|
|
// REVISION_NO = response.rev_id;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
ImageBox.prototype.deleteme = function() {
|
|
var that = this;
|
|
this.jq.remove();
|
|
$.get("/edit/imagebox/delete/",
|
|
{'id': that.id, 'uuid': UUID}, function(response) {
|
|
// REVISION_NO = response;
|
|
});
|
|
}
|
|
/*
|
|
@constructor
|
|
@class Bin Bin class to deal with loading various categories into a bin to pick from into your own bin
|
|
@property {Array} resources Resource objects that belong to this bin.
|
|
@divid {String} Id of DOM node.
|
|
@jq {jQuery Object} Jquery object representing Bin
|
|
*/
|
|
var Bin = function() {
|
|
this.resources = [];
|
|
this.divid = 'bin';
|
|
var that = this;
|
|
this.size = 6;
|
|
this.start_index = 0;
|
|
this.jq = $('#' + that.divid);
|
|
this.allResources = [];
|
|
};
|
|
|
|
Bin.prototype.loadCategory = function(catid, type) {
|
|
var that = this;
|
|
this.jq.find('.resource').remove();
|
|
this.resources = [];
|
|
$.getJSON("/edit/category/json/", {'id': catid, 'type': type}, function(json) {
|
|
var resources = json.resources;
|
|
for (r in resources) {
|
|
if (resources.hasOwnProperty(r)) {
|
|
thisResource = new Resource(resources[r], r);
|
|
that.resources.push(thisResource);
|
|
}
|
|
}
|
|
that.allResources = that.resources;
|
|
that.init();
|
|
});
|
|
};
|
|
|
|
/*
|
|
This function is a very good idea. You would send a json object with parameters to the back-end to filter results by, allowing search to get a lot better.
|
|
Bin.prototype.loadResources = function(url, params) {
|
|
var that = this;
|
|
this.jq.find('.resource').remove();
|
|
this.resources = [];
|
|
|
|
}
|
|
*/
|
|
|
|
Bin.prototype.searchString = function(str) {
|
|
var that = this;
|
|
this.resources = [];
|
|
// console.log(that.allResources);
|
|
for (var i = 0; i < that.allResources.length; i++) {
|
|
var r = that.allResources[i];
|
|
r.hide();
|
|
if ((r.title.toLowerCase().indexOf(str.toLowerCase()) != -1) || (r.description.toLowerCase().indexOf(str.toLowerCase()) != -1)) {
|
|
this.resources.push(r);
|
|
// console.log(r);
|
|
r.show();
|
|
}
|
|
}
|
|
this.init();
|
|
}
|
|
|
|
Bin.prototype.init = function() {
|
|
var that = this;
|
|
this.start_index = 0;
|
|
for (var i=0; i < this.resources.length; i++) {
|
|
if (i >= this.size) {
|
|
this.resources[i].hide();
|
|
} else {
|
|
this.resources[i].show();
|
|
}
|
|
}
|
|
var end_index = that.resources.length < that.size ? that.resources.length : that.size;
|
|
that.jq.find('.prevPage').hide();
|
|
that.jq.find('.nextPage').show();
|
|
that.jq.find('.totalResources').html(that.resources.length.toString());
|
|
that.jq.find('.start_index').html('1');
|
|
that.jq.find('.end_index').html(end_index.toString());
|
|
|
|
}
|
|
|
|
Bin.prototype.nextPage = function() {
|
|
var that = this;
|
|
var curr_index = this.start_index + this.size;
|
|
var end_index = curr_index + this.size > that.resources.length ? that.resources.length : curr_index + that.size;
|
|
for (var i = this.start_index; i < end_index; i++) {
|
|
if (i < curr_index) {
|
|
this.resources[i].hide();
|
|
} else {
|
|
this.resources[i].show();
|
|
}
|
|
}
|
|
this.start_index = curr_index;
|
|
// console.log(that.start_index + that.size);
|
|
if (this.start_index + this.size >= this.resources.length) {
|
|
this.jq.find('.nextPage').hide();
|
|
}
|
|
this.jq.find('.prevPage').show();
|
|
this.jq.find('.start_index').html((curr_index + 1).toString());
|
|
this.jq.find('.end_index').html(end_index.toString());
|
|
}
|
|
|
|
Bin.prototype.prevPage = function() {
|
|
var that = this;
|
|
var curr_start = this.start_index;
|
|
var end_index = this.start_index + this.size > this.resources.length ? this.resources.length - 1 : (this.start_index + this.size) - 1;
|
|
for (var j = 0; j < this.resources.length; j++) {
|
|
this.resources[j].hide();
|
|
}
|
|
for (var i = end_index; i > this.start_index - this.size; i--) {
|
|
// console.log(end_index);
|
|
if (i > this.start_index) {
|
|
// this.resources[i].hide();
|
|
} else {
|
|
this.resources[i].show();
|
|
}
|
|
}
|
|
this.start_index = curr_start - this.size;
|
|
if (this.start_index <= 0) {
|
|
this.start_index = 0;
|
|
this.jq.find('.prevPage').hide();
|
|
}
|
|
this.jq.find('.nextPage').show();
|
|
this.jq.find('.start_index').html((that.start_index + 1).toString());
|
|
this.jq.find('.end_index').html(curr_start.toString());
|
|
}
|
|
|
|
|
|
/*
|
|
@constructor
|
|
@class MyBin Class to deal with personal bins.
|
|
@property {String} name Name user assigns to bin to be uniquely identifiable
|
|
@property {Int} creator User id of user who created this bin. Might be useful to determine permissions.
|
|
CURRENTLY NOT USED.
|
|
*/
|
|
|
|
var MyBin = function() {
|
|
this.resources = [];
|
|
this.divid = 'mybin';
|
|
var that = this;
|
|
this.jq = $('#' + that.divid);
|
|
this.id = 0;
|
|
this.name = '';
|
|
this.creator = 0;
|
|
}
|
|
|
|
/*
|
|
Method to load bin from json
|
|
*/
|
|
MyBin.prototype.load = function(json) {
|
|
|
|
}
|
|
|
|
/*
|
|
Method to save bin to the database
|
|
*/
|
|
MyBin.prototype.save = function() {
|
|
|
|
}
|
|
|
|
/*
|
|
CURRENTLY NOT USED.
|
|
*/
|
|
var MyResource = function(json, index) {
|
|
this.index = index;
|
|
this.id = json.id;
|
|
this.divid = 'myresource' + this.index.toString();
|
|
this.type = json.type;
|
|
this.file = json.file;
|
|
this.description = json.description;
|
|
this.tags = json.tags;
|
|
this.mime = json.mime; //inaccurately called 'mime' - this is either image, text, audio or video, as a string.
|
|
this.icon = json.icon;
|
|
this.added = json.added;
|
|
this.addToBin();
|
|
}
|
|
|
|
MyResource.prototype.addToBin = function() {
|
|
|
|
}
|
|
|
|
var Resource = function(json, index) {
|
|
this.index = index;
|
|
this.id = json.id;
|
|
this.media_id = json.media_id;
|
|
this.divid = "resource" + this.index.toString();
|
|
this.type = json.type;
|
|
this.file = json.file;
|
|
this.title = json.title;
|
|
this.description = json.description;
|
|
this.tags = json.tags;
|
|
this.mime = json.mime;
|
|
this.icon = json.icon;
|
|
this.added = json.added;
|
|
this.width = json.width;
|
|
this.height = json.height;
|
|
this.tooltip = "<span class='resourceTitle'>" + this.title + "</span><br /><span class='resourceDescription'>" + this.description + "</span>";
|
|
this.resized = $.trim(json.resized);
|
|
this.displayed = true;
|
|
this.addToBin();
|
|
this.hide = function() {
|
|
this.displayed = false;
|
|
this.jq.hide();
|
|
}
|
|
this.show = function() {
|
|
this.displayed = true;
|
|
this.jq.show();
|
|
}
|
|
};
|
|
|
|
Resource.prototype.addToBin = function() {
|
|
var that = this;
|
|
var e = this.getBinElem();
|
|
edgeBin.jq.find('.binResources').append(e);
|
|
this.jq = $('#' + that.divid);
|
|
this.addEventHandlers();
|
|
};
|
|
|
|
Resource.prototype.getBinElem = function() {
|
|
var that = this;
|
|
var e = $('<div />');
|
|
e.html(that.getBinHtml());
|
|
e.attr("id", that.divid);
|
|
e.attr("data-index", that.index.toString());
|
|
e.attr("data-id", that.id.toString());
|
|
e.attr("title", that.tooltip);
|
|
e.addClass("resource");
|
|
e.css({'display': 'none'});
|
|
return e;
|
|
};
|
|
|
|
|
|
Resource.prototype.getBinHtml = function() {
|
|
var that = this;
|
|
var html = "<img src='" + that.icon + "' alt='foo' />";
|
|
return html
|
|
};
|
|
|
|
Resource.prototype.addEventHandlers = function() {
|
|
var that = this;
|
|
this.jq.tooltip();
|
|
var mim2tmpl = {
|
|
'image': "tmpl_resource_image",
|
|
'video': "tmpl_resource_av",
|
|
'audio': "tmpl_resource_av",
|
|
'text': "tmpl_resource_doc"
|
|
}
|
|
this.jq.hover(function() {
|
|
var tmpl_id = mim2tmpl[that.mime];
|
|
var html = tmpl(tmpl_id, {});
|
|
that.jq.append(html);
|
|
}, function() {
|
|
that.jq.find(".resourceMenu").remove();
|
|
});
|
|
/*
|
|
this.jq.dblclick(function() {
|
|
// console.log("foo");
|
|
var e = that.jq.clone().attr("id", that.jq.attr("id").replace("resource", "myresource"));
|
|
console.log(e);
|
|
$('#userBin').append(e);
|
|
});
|
|
*/
|
|
this.jq.draggable({ revert: true, helper: 'clone'});
|
|
};
|
|
|
|
|
|
function toPx(i) {
|
|
if (typeof i == 'string' && i.charAt(0) == '#') {
|
|
return i;
|
|
}
|
|
var inty = parseInt(i);
|
|
if (inty != NaN) {
|
|
var str = inty.toString() + "px";
|
|
return str;
|
|
} else {
|
|
return str + "px";
|
|
}
|
|
}
|
|
|
|
|
|
jQuery.fn.getResource = function() {
|
|
var jq = this.parents('.resource');
|
|
var resourceIndex = parseInt(jq.attr("data-index"));
|
|
return edgeBin.resources[resourceIndex];
|
|
}
|
|
|
|
jQuery.fn.getCanvas = function() {
|
|
var index = parseInt(this.parents('.canvas').attr("data-index"));
|
|
return edgeArticle[index];
|
|
}
|
|
|
|
jQuery.fn.getBox = function() {
|
|
var boxJq = this.parents('.box');
|
|
var boxIndex = parseInt(boxJq.attr("data-index"));
|
|
var canvasIndex = boxJq.parents('.canvas').attr("data-index");
|
|
if (boxJq.hasClass("textBox")) {
|
|
return edgeArticle[canvasIndex].textBoxes[boxIndex];
|
|
}
|
|
else if (boxJq.hasClass("imageBox")) {
|
|
return edgeArticle[canvasIndex].imageBoxes[boxIndex];
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/*
|
|
function getCanvasByElem(e) {
|
|
var index = parseInt(e.parents('.canvas').attr("data-index"));
|
|
return edgeArticle[index];
|
|
}
|
|
|
|
|
|
function getBoxByElem(e) {
|
|
var boxJq = e.parents('.box');
|
|
var boxIndex = parseInt(boxJq.attr("data-index"));
|
|
var canvasIndex = boxJq.parents('.canvas').attr("data-index");
|
|
if (boxJq.hasClass("textBox")) {
|
|
return edgeArticle[canvasIndex].textBoxes[boxIndex];
|
|
} else if (boxJq.hasClass("imageBox")) {
|
|
return edgeArticle[canvasIndex].imageBoxes[boxIndex];
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
*/
|
|
function loadArticle(json) {
|
|
for (j in json) {
|
|
if (json.hasOwnProperty(j)) {
|
|
new Canvas({}, json[j]);
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
window.onload = function()
|
|
{
|
|
|
|
|
|
};
|
|
*/
|
|
$(document).ready(function(){
|
|
$(".newTextBox").draggable({ revert: true, helper: 'clone'});
|
|
});
|
|
|
|
/*
|
|
$(".box").live("dblclick", function(){
|
|
|
|
// $ ('.save_text').hide();
|
|
// element = $(this).find('.textbox_canvas_content');
|
|
// replaceDiv( element[0] );
|
|
// box = $(element).getBox().jq;
|
|
// box.draggable( 'disable' );
|
|
// box.resizable( 'disable' );
|
|
// $(element).parent().siblings('.save_text').show();
|
|
|
|
});
|
|
*/
|
|
|
|
|
|
var editor;
|
|
|
|
function removeEditor(element) {
|
|
if ( !editor )
|
|
return;
|
|
$(element).toggle();
|
|
box = $(element).getBox();
|
|
box.setHTML(editor.getData());
|
|
box.jq.draggable( 'enable' );
|
|
box.jq.resizable( 'enable' );
|
|
// Destroy the editor.
|
|
editor.destroy();
|
|
editor = null;
|
|
text_edit_mode = false;
|
|
box.jq.css('z-index', this_org_z);
|
|
|
|
}
|
|
|
|
|
|
|
|
function replaceDiv( div ) {
|
|
if ( editor )
|
|
editor.destroy();
|
|
|
|
// CKEDITOR.plugins.add('mysave',{
|
|
// init:function(a){
|
|
// var cmd = a.addCommand('mysave',{exec:CKsaveAjax})
|
|
// a.ui.addButton('MySave',{
|
|
// label:'Save',
|
|
// command:'mysave',
|
|
// icon:this.path+"images/save.png"
|
|
// })
|
|
// }
|
|
// })
|
|
|
|
|
|
// console.log(div);
|
|
// alert($(div).attr('classname'));
|
|
height = parseInt($(div).css('height'));
|
|
height = toPx(height);
|
|
width = parseInt($(div).css('width'));
|
|
width = toPx(width);
|
|
|
|
editor = CKEDITOR.replace( div,
|
|
{
|
|
width: width,
|
|
height: height,
|
|
toolbar : 'Basic',
|
|
uiColor : '#9AB8F3',
|
|
resize_enabled: false,
|
|
toolbarStartupExpanded: false,
|
|
skin: 'v2'
|
|
});
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
height = parseInt($(div).css('height')) - 6;
|
|
height = toPx(height);
|
|
width = parseInt($(div).css('width')) - 6;
|
|
width = toPx(width);
|
|
|
|
editor = CKEDITOR.replace( div,
|
|
{
|
|
height: height,
|
|
toolbar : 'Basic',
|
|
uiColor : '#9AB8F3',
|
|
resize_enabled: false,
|
|
toolbarStartupExpanded: false,
|
|
skin: 'v2'
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$(".box").live("mouseover", function(){
|
|
// if (!editor)
|
|
// $(this).find(".textbox_canvas_toolbox").show();
|
|
|
|
});
|
|
|
|
$(".box").live("mouseout", function(){
|
|
// $(this).find(".textbox_canvas_toolbox").hide();
|
|
});
|
|
*/
|
|
|
|
function cropImage(c)
|
|
{
|
|
crop_url = '/edit/imagebox/crop/?x1=' + c.x + '&y1=' + c.y + '&x2=' + c.x2 + '&y2=' + c.y2 + '&width=' + c.w + '&height=' + c.h + '&id=' + this_imagebox_id + '&uuid=' + UUID;
|
|
crop_dimensions = c;
|
|
};
|
|
|
|
text_edit_mode = false;
|
|
|
|
$(".box").live("click", function(e){
|
|
if (text_edit_mode) {
|
|
return false;
|
|
}
|
|
e.preventDefault();
|
|
var top = parseInt($(this).css('top'));
|
|
var left = parseInt($(this).css('left'));
|
|
var box = $(this).find('*').getBox().jq;
|
|
var boxObj = $(this).find('*').getBox();
|
|
if ($(".properties").length == 0) {
|
|
// console.log($(this).attr('class'))
|
|
if ($(this).hasClass("textBox")) {
|
|
$('body').append(tmpl('tmpl_textbox_properties', {}));
|
|
}
|
|
else if ($(this).hasClass("imageBox")) {
|
|
$('body').append(tmpl('tmpl_imagebox_properties', {}));
|
|
}
|
|
var canvas = $(this).getCanvas().jq;
|
|
canvas_top = parseInt(canvas.offset().top);
|
|
canvas_left = parseInt(canvas.offset().left);
|
|
$(".properties").css('top', toPx((e.pageY)));
|
|
$(".properties").css('left', toPx((e.pageX)));
|
|
} else {
|
|
$(".properties").remove();
|
|
//BAD HACK: removes the nudge binder if present. Got to be a better way to do this -- potentially bind to document using a custom nudge event, but not sure.
|
|
$(document).unbind("keydown");
|
|
//This should click itself, to then display properties wherever it is clicked, but it does not work:(
|
|
// $(this).trigger("click");
|
|
}
|
|
// i.setCSS({'top':toPx((ev.pageY - top) - height), 'left': toPx((ev.pageX - left) - width)});
|
|
|
|
|
|
current_val = box.css('background-color');
|
|
// console.log('current val: ' + current_val)
|
|
$('.properties').find('.backgroundColorSelector div').css('background-color', current_val);
|
|
|
|
$(".properties").find('.backgroundColorSelector').ColorPicker({
|
|
color: current_val,
|
|
onShow: function (colpkr) {
|
|
$(colpkr).fadeIn(500);
|
|
return false;
|
|
},
|
|
onHide: function (colpkr) {
|
|
$(colpkr).fadeOut(500);
|
|
boxObj.setCSS({'background-color': '#' + GLOBAL_HEX});
|
|
return false;
|
|
},
|
|
onChange: function (hsb, hex, rgb) {
|
|
$('.properties').find('.backgroundColorSelector div').css('background-color', '#' + hex);
|
|
box.css('background-color', '#' + hex);
|
|
GLOBAL_HEX = hex;
|
|
},
|
|
onBeforeShow: function () {
|
|
current_val = box.children('div').css('background-color');
|
|
$(this).ColorPickerSetColor(current_val);
|
|
}
|
|
|
|
});
|
|
|
|
var current_val = box.css('border-right-color');
|
|
$('.properties').find('.borderColorSelector div').css('background-color', current_val);
|
|
$(".properties").find('.borderColorSelector').ColorPicker({
|
|
color: current_val,
|
|
onShow: function (colpkr) {
|
|
$(colpkr).fadeIn(500);
|
|
return false;
|
|
},
|
|
onHide: function (colpkr) {
|
|
$(colpkr).fadeOut(500);
|
|
boxObj.setCSS({'border-color': '#' + GLOBAL_HEX});
|
|
return false;
|
|
},
|
|
onChange: function (hsb, hex, rgb) {
|
|
$('.properties').find('.borderColorSelector div').css('background-color', '#' + hex);
|
|
box.css('border-color', '#' + hex);
|
|
GLOBAL_HEX = hex;
|
|
}
|
|
});
|
|
|
|
var current_val = parseInt(box.css('padding'));
|
|
$(".properties").find(".change_padding").slider({
|
|
range: "max",
|
|
min: 0,
|
|
max: 40,
|
|
value: current_val,
|
|
slide: function(event, ui) {
|
|
i = parseInt(box.attr('data-index'));
|
|
height = parseInt(box.css('height'))
|
|
width = parseInt(box.css('width'))
|
|
// console.log(height + " - " + width)
|
|
|
|
org_padding = parseInt(box.css('padding'))
|
|
padding = org_padding - ui.value;
|
|
boxObj.setCSS({'padding-top': ui.value, 'padding-right': ui.value, 'padding-bottom': ui.value, 'padding-left': ui.value}, false)
|
|
boxObj.setCSS({'height': height + (2 * padding), 'width': width + (2 * padding)}, false)
|
|
},
|
|
|
|
stop: function(event, ui) {
|
|
i = parseInt(box.attr('data-index'));
|
|
|
|
height = parseInt(box.css('height'))
|
|
width = parseInt(box.css('width'))
|
|
// console.log(height + " - " + width)
|
|
|
|
org_padding = parseInt(box.css('padding'))
|
|
padding = org_padding - ui.value;
|
|
boxObj.setCSS({'padding-top': ui.value, 'padding-right': ui.value, 'padding-bottom': ui.value, 'padding-left': ui.value})
|
|
boxObj.setCSS({'height': height + (2 * padding), 'width': width + (2 * padding)})
|
|
}
|
|
|
|
});
|
|
|
|
var current_val = parseInt(box.css('border-right-width'));
|
|
$(".properties").find(".change_border").slider({
|
|
range: "max",
|
|
min: 0,
|
|
max: 5,
|
|
value: current_val,
|
|
slide: function(event, ui) {
|
|
boxObj.setCSS({'border-width': ui.value}, false)
|
|
},
|
|
stop: function(event, ui) {
|
|
boxObj.setCSS({'border-width': ui.value})
|
|
}
|
|
});
|
|
|
|
|
|
|
|
var current_val = 10 * box.css('opacity');
|
|
$(".properties").find(".change_opacity").slider({
|
|
range: "max",
|
|
min: 2,
|
|
max: 10,
|
|
value: current_val,
|
|
slide: function(event, ui) {
|
|
boxObj.setCSS({'opacity': ui.value / 10}, false);
|
|
},
|
|
stop: function(event, ui) {
|
|
thisBox = $(this).getBox();
|
|
boxObj.setCSS({'opacity': ui.value / 10});
|
|
}
|
|
});
|
|
|
|
$(".background_transparent").bind("click", function(e){
|
|
e.preventDefault();
|
|
boxObj.setCSS({'background-color': 'transparent'});
|
|
});
|
|
|
|
var current_val = box.css('border-style');
|
|
// $(".borderStyle").append('<option value="solid">skörví</option>');
|
|
|
|
var current_border_style = box.css('border-left-style');
|
|
$('select option[value*=' + current_border_style + ']').attr('selected','true');
|
|
|
|
$(".borderStyle").bind("change", function(e){
|
|
var val = $(this).val();
|
|
boxObj.setCSS({'border-style': val});
|
|
});
|
|
|
|
$(".crop_imagebox").bind("click", function(e){
|
|
e.preventDefault();
|
|
text_edit_mode = true;
|
|
box.resizable( 'disable' );
|
|
|
|
$(canvas).append(tmpl('tmpl_imagebox_crop', {}));
|
|
|
|
canvas_top = parseInt(canvas.offset().top);
|
|
canvas_left = parseInt(canvas.offset().left);
|
|
box_top = box.css('top');
|
|
box_left = box.css('left');
|
|
|
|
crop_box_top = parseInt(box_top) + parseInt(box.css('height')) + 5;
|
|
crop_box_left = parseInt(box_left);
|
|
|
|
$(".imagebox_crop").css('top', crop_box_top);
|
|
$(".imagebox_crop").css('left', crop_box_left);
|
|
|
|
image = box.find('.edgeImage');
|
|
this_imagebox_id = box.attr('data-id');
|
|
jcrop = $.Jcrop(image, {onSelect: cropImage}, function(){
|
|
|
|
});
|
|
$('.properties').remove();
|
|
|
|
$(".do_crop_imagebox").bind("click", function(e){
|
|
e.preventDefault();
|
|
|
|
box.resizable( 'enable' );
|
|
|
|
// console.log(url);
|
|
$.getJSON(crop_url, {
|
|
'article_id': ARTICLE_ID
|
|
}, function(data) {
|
|
// console.log(data.path);
|
|
new_top = parseInt(box_top) + crop_dimensions.y;
|
|
new_left = parseInt(box_left) + crop_dimensions.x;
|
|
boxObj.setCSS({'width': crop_dimensions.w, 'height': crop_dimensions.h}, false);
|
|
boxObj.setCSS({'top': new_top, 'left': new_left});
|
|
jcrop.destroy();
|
|
box.find('.edgeImage').attr("width", crop_dimensions.w);
|
|
box.find('.edgeImage').attr("height", crop_dimensions.h);
|
|
box.find('.edgeImage').attr('src', data.path);
|
|
$('.imagebox_crop').remove();
|
|
text_edit_mode = false;
|
|
REVISION_NO = data.rev_id;
|
|
});
|
|
});
|
|
|
|
$(".cancel_crop_imagebox").bind("click", function(e){
|
|
e.preventDefault();
|
|
jcrop.destroy();
|
|
$('.imagebox_crop').remove();
|
|
box.resizable( 'enable' );
|
|
|
|
text_edit_mode = false;
|
|
});
|
|
});
|
|
|
|
|
|
$(".nudge_box").bind("click", function(e){
|
|
e.preventDefault();
|
|
$(document).bind("keydown", function(event) {
|
|
// console.log(event.keyCode);
|
|
if (event.keyCode == '38') {
|
|
event.preventDefault();
|
|
var top = box.css('top');
|
|
if (parseInt(top) > 1) {
|
|
boxObj.setCSS({'top': toPx(parseInt(top) - 1)});
|
|
// console.log('up?');
|
|
}
|
|
}
|
|
if (event.keyCode == '40') {
|
|
event.preventDefault();
|
|
var top = box.css('top');
|
|
var height = box.outerHeight();
|
|
var lower_edge = parseInt(top) + parseInt(height);
|
|
var canvas_height = canvas.css('height');
|
|
// console.log('canvas_height:' + canvas_height);
|
|
// console.log('box lower:' + lower_edge);
|
|
if (lower_edge < parseInt(canvas_height)) {
|
|
boxObj.setCSS({'top': toPx(parseInt(top) + 1)});
|
|
// console.log('down?');
|
|
|
|
}
|
|
}
|
|
if (event.keyCode == '39') {
|
|
event.preventDefault();
|
|
var left = box.css('left');
|
|
var width = box.outerWidth();
|
|
var right_edge = parseInt(left) + parseInt(width);
|
|
canvas_width = canvas.css('width');
|
|
if (right_edge < parseInt(canvas_width)) {
|
|
boxObj.setCSS({'left': toPx(parseInt(left) + 1)});
|
|
}
|
|
}
|
|
if (event.keyCode == '37') {
|
|
event.preventDefault();
|
|
left = box.css('left');
|
|
if (parseInt(left) > 0) {
|
|
boxObj.setCSS({'left': toPx(parseInt(left) - 1)});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$(".edit_textbox").bind("click", function(e){
|
|
e.preventDefault();
|
|
$('.save_text').hide();
|
|
$('.properties').hide();
|
|
this_org_z = box.css('z-index');
|
|
box.css('z-index', '1000');
|
|
element = box.find('.textbox_canvas_content');
|
|
replaceDiv( element[0] );
|
|
boxObj = $(element).getBox();
|
|
// console.log(boxObj);
|
|
box = boxObj.jq;
|
|
if (box.css("direction") == 'rtl') {
|
|
setTimeout(function() { $($('iframe').get(0).contentDocument).find('html').attr("dir", "rtl") }, 500);
|
|
}
|
|
$('iframe').attr("allowtransparency", "false");
|
|
box.draggable('disable');
|
|
box.resizable('disable');
|
|
text_edit_mode = true;
|
|
$(element).parent().siblings('.save_text').show();
|
|
});
|
|
|
|
$(".z-index-add").bind("click", function(e){
|
|
e.preventDefault();
|
|
var canvas = box.parents('.canvas');
|
|
highest_index = getHighestIndex(canvas);
|
|
// console.log(highest_index);
|
|
var new_index = highest_index + 1;
|
|
boxObj.setCSS({'z-index': new_index});
|
|
reSortBoxes(canvas);
|
|
});
|
|
|
|
$(".z-index-sub").bind("click", function(e){
|
|
e.preventDefault();
|
|
canvas = box.parents('.canvas');
|
|
lowest_index = getLowestIndex(canvas);
|
|
new_index = lowest_index - 1;
|
|
boxObj.setCSS({'z-index': new_index});
|
|
reSortBoxes(canvas);
|
|
});
|
|
|
|
$(".delete_box").bind("click", function(e){
|
|
e.preventDefault();
|
|
if (confirm("are you sure you wish to permanently delete this box from this page?")) {
|
|
$(".properties").remove();
|
|
boxObj.deleteme();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
$(".canvas").live("mousemove", function(e){
|
|
|
|
var left = parseInt($(this).position().left) + parseInt($(this).css('margin-left'));
|
|
var top = parseInt($(this).position().top) + parseInt($(this).css('margin-top'));
|
|
// console.log(top);
|
|
var pageCoords = "( " + (e.pageX - left) + ", " + (e.pageY - top) + " )";
|
|
$('#coordinates').html(pageCoords);
|
|
|
|
});
|
|
|
|
$(".canvas").live("mouseout", function(e){
|
|
|
|
$('#coordinates').html('');
|
|
|
|
});
|
|
|
|
|
|
/*
|
|
$(document).click(function(event) {
|
|
if ( !$(event.target).hasClass('.box') && !$(event.target).hasClass('properties')) {
|
|
// $(".textbox_properties").hide();
|
|
}
|
|
});
|
|
*/
|
|
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
$(document).ajaxStart(function(){
|
|
$('#ajaxBusy').css("background", "#f00");
|
|
}).ajaxStop(function(){
|
|
$('#ajaxBusy').css("background", "#0f0");
|
|
});
|
|
|
|
});
|
|
|
|
//LIVE Click Handlers:
|
|
|
|
$('.image_rotate').live("click", function(e) {
|
|
var r = $(this).getResource();
|
|
var id = r.id;
|
|
var url = "/edit/image/rotate/" + id + "/";
|
|
window.open(url);
|
|
});
|
|
|
|
$('.download_doc').live("click", function(e) {
|
|
var r = $(this).getResource();
|
|
var path = r.file;
|
|
var base_url = "http://" + window.location.hostname
|
|
window.open(base_url + path);
|
|
});
|
|
|
|
$('.printMe').live("click", function(e) {
|
|
var page = $(this).getCanvas();
|
|
var page_id = page.id;
|
|
// var url = BASE_URL + "page_pdf/?p=" + page_id + "&a=" + ARTICLE_ID;
|
|
var url = BASE_URL + "print_article/?id=" + ARTICLE_ID;
|
|
window.open(url);
|
|
});
|
|
|
|
$(function() {
|
|
$('.viewFrontend').live("click", function(e) {
|
|
window.open(FRONTEND_URL);
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
});
|
|
});
|
|
|
|
$('.upload_srts').live("click", function(e) {
|
|
var r = $(this).getResource();
|
|
var media_id = r.media_id;
|
|
var type = r.mime == 'video' ? 'video' : 'audio';
|
|
if (media_id == 0) {
|
|
alert("sorry, there was some problem with converting this audio / video, ID: " + r.id);
|
|
} else {
|
|
var adminUrl = "/admin/editor/" + type + "/" + r.media_id.toString();
|
|
window.open(adminUrl);
|
|
}
|
|
});
|
|
|
|
$('.play_media').live("click", function(e) {
|
|
var r = $(this).getResource();
|
|
var filePath = r.file;
|
|
var base_url = "http://" + window.location.hostname;
|
|
window.open(base_url + filePath);
|
|
});
|
|
|
|
$('.toggle_handle').live("click", function() {
|
|
var $that = $(this);
|
|
var page = $(this).parents('.canvas');
|
|
page.find('.ruler').each(function() {
|
|
if ($(this).is(":visible")) { $(this).fadeOut("fast"); } else { $(this).fadeIn("fast"); };
|
|
});
|
|
});
|
|
|
|
|
|
$('.delete_page').live("click", function(e) {
|
|
var canvas = $(this).getCanvas();
|
|
if (confirm("Are you sure you want to delete this page?")) {
|
|
canvas.deleteme();
|
|
}
|
|
});
|
|
|
|
|
|
$('.move_page_up').live("click", function(e) {
|
|
var canvas = $(this).getCanvas();
|
|
var currIndex = canvas.jq.index(".canvas");
|
|
if (currIndex == 0) {
|
|
return false;
|
|
}
|
|
var newIndex = currIndex - 1;
|
|
canvas.movePage(newIndex);
|
|
});
|
|
|
|
$('.move_page_down').live("click", function(e) {
|
|
var canvas = $(this).getCanvas();
|
|
var currIndex = canvas.jq.index(".canvas");
|
|
var newIndex = currIndex + 1;
|
|
canvas.movePage(newIndex);
|
|
});
|