Benutzer:Andreas Plank/vector.js
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
//<pre>
/*
o ptions: { *
pre:'{|'+classStr+"\n",
peri:table,
post:'|}',
ownline:true
type: "booklet"
label string: non-localizable label string
labelMsg string: key for localizable message string
deferLoad boolean
pages object: map of name keys to further objects:
layout string required: 'table' or 'characters'
label string: non-localizable label string
labelMsg string: key for localizable message string
headings string[]: array of objects? {textMsg: key} ??
rows object[] optional?: array of objects? {'row key name': {message object?}}
characters string[] optional?: array of strings of little character bits for insertion (???!)
*/
var customizeUserToolbar = function () {
$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
'section': 'advanced',
'group': 'format',
'tools': {
'strikethrough': {
label: 'Durchgestrichen',
type: 'button',
icon: 'http://upload.wikimedia.org/wikipedia/commons/3/30/Btn_toolbar_rayer.png',
action: {
type: 'encapsulate',
options: {
pre: "<s>",
post: "</s>"
}
}
},
'syntaxhighlight': {
label: 'Syntax Hervorhebung',
type: 'button',
icon: 'http://upload.wikimedia.org/wikipedia/commons/d/d2/Button_source.png',
action: {
type: 'encapsulate',
options: {
pre: "<syntaxhighlight lang=\"html4strict\">\n",
post: "\n</syntaxhighlight>"
}
}
},
'blockquote': {
label: 'Eingerückten Blockquote einfügen',
type: 'button',
icon: 'http://upload.wikimedia.org/wikipedia/en/f/fd/Button_blockquote.png',
action: {
type: 'encapsulate',
options: {
pre: "<blockquote>\n",
post: "\n</blockquote>"
}
}
}
}
});
$('#wpTextbox1').wikiEditor('addToToolbar', {
'sections': {
'programming': {
type: 'booklet',
label: 'Programmierung'
}
}
});
$('#wpTextbox1').wikiEditor('addToToolbar', {
'section': 'programming',
'pages': {
'tags': {
'layout': 'characters',
label: 'Wiki/HTML Tags',
'characters': [{
label: "nbsp;",
action: {
type: 'encapsulate', options: {pre: " ", post: ""}
}
},{
label: "()",
action: {
type: 'encapsulate', options: {pre: "(", post: ")"}
}
},{
label: "[]",
action: {
type: 'encapsulate', options: {pre: "[", post: "]"}
}
},{
label: "[[]]",
action: {
type: 'encapsulate', options: {pre: "[[", post: "]]"}
}
},{
label: "{{}}",
action: {
type: 'encapsulate', options: {pre: '{{', post: '}}'}
}
},{
label: "{{{}}}",
action: {
type: 'encapsulate', options: {pre: "{{{", 'peri': '1', post: "}}}"}
}
},{
label: "{{{|}}}",
action: {
type: 'encapsulate', options: {pre: "{{{", 'peri': '1', post: "|}}}"}
}
},{
label: "[[Kategorie:]]",
action: {
type: 'encapsulate', options: {pre: '[[Kategorie: ', post: ']]'}
}
}, {
label: "[[Attribut:]]",
action: {
type: 'encapsulate',
options: {
/* no selection */
pre: "[[Attribut: ",
post: "]]",
/* a selection */
regex:/\s*(.+)\s*/,
regexReplace:"[[Attribut: \$1 |\$1]]"
}
}
}, {
label: "[[property:]]",
action: {
type: 'encapsulate',
options: {
/* no selection */
pre: "[[property: ",
post: "]]",
/* a selection */
regex:/\s*(.+)\s*/,
regexReplace:"[[property: \$1 |\$1]]"
}
}
},{
label: "#WEITERLEITUNG [[]]",
action: {
type: 'encapsulate', options: {pre: "#WEITERLEITUNG [[", post: "]]"}
}
},{
label: "ref",
action: {
type: 'encapsulate', options: {pre: '<ref name="">', peri: 'Referenz/Zitat', post: '</ref>'}
}
},{
label: "references",
action: {
type: 'encapsulate', options: {pre: '<references/>', post: ''}
}
},{
label: "noinclude",
action: {
type: 'encapsulate', options: {pre: "<noinclude>", post: "</noinclude>"}
}
},{
label: "includeonly",
action: {
type: 'encapsulate', options: {pre: "<includeonly>", post: "</includeonly>"}
}
},{
label: "onlyinclude",
action: {
type: 'encapsulate', options: {pre: "<onlyinclude>", post: "</onlyinclude>"}
}
},{
label: "code",
action: {
type: 'encapsulate', options: {pre: "<code>", post: "</code>"}
}
},{
label: "nowiki",
action: {
type: 'encapsulate', options: {pre: "<nowiki>", post: "</nowiki>"}
}
},{
label: "code nowiki code",
action: {
type: 'encapsulate', options: {pre: "<code><nowiki>", post: "</nowiki></code>"}
}
},{
label: "comment",
action: {
type: 'encapsulate', options: {pre: "<!-- ", 'peri': 'comment:', post: " -->"}
}
},{
label: "comment lt--gt",
action: {
type: 'encapsulate', options: {pre: "<!-- ", 'peri': 'comment:', post: " -->"}
}
},{
label: "span",
action: {
type: 'encapsulate', options: {pre: '<span style="">', post: '</span>'}
}
},{
label: "span.plainlinks",
action: {
type: 'encapsulate', options: {pre: '<span class="plainlinks">', post: '</span>'}
}
},{
label: "div",
action: {
type: 'encapsulate', options: {pre: '<div style="">', post: '</div>'}
}
},{
label: "{{DEFAULTSORT:}}",
action: {
type: 'encapsulate', options: {pre: "{{DEFAULTSORT: ", post: "}}"}
}
},{
label: "{{SORTIERUNG:}}",
action: {
type: 'encapsulate', options: {pre: "{{SORTIERUNG: ", post: "}}"}
}
},{
'label': "div.definition-inline",
'action': {
'type': 'encapsulate','options': {'pre': '<div class="definition-inline">\n; ','post': ' : Erläuterung\n</div>'}
}
},{
label: "{{#arraymap:}}",
action: {
type: 'encapsulate', options: {pre: "{{#arraymap: ", peri: '{{{field|}}}', post: '|;|§|[[My property::§]] | • }}'}
}
},{
label: "{{#arraymap:long}}",
action: {
type: 'encapsulate', options: {pre: "{{#arraymap: ", peri: '{{{field|}}}', post: '<!-- values\n-->|;<!-- split on ;\n-->|§<!-- assign temporary variable\n-->|[[My property::§]] <!-- output\n-->| • <!-- new output separator\n-->}}'}
}
},{
label: "if",
action: {
type: 'encapsulate', options: {pre: "{{#if: ", post: "| | }}"}
}
},{
label: "if long",
action: {
type: 'encapsulate', options: {pre: "<!--\n-->{{#if: ", post: "<!--\nthen-->|<!--\nelse-->|<!--\n-->}}<!-- if end\n-->"}
}
},{
label: "switch CONTENTLANGUAGE",
action: {
type: 'encapsulate', options: {pre: "{{#switch: {{CONTENTLANGUAGE}}", post: "<!--\n-->|de|de-formal= deutsch <!--\n-->| #default = english<!--\n-->}}<!-- switch end\n-->"}
}
},{
label: "switch",
action: {
type: 'encapsulate', options: {pre: "{{#switch: ", post: "<!--\n-->| one | two = <!--\n-->| #default = <!--\n-->}}<!-- switch end\n-->"}
}
}, {
label: "ol",
action: {
type: 'encapsulate',
options: {pre: '<ol>',peri: '<li>Text</li><li>Text</li>', post: '</ol>'}
}
}, {
label: "ul",
action: {
type: 'encapsulate',
options: {pre: '<ul>',peri: '<li>Text</li><li>Text</li>', post: '</ul>'}
}
}, {
label: "table",
action: {
type: 'encapsulate',
options: {pre: '<table>',peri: '<!--\n--><tr><!--\n --><td></td><!--\n--></tr><!--\n-->', post: '</table>'}
}
}, {
label: "tr",
action: {
type: 'encapsulate',
options: {pre: '<tr>',peri: '<!--\n --><td></td><!--\n-->', post: '</tr>'}
}
}, {
label: "th",
action: {
type: 'encapsulate',
options: {pre: '<th>', post: '</th>'}
}
}, {
label: "td",
action: {
type: 'encapsulate',
options: {pre: '<td>', post: '</td>'}
}
},
'┌',
'┬',
'┐',
'└',
'┴',
'┘',
'│',
'─',
'├',
'┼',
'┤'
/* <s></s> <sup></sup> <sub></sub> */
]
},
'templates': {
'layout': 'characters',
label: 'Vorlagen',
'characters': [{
label: "Keyboard",
action: {
type: 'encapsulate', options: {pre: "{{Keyboard |", post: "}}"}
}
},{
label: "Zitat",
action: {
type: 'encapsulate', options: {pre: '{{Zitat |', post: '}}'}
}
},{
label: "Zitat versteckt",
action: {
type: 'encapsulate', options: {pre: '{{Zitat versteckt|', post: '}}'}
}
},{
label: "nbsp;",
action: {
type: 'encapsulate',
options: {pre: " ", post: ""}
}
}, {
label: "()",
action: {
type: 'encapsulate',
options: {pre: "(", post: ")"}
}
}, {
label: "[]",
action: {
type: 'encapsulate',
options: {pre: "[", post: "]"}
}
}, {
label: "[[]]",
action: {
type: 'encapsulate',
options: {pre: "[[", post: "]]"}
}
}, {
label: "{{}}",
action: {
type: 'encapsulate',
options: {pre: "{{", post: "}}"}
}
}, {
label: "{{{}}}",
action: {
type: 'encapsulate',
options: {pre: "{{{", post: "}}}"}
}
}, {
label: "{{{|}}}",
action: {
type: 'encapsulate',
options: {pre: "{{{", post: "|}}}"}
}
}, {
label: "noinclude",
action: {
type: 'encapsulate',
options: {pre: "<noinclude>", post: "</noinclude>"}
}
}, {
label: "includeonly",
action: {
type: 'encapsulate',
options: {pre: "<includeonly>", post: "</includeonly>"}
}
}, {
label: "onlyinclude",
action: {
type: 'encapsulate',
options: {pre: "<onlyinclude>", post: "</onlyinclude>"}
}
}, {
label: "nowiki",
action: {
type: 'encapsulate',
options: {pre: "<nowiki>", post: "</nowiki>"}
}
}, {
label: "comment",
action: {
type: 'encapsulate',
options: {pre: "<!-- ", post: " -->"}
}
}, {
label: "{{#arraymap:}} long",
action: {
type: 'encapsulate',
options: {pre: "{{#arraymap: ", peri : '{{{field|}}}', post: "<!--\n-->|;<!-- sep\n-->|§<!-- assign temporary var\n-->|[[My property::§]] <!--output\n-->| • <!--output sep\n-->}}<!-- end arraymap \n-->"}
}
}, {
label: "{{#arraymap:}}",
action: {
type: 'encapsulate',
options: {pre: "{{#arraymap: ", peri : '{{{field|}}}', post: "|;|§|[[My property::§]] | • }}"}
}
}, {
label: "{{#ask:table}}",
action: {
type: 'encapsulate',
options: {pre: "{{#ask: ", peri : '[[PAGE]] [[property::+]]', post: " | ?displayprop |? | mainlabel=- | link=none | format = table | limit = 500}}"}
}
}, {
label: "{{#ask:list}}",
action: {
type: 'encapsulate',
options: {pre: "{{#ask: ", peri : '[[PAGE]] [[property::+]]', post: " | ?displayprop | mainlabel=- | link=none | format = list | sep= •  | limit = 500}}"}
}
}, {
label: "{{#vardefine:}}",
action: {
type: 'encapsulate',
options: {pre: "{{#vardefine: ", peri : 'myVar', post: "| }}"}
}
}, {
label: "{{#varexist:}}",
action: {
type: 'encapsulate',
options: {pre: "{{#varexist: ", peri : 'myVar', post: "}}"}
}
}, {
label: "{{#var:}}",
action: {
type: 'encapsulate',
options: {pre: "{{#var: ", peri : 'myVar', post: "}}"}
}
}, {
label: "if",
action: {
type: 'encapsulate',
options: {pre: "{{#if: ", post: "| | }}"}
}
}, {
label: "if long",
action: {
type: 'encapsulate',
options: {pre: "<!--\n-->{{#if: ", post: "<!--\nthen-->|<!--\nelse-->|<!--\n-->}}<!-- end if\n-->"}
}
}, {
label: "ifexist",
action: {
type: 'encapsulate',
options: {pre: "{{#ifexist: ", post: "| | }}"}
}
}, {
label: "ifexist long",
action: {
type: 'encapsulate',
options: {pre: "<!--\n-->{{#ifexist: ", post: "<!--\nthen-->|<!--\nelse-->|<!--\n-->}}<!-- end ifexist\n-->"}
}
}, {
label: "{{#expr:}}",
action: {
type: 'encapsulate',
options: {pre: "{{#expr: ", peri : '1 + 6', post: "}}"}
}
}, {
label: "switch",
action: {
type: 'encapsulate',
options: {pre: "{{#switch: ", post: "<!--\n-->| one | two = <!--\n-->| #default = <!--\n-->}}<!-- end switch\n-->"}
}
}, {
label: "{{DEFAULTSORT:}}",
action: {
type: 'encapsulate',
options: {pre: "{{DEFAULTSORT:", post: "}}"}
}
}, {
label: "{{DISPLAYTITLE:}}",
action: {
type: 'encapsulate',
options: {pre: "{{DISPLAYTITLE:", post: "}}"}
}
},
'{{PAGENAME}}',
'{{PAGENAMEE}}',
'{{FULLPAGENAME}}',
'{{FULLPAGENAMEE}}'
]
}
}
});
}
//</source>
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ( $.inArray( mw.config.get( 'wgAction' ), ['edit', 'submit'] ) !== -1 ) {
mw.loader.using( 'user.options', function () {
if ( mw.user.options.get('usebetatoolbar') ) {
mw.loader.using( 'ext.wikiEditor.toolbar', function () {
$(document).ready( customizeUserToolbar );
} );
}
} );
}
/* Any JavaScript here will be loaded for all users on every page load. */
/* https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization */
/* Example stuff can be seen in the /extentions/WikiEditor/modules/jquery.wikiEditor.dialogs.config.js */
/*
*/
function changeToolbar(){
if($('#wikiEditor-ui-toolbar [title="mytool"]') && $('#wikiEditor-ui-toolbar [title="Embedded file"]')){//if mytool is activated
$('#wikiEditor-ui-toolbar [title="Embedded file"]').hide();//hide the normal embed image button
}
}
$( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', function () {
var myTool = function(){
return { dialogs:{
mytool:{
titleMsg: 'wikieditor-toolbar-tool-mytool-title',
id: 'wikieditor-toolbar-mytool-dialog',
html:'<div id="wikieditor-toolbar-mytool-step1Container"> <!-- what do you want to do wrapper-->\
<!-- wizard buttons go here-->\
\
<div id="wikieditor-toolbar-mytool-step2Container">\
<div id="wikieditor-toolbar-mytool-recentimagesContainer">\
<p id="wikieditor-toolbar-mytool-recentimagesContainer-helptext"></p>\
<!-- insert image goes here-->\
</div>\
<div id="wikieditor-toolbar-mytool-generatelinktext-container">\
<p id="wikieditor-toolbar-mytool-generatelinktext-container-helptext">\
<!--a text with: "try uploading first, its easier!" and "you can generate a upload link, it will..." -->\
</p>\
</div>\
<hr>\
<fieldset>\
<label id="wikieditor-toolbar-mytool-lableFilename"for="filename">Filename</label>\
<input type="text" id="wikieditor-toolbar-mytool-inputFilename" name="filename">\
<label id="wikieditor-toolbar-mytool-lableCaption"for="caption">Caption</label>\
<input type="text" id="wikieditor-toolbar-mytool-inputCaption" name="caption">\
</fieldset>\
</div>',
init: function () {
//CONFIG START
var ailimit_var = 5; //how many items shell be retrieved from the api?
var inputID ='#wikieditor-toolbar-mytool-inputFilename'; //id of the input field that gets the image name, preceeded by a '#'
var thumbWidth = 32; //width of the image preview thumbnails
//CONFIG END
console.log("init Started");
/*Create Wizard behaviour*/
//attach events and actions to buttons
//disable/enable dialog buttons
/*GET LATEST UPLOADS from user, put into array*/
//get recent images
//TODO: Ajax should e wrapped in am-I-logged-in check: skip if mw.config.wgUserName
$.ajax( {
url: mw.util.wikiScript( 'api' ),
dataType: 'json',
data: {
'action':'query',
'format':'json',
'list':'allimages',
'ailimit':ailimit_var, //see above for definition
'aisort':'timestamp',
'aiuser': mw.config.get("wgUserName")
},
success:function(data){
generateList(data);
}
});
function generateList(images){
/*generates several List points*/
var imageArray = images.query.allimages;
var domList = $('<ul class="wikieditor-toolbar-mytool-recentImagesList">');
var li;
var imageTitle='';
var thumbLink ='';
var usethisButton;
for(var i=0;i<imageArray.length; i++){
li = $('<li>');
imageTitle = imageArray[i].name;
thumbLink = window.wgServer+window.wgScriptPath+'/thumb.php'+'?f='+imageTitle+'&w='+thumbWidth; //link to thumb.php, generating and returning a thumb on request. parameters: f=filename, w=imagewidth
$(li).append('<img src="'+thumbLink+'" '+' width="'+thumbWidth+'"/>'+'<em>'+imageTitle+'</em>');
$('<a href="#">use this</a>')
.button()
.on('click',(function(imageTitle){ //scoping/closure magic http://stackoverflow.com/questions/8624057/closure-needed-for-binding-event-handlers-within-a-loop
return function(){
$(inputID).val('File:'+imageTitle);
};
})(imageTitle))
.prependTo(li);
$(li).appendTo(domList);
}//END for
$(domList).appendTo('#wikieditor-toolbar-mytool-recentimagesContainer');
}//end generateList()
/*WRITE LATEST UPLOADS*/
//for loop. generate [{},{},…] {} contains: title, evtl image link to thumbnail
//generate text:li + evtl. preview + image name+ button
//attach click-event for writing the value of #wikieditor-toolbar-mytool-inputFilename
},
dialog:{
resizable: false,
dialogClass: 'wikiEditor-toolbar-dialog',
width: 590,
buttons:
[
{
'text':'insert',
'click':function () {
var fileUse = $(this).find('#wikieditor-toolbar-mytool-inputFilename').val();
$( this ).dialog( 'close' );
$.wikiEditor.modules.toolbar.fn.doAction(
$( this ).data( 'context' ),
{
type: 'replace',
options: {
pre: '[[',
peri: fileUse,
post: ']]',
ownline: true
}
},
$( this )
);
}//click function
},//text/click object
{
'text':'cancel',
'click': function () {
$( this ).dialog( 'close' );
}
}
],
open: function () {
console.log("open!");
//
}
}
}//end mytool
}//end dialogs
};//end return object
};//modules mytool def
$( '#wpTextbox1' ).wikiEditor( 'addModule', myTool());
$('#wpTextbox1').wikiEditor( 'addToToolbar', {
'section': 'main',
'group': 'insert',
'tools': {
'mytool': {
'label': 'mytool', // or use labelMsg for a localized label, see above
'type': 'button',
'icon': 'customInsertImage.png',
'action': {
'type': 'dialog',
'module':'mytool'
}
}
}
});//END:wikiEditor('addToToolbar
window.setTimeout(changeToolbar, 500); //change toolbar after button has been inserted
} );
// </pre>