Mercurial > hg > OKFNAnnotator

comparison annotator_files/lib/editor.js @ 3:6356e78ccf5c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new version contains Annotator JS files to be used with FilesystemSite.
author casties
date Thu, 05 Apr 2012 19:37:27 +0200
parents
children 6979313586cf
comparison
equal deleted inserted replaced
2:4c6c8835fc5c 3:6356e78ccf5c
1 var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
2 __hasProp = Object.prototype.hasOwnProperty,
3 __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
4
5 Annotator.Editor = (function(_super) {
6
7 __extends(Editor, _super);
8
9 Editor.prototype.events = {
10 "form submit": "submit",
11 ".annotator-save click": "submit",
12 ".annotator-cancel click": "hide",
13 ".annotator-cancel mouseover": "onCancelButtonMouseover",
14 "textarea keydown": "processKeypress"
15 };
16
17 Editor.prototype.classes = {
18 hide: 'annotator-hide',
19 focus: 'annotator-focus'
20 };
21
22 Editor.prototype.html = "<div class=\"annotator-outer annotator-editor\">\n <form class=\"annotator-widget\">\n <ul class=\"annotator-listing\"></ul>\n <div class=\"annotator-controls\">\n <a href=\"#cancel\" class=\"annotator-cancel\">" + _t('Cancel') + "</a>\n<a href=\"#save\" class=\"annotator-save annotator-focus\">" + _t('Save') + "</a>\n </div>\n </form>\n</div>";
23
24 Editor.prototype.options = {};
25
26 function Editor(options) {
27 this.onCancelButtonMouseover = __bind(this.onCancelButtonMouseover, this);
28 this.processKeypress = __bind(this.processKeypress, this);
29 this.submit = __bind(this.submit, this);
30 this.load = __bind(this.load, this);
31 this.hide = __bind(this.hide, this);
32 this.show = __bind(this.show, this); Editor.__super__.constructor.call(this, $(this.html)[0], options);
33 this.fields = [];
34 this.annotation = {};
35 }
36
37 Editor.prototype.show = function(event) {
38 util.preventEventDefault(event);
39 this.element.removeClass(this.classes.hide);
40 this.element.find('.annotator-save').addClass(this.classes.focus);
41 this.checkOrientation();
42 this.element.find(":input:first").focus();
43 this.setupDraggables();
44 return this.publish('show');
45 };
46
47 Editor.prototype.hide = function(event) {
48 util.preventEventDefault(event);
49 this.element.addClass(this.classes.hide);
50 return this.publish('hide');
51 };
52
53 Editor.prototype.load = function(annotation) {
54 var field, _i, _len, _ref;
55 this.annotation = annotation;
56 this.publish('load', [this.annotation]);
57 _ref = this.fields;
58 for (_i = 0, _len = _ref.length; _i < _len; _i++) {
59 field = _ref[_i];
60 field.load(field.element, this.annotation);
61 }
62 return this.show();
63 };
64
65 Editor.prototype.submit = function(event) {
66 var field, _i, _len, _ref;
67 util.preventEventDefault(event);
68 _ref = this.fields;
69 for (_i = 0, _len = _ref.length; _i < _len; _i++) {
70 field = _ref[_i];
71 field.submit(field.element, this.annotation);
72 }
73 this.publish('save', [this.annotation]);
74 return this.hide();
75 };
76
77 Editor.prototype.addField = function(options) {
78 var element, field, input;
79 field = $.extend({
80 id: 'annotator-field-' + util.uuid(),
81 type: 'input',
82 label: '',
83 load: function() {},
84 submit: function() {}
85 }, options);
86 input = null;
87 element = $('<li class="annotator-item" />');
88 field.element = element[0];
89 switch (field.type) {
90 case 'textarea':
91 input = $('<textarea />');
92 break;
93 case 'input':
94 case 'checkbox':
95 input = $('<input />');
96 }
97 element.append(input);
98 input.attr({
99 id: field.id,
100 placeholder: field.label
101 });
102 if (field.type === 'checkbox') {
103 input[0].type = 'checkbox';
104 element.addClass('annotator-checkbox');
105 element.append($('<label />', {
106 "for": field.id,
107 html: field.label
108 }));
109 }
110 this.element.find('ul:first').append(element);
111 this.fields.push(field);
112 return field.element;
113 };
114
115 Editor.prototype.checkOrientation = function() {
116 var controls, list;
117 Editor.__super__.checkOrientation.apply(this, arguments);
118 list = this.element.find('ul');
119 controls = this.element.find('.annotator-controls');
120 if (this.element.hasClass(this.classes.invert.y)) {
121 controls.insertBefore(list);
122 } else if (controls.is(':first-child')) {
123 controls.insertAfter(list);
124 }
125 return this;
126 };
127
128 Editor.prototype.processKeypress = function(event) {
129 if (event.keyCode === 27) {
130 return this.hide();
131 } else if (event.keyCode === 13 && !event.shiftKey) {
132 return this.submit();
133 }
134 };
135
136 Editor.prototype.onCancelButtonMouseover = function() {
137 return this.element.find('.' + this.classes.focus).removeClass(this.classes.focus);
138 };
139
140 Editor.prototype.setupDraggables = function() {
141 var classes, controls, cornerItem, editor, mousedown, onMousedown, onMousemove, onMouseup, resize, textarea, throttle,
142 _this = this;
143 this.element.find('.annotator-resize').remove();
144 if (this.element.hasClass(this.classes.invert.y)) {
145 cornerItem = this.element.find('.annotator-item:last');
146 } else {
147 cornerItem = this.element.find('.annotator-item:first');
148 }
149 if (cornerItem) {
150 $('<span class="annotator-resize"></span>').appendTo(cornerItem);
151 }
152 mousedown = null;
153 classes = this.classes;
154 editor = this.element;
155 textarea = null;
156 resize = editor.find('.annotator-resize');
157 controls = editor.find('.annotator-controls');
158 throttle = false;
159 onMousedown = function(event) {
160 if (event.target === this) {
161 mousedown = {
162 element: this,
163 top: event.pageY,
164 left: event.pageX
165 };
166 textarea = editor.find('textarea:first');
167 $(window).bind({
168 'mouseup.annotator-editor-resize': onMouseup,
169 'mousemove.annotator-editor-resize': onMousemove
170 });
171 return event.preventDefault();
172 }
173 };
174 onMouseup = function() {
175 mousedown = null;
176 return $(window).unbind('.annotator-editor-resize');
177 };
178 onMousemove = function(event) {
179 var diff, directionX, directionY, height, width;
180 if (mousedown && throttle === false) {
181 diff = {
182 top: event.pageY - mousedown.top,
183 left: event.pageX - mousedown.left
184 };
185 if (mousedown.element === resize[0]) {
186 height = textarea.outerHeight();
187 width = textarea.outerWidth();
188 directionX = editor.hasClass(classes.invert.x) ? -1 : 1;
189 directionY = editor.hasClass(classes.invert.y) ? 1 : -1;
190 textarea.height(height + (diff.top * directionY));
191 textarea.width(width + (diff.left * directionX));
192 if (textarea.outerHeight() !== height) mousedown.top = event.pageY;
193 if (textarea.outerWidth() !== width) mousedown.left = event.pageX;
194 } else if (mousedown.element === controls[0]) {
195 editor.css({
196 top: parseInt(editor.css('top'), 10) + diff.top,
197 left: parseInt(editor.css('left'), 10) + diff.left
198 });
199 mousedown.top = event.pageY;
200 mousedown.left = event.pageX;
201 }
202 throttle = true;
203 return setTimeout(function() {
204 return throttle = false;
205 }, 1000 / 60);
206 }
207 };
208 resize.bind('mousedown', onMousedown);
209 return controls.bind('mousedown', onMousedown);
210 };
211
212 return Editor;
213
214 })(Annotator.Widget);