Wikipedia

MediaWiki:Gadget-ImageAnnotator.js: Difference between revisions

Browse history interactively
← Previous editNext edit →
Content deleted Content added
mNo edit summary
Remove v3.0-alpha experiment. Let's keep the history in the central MediaWiki:Gadget-ImageAnnotator and iterate further from v2.x onwards.
Line 40:
var ImageAnnotator_config = null;
 
var ImageAnnotation = function () {
this.initialize.apply(this, arguments);
};
 
ImageAnnotation.compare = function (a, b) {
{
var result = b.area() - a.area();
if (result !== 0) return result;
return a.model.id - b.model.id; // Just to make sure the order is complete
return a.model.id - b.model.id;
};
 
ImageAnnotation.prototype = {
view : null, // Rectangle to be displayed on image: a div with pos and size▼
{
view: null,
▲ view : null, // Rectangle to be displayed on image: a div with pos and size
model : null, // Internal representation of the annotation
tooltip model: null,
// Tooltip to display the annotation
contenttooltip : null,
// Content of the tooltip
viewer content : null,
// Reference to the viewer this note belongs to
viewer: null,
 
initialize : function (node, viewer, id) {
{
var is_new = false;
var view_w = 0, view_h = 0, view_x = 0, view_y = 0;
Line 70 ⟶ 75:
var html = IA.getRawItem('content_' + id, viewer.scope);
if (x === null || y === null || w === null || h === null || html === null)
throw new Error ('Invalid note');
if (x < 0 || x >= viewer.full_img.width || y < 0 || y >= viewer.full_img.height)
throw new Error ('Invalid note: origin invalid on note ' + id);
if ( x + w > viewer.full_img.width + 10
|| y + h > viewer.full_img.height + 10)
{
throw new Error ('Invalid note: size extends beyond image on note ' + id);
}
// Notes written by early versions may be slightly too large, whence the + 10 above. Fix this.
Line 88 ⟶ 93:
LAPI.make(
'div', null
, { position : 'absolute'
,display : 'none'
,lineHeight : '0px' // IE
,fontSize : '0px' // IE
,top : '' + view_y + 'px'
,left : '' + view_x + 'px'
,width : '' + view_w + 'px'
,height : '' + view_h + 'px'
}
);
// We'll add the view to the DOM once we've loaded all notes
this.model =
{ id : id
,dimension: {x: x, y: y, w: w, h: h}
,wiki : ''
,html : html.cloneNode(true)
};
} else {
Line 109 ⟶ 114:
this.view = node;
this.model =
{ id : -1
,dimension: null
,wiki : ''
,html : null
};
view_w = this.view.offsetWidth - 2; // Subtract cumulated border widths
Line 124 ⟶ 129:
if (view_h < 6) {view_y = Math.floor(view_y + view_h / 2 - 3); view_h = 6; }
Object.merge(
{
{ left: '' + view_x + 'px',
top: '' + view_y + 'px',
,width: '' + view_w + 'px',
height: '' + view_h + 'px'}
},
this.view.style
);
this.view.style.zIndex = 500; // Below tooltips
try {
this.view.style.border = '1px solid ' + this.viewer.outer_border;
Line 137 ⟶ 146:
LAPI.make(
'div', null
, { lineHeight : '0px' // IE
,fontSize : '0px' // IE
,width : '' + Math.max(view_w - 2, 0) + 'px' // -2 to leave space for the border
,height : '' + Math.max(view_h - 2, 0) + 'px'
}
)
Line 163 ⟶ 172:
},
 
setTooltip : function () {
{
if (this.tooltip || !this.view) return; // Already set, or corrupt
// Note: on IE, don't have tooltips appear automatically. IE doesn't do it right for transparent
Line 172 ⟶ 180:
( this.view.firstChild
, this.display.bind(this)
, { activate : (LAPI.DOM.is_ie ? Tooltip.NONE : Tooltip.HOVER)
,deactivate : (LAPI.DOM.is_ie ? Tooltip.ESCAPE : Tooltip.LEAVE)
,close_button : null
,mode : Tooltip.MOUSE
,mouse_offset : {x: -5, y: -5, dx: (IA.is_rtl ? -1 : 1), dy: 1}
,open_delay : 0
,hide_delay : 0
,onclose : (function (tooltip, evt) {
if (this.view) {
try {
Line 192 ⟶ 200:
if (evt) this.viewer.hide(evt);
}).bind(this)
,onopen : (function (tooltip) {
if (this.view) {
try {
Line 207 ⟶ 215:
},
 
display : function (evt) {
{
if (!this.content) {
this.content = LAPI.make('div');
Line 251 ⟶ 258:
},
 
edit : function (evt) {
{
if (IA.canEdit()) IA.editor.editNote(this);
if (evt) return LAPI.Evt.kill(evt);
Line 258 ⟶ 264:
},
 
remove_event : function (evt) {
{
if (IA.canEdit()) this.remove();
return LAPI.Evt.kill(evt);
},
 
remove : function () {
{
if (!this.content) { // New note: just destroy it.
this.destroy();
Line 295 ⟶ 299:
LAPI.Ajax.editPage(
mw.config.get('wgPageName')
, function (doc, editForm, failureFunc, revision_id) {
{▼
try {
if (revision_id && revision_id != mw.config.get('wgCurRevisionId'))
throw new Error ('#Page version (revision ID) mismatch: edit conflict.');
 
var textbox = editForm.wpTextbox1;
if (!textbox) throw new Error ('#Server replied with invalid edit page.');
var pagetext = textbox.value.replace(/\r\n/g, '\n');
// Normalize different end-of-line handling. Opera and IE may use \r\n, whereas other
Line 329 ⟶ 332:
var summary = editForm.wpSummary;
if (!summary)
throw new Error ('#Summary field not found. Check that edit pages have valid XHTML.');
IA.setSummary(
summary
Line 348 ⟶ 351:
var revision_id = LAPI.WP.revisionFromHtml(request.responseText);
if (!revision_id) {
failureFunc (request, new Error ('Revision ID not found. Please reload the page.'));
return;
}
Line 373 ⟶ 376:
},
 
destroy : function () {
{
if (this.view) LAPI.DOM.removeNode(this.view);
if (this.dummy) LAPI.DOM.removeNode(this.dummy);
Line 386 ⟶ 388:
},
 
area : function () {
{
if (!this.model || !this.model.dimension) return 0;
return (this.model.dimension.w * this.model.dimension.h);
},
 
cannotEdit : function () {
{
if (this.content && this.content.button_section) {
LAPI.DOM.removeNode(this.content.button_section);
Line 407:
ImageAnnotationEditor.prototype =
{
initialize : function () {
{
var editor_width = 50;
// Respect potential user-defined width setting
Line 420 ⟶ 419:
new LAPI.Edit(
'' , editor_width, 6
, { box : ImageAnnotator.UI.get('wpImageAnnotatorEditorLabel', false)
,preview : ImageAnnotator.UI.get('wpImageAnnotatorPreview', true).capitalizeFirst()
,save : ImageAnnotator.UI.get('wpImageAnnotatorSave', true).capitalizeFirst()
,revert : ImageAnnotator.UI.get('wpImageAnnotatorRevert', true).capitalizeFirst()
,cancel : ImageAnnotator.UI.get('wpImageAnnotatorCancel', true).capitalizeFirst()
,nullsave : ImageAnnotator_config.mayDelete()
? ImageAnnotator.UI.get('wpImageAnnotatorDelete', true).capitalizeFirst()
: null
,post : ImageAnnotator.UI.get('wpImageAnnotatorCopyright', false)
}
, {
onsave : this.save.bind(this)
,onpreview : this.onpreview.bind(this)
,oncancel : this.cancel.bind(this)
,ongettext : function (text) {
if (text == null) return '';
text = text.trim()
Line 474 ⟶ 473:
IA.get_cover()
, this.get_editor.bind(this)
, { activate : Tooltip.NONE // We'll always show it explicitly
,deactivate : Tooltip.ESCAPE
,close_button : null // We have a cancel button anyway
,mode : Tooltip.FIXED
,anchor : Tooltip.TOP_LEFT
,mouse_offset : {x:10, y: 10, dx:1, dy:1} // Misuse this: fixed offset from view
,max_pixels : (box_width ? box_width + 20 : 0) // + 20 gives some slack
,z_index : 2010 // Above the cover.
,open_delay : 0
,hide_delay : 0
,onclose : this.close_tooltip.bind(this)
}
, IA.tooltip_styles
Line 499 ⟶ 498:
},
 
get_editor : function () {
return this.box;
},
 
editNote : function (note) {
{
var same_note = (note == this.note);
this.note = note;
Line 521 ⟶ 519:
LAPI.Ajax.apiGet(
'query'
, { prop : 'revisions'
,titles : mw.config.get('wgPageName')
,rvlimit : 1
,rvstartid : mw.config.get('wgCurRevisionId')
,rvprop : 'ids|content'
}
, function (request, json_result) {
Line 553 ⟶ 551:
},
 
open_editor : function (same_note, cover) {
{
this.editor.hidePreview();
if (!same_note || this.editor.textarea.readOnly)
Line 592 ⟶ 589:
},
 
hide_editor : function (evt) {
{
if (!this.visible) return;
this.visible = false;
Line 613 ⟶ 609:
},
 
save : function (editor) {
{
var data = editor.getText();
if (!data || !data.length) {
Line 700 ⟶ 695:
LAPI.Ajax.editPage(
mw.config.get('wgPageName')
, function (doc, editForm, failureFunc, revision_id) {
{▼
try {
if (revision_id && revision_id != mw.config.get('wgCurRevisionId'))
Line 746 ⟶ 740:
var summary = editForm.wpSummary;
if (!summary)
throw new Error ('#Summary field not found. Check that edit pages have valid XHTML.');
// If [[MediaWiki:Copyrightwarning]] is invalid XHTML, we may not have wpSummary!
if (self.note.content != null) {
Line 783 ⟶ 777:
if (doc.isFake && (typeof doc.dispose === 'function')) doc.dispose();
failureFunc
(request, new Error ('#Note not found after saving. Please reload the page.'));
return;
}
Line 790 ⟶ 784:
if (doc.isFake && (typeof doc.dispose === 'function')) doc.dispose();
failureFunc
(request, new Error ('#Version inconsistency after saving. Please reload the page.'));
return;
}
Line 828 ⟶ 822:
);
}
, function (request, ex) {
{
self.editor.busy(false);
self.saving = false;
Line 864 ⟶ 857:
},
 
onpreview : function (editor) {
{
if (this.tooltip) this.tooltip.size_change();
},
 
cancel : function (editor) {
{
if (!this.note) return;
if (!this.note.content) {
Line 880 ⟶ 871:
},
 
close_tooltip : function (tooltip, evt) {
{
this.hide_editor(evt);
this.cancel();
Line 890 ⟶ 880:
var ImageNotesViewer = function () {this.initialize.apply(this, arguments); };
 
ImageNotesViewer.prototype = {
initialize : function (descriptor, may_edit) {▼
{
▲ initialize : function (descriptor, may_edit)
{
Object.merge(descriptor, this);
this.annotations = [];
Line 903 ⟶ 891:
this.tip = null;
this.icon = null;
this.factors = {
{ dx : this.full_img.width / this.thumb.width,
,dy : this.full_img.height / this.thumb.height
};
 
if (!this.isThumbnail && !this.isOther) {
Line 921 ⟶ 909:
},
 
setup : function (onlyIcon) {
{
this.setup_done = true;
var name = this.realName;
Line 948 ⟶ 935:
LAPI.make(
'div', null
, { cssFloat : (IA.is_rtl ? 'right' : 'left')
,styleFloat: (IA.is_rtl ? 'right' : 'left') // For IE...
,width : '' + this.thumb.width + 'px'
,position : 'relative' // Fixes IE layout bugs...
}
);
Line 1,148 ⟶ 1,135:
},
 
cannotEdit : function () {
{
if (!this.may_edit) return;
this.may_edit = false;
Line 1,155 ⟶ 1,141:
},
 
setShowHideEvents : function (set) {
{
if (this.icon) return;
if (set) {
Line 1,170 ⟶ 1,155:
},
 
removeMoveListener : function () {
{
if (this.icon) return;
this.move_listening = false;
Line 1,181 ⟶ 1,165:
},
 
adjustRectangleSize : function (node) {
{
if (this.icon) return;
// Make sure the note boxes don't overlap the image boundary; we might get an event
Line 1,213 ⟶ 1,196:
},
 
toggle : function (dummies) {
{
var i;
if (!this.annotations || this.annotations.length === 0 || this.icon) return;
Line 1,237 ⟶ 1,219:
},
 
show : function (evt) {
{
if (this.visible || this.icon) return;
this.toggle(IA.is_adding || IA.is_editing);
Line 1,249 ⟶ 1,230:
},
 
hide : function (evt) {
{
if (this.icon) return true;
if (!this.visible) {
Line 1,328 ⟶ 1,308:
},
 
check_hide : function (evt) {
{
if (this.icon) return true;
if (this.visible)
Line 1,336 ⟶ 1,315:
},
 
register : function (new_note) {
{
this.annotations[this.annotations.length] = new_note;
if (new_note.model.id > 0) {
Line 1,346 ⟶ 1,324:
},
 
deregister : function (note) {
{
Array.remove(this.annotations, note);
if (note.model.id == this.max_id) this.max_id--;
Line 1,353 ⟶ 1,330:
},
 
setDefaultMsg : function () {
{
if (this.annotations && this.annotations.length && this.msg) {
LAPI.DOM.removeChildren(this.msg);
Line 1,386 ⟶ 1,362:
};
 
var IA = {
{
// This object is responsible for setting up annotations when a page is loaded. It loads all
// annotations in the page source, and adds an "Annotate this image" button plus the support
// for drawing rectangles onto the image if there is only one image and editing is allowed.
 
haveAjax : false,
 
button_div : null,
add_button : null,
 
cover : null,
border : null,
definer : null,
 
mouse_in : (window.ActiveXObject ? 'mouseenter' : 'mouseover'),
mouse_out : (window.ActiveXObject ? 'mouseleave' : 'mouseout'),
 
annotation_class : 'image_annotation',
Line 1,412 ⟶ 1,387:
note_delim :
[
{ start : '<div id="image_annotation_note_$1"'
,end : '</div><!-- End of annotation $1-->'
,content_start : '<div id="image_annotation_content_$1">\n'
,content_end : '</div>\n<span id="image_annotation_wikitext_$1"'
}
,{ start : '{{ImageNote|id=$1'
,end : '{{ImageNoteEnd|id=$1}}'
,content_start : '}}\n'
,content_end : '{{ImageNoteEnd|id=$1}}'
}
],
 
tooltip_styles : // The style for all our tooltips
{ border : '1px solid #8888aa'
, backgroundColor : '#ffffe0'
, padding : '0.3em'
, fontSize : ((mw.config.get('skin') == 'monobook' || mw.config.get('skin') == 'modern') ? '127%' : '100%')
// Scale up to default text size
},
 
editor : null,
 
wiki_read : false,
is_rtl : false,
 
move_listening : false,
is_tracking : false,
is_adding : false,
is_editing : false,
 
zoom_threshold : 8.0,
zoom_factor : 4.0,
 
install_attempts : 0,
max_install_attempts : 10, // Maximum 5 seconds
 
imgs_with_notes : [],
thumbs : [],
other_images : [],
 
// Fallback
indication_icon : '//upload.wikimedia.org/wikipedia/commons/8/8a/Gtk-dialog-info-14px.png',
 
install : function (config) {
{
if (typeof ImageAnnotator_disable !== 'undefined' && !!ImageAnnotator_disable) return;
if (!config || ImageAnnotator_config != null) return;
Line 1,656 ⟶ 1,630:
},
 
wait_for_required_libraries : function () {
{
if (typeof Tooltip == 'undefined' || typeof LAPI == 'undefined') {
if (IA.install_attempts++ < IA.max_install_attempts) {
Line 1,670 ⟶ 1,643:
},
 
setup: function () {
{
var self = IA;
self.imgs = [];
Line 1,815 ⟶ 1,787:
}
}
return { scope : scope
,file_div : file_div
,img : img
,realName : name
,isThumbnail: is_thumb
,isOther : is_other
,thumb : {width: dim.width, height: dim.height}
,iconOnly : icon_only
,noCaption : no_caption
};
}
Line 1,971 ⟶ 1,943:
function (length, titles) {
var idx = ImageAnnotator.info_callbacks.length;
ImageAnnotator.info_callbacks[idx] = {
{ callback : function (json) {
set_info (json);
ImageAnnotator.info_callbacks[idx].done = true;
if (ImageAnnotator.info_callbacks[idx].script) {
LAPI.DOM.removeNode(ImageAnnotator.info_callbacks[idx].script);
ImageAnnotator.info_callbacks[idx].script = null;
}
check_done (length);
},
} done: false
,done : false};
};▼
ImageAnnotator.info_callbacks[idx].script =
IA.getScript(
Line 1,994 ⟶ 1,966:
// up in that case.
if ( ImageAnnotator.info_callbacks && ImageAnnotator.info_callbacks[idx]
&& ImageAnnotator.info_callbacks[idx].done && ImageAnnotator.info_callbacks[idx].script)
) {
LAPI.DOM.removeNode(ImageAnnotator.info_callbacks[idx].script);
ImageAnnotator.info_callbacks[idx].script = null;
Line 2,008 ⟶ 1,980:
'query'
, { titles : titles
,prop : 'info|imageinfo'
,inprop : 'protection'
,iiprop : 'size'
Line 2,023 ⟶ 1,995:
},
 
setup_ui : function () {
{
// Complete the UI object we've gotten from config.
 
Line 2,052 ⟶ 2,023:
};
 
ImageAnnotator.UI.setup = function () {
{
if (ImageAnnotator.UI.repo) return;
var self = ImageAnnotator.UI;
Line 2,079 ⟶ 2,049:
};
 
ImageAnnotator.UI.get = function (id, basic, no_plea) {
{
var self = ImageAnnotator.UI;
if (!self.repo) self.setup();
Line 2,110 ⟶ 2,079:
};
 
ImageAnnotator.UI.get_plea = function () {
{
var self = ImageAnnotator.UI;
var translate = self.get('wpTranslate', false, true) || 'translate';
Line 2,129 ⟶ 2,097:
};
 
ImageAnnotator.UI.init = function (html_text_or_json) {
{
var text;
if (typeof html_text_or_json === 'string')
Line 2,213 ⟶ 2,180:
},
 
setup_step_two : function () {
{
var self = IA;
 
Line 2,236 ⟶ 2,202:
},
 
complete_setup : function () {
{
// We can be sure to have the UI here because this is called only when the ready event of the
// UI object is fired.
Line 2,398 ⟶ 2,363:
}
 
function start_tracking (evt) {
{
if (!self.is_tracking) {
self.is_tracking = true;
Line 2,409 ⟶ 2,373:
self.base_y = mouse_pos.y - origin.y;
Object.merge(
{ left : '' + self.base_x + 'px'
,top : '' + self.base_y + 'px'
,width : '0px'
,height : '0px'
,display: ''
Line 2,442 ⟶ 2,406:
LAPI.make(
'div', null
,{ border : '1px solid ' + IA.new_border
,display : 'none'
,position : 'absolute'
,top : '0px'
,left : '0px'
,width : '0px'
,height : '0px'
,padding : '0'
,lineHeight : '0px' // IE needs this, even though there are no lines within
,fontSize : '0px' // IE
,zIndex : cover.style.zIndex - 2 // Below the mouse capture div
}
);
Line 2,642 ⟶ 2,606:
for (var i = 0; pages && i < pages.length; i++) {
var notes = getElementsByClassName (pages[i], 'div', self.annotation_class);
if (!notes || notes.length === 0) continue;{
▲ }continue;
▲ { }
var page = self.getItem('inline_name', pages[i]);
if (!page) continue;
page = page.replace(/ /g, '_');
var viewers = cache[page] || cache['File:' + page.substring(page.indexOf(':') + 1)];
if (!viewers || viewers.length === 0) continue;{
continue;
▲ { }
// Update rules.
var rules = getElementsByClassName (pages[i], 'div', 'wpImageAnnotatorInlinedRules');
var local_rules = {
{ inline: Object.clone(IA.rules.inline),
,thumbs: Object.clone(IA.rules.thumbs)
};
if (rules && rules.length) {
rules = rules[0];
Line 2,721 ⟶ 2,689:
var idx = ImageAnnotator.script_callbacks.length;
ImageAnnotator.script_callbacks[idx] =
{ callback : function (json) {
if (json && json.parse && json.parse.text && json.parse.text['*']) {
setup_thumb_viewers (json.parse.text['*']);
Line 2,731 ⟶ 2,699:
}
}
,done : false
};
ImageAnnotator.script_callbacks[idx].script =
Line 2,776 ⟶ 2,744:
},
 
show_zoom : function () {
{
var self = IA;
if ( ( self.viewers[0].factors.dx < self.zoom_threshold
Line 2,793 ⟶ 2,760:
'div'
, {id : 'image_annotator_zoom'}
, { overflow : 'hidden'
,width : '200px'
,height : '200px'
,position : 'absolute'
,display : 'none'
,top: '0px'
,left: '0px'
,leftborder: '2px solid : '0px#666666'
,border : '2px solid #666666'
,backgroundColor : 'white'
,zIndex : 2050 // On top of everything
}
);
Line 2,833 ⟶ 2,800:
LAPI.make(
'div', null
, { width : '1px'
,height : '200px'
,borderLeft : '1px solid red'
,position : 'absolute'
,top : '0px'
,left : '100px'
}
)
Line 2,845 ⟶ 2,812:
LAPI.make(
'div', null
, { width : '200px'
,height : '1px'
,borderTop : '1px solid red'
,position : 'absolute'
,top : '100px'
,left : '0px'
}
)
Line 2,874 ⟶ 2,841:
},
 
update_zoom : function (evt) {
{
if (!evt) return; // We need an event to calculate positions!
var self = IA;
Line 2,911 ⟶ 2,877:
},
 
hide_zoom : function (evt) {
{
if (!IA.zoom) return;
if (evt) {
Line 2,921 ⟶ 2,886:
},
 
createHelpLink : function () {
{
var msg = ImageAnnotator.UI.get('wpImageAnnotatorHelp', false, true);
if (!msg || !msg.lastChild) return null;
Line 2,979 ⟶ 2,943:
},
 
get_cover : function () {
{
var self = IA;
var shim;
if (!self.cover) {
var pos = { position : 'absolute'
,left : '0px'
,top : '0px'
,width : self.viewers[0].thumb.width + 'px'
,height : self.viewers[0].thumb.height + 'px'
};
self.cover = LAPI.make('div', null, pos);
Line 3,010 ⟶ 2,973:
shim = LAPI.make('div', null, pos);
Object.merge(
{ top : '0px'
,backgroundImage: 'url(' + self.viewers[0].img.src + ')'
,zIndex : imgZ + 2
}
, shim.style
Line 3,038 ⟶ 3,001:
},
 
show_cover : function () {
{
var self = IA;
if (self.cover && !self.cover_visible) {
Line 3,052 ⟶ 3,014:
},
 
hide_cover : function () {
{
var self = IA;
if (self.cover && self.cover_visible) {
Line 3,066 ⟶ 3,027:
},
 
getRawItem : function (what, scope) {
{
var node = null;
if (!scope || scope == document) {
Line 3,078 ⟶ 3,038:
},
 
getItem : function (what, scope) {
{
var node = IA.getRawItem(what, scope);
if (!node) return null;
Line 3,085 ⟶ 3,044:
},
 
getIntItem : function (what, scope) {
{
var x = IA.getItem(what, scope);
if (x !== null) x = parseInt (x, 10);
Line 3,092 ⟶ 3,050:
},
 
findNote : function (text, id) {
{
function find (text, id, delim) {
var start = delim.start.replace('$1', id);
Line 3,111 ⟶ 3,068:
},
 
setWikitext : function (pagetext) {
{
var self = IA;
if (self.wiki_read) return;
Line 3,136 ⟶ 3,092:
},
 
setSummary : function (summary, initial_text, note_text) {
{
if (initial_text.contains('$1')) {
var max = (summary.maxlength || 200) - initial_text.length;
Line 3,149 ⟶ 3,104:
},
 
getScript : function (url, bypass_local_cache, bypass_caches) {
{
// Don't use LAPI here, it may not yet be available
if (bypass_caches) {
Line 3,168 ⟶ 3,122:
},
 
canEdit : function () {
{
var self = IA;
if (self.may_edit) {
Retrieved from "https://en.wikipedia.org/wiki/MediaWiki:Gadget-ImageAnnotator.js"