Benutzer:Andreas Plank/vector.js: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →
Version vom 17. Februar 2014, 23:38 Uhr

//<pre>
//<source lang="javascript">
/*
 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: "&nbsp;", 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: "&lt;!-- ", '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::§]] |&#32;•&#32;}}'}
            }
          },{
            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-->|&#32;•&#32;<!-- 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: "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: "&nbsp;", 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-->|&#32;•&#32;<!--output sep\n-->}}<!-- end arraymap \n-->"}
            }
          }, {
            label: "{{#arraymap:}}",
            action: {
              type: 'encapsulate',
              options: {pre: "{{#arraymap: ", peri : '{{{field|}}}', post: "|;|§|[[My property::§]] |&#32;•&#32;}}"}
            }
          }, {
            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=&#32;•&#32; | 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>\
						<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="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

} );
// </source>
// </pre>