diff options
Diffstat (limited to 'modules/photoannotation/js')
| -rw-r--r-- | modules/photoannotation/js/jquery.annotate.js | 568 | ||||
| -rw-r--r-- | modules/photoannotation/js/jquery.annotate.min.js | 1 | ||||
| -rw-r--r-- | modules/photoannotation/js/jquery.colorpicker.js | 484 | ||||
| -rw-r--r-- | modules/photoannotation/js/jquery.colorpicker.min.js | 1 |
4 files changed, 1054 insertions, 0 deletions
diff --git a/modules/photoannotation/js/jquery.annotate.js b/modules/photoannotation/js/jquery.annotate.js new file mode 100644 index 00000000..8310aad8 --- /dev/null +++ b/modules/photoannotation/js/jquery.annotate.js @@ -0,0 +1,568 @@ +/// <reference path="jquery-1.2.6-vsdoc.js" /> +(function($) { + + $.fn.annotateImage = function(options) { + /// <summary> + /// Creates annotations on the given image. + /// Images are loaded from the "getUrl" propety passed into the options. + /// </summary> + var opts = $.extend({}, $.fn.annotateImage.defaults, options); + var image = this; + + this.image = this; + this.mode = 'view'; + + // Assign defaults + this.getUrl = opts.getUrl; + this.saveUrl = opts.saveUrl; + this.deleteUrl = opts.deleteUrl; + this.deleteUrl = opts.deleteUrl; + this.editable = opts.editable; + this.useAjax = opts.useAjax; + this.tags = opts.tags; + this.notes = opts.notes; + this.labels = opts.labels; + this.csrf = opts.csrf; + this.cssaclass = opts.cssaclass; + this.rtlsupport = opts.rtlsupport; + this.users = opts.users; + + // Add the canvas + this.canvas = $('<div class="image-annotate-canvas g-thumbnail"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>'); + this.canvas.children('.image-annotate-edit').hide(); + this.canvas.children('.image-annotate-view').hide(); + this.image.after(this.canvas); + + // Give the canvas and the container their size and background + this.canvas.height(this.height()); + this.canvas.width(this.width()); + this.canvas.css('background-image', 'url("' + this.attr('src') + '")'); + this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height()); + this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width()); + + // Add the behavior: hide/show the notes when hovering the picture + this.canvas.hover(function() { + if ($(this).children('.image-annotate-edit').css('display') == 'none') { + $(this).children('.image-annotate-view').show(); + } + }, function() { + $(this).children('.image-annotate-view').hide(); + $(this).children('.image-annotate-note').hide(); + }); + + this.canvas.children('.image-annotate-view').hover(function() { + $(this).show(); + }, function() { + $(this).hide(); + $(this).children('.image-annotate-note').hide(); + }); + + // load the notes + if (this.useAjax) { + $.fn.annotateImage.ajaxLoad(this); + } else { + $.fn.annotateImage.load(this, this.labels, this.editable, this.csrf, this.deleteUrl, this.tags, this.saveUrl, this.cssaclass, this.rtlsupport, this.users); + } + + // Add the "Add a note" button + if ($('#g-photoannotation-link').length !== 0) { + this.button = $('#g-photoannotation-link'); + this.button.click(function() { + $.fn.annotateImage.add(image, opts.tags, opts.labels, opts.saveUrl, opts.csrf, opts.rtlsupport, opts.users); + }); + //this.canvas.after(this.button); + } + + // Hide the original + this.hide(); + + return this; + }; + + /** + * Plugin Defaults + **/ + $.fn.annotateImage.defaults = { + getUrl: 'your-get.rails', + saveUrl: 'your-save.rails', + deleteUrl: 'your-delete.rails', + editable: true, + useAjax: true, + tags: new Array(), + notes: new Array() + }; + + $.fn.annotateImage.clear = function(image) { + /// <summary> + /// Clears all existing annotations from the image. + /// </summary> + for (var i = 0; i < image.notes.length; i++) { + image.notes[image.notes[i]].destroy(); + } + image.notes = new Array(); + }; + + $.fn.annotateImage.ajaxLoad = function(image) { + /// <summary> + /// Loads the annotations from the "getUrl" property passed in on the + /// options object. + /// </summary> + $.getJSON(image.getUrl + '?ticks=' + $.fn.annotateImage.getTicks(), function(data) { + image.notes = data; + $.fn.annotateImage.load(image); + }); + }; + + $.fn.annotateImage.load = function(image, labels, editable, csrf, deleteUrl, tags, saveUrl, cssaclass, rtlsupport, users) { + /// <summary> + /// Loads the annotations from the notes property passed in on the + /// options object. + /// </summary> + for (var i = 0; i < image.notes.length; i++) { + image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i], tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass, rtlsupport, users); + } + }; + + $.fn.annotateImage.getTicks = function() { + /// <summary> + /// Gets a count og the ticks for the current date. + /// This is used to ensure that URLs are always unique and not cached by the browser. + /// </summary> + var now = new Date(); + return now.getTime(); + }; + + $.fn.annotateImage.add = function(image, tags, labels, saveUrl, csrf, rtlsupport, users) { + /// <summary> + /// Adds a note to the image. + /// </summary> + if (image.mode == 'view') { + image.mode = 'edit'; + + // Create/prepare the editable note elements + var editable = new $.fn.annotateEdit(image, null, tags, labels, saveUrl, csrf, rtlsupport, users); + + $.fn.annotateImage.createSaveButton(editable, image, null, rtlsupport, labels); + $.fn.annotateImage.createCancelButton(editable, image, rtlsupport, labels); + } + }; + + $.fn.annotateImage.createSaveButton = function(editable, image, note, rtlsupport, labels) { + /// <summary> + /// Creates a Save button on the editable note. + /// </summary> + var ok = $('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default ' + rtlsupport + '">' + labels[8] + '</a>'); + + ok.click(function() { + var form = $('#image-annotate-edit-form form'); + var text = $('#image-annotate-text').val(); + $.fn.annotateImage.appendPosition(form, editable); + image.mode = 'view'; + + form.submit(); + + editable.destroy(); + }); + editable.form.append(ok); + }; + + $.fn.annotateImage.createCancelButton = function(editable, image, rtlsupport, labels) { + /// <summary> + /// Creates a Cancel button on the editable note. + /// </summary> + var cancel = $('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default ' + rtlsupport + '">' + labels[9] + '</a>'); + cancel.click(function() { + editable.destroy(); + image.mode = 'view'; + location.reload(); + }); + editable.form.append(cancel); + }; + + $.fn.annotateImage.saveAsHtml = function(image, target) { + var element = $(target); + var html = ""; + for (var i = 0; i < image.notes.length; i++) { + html += $.fn.annotateImage.createHiddenField("text_" + i, image.notes[i].text); + html += $.fn.annotateImage.createHiddenField("top_" + i, image.notes[i].top); + html += $.fn.annotateImage.createHiddenField("left_" + i, image.notes[i].left); + html += $.fn.annotateImage.createHiddenField("height_" + i, image.notes[i].height); + html += $.fn.annotateImage.createHiddenField("width_" + i, image.notes[i].width); + } + element.html(html); + }; + + $.fn.annotateImage.createHiddenField = function(name, value) { + return '<input type="hidden" name="' + name + '" value="' + value + '" /><br />'; + }; + + $.fn.annotateEdit = function(image, note, tags, labels, saveUrl, csrf, rtlsupport, users) { + /// <summary> + /// Defines an editable annotation area. + /// </summary> + this.image = image; + + if (note) { + this.note = note; + } else { + var newNote = new Object(); + newNote.noteid = "new"; + newNote.top = 30; + newNote.left = 30; + newNote.width = 60; + newNote.height = 60; + newNote.text = ""; + newNote.description = ""; + newNote.notetype = ""; + newNote.internaltext = ""; + this.note = newNote; + } + + // Set area + var area = image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area'); + this.area = area; + this.area.css('height', this.note.height + 'px'); + this.area.css('width', this.note.width + 'px'); + this.area.css('left', this.note.left + 'px'); + this.area.css('top', this.note.top + 'px'); + + // Show the edition canvas and hide the view canvas + image.canvas.children('.image-annotate-view').hide(); + image.canvas.children('.image-annotate-edit').show(); + + // Add the note (which we'll load with the form afterwards) + var selectedtag = ""; + var notetitle = ""; + var username = ""; + var selecteduser = ""; + if (this.note.notetype == "face") { + selectedtag = this.note.text; + } else if (this.note.notetype == "user") { + username = this.note.internaltext; + } else { + notetitle = this.note.text; + } + var form = $('<div id="image-annotate-edit-form" class="ui-dialog-content ui-widget-content ' + rtlsupport + '"><form id="photoannotation-form" action="' + saveUrl + '" method="post"><input type="hidden" name="csrf" value="' + csrf + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="notetype" value="' + this.note.notetype + '" /><fieldset><legend>' + labels[12] + '</legend><label for="photoannotation-user-list">' + labels[10] + '</label><input id="photoannotation-user-list" class="textbox ui-corner-left ui-corner-right" type="text" name="userlist" style="width: 210px;" value="' + username + '" /><div style="text-align: center"><strong>' + labels[4] + '</strong></div><label for="image-annotate-tag-text">' + labels[0] + '</label><input id="image-annotate-tag-text" class="textbox ui-corner-left ui-corner-right" type="text" name="tagsList" style="width: 210px;" value="' + selectedtag + '" /><div style="text-align: center"><strong>' + labels[4] + '</strong></div><label for="image-annotate-text">' + labels[1] + '</label><input id="image-annotate-text" class="textbox ui-corner-left ui-corner-right" type="text" name="text" style="width: 210px;" value="' + notetitle + '" /></fieldset><fieldset><legend>' + labels[2] + '</legend><textarea id="image-annotate-desc" name="desc" rows="3" style="width: 210px;">' + this.note.description + '</textarea></fieldset></form></div>'); + this.form = form; + $('body').append(this.form); + $("#photoannotation-form").ready(function() { + var url = tags; + $("input#image-annotate-tag-text").autocomplete( + url, { + max: 30, + multiple: false, + cacheLength: 1 + } + ); + var urlusers = users; + $("input#photoannotation-user-list").autocomplete( + urlusers, { + max: 30, + multiple: false, + cacheLength: 1 + } + ); + }); + $("input#image-annotate-tag-text").keyup(function() { + if ($("input#image-annotate-tag-text").val() != "") { + $("input#image-annotate-text").html(""); + $("input#image-annotate-text").val(""); + $("input#photoannotation-user-list").html(""); + $("input#photoannotation-user-list").val(""); + } + }); + $("input#image-annotate-text").keyup(function() { + if ($("input#image-annotate-text").val() != "") { + $("input#image-annotate-tag-text").html(""); + $("input#image-annotate-tag-text").val(""); + $("input#photoannotation-user-list").html(""); + $("input#photoannotation-user-list").val(""); + } + }); + $("input#photoannotation-user-list").keyup(function() { + if ($("select#photoannotation-user-list").val() != "-1") { + $("input#image-annotate-tag-text").html(""); + $("input#image-annotate-tag-text").val(""); + $("input#image-annotate-text").html(""); + $("input#image-annotate-text").val(""); + } + }); + this.form.css('left', this.area.offset().left + 'px'); + this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px'); + + // Set the area as a draggable/resizable element contained in the image canvas. + // Would be better to use the containment option for resizable but buggy + area.resizable({ + handles: 'all', + + start: function(e, ui) { + form.hide(); + }, + stop: function(e, ui) { + form.css('left', area.offset().left + 'px'); + form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 7) + 'px'); + form.show(); + } + }) + .draggable({ + containment: image.canvas, + drag: function(e, ui) { + form.hide(); + }, + stop: function(e, ui) { + form.css('left', area.offset().left + 'px'); + form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 7) + 'px'); + form.show(); + } + }); + return this; + }; + + $.fn.annotateEdit.prototype.destroy = function() { + /// <summary> + /// Destroys an editable annotation area. + /// </summary> + this.image.canvas.children('.image-annotate-edit').hide(); + this.area.resizable('destroy'); + this.area.draggable('destroy'); + this.area.css('height', ''); + this.area.css('width', ''); + this.area.css('left', ''); + this.area.css('top', ''); + this.form.remove(); + }; + + $.fn.annotateView = function(image, note, tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass, rtlsupport, users) { + /// <summary> + /// Defines a annotation area. + /// </summary> + this.image = image; + + this.note = note; + + // Add the area + this.area = $('<div id="photoannotation-area-' + this.note.notetype + "-" + this.note.noteid + '" class="image-annotate-area' + (this.note.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>'); + image.canvas.children('.image-annotate-view').prepend(this.area); + + if (editable) { + this.delarea = $('<div class="image-annotate-area photoannotation-del-button"><div><form id="photoannotation-del-' + this.note.noteid + '" class="photoannotation-del-form" method="post" action="' + deleteUrl + '"><input type="hidden" name="notetype" value="' + this.note.notetype + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="csrf" value="' + csrf + '" /></form></div></div>'); + this.editarea = $('<div id="photoannotation-edit-' + this.note.noteid + '" class="image-annotate-area photoannotation-edit-button"><div></div></div>'); + image.canvas.children('.image-annotate-view').prepend(this.delarea); + image.canvas.children('.image-annotate-view').prepend(this.editarea); + this.delarea.bind('click',function () { + var alink = $(cssaclass); + alink.unbind(); + alink.attr ('href', '#'); + alink.removeAttr ('rel'); + var confdialog = '<div id="image-annotate-conf-dialog" rel="' + $(this).find('form.photoannotation-del-form').attr('id') + '">' + labels[3] + '<div />'; + $('body').append(confdialog); + var btns = {}; + if (rtlsupport == "") { + diagclass = "inmage-annotate-dialog"; + } else { + diagclass = "inmage-annotate-dialog-rtl"; + } + btns[labels[5]] = function(){ var delform = $(this).attr("rel"); $("form#" + delform).submit(); }; + btns[labels[6]] = function(){ location.reload(); }; + $('#image-annotate-conf-dialog').dialog({ + modal: true, + resizable: false, + dialogClass: diagclass, + title: labels[7], + close: function(event, ui) { location.reload(); }, + buttons: btns + }); + }); + var form = this; + this.editarea.bind('click',function () { + var alink = $(cssaclass); + alink.unbind(); + alink.attr ('href', '#'); + alink.removeAttr ('rel'); + form.edit(tags, labels, saveUrl, csrf, rtlsupport, users); + }); + this.delarea.hide(); + this.editarea.hide(); + } + + // Add the note + var notedescription = ""; + if (note.description != "") { + notedescription = "<br />" + note.description; + } + this.form = $('<div class="image-annotate-note">' + note.text + notedescription + '</div>'); + this.form.hide(); + image.canvas.children('.image-annotate-view').append(this.form); + this.form.children('span.actions').hide(); + + // Set the position and size of the note + this.setPosition(rtlsupport); + + // Add the behavior: hide/display the note when hovering the area + var annotation = this; + this.area.hover(function() { + annotation.show(); + if (annotation.delarea != undefined) { + annotation.delarea.show(); + annotation.editarea.show(); + } + }, function() { + annotation.hide(); + if (annotation.delarea != undefined) { + annotation.delarea.hide(); + annotation.editarea.hide(); + } + }); + var legendspan = "#photoannotation-legend-" + this.note.notetype + "-" + this.note.noteid; + if ($(legendspan).length > 0) { + $(legendspan).hover(function() { + var legendsarea = "#photoannotation-area-" + note.notetype + "-" + note.noteid; + $(legendsarea).children('.image-annotate-view').show(); + $(".image-annotate-view").show(); + $(legendsarea).show(); + annotation.show(); + }, function() { + var legendsarea = "#photoannotation-area-" + note.notetype + "-" + note.noteid; + annotation.hide(); + $(legendsarea).children('.image-annotate-view').hide(); + $(".image-annotate-view").hide(); + }); + } + if (editable) { + this.delarea.hover(function() { + annotation.delarea.show(); + annotation.editarea.show(); + }, function() { + annotation.delarea.hide(); + annotation.editarea.hide(); + }); + this.editarea.hover(function() { + annotation.delarea.show(); + annotation.editarea.show(); + }, function() { + annotation.delarea.hide(); + annotation.editarea.hide(); + }); + } + // Edit a note feature + if (note.url != "" && note.url != null) { + this.area.bind('click',function () { + var alink = $(cssaclass); + alink.unbind(); + alink.attr ('href', '#'); + alink.removeAttr ('rel'); + window.location = note.url; + }); + } + }; + + $.fn.annotateView.prototype.setPosition = function(rtlsupport) { + /// <summary> + /// Sets the position of an annotation. + /// </summary> + this.area.children('div').height((parseInt(this.note.height) - 2) + 'px'); + this.area.children('div').width((parseInt(this.note.width) - 2) + 'px'); + this.area.css('left', (this.note.left) + 'px'); + this.area.css('top', (this.note.top) + 'px'); + this.form.css('left', (this.note.left) + 'px'); + this.form.css('top', (parseInt(this.note.top) + parseInt(this.note.height) + 7) + 'px'); + + if (this.delarea != undefined) { + this.delarea.children('div').height('14px'); + this.delarea.children('div').width('14px'); + this.delarea.css('top', (this.note.top) + 'px'); + this.editarea.children('div').height('14px'); + this.editarea.children('div').width('14px'); + if (rtlsupport == '') { + this.delarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px'); + this.editarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px'); + } else { + this.delarea.css('left', (this.note.left - 16) + 'px'); + this.editarea.css('left', (this.note.left - 16) + 'px'); + } + this.editarea.css('top', (this.note.top + 16) + 'px'); + } + }; + + $.fn.annotateView.prototype.show = function() { + /// <summary> + /// Highlights the annotation + /// </summary> + this.form.fadeIn(250); + if (!this.note.editable) { + this.area.addClass('image-annotate-area-hover'); + } else { + this.area.addClass('image-annotate-area-editable-hover'); + } + }; + + $.fn.annotateView.prototype.hide = function() { + /// <summary> + /// Removes the highlight from the annotation. + /// </summary> + this.form.fadeOut(250); + this.area.removeClass('image-annotate-area-hover'); + this.area.removeClass('image-annotate-area-editable-hover'); + }; + + $.fn.annotateView.prototype.destroy = function() { + /// <summary> + /// Destroys the annotation. + /// </summary> + this.area.remove(); + this.form.remove(); + }; + + $.fn.annotateView.prototype.edit = function(tags, labels, saveUrl, csrf, rtlsupport, users) { + /// <summary> + /// Edits the annotation. + /// </summary> + if (this.image.mode == 'view') { + this.image.mode = 'edit'; + var annotation = this; + + // Create/prepare the editable note elements + var editable = new $.fn.annotateEdit(this.image, this.note, tags, labels, saveUrl, csrf, rtlsupport, users); + $.fn.annotateImage.createSaveButton(editable, this.image, annotation, rtlsupport, labels); + $.fn.annotateImage.createCancelButton(editable, this.image, rtlsupport, labels); + } + }; + + $.fn.annotateImage.appendPosition = function(form, editable) { + /// <summary> + /// Appends the annotations coordinates to the given form that is posted to the server. + /// </summary> + var areaFields = $('<input type="hidden" value="' + editable.area.height() + '" name="height"/>' + + '<input type="hidden" value="' + editable.area.width() + '" name="width"/>' + + '<input type="hidden" value="' + editable.area.position().top + '" name="top"/>' + + '<input type="hidden" value="' + editable.area.position().left + '" name="left"/>' + + '<input type="hidden" value="' + editable.note.id + '" name="id"/>'); + form.append(areaFields); + }; + + $.fn.annotateView.prototype.resetPosition = function(editable, text) { + /// <summary> + /// Sets the position of an annotation. + /// </summary> + this.form.html(text); + this.form.hide(); + + // Resize + this.area.children('div').height(editable.area.height() + 'px'); + this.area.children('div').width((editable.area.width() - 2) + 'px'); + this.area.css('left', (editable.area.position().left) + 'px'); + this.area.css('top', (editable.area.position().top) + 'px'); + this.form.css('left', (editable.area.position().left) + 'px'); + this.form.css('top', (parseInt(editable.area.position().top) + parseInt(editable.area.height()) + 7) + 'px'); + + // Save new position to note + this.note.top = editable.area.position().top; + this.note.left = editable.area.position().left; + this.note.height = editable.area.height(); + this.note.width = editable.area.width(); + this.note.text = text; + this.note.id = editable.note.id; + this.editable = true; + }; + +})(jQuery); diff --git a/modules/photoannotation/js/jquery.annotate.min.js b/modules/photoannotation/js/jquery.annotate.min.js new file mode 100644 index 00000000..200962f4 --- /dev/null +++ b/modules/photoannotation/js/jquery.annotate.min.js @@ -0,0 +1 @@ +(function($){$.fn.annotateImage=function(options){var opts=$.extend({},$.fn.annotateImage.defaults,options);var image=this;this.image=this;this.mode='view';this.getUrl=opts.getUrl;this.saveUrl=opts.saveUrl;this.deleteUrl=opts.deleteUrl;this.deleteUrl=opts.deleteUrl;this.editable=opts.editable;this.useAjax=opts.useAjax;this.tags=opts.tags;this.notes=opts.notes;this.labels=opts.labels;this.csrf=opts.csrf;this.cssaclass=opts.cssaclass;this.rtlsupport=opts.rtlsupport;this.users=opts.users;this.canvas=$('<div class="image-annotate-canvas g-thumbnail"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');this.canvas.children('.image-annotate-edit').hide();this.canvas.children('.image-annotate-view').hide();this.image.after(this.canvas);this.canvas.height(this.height());this.canvas.width(this.width());this.canvas.css('background-image','url("'+this.attr('src')+'")');this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height());this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width());this.canvas.hover(function(){if($(this).children('.image-annotate-edit').css('display')=='none'){$(this).children('.image-annotate-view').show()}},function(){$(this).children('.image-annotate-view').hide();$(this).children('.image-annotate-note').hide()});this.canvas.children('.image-annotate-view').hover(function(){$(this).show()},function(){$(this).hide();$(this).children('.image-annotate-note').hide()});if(this.useAjax){$.fn.annotateImage.ajaxLoad(this)}else{$.fn.annotateImage.load(this,this.labels,this.editable,this.csrf,this.deleteUrl,this.tags,this.saveUrl,this.cssaclass,this.rtlsupport,this.users)}if($('#g-photoannotation-link').length!==0){this.button=$('#g-photoannotation-link');this.button.click(function(){$.fn.annotateImage.add(image,opts.tags,opts.labels,opts.saveUrl,opts.csrf,opts.rtlsupport,opts.users)})}this.hide();return this};$.fn.annotateImage.defaults={getUrl:'your-get.rails',saveUrl:'your-save.rails',deleteUrl:'your-delete.rails',editable:true,useAjax:true,tags:new Array(),notes:new Array()};$.fn.annotateImage.clear=function(image){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]].destroy()}image.notes=new Array()};$.fn.annotateImage.ajaxLoad=function(image){$.getJSON(image.getUrl+'?ticks='+$.fn.annotateImage.getTicks(),function(data){image.notes=data;$.fn.annotateImage.load(image)})};$.fn.annotateImage.load=function(image,labels,editable,csrf,deleteUrl,tags,saveUrl,cssaclass,rtlsupport,users){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]]=new $.fn.annotateView(image,image.notes[i],tags,labels,editable,csrf,deleteUrl,saveUrl,cssaclass,rtlsupport,users)}};$.fn.annotateImage.getTicks=function(){var now=new Date();return now.getTime()};$.fn.annotateImage.add=function(image,tags,labels,saveUrl,csrf,rtlsupport,users){if(image.mode=='view'){image.mode='edit';var editable=new $.fn.annotateEdit(image,null,tags,labels,saveUrl,csrf,rtlsupport,users);$.fn.annotateImage.createSaveButton(editable,image,null,rtlsupport,labels);$.fn.annotateImage.createCancelButton(editable,image,rtlsupport,labels)}};$.fn.annotateImage.createSaveButton=function(editable,image,note,rtlsupport,labels){var ok=$('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default '+rtlsupport+'">'+labels[8]+'</a>');ok.click(function(){var form=$('#image-annotate-edit-form form');var text=$('#image-annotate-text').val();$.fn.annotateImage.appendPosition(form,editable);image.mode='view';form.submit();editable.destroy()});editable.form.append(ok)};$.fn.annotateImage.createCancelButton=function(editable,image,rtlsupport,labels){var cancel=$('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default '+rtlsupport+'">'+labels[9]+'</a>');cancel.click(function(){editable.destroy();image.mode='view';location.reload()});editable.form.append(cancel)};$.fn.annotateImage.saveAsHtml=function(image,target){var element=$(target);var html="";for(var i=0;i<image.notes.length;i++){html+=$.fn.annotateImage.createHiddenField("text_"+i,image.notes[i].text);html+=$.fn.annotateImage.createHiddenField("top_"+i,image.notes[i].top);html+=$.fn.annotateImage.createHiddenField("left_"+i,image.notes[i].left);html+=$.fn.annotateImage.createHiddenField("height_"+i,image.notes[i].height);html+=$.fn.annotateImage.createHiddenField("width_"+i,image.notes[i].width)}element.html(html)};$.fn.annotateImage.createHiddenField=function(name,value){return'<input type="hidden" name="'+name+'" value="'+value+'" /><br />'};$.fn.annotateEdit=function(image,note,tags,labels,saveUrl,csrf,rtlsupport,users){this.image=image;if(note){this.note=note}else{var newNote=new Object();newNote.noteid="new";newNote.top=30;newNote.left=30;newNote.width=60;newNote.height=60;newNote.text="";newNote.description="";newNote.notetype="";newNote.internaltext="";this.note=newNote}var area=image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area');this.area=area;this.area.css('height',this.note.height+'px');this.area.css('width',this.note.width+'px');this.area.css('left',this.note.left+'px');this.area.css('top',this.note.top+'px');image.canvas.children('.image-annotate-view').hide();image.canvas.children('.image-annotate-edit').show();var selectedtag="";var notetitle="";var username="";var selecteduser="";if(this.note.notetype=="face"){selectedtag=this.note.text}else if(this.note.notetype=="user"){username=this.note.internaltext}else{notetitle=this.note.text}var form=$('<div id="image-annotate-edit-form" class="ui-dialog-content ui-widget-content '+rtlsupport+'"><form id="photoannotation-form" action="'+saveUrl+'" method="post"><input type="hidden" name="csrf" value="'+csrf+'" /><input type="hidden" name="noteid" value="'+this.note.noteid+'" /><input type="hidden" name="notetype" value="'+this.note.notetype+'" /><fieldset><legend>'+labels[12]+'</legend><label for="photoannotation-user-list">'+labels[10]+'</label><input id="photoannotation-user-list" class="textbox ui-corner-left ui-corner-right" type="text" name="userlist" style="width: 210px;" value="'+username+'" /><div style="text-align: center"><strong>'+labels[4]+'</strong></div><label for="image-annotate-tag-text">'+labels[0]+'</label><input id="image-annotate-tag-text" class="textbox ui-corner-left ui-corner-right" type="text" name="tagsList" style="width: 210px;" value="'+selectedtag+'" /><div style="text-align: center"><strong>'+labels[4]+'</strong></div><label for="image-annotate-text">'+labels[1]+'</label><input id="image-annotate-text" class="textbox ui-corner-left ui-corner-right" type="text" name="text" style="width: 210px;" value="'+notetitle+'" /></fieldset><fieldset><legend>'+labels[2]+'</legend><textarea id="image-annotate-desc" name="desc" rows="3" style="width: 210px;">'+this.note.description+'</textarea></fieldset></form></div>');this.form=form;$('body').append(this.form);$("#photoannotation-form").ready(function(){var url=tags;$("input#image-annotate-tag-text").autocomplete(url,{max:30,multiple:false,cacheLength:1});var urlusers=users;$("input#photoannotation-user-list").autocomplete(urlusers,{max:30,multiple:false,cacheLength:1})});$("input#image-annotate-tag-text").keyup(function(){if($("input#image-annotate-tag-text").val()!=""){$("input#image-annotate-text").html("");$("input#image-annotate-text").val("");$("input#photoannotation-user-list").html("");$("input#photoannotation-user-list").val("")}});$("input#image-annotate-text").keyup(function(){if($("input#image-annotate-text").val()!=""){$("input#image-annotate-tag-text").html("");$("input#image-annotate-tag-text").val("");$("input#photoannotation-user-list").html("");$("input#photoannotation-user-list").val("")}});$("input#photoannotation-user-list").keyup(function(){if($("select#photoannotation-user-list").val()!="-1"){$("input#image-annotate-tag-text").html("");$("input#image-annotate-tag-text").val("");$("input#image-annotate-text").html("");$("input#image-annotate-text").val("")}});this.form.css('left',this.area.offset().left+'px');this.form.css('top',(parseInt(this.area.offset().top)+parseInt(this.area.height())+7)+'px');area.resizable({handles:'all',start:function(e,ui){form.hide()},stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+7)+'px');form.show()}}).draggable({containment:image.canvas,drag:function(e,ui){form.hide()},stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+7)+'px');form.show()}});return this};$.fn.annotateEdit.prototype.destroy=function(){this.image.canvas.children('.image-annotate-edit').hide();this.area.resizable('destroy');this.area.draggable('destroy');this.area.css('height','');this.area.css('width','');this.area.css('left','');this.area.css('top','');this.form.remove()};$.fn.annotateView=function(image,note,tags,labels,editable,csrf,deleteUrl,saveUrl,cssaclass,rtlsupport,users){this.image=image;this.note=note;this.area=$('<div id="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'" class="image-annotate-area'+(this.note.editable?' image-annotate-area-editable':'')+'"><div></div></div>');image.canvas.children('.image-annotate-view').prepend(this.area);if(editable){this.delarea=$('<div class="image-annotate-area photoannotation-del-button"><div><form id="photoannotation-del-'+this.note.noteid+'" class="photoannotation-del-form" method="post" action="'+deleteUrl+'"><input type="hidden" name="notetype" value="'+this.note.notetype+'" /><input type="hidden" name="noteid" value="'+this.note.noteid+'" /><input type="hidden" name="csrf" value="'+csrf+'" /></form></div></div>');this.editarea=$('<div id="photoannotation-edit-'+this.note.noteid+'" class="image-annotate-area photoannotation-edit-button"><div></div></div>');image.canvas.children('.image-annotate-view').prepend(this.delarea);image.canvas.children('.image-annotate-view').prepend(this.editarea);this.delarea.bind('click',function(){var alink=$(cssaclass);alink.unbind();alink.attr('href','#');alink.removeAttr('rel');var confdialog='<div id="image-annotate-conf-dialog" rel="'+$(this).find('form.photoannotation-del-form').attr('id')+'">'+labels[3]+'<div />';$('body').append(confdialog);var btns={};if(rtlsupport==""){diagclass="inmage-annotate-dialog"}else{diagclass="inmage-annotate-dialog-rtl"}btns[labels[5]]=function(){var delform=$(this).attr("rel");$("form#"+delform).submit()};btns[labels[6]]=function(){location.reload()};$('#image-annotate-conf-dialog').dialog({modal:true,resizable:false,dialogClass:diagclass,title:labels[7],close:function(event,ui){location.reload()},buttons:btns})});var form=this;this.editarea.bind('click',function(){var alink=$(cssaclass);alink.unbind();alink.attr('href','#');alink.removeAttr('rel');form.edit(tags,labels,saveUrl,csrf,rtlsupport,users)});this.delarea.hide();this.editarea.hide()}var notedescription="";if(note.description!=""){notedescription="<br />"+note.description}this.form=$('<div class="image-annotate-note">'+note.text+notedescription+'</div>');this.form.hide();image.canvas.children('.image-annotate-view').append(this.form);this.form.children('span.actions').hide();this.setPosition(rtlsupport);var annotation=this;this.area.hover(function(){annotation.show();if(annotation.delarea!=undefined){annotation.delarea.show();annotation.editarea.show()}},function(){annotation.hide();if(annotation.delarea!=undefined){annotation.delarea.hide();annotation.editarea.hide()}});var legendspan="#photoannotation-legend-"+this.note.notetype+"-"+this.note.noteid;if($(legendspan).length>0){$(legendspan).hover(function(){var legendsarea="#photoannotation-area-"+note.notetype+"-"+note.noteid;$(legendsarea).children('.image-annotate-view').show();$(".image-annotate-view").show();$(legendsarea).show();annotation.show()},function(){var legendsarea="#photoannotation-area-"+note.notetype+"-"+note.noteid;annotation.hide();$(legendsarea).children('.image-annotate-view').hide();$(".image-annotate-view").hide()})}if(editable){this.delarea.hover(function(){annotation.delarea.show();annotation.editarea.show()},function(){annotation.delarea.hide();annotation.editarea.hide()});this.editarea.hover(function(){annotation.delarea.show();annotation.editarea.show()},function(){annotation.delarea.hide();annotation.editarea.hide()})}if(note.url!=""&¬e.url!=null){this.area.bind('click',function(){var alink=$(cssaclass);alink.unbind();alink.attr('href','#');alink.removeAttr('rel');window.location=note.url})}};$.fn.annotateView.prototype.setPosition=function(rtlsupport){this.area.children('div').height((parseInt(this.note.height)-2)+'px');this.area.children('div').width((parseInt(this.note.width)-2)+'px');this.area.css('left',(this.note.left)+'px');this.area.css('top',(this.note.top)+'px');this.form.css('left',(this.note.left)+'px');this.form.css('top',(parseInt(this.note.top)+parseInt(this.note.height)+7)+'px');if(this.delarea!=undefined){this.delarea.children('div').height('14px');this.delarea.children('div').width('14px');this.delarea.css('top',(this.note.top)+'px');this.editarea.children('div').height('14px');this.editarea.children('div').width('14px');if(rtlsupport==''){this.delarea.css('left',(this.note.left+parseInt(this.note.width))+'px');this.editarea.css('left',(this.note.left+parseInt(this.note.width))+'px')}else{this.delarea.css('left',(this.note.left-16)+'px');this.editarea.css('left',(this.note.left-16)+'px')}this.editarea.css('top',(this.note.top+16)+'px')}};$.fn.annotateView.prototype.show=function(){this.form.fadeIn(250);if(!this.note.editable){this.area.addClass('image-annotate-area-hover')}else{this.area.addClass('image-annotate-area-editable-hover')}};$.fn.annotateView.prototype.hide=function(){this.form.fadeOut(250);this.area.removeClass('image-annotate-area-hover');this.area.removeClass('image-annotate-area-editable-hover')};$.fn.annotateView.prototype.destroy=function(){this.area.remove();this.form.remove()};$.fn.annotateView.prototype.edit=function(tags,labels,saveUrl,csrf,rtlsupport,users){if(this.image.mode=='view'){this.image.mode='edit';var annotation=this;var editable=new $.fn.annotateEdit(this.image,this.note,tags,labels,saveUrl,csrf,rtlsupport,users);$.fn.annotateImage.createSaveButton(editable,this.image,annotation,rtlsupport,labels);$.fn.annotateImage.createCancelButton(editable,this.image,rtlsupport,labels)}};$.fn.annotateImage.appendPosition=function(form,editable){var areaFields=$('<input type="hidden" value="'+editable.area.height()+'" name="height"/>'+'<input type="hidden" value="'+editable.area.width()+'" name="width"/>'+'<input type="hidden" value="'+editable.area.position().top+'" name="top"/>'+'<input type="hidden" value="'+editable.area.position().left+'" name="left"/>'+'<input type="hidden" value="'+editable.note.id+'" name="id"/>');form.append(areaFields)};$.fn.annotateView.prototype.resetPosition=function(editable,text){this.form.html(text);this.form.hide();this.area.children('div').height(editable.area.height()+'px');this.area.children('div').width((editable.area.width()-2)+'px');this.area.css('left',(editable.area.position().left)+'px');this.area.css('top',(editable.area.position().top)+'px');this.form.css('left',(editable.area.position().left)+'px');this.form.css('top',(parseInt(editable.area.position().top)+parseInt(editable.area.height())+7)+'px');this.note.top=editable.area.position().top;this.note.left=editable.area.position().left;this.note.height=editable.area.height();this.note.width=editable.area.width();this.note.text=text;this.note.id=editable.note.id;this.editable=true}})(jQuery); diff --git a/modules/photoannotation/js/jquery.colorpicker.js b/modules/photoannotation/js/jquery.colorpicker.js new file mode 100644 index 00000000..802e7c18 --- /dev/null +++ b/modules/photoannotation/js/jquery.colorpicker.js @@ -0,0 +1,484 @@ +/** + * + * Color picker + * Author: Stefan Petre www.eyecon.ro + * + * Dual licensed under the MIT and GPL licenses + * + */ +(function ($) { + var ColorPicker = function () { + var + ids = {}, + inAction, + charMin = 65, + visible, + tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>', + defaults = { + eventName: 'click', + onShow: function () {}, + onBeforeShow: function(){}, + onHide: function () {}, + onChange: function () {}, + onSubmit: function () {}, + color: 'ff0000', + livePreview: true, + flat: false + }, + fillRGBFields = function (hsb, cal) { + var rgb = HSBToRGB(hsb); + $(cal).data('colorpicker').fields + .eq(1).val(rgb.r).end() + .eq(2).val(rgb.g).end() + .eq(3).val(rgb.b).end(); + }, + fillHSBFields = function (hsb, cal) { + $(cal).data('colorpicker').fields + .eq(4).val(hsb.h).end() + .eq(5).val(hsb.s).end() + .eq(6).val(hsb.b).end(); + }, + fillHexFields = function (hsb, cal) { + $(cal).data('colorpicker').fields + .eq(0).val(HSBToHex(hsb)).end(); + }, + setSelector = function (hsb, cal) { + $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100})); + $(cal).data('colorpicker').selectorIndic.css({ + left: parseInt(150 * hsb.s/100, 10), + top: parseInt(150 * (100-hsb.b)/100, 10) + }); + }, + setHue = function (hsb, cal) { + $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10)); + }, + setCurrentColor = function (hsb, cal) { + $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb)); + }, + setNewColor = function (hsb, cal) { + $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb)); + }, + keyDown = function (ev) { + var pressedKey = ev.charCode || ev.keyCode || -1; + if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) { + return false; + } + var cal = $(this).parent().parent(); + if (cal.data('colorpicker').livePreview === true) { + change.apply(this); + } + }, + change = function (ev) { + var cal = $(this).parent().parent(), col; + if (this.parentNode.className.indexOf('_hex') > 0) { + cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value)); + } else if (this.parentNode.className.indexOf('_hsb') > 0) { + cal.data('colorpicker').color = col = fixHSB({ + h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10), + s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10), + b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10) + }); + } else { + cal.data('colorpicker').color = col = RGBToHSB(fixRGB({ + r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10), + g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10), + b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10) + })); + } + if (ev) { + fillRGBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + } + setSelector(col, cal.get(0)); + setHue(col, cal.get(0)); + setNewColor(col, cal.get(0)); + cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]); + }, + blur = function (ev) { + var cal = $(this).parent().parent(); + cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus'); + }, + focus = function () { + charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65; + $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus'); + $(this).parent().addClass('colorpicker_focus'); + }, + downIncrement = function (ev) { + var field = $(this).parent().find('input').focus(); + var current = { + el: $(this).parent().addClass('colorpicker_slider'), + max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255), + y: ev.pageY, + field: field, + val: parseInt(field.val(), 10), + preview: $(this).parent().parent().data('colorpicker').livePreview + }; + $(document).bind('mouseup', current, upIncrement); + $(document).bind('mousemove', current, moveIncrement); + }, + moveIncrement = function (ev) { + ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10)))); + if (ev.data.preview) { + change.apply(ev.data.field.get(0), [true]); + } + return false; + }, + upIncrement = function (ev) { + change.apply(ev.data.field.get(0), [true]); + ev.data.el.removeClass('colorpicker_slider').find('input').focus(); + $(document).unbind('mouseup', upIncrement); + $(document).unbind('mousemove', moveIncrement); + return false; + }, + downHue = function (ev) { + var current = { + cal: $(this).parent(), + y: $(this).offset().top + }; + current.preview = current.cal.data('colorpicker').livePreview; + $(document).bind('mouseup', current, upHue); + $(document).bind('mousemove', current, moveHue); + }, + moveHue = function (ev) { + change.apply( + ev.data.cal.data('colorpicker') + .fields + .eq(4) + .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10)) + .get(0), + [ev.data.preview] + ); + return false; + }, + upHue = function (ev) { + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + $(document).unbind('mouseup', upHue); + $(document).unbind('mousemove', moveHue); + return false; + }, + downSelector = function (ev) { + var current = { + cal: $(this).parent(), + pos: $(this).offset() + }; + current.preview = current.cal.data('colorpicker').livePreview; + $(document).bind('mouseup', current, upSelector); + $(document).bind('mousemove', current, moveSelector); + }, + moveSelector = function (ev) { + change.apply( + ev.data.cal.data('colorpicker') + .fields + .eq(6) + .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10)) + .end() + .eq(5) + .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10)) + .get(0), + [ev.data.preview] + ); + return false; + }, + upSelector = function (ev) { + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + $(document).unbind('mouseup', upSelector); + $(document).unbind('mousemove', moveSelector); + return false; + }, + enterSubmit = function (ev) { + $(this).addClass('colorpicker_focus'); + }, + leaveSubmit = function (ev) { + $(this).removeClass('colorpicker_focus'); + }, + clickSubmit = function (ev) { + var cal = $(this).parent(); + var col = cal.data('colorpicker').color; + cal.data('colorpicker').origColor = col; + setCurrentColor(col, cal.get(0)); + cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el); + }, + show = function (ev) { + var cal = $('#' + $(this).data('colorpickerId')); + cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]); + var pos = $(this).offset(); + var viewPort = getViewport(); + var top = pos.top + this.offsetHeight; + var left = pos.left; + if (top + 176 > viewPort.t + viewPort.h) { + top -= this.offsetHeight + 176; + } + if (left + 356 > viewPort.l + viewPort.w) { + left -= 356; + } + cal.css({left: left + 'px', top: top + 'px'}); + if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) { + cal.show(); + } + $(document).bind('mousedown', {cal: cal}, hide); + return false; + }, + hide = function (ev) { + if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) { + if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) { + ev.data.cal.hide(); + } + $(document).unbind('mousedown', hide); + } + }, + isChildOf = function(parentEl, el, container) { + if (parentEl == el) { + return true; + } + if (parentEl.contains) { + return parentEl.contains(el); + } + if ( parentEl.compareDocumentPosition ) { + return !!(parentEl.compareDocumentPosition(el) & 16); + } + var prEl = el.parentNode; + while(prEl && prEl != container) { + if (prEl == parentEl) + return true; + prEl = prEl.parentNode; + } + return false; + }, + getViewport = function () { + var m = document.compatMode == 'CSS1Compat'; + return { + l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), + t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop), + w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth), + h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight) + }; + }, + fixHSB = function (hsb) { + return { + h: Math.min(360, Math.max(0, hsb.h)), + s: Math.min(100, Math.max(0, hsb.s)), + b: Math.min(100, Math.max(0, hsb.b)) + }; + }, + fixRGB = function (rgb) { + return { + r: Math.min(255, Math.max(0, rgb.r)), + g: Math.min(255, Math.max(0, rgb.g)), + b: Math.min(255, Math.max(0, rgb.b)) + }; + }, + fixHex = function (hex) { + var len = 6 - hex.length; + if (len > 0) { + var o = []; + for (var i=0; i<len; i++) { + o.push('0'); + } + o.push(hex); + hex = o.join(''); + } + return hex; + }, + HexToRGB = function (hex) { + var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); + return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)}; + }, + HexToHSB = function (hex) { + return RGBToHSB(HexToRGB(hex)); + }, + RGBToHSB = function (rgb) { + var hsb = { + h: 0, + s: 0, + b: 0 + }; + var min = Math.min(rgb.r, rgb.g, rgb.b); + var max = Math.max(rgb.r, rgb.g, rgb.b); + var delta = max - min; + hsb.b = max; + if (max != 0) { + + } + hsb.s = max != 0 ? 255 * delta / max : 0; + if (hsb.s != 0) { + if (rgb.r == max) { + hsb.h = (rgb.g - rgb.b) / delta; + } else if (rgb.g == max) { + hsb.h = 2 + (rgb.b - rgb.r) / delta; + } else { + hsb.h = 4 + (rgb.r - rgb.g) / delta; + } + } else { + hsb.h = -1; + } + hsb.h *= 60; + if (hsb.h < 0) { + hsb.h += 360; + } + hsb.s *= 100/255; + hsb.b *= 100/255; + return hsb; + }, + HSBToRGB = function (hsb) { + var rgb = {}; + var h = Math.round(hsb.h); + var s = Math.round(hsb.s*255/100); + var v = Math.round(hsb.b*255/100); + if(s == 0) { + rgb.r = rgb.g = rgb.b = v; + } else { + var t1 = v; + var t2 = (255-s)*v/255; + var t3 = (t1-t2)*(h%60)/60; + if(h==360) h = 0; + if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3} + else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3} + else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3} + else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3} + else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3} + else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3} + else {rgb.r=0; rgb.g=0; rgb.b=0} + } + return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)}; + }, + RGBToHex = function (rgb) { + var hex = [ + rgb.r.toString(16), + rgb.g.toString(16), + rgb.b.toString(16) + ]; + $.each(hex, function (nr, val) { + if (val.length == 1) { + hex[nr] = '0' + val; + } + }); + return hex.join(''); + }, + HSBToHex = function (hsb) { + return RGBToHex(HSBToRGB(hsb)); + }, + restoreOriginal = function () { + var cal = $(this).parent(); + var col = cal.data('colorpicker').origColor; + cal.data('colorpicker').color = col; + fillRGBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + setSelector(col, cal.get(0)); + setHue(col, cal.get(0)); + setNewColor(col, cal.get(0)); + }; + return { + init: function (opt) { + opt = $.extend({}, defaults, opt||{}); + if (typeof opt.color == 'string') { + opt.color = HexToHSB(opt.color); + } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) { + opt.color = RGBToHSB(opt.color); + } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) { + opt.color = fixHSB(opt.color); + } else { + return this; + } + return this.each(function () { + if (!$(this).data('colorpickerId')) { + var options = $.extend({}, opt); + options.origColor = opt.color; + var id = 'collorpicker_' + parseInt(Math.random() * 1000); + $(this).data('colorpickerId', id); + var cal = $(tpl).attr('id', id); + if (options.flat) { + cal.appendTo(this).show(); + } else { + cal.appendTo(document.body); + } + options.fields = cal + .find('input') + .bind('keyup', keyDown) + .bind('change', change) + .bind('blur', blur) + .bind('focus', focus); + cal + .find('span').bind('mousedown', downIncrement).end() + .find('>div.colorpicker_current_color').bind('click', restoreOriginal); + options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector); + options.selectorIndic = options.selector.find('div div'); + options.el = this; + options.hue = cal.find('div.colorpicker_hue div'); + cal.find('div.colorpicker_hue').bind('mousedown', downHue); + options.newColor = cal.find('div.colorpicker_new_color'); + options.currentColor = cal.find('div.colorpicker_current_color'); + cal.data('colorpicker', options); + cal.find('div.colorpicker_submit') + .bind('mouseenter', enterSubmit) + .bind('mouseleave', leaveSubmit) + .bind('click', clickSubmit); + fillRGBFields(options.color, cal.get(0)); + fillHSBFields(options.color, cal.get(0)); + fillHexFields(options.color, cal.get(0)); + setHue(options.color, cal.get(0)); + setSelector(options.color, cal.get(0)); + setCurrentColor(options.color, cal.get(0)); + setNewColor(options.color, cal.get(0)); + if (options.flat) { + cal.css({ + position: 'relative', + display: 'block' + }); + } else { + $(this).bind(options.eventName, show); + } + } + }); + }, + showPicker: function() { + return this.each( function () { + if ($(this).data('colorpickerId')) { + show.apply(this); + } + }); + }, + hidePicker: function() { + return this.each( function () { + if ($(this).data('colorpickerId')) { + $('#' + $(this).data('colorpickerId')).hide(); + } + }); + }, + setColor: function(col) { + if (typeof col == 'string') { + col = HexToHSB(col); + } else if (col.r != undefined && col.g != undefined && col.b != undefined) { + col = RGBToHSB(col); + } else if (col.h != undefined && col.s != undefined && col.b != undefined) { + col = fixHSB(col); + } else { + return this; + } + return this.each(function(){ + if ($(this).data('colorpickerId')) { + var cal = $('#' + $(this).data('colorpickerId')); + cal.data('colorpicker').color = col; + cal.data('colorpicker').origColor = col; + fillRGBFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + setHue(col, cal.get(0)); + setSelector(col, cal.get(0)); + setCurrentColor(col, cal.get(0)); + setNewColor(col, cal.get(0)); + } + }); + } + }; + }(); + $.fn.extend({ + ColorPicker: ColorPicker.init, + ColorPickerHide: ColorPicker.hidePicker, + ColorPickerShow: ColorPicker.showPicker, + ColorPickerSetColor: ColorPicker.setColor + }); +})(jQuery); diff --git a/modules/photoannotation/js/jquery.colorpicker.min.js b/modules/photoannotation/js/jquery.colorpicker.min.js new file mode 100644 index 00000000..36da9f98 --- /dev/null +++ b/modules/photoannotation/js/jquery.colorpicker.min.js @@ -0,0 +1 @@ +(function($){var ColorPicker=function(){var ids={},inAction,charMin=65,visible,tpl='<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',defaults={eventName:'click',onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:'ff0000',livePreview:true,flat:false},fillRGBFields=function(hsb,cal){var rgb=HSBToRGB(hsb);$(cal).data('colorpicker').fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end()},fillHSBFields=function(hsb,cal){$(cal).data('colorpicker').fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end()},fillHexFields=function(hsb,cal){$(cal).data('colorpicker').fields.eq(0).val(HSBToHex(hsb)).end()},setSelector=function(hsb,cal){$(cal).data('colorpicker').selector.css('backgroundColor','#'+HSBToHex({h:hsb.h,s:100,b:100}));$(cal).data('colorpicker').selectorIndic.css({left:parseInt(150*hsb.s/100,10),top:parseInt(150*(100-hsb.b)/100,10)})},setHue=function(hsb,cal){$(cal).data('colorpicker').hue.css('top',parseInt(150-150*hsb.h/360,10))},setCurrentColor=function(hsb,cal){$(cal).data('colorpicker').currentColor.css('backgroundColor','#'+HSBToHex(hsb))},setNewColor=function(hsb,cal){$(cal).data('colorpicker').newColor.css('backgroundColor','#'+HSBToHex(hsb))},keyDown=function(ev){var pressedKey=ev.charCode||ev.keyCode||-1;if((pressedKey>charMin&&pressedKey<=90)||pressedKey==32){return false}var cal=$(this).parent().parent();if(cal.data('colorpicker').livePreview===true){change.apply(this)}},change=function(ev){var cal=$(this).parent().parent(),col;if(this.parentNode.className.indexOf('_hex')>0){cal.data('colorpicker').color=col=HexToHSB(fixHex(this.value))}else if(this.parentNode.className.indexOf('_hsb')>0){cal.data('colorpicker').color=col=fixHSB({h:parseInt(cal.data('colorpicker').fields.eq(4).val(),10),s:parseInt(cal.data('colorpicker').fields.eq(5).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(6).val(),10)})}else{cal.data('colorpicker').color=col=RGBToHSB(fixRGB({r:parseInt(cal.data('colorpicker').fields.eq(1).val(),10),g:parseInt(cal.data('colorpicker').fields.eq(2).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(3).val(),10)}))}if(ev){fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0))}setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0));cal.data('colorpicker').onChange.apply(cal,[col,HSBToHex(col),HSBToRGB(col)])},blur=function(ev){var cal=$(this).parent().parent();cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')},focus=function(){charMin=this.parentNode.className.indexOf('_hex')>0?70:65;$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');$(this).parent().addClass('colorpicker_focus')},downIncrement=function(ev){var field=$(this).parent().find('input').focus();var current={el:$(this).parent().addClass('colorpicker_slider'),max:this.parentNode.className.indexOf('_hsb_h')>0?360:(this.parentNode.className.indexOf('_hsb')>0?100:255),y:ev.pageY,field:field,val:parseInt(field.val(),10),preview:$(this).parent().parent().data('colorpicker').livePreview};$(document).bind('mouseup',current,upIncrement);$(document).bind('mousemove',current,moveIncrement)},moveIncrement=function(ev){ev.data.field.val(Math.max(0,Math.min(ev.data.max,parseInt(ev.data.val+ev.pageY-ev.data.y,10))));if(ev.data.preview){change.apply(ev.data.field.get(0),[true])}return false},upIncrement=function(ev){change.apply(ev.data.field.get(0),[true]);ev.data.el.removeClass('colorpicker_slider').find('input').focus();$(document).unbind('mouseup',upIncrement);$(document).unbind('mousemove',moveIncrement);return false},downHue=function(ev){var current={cal:$(this).parent(),y:$(this).offset().top};current.preview=current.cal.data('colorpicker').livePreview;$(document).bind('mouseup',current,upHue);$(document).bind('mousemove',current,moveHue)},moveHue=function(ev){change.apply(ev.data.cal.data('colorpicker').fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,(ev.pageY-ev.data.y))))/150,10)).get(0),[ev.data.preview]);return false},upHue=function(ev){fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));$(document).unbind('mouseup',upHue);$(document).unbind('mousemove',moveHue);return false},downSelector=function(ev){var current={cal:$(this).parent(),pos:$(this).offset()};current.preview=current.cal.data('colorpicker').livePreview;$(document).bind('mouseup',current,upSelector);$(document).bind('mousemove',current,moveSelector)},moveSelector=function(ev){change.apply(ev.data.cal.data('colorpicker').fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,(ev.pageY-ev.data.pos.top))))/150,10)).end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX-ev.data.pos.left))))/150,10)).get(0),[ev.data.preview]);return false},upSelector=function(ev){fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));$(document).unbind('mouseup',upSelector);$(document).unbind('mousemove',moveSelector);return false},enterSubmit=function(ev){$(this).addClass('colorpicker_focus')},leaveSubmit=function(ev){$(this).removeClass('colorpicker_focus')},clickSubmit=function(ev){var cal=$(this).parent();var col=cal.data('colorpicker').color;cal.data('colorpicker').origColor=col;setCurrentColor(col,cal.get(0));cal.data('colorpicker').onSubmit(col,HSBToHex(col),HSBToRGB(col),cal.data('colorpicker').el)},show=function(ev){var cal=$('#'+$(this).data('colorpickerId'));cal.data('colorpicker').onBeforeShow.apply(this,[cal.get(0)]);var pos=$(this).offset();var viewPort=getViewport();var top=pos.top+this.offsetHeight;var left=pos.left;if(top+176>viewPort.t+viewPort.h){top-=this.offsetHeight+176}if(left+356>viewPort.l+viewPort.w){left-=356}cal.css({left:left+'px',top:top+'px'});if(cal.data('colorpicker').onShow.apply(this,[cal.get(0)])!=false){cal.show()}$(document).bind('mousedown',{cal:cal},hide);return false},hide=function(ev){if(!isChildOf(ev.data.cal.get(0),ev.target,ev.data.cal.get(0))){if(ev.data.cal.data('colorpicker').onHide.apply(this,[ev.data.cal.get(0)])!=false){ev.data.cal.hide()}$(document).unbind('mousedown',hide)}},isChildOf=function(parentEl,el,container){if(parentEl==el){return true}if(parentEl.contains){return parentEl.contains(el)}if(parentEl.compareDocumentPosition){return!!(parentEl.compareDocumentPosition(el)&16)}var prEl=el.parentNode;while(prEl&&prEl!=container){if(prEl==parentEl)return true;prEl=prEl.parentNode}return false},getViewport=function(){var m=document.compatMode=='CSS1Compat';return{l:window.pageXOffset||(m?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(m?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(m?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(m?document.documentElement.clientHeight:document.body.clientHeight)}},fixHSB=function(hsb){return{h:Math.min(360,Math.max(0,hsb.h)),s:Math.min(100,Math.max(0,hsb.s)),b:Math.min(100,Math.max(0,hsb.b))}},fixRGB=function(rgb){return{r:Math.min(255,Math.max(0,rgb.r)),g:Math.min(255,Math.max(0,rgb.g)),b:Math.min(255,Math.max(0,rgb.b))}},fixHex=function(hex){var len=6-hex.length;if(len>0){var o=[];for(var i=0;i<len;i++){o.push('0')}o.push(hex);hex=o.join('')}return hex},HexToRGB=function(hex){var hex=parseInt(((hex.indexOf('#')>-1)?hex.substring(1):hex),16);return{r:hex>>16,g:(hex&0x00FF00)>>8,b:(hex&0x0000FF)}},HexToHSB=function(hex){return RGBToHSB(HexToRGB(hex))},RGBToHSB=function(rgb){var hsb={h:0,s:0,b:0};var min=Math.min(rgb.r,rgb.g,rgb.b);var max=Math.max(rgb.r,rgb.g,rgb.b);var delta=max-min;hsb.b=max;if(max!=0){}hsb.s=max!=0?255*delta/max:0;if(hsb.s!=0){if(rgb.r==max){hsb.h=(rgb.g-rgb.b)/delta}else if(rgb.g==max){hsb.h=2+(rgb.b-rgb.r)/delta}else{hsb.h=4+(rgb.r-rgb.g)/delta}}else{hsb.h=-1}hsb.h*=60;if(hsb.h<0){hsb.h+=360}hsb.s*=100/255;hsb.b*=100/255;return hsb},HSBToRGB=function(hsb){var rgb={};var h=Math.round(hsb.h);var s=Math.round(hsb.s*255/100);var v=Math.round(hsb.b*255/100);if(s==0){rgb.r=rgb.g=rgb.b=v}else{var t1=v;var t2=(255-s)*v/255;var t3=(t1-t2)*(h%60)/60;if(h==360)h=0;if(h<60){rgb.r=t1;rgb.b=t2;rgb.g=t2+t3}else if(h<120){rgb.g=t1;rgb.b=t2;rgb.r=t1-t3}else if(h<180){rgb.g=t1;rgb.r=t2;rgb.b=t2+t3}else if(h<240){rgb.b=t1;rgb.r=t2;rgb.g=t1-t3}else if(h<300){rgb.b=t1;rgb.g=t2;rgb.r=t2+t3}else if(h<360){rgb.r=t1;rgb.g=t2;rgb.b=t1-t3}else{rgb.r=0;rgb.g=0;rgb.b=0}}return{r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}},RGBToHex=function(rgb){var hex=[rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];$.each(hex,function(nr,val){if(val.length==1){hex[nr]='0'+val}});return hex.join('')},HSBToHex=function(hsb){return RGBToHex(HSBToRGB(hsb))},restoreOriginal=function(){var cal=$(this).parent();var col=cal.data('colorpicker').origColor;cal.data('colorpicker').color=col;fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0));setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0))};return{init:function(opt){opt=$.extend({},defaults,opt||{});if(typeof opt.color=='string'){opt.color=HexToHSB(opt.color)}else if(opt.color.r!=undefined&&opt.color.g!=undefined&&opt.color.b!=undefined){opt.color=RGBToHSB(opt.color)}else if(opt.color.h!=undefined&&opt.color.s!=undefined&&opt.color.b!=undefined){opt.color=fixHSB(opt.color)}else{return this}return this.each(function(){if(!$(this).data('colorpickerId')){var options=$.extend({},opt);options.origColor=opt.color;var id='collorpicker_'+parseInt(Math.random()*1000);$(this).data('colorpickerId',id);var cal=$(tpl).attr('id',id);if(options.flat){cal.appendTo(this).show()}else{cal.appendTo(document.body)}options.fields=cal.find('input').bind('keyup',keyDown).bind('change',change).bind('blur',blur).bind('focus',focus);cal.find('span').bind('mousedown',downIncrement).end().find('>div.colorpicker_current_color').bind('click',restoreOriginal);options.selector=cal.find('div.colorpicker_color').bind('mousedown',downSelector);options.selectorIndic=options.selector.find('div div');options.el=this;options.hue=cal.find('div.colorpicker_hue div');cal.find('div.colorpicker_hue').bind('mousedown',downHue);options.newColor=cal.find('div.colorpicker_new_color');options.currentColor=cal.find('div.colorpicker_current_color');cal.data('colorpicker',options);cal.find('div.colorpicker_submit').bind('mouseenter',enterSubmit).bind('mouseleave',leaveSubmit).bind('click',clickSubmit);fillRGBFields(options.color,cal.get(0));fillHSBFields(options.color,cal.get(0));fillHexFields(options.color,cal.get(0));setHue(options.color,cal.get(0));setSelector(options.color,cal.get(0));setCurrentColor(options.color,cal.get(0));setNewColor(options.color,cal.get(0));if(options.flat){cal.css({position:'relative',display:'block'})}else{$(this).bind(options.eventName,show)}}})},showPicker:function(){return this.each(function(){if($(this).data('colorpickerId')){show.apply(this)}})},hidePicker:function(){return this.each(function(){if($(this).data('colorpickerId')){$('#'+$(this).data('colorpickerId')).hide()}})},setColor:function(col){if(typeof col=='string'){col=HexToHSB(col)}else if(col.r!=undefined&&col.g!=undefined&&col.b!=undefined){col=RGBToHSB(col)}else if(col.h!=undefined&&col.s!=undefined&&col.b!=undefined){col=fixHSB(col)}else{return this}return this.each(function(){if($(this).data('colorpickerId')){var cal=$('#'+$(this).data('colorpickerId'));cal.data('colorpicker').color=col;cal.data('colorpicker').origColor=col;fillRGBFields(col,cal.get(0));fillHSBFields(col,cal.get(0));fillHexFields(col,cal.get(0));setHue(col,cal.get(0));setSelector(col,cal.get(0));setCurrentColor(col,cal.get(0));setNewColor(col,cal.get(0))}})}}}();$.fn.extend({ColorPicker:ColorPicker.init,ColorPickerHide:ColorPicker.hidePicker,ColorPickerShow:ColorPicker.showPicker,ColorPickerSetColor:ColorPicker.setColor})})(jQuery); |