/*** Allow editing SVG file's source code without having to save them locally (aka "download") them.* @docu https://commons.wikimedia.org/wiki/User_talk:Rillke/SVGedit.js** @rev 1 (2014-03-22)* @rev 2 (2015-05-29)* @author Rillke, 2014-2015*/// List the global variables for jsHint-Validation. Please make sure that it passes http://jshint.com/// Scheme: globalVariable:allowOverwriting[, globalVariable:allowOverwriting][, globalVariable:allowOverwriting]/* global jQuery:false, mediaWiki:false, MwJSBot:false, CodeMirror:false */// Set jsHint-options. You should not set forin or undef to false if your script does not validate./* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, curly:false, browser:true, multistr:true *//* eslint indent:["error","tab",{"outerIIFEBody":0}] */(function($,mw){'use strict';varsvgEdit,i,MYSELF='SVGEdit',conf=mw.config.get(['wgDBname','wgPageName','wgNamespaceNumber','wgRevisionId','wgTitle']),isCommonsWiki=conf.wgDBname==='commonswiki',random=Math.round(Math.random()*0x1000000000),commonwWikiKey='commonswiki'+random,commonsWiki={},modules=[['ext.gadget.jquery.blockUI','ver1_svg',[],null,commonwWikiKey],['ext.gadget.libAPI','ver1_svg',['user.options'],null,commonwWikiKey],['ext.gadget.editDropdown','ver1_svg',['jquery.client','user.options'],null,commonwWikiKey]];svgEdit={version:'0.0.15.2',init:function(){var$activationLinks=$();// File namespace?if(conf.wgNamespaceNumber!==6||!/\.svg$/i.test(conf.wgPageName))returnsvgEdit.log('Not a SVG-file. Aborting initialization.');if(mw.user.isAnon())returnsvgEdit.log('Anonymous users cannot upload files. Aborting initialization.');// if (!conf.wgRevisionId || !$('.filehistory').find('td.filehistory-selected').length) return svgEdit.log('Page or file does not exist.');$activationLinks=$activationLinks.add(mw.libs.commons.ui.addEditLink('#SVGedit','Edit SVG','e-edit-raw-SVG','Edit SVG source code'));$activationLinks.click(function(e){e.preventDefault();svgEdit.run();$activationLinks.addClass('ui-state-disabled');});if(mw.util.getParamValue('svgrawedit'))svgEdit.run();},registerModules:function(){// Register custom modulesif(!mw.loader.getState('mediawiki.commons.MwJSBot')){mw.loader.implement('mediawiki.commons.MwJSBot',['//commons.wikimedia.org/w/index.php?action=raw&ctype=text/javascript&title=User:Rillke/MwJSBot.js'],{/* no styles*/},{/* no messages*/});}},run:function(){// Create GUIsvgEdit.registerModules();mw.loader.using(['mediawiki.commons.MwJSBot','user.options'],function(){svgEdit.gui();});},gui:function(){var$gui=$('<form action="/">'),$preview=$('<div>').appendTo($gui),$diffContainer=$('<div>').css({border:'1px solid grey'}).text('Diff: ').hide().appendTo($gui),$validationWrapper=$('<div>').css({'border':'1px solid grey','min-height':'2em','max-height':'40em','resize':'both','overflow':'auto'}).hide().appendTo($gui),$validationDoctypeLabel=$('<div>').css({'float':'right','background':'#FFD','padding':'.3em','font-family':'monospace'}).attr({title:'document type used for validation'}).appendTo($validationWrapper),$validationContainer=$('<ul>').appendTo($validationWrapper),$validationContainer2=$('<ul>').appendTo($validationWrapper),$diff=$('<div>').css({font:'12px "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace'}).appendTo($diffContainer),$imgPreviewContainer=$('<div>').css({position:'relative',overflow:'hidden',display:'inline-block'}).html('<a href="https://en.wikipedia.org/wiki/Librsvg">RSVG</a> rendering:<br>').hide().appendTo($preview),$imgPreview=$('<img>').attr({title:'rsvg preview'}).css({'vertical-align':'top'}).addClass('com-svgedit-preview').appendTo($imgPreviewContainer),$imgPreview2Container=$('<div>').css({position:'relative',overflow:'hidden',display:'inline-block'}).html('Browser rendering (iframe):<br>').hide().appendTo($preview),$imgPreview2Overlay=$('<div>').attr({title:'browser preview'}).css({'position':'absolute','left':0,'top':0,'bottom':0,'right':0,'z-index':1}).appendTo($imgPreview2Container),$imgPreview2=$('<iframe>').attr({sandbox:'sandbox',title:'browser preview'}).css({'border':'1px solid #EEE','width':0,'height':0,'resizable':'both','vertical-align':'top'}).addClass('com-svgedit-preview').appendTo($imgPreview2Container),$taWrap=$('<div>').appendTo($gui),$ta=$('<textarea>').attr({rows:mw.user.options.get('rows'),cols:mw.user.options.get('cols'),disabled:'disabled'}).css({width:'99%'}).appendTo($taWrap),$sum=$('<input type="text" maxlength="200" pattern=".{3,}" required placeholder="upload summary (changes, techniques, 3-200 characters)" title="3-200 letters, please">').appendTo($gui),$buttonPane=$('<div>').addClass('com-svg-edit-buttonpane').appendTo($gui),$saveBtn=$('<button>').attr({type:'submit',role:'submit',disabled:'disabled'}).text('Save SVG').appendTo($buttonPane),$loadCodeEditorBtn=$('<button>').attr({type:'button',role:'button',disabled:'disabled',title:'Loads a code editor (XML mode)'}).text('Load CodeMirror').appendTo($buttonPane),$previewBtn=$('<button>').attr({type:'button',role:'button',disabled:'disabled',title:'Render a preview'}).text('Preview').appendTo($buttonPane),$diffBtn=$('<button>').attr({type:'button',role:'button',disabled:'disabled',title:'Show difference between saved and working copy'}).text('Diff').appendTo($buttonPane),$validationDoctype=$('<select>').html('<option value="Inline" selected="">(detect automatically)</option>\<option value="SVG 1.0">SVG 1.0</option>\<option value="SVG 1.1">SVG 1.1</option>\<option value="SVG 1.1 Tiny">SVG 1.1 Tiny</option>\<option value="SVG 1.1 Basic">SVG 1.1 Basic</option>').hide().appendTo($buttonPane),$validateButton=$('<button>').attr({type:'button',role:'button',disabled:'disabled',title:'Check for glitches against validators'}).text('Validate').appendTo($buttonPane),$uploadButton=$('<input type="file">').attr({disabled:'disabled',title:'Replace editor contents with file contents'}).appendTo($buttonPane),allowCloseWindow,timeout,getCurrentValue,setCurrentValue,getOriginal,$fetchCB;mw.util.addCSS('.com-svgedit-preview:hover, .com-svgedit-preview-hover { \background: url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat scroll }');$('<div>').css({'float':'right','color':'#DDD'}).text('Version: '+this.version).appendTo($buttonPane);getCurrentValue=function(){returnsvgEdit.CodeMirror?svgEdit.CodeMirror.getValue():$ta.val();};setCurrentValue=function(val){if(svgEdit.CodeMirror)svgEdit.CodeMirror.setValue(val);else$ta.val(val);};getOriginal=function(){return$ta.data('orignal-svg');};$fetchCB=function(r){$ta.val(r);$ta.data('orignal-svg',r);$saveBtn.add($ta).add($loadCodeEditorBtn).add($previewBtn).add($diffBtn).add($validateButton).add($uploadButton).removeAttr('disabled');timeout=setTimeout(function(){mw.loader.using('mediawiki.confirmCloseWindow',function(){allowCloseWindow=mw.confirmCloseWindow({test:function(){returngetCurrentValue()!==getOriginal();}});});},5000);};$ta.val('Loading SVG');this.fileUrl='';$('#file').find('a').each(function(i,el){varhref=$(el).attr('href'),fileDomainPos=href.indexOf('upload.wikimedia.org');if(fileDomainPos<10&&fileDomainPos!==-1&&/\.svg$/i.test(href)){svgEdit.fileUrl=href;returnfalse;}});if(!this.fileUrl){// Get filepath if in edit-mode$.ajax({url:mw.config.get('wgServer')+mw.util.wikiScript('api')+'?action=query&format=json&prop=imageinfo&titles='+mw.util.wikiUrlencode(conf.wgPageName)+'&iiprop=url&iilimit=1',dataType:'json',success:function(r){if(r&&r.query&&r.query.pages){r=r.query.pages;for(varidinr){if(r[id].imageinfo[0]&&r[id].imageinfo[0].url){svgEdit.fileUrl=r[id].imageinfo[0].url;returnsvgEdit.$fetch().done($fetchCB);}else{svgEdit.failURL();}}}else{svgEdit.failURL();}}});}else{this.$fetch().done($fetchCB);}$imgPreview2Overlay.click(function(){if(prompt('DANGER ZONE: For your security, we added \an overlay over the iframe protecting you from accidental \interactions with the potentially evil/ harmful SVG code. \Type "sudo" to disable this security-layer. \(Otherwise just cancel)')==='sudo')$imgPreview2Overlay.hide();}).hover(function(){$imgPreview2.addClass('com-svgedit-preview-hover');},function(){$imgPreview2.removeClass('com-svgedit-preview-hover');});$gui.submit(function(e){e.preventDefault();$saveBtn.add($sum).attr('disabled','disabled');svgEdit.save(svgEdit.CodeMirror?svgEdit.CodeMirror.getValue():$ta.val(),$sum.val()).done(function(httpStatus,response){if(response&&window.JSON)response=JSON.parse(response);if(response&&response.error){alert('API Error '+response.error.code+':\n'+response.error.info);$saveBtn.add($sum).removeAttr('disabled');$taWrap.attr('noblock',1).unblock();}else{clearTimeout(timeout);if(allowCloseWindow)allowCloseWindow.release();svgEdit.reload();}}).fail(function(){alert('Server error: Something went wrong');$saveBtn.add($sum).removeAttr('disabled');$taWrap.attr('noblock',1).unblock();});svgEdit.block($taWrap);});$loadCodeEditorBtn.click(function(){$(this).attr('disabled','disabled');svgEdit.loadCodeEditor($ta);});$previewBtn.click(function(){varval=getCurrentValue(),blob,URL,dataUrl,typedArray,v,w,h,m;URL=window.URL||window.webkitURL;blob=newBlob([val],{type:'image/svg+xml'});dataUrl=URL.createObjectURL(blob);// Naive RegExp matching (avoids parsing the whole document)// and possible security or malformed SVG troublesv=val.slice(4,5000);m=v.match(/height\s*=\s*["']([\d.]+)["']/);if(!(m&&(h=m[1])&&(h=Number(h))&&h>15))h=500;m=v.match(/width\s*=\s*["']([\d.]+)["']/);if(!(m&&(w=m[1])&&(w=Number(w))&&w>15))w=500;$previewBtn.attr('disabled','disabled');$imgPreview2Container.show();$imgPreviewContainer.css({height:500,width:500}).show();svgEdit.block($imgPreviewContainer);svgEdit.block($imgPreview2Container);$imgPreview2.one('load',function(){if($imgPreview2Container.unblock)$imgPreview2Container.unblock();}).attr('src',dataUrl).css({width:w,height:h});svgEdit.fetchPreview(val).done(function(statusText,response){typedArray=newUint8Array(response);blob=newBlob([typedArray],{type:'image/jpeg'});dataUrl=URL.createObjectURL(blob);$imgPreviewContainer.css({height:'auto',width:'auto'});$imgPreview.attr('src',dataUrl);setTimeout(function(){$imgPreview2.css({width:$imgPreview.width(),height:$imgPreview.height()});},1000);}).fail(function(/* r*/){$imgPreview.attr('src','//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Bug_blank.svg/200px-Bug_blank.svg.png');}).always(function(){$previewBtn.removeAttr('disabled');$imgPreviewContainer.add($imgPreview2Container).unblock();});});$diffBtn.click(function(){svgEdit.block($diffContainer.show());svgEdit.$usingScharkDiff().done(function(){$diff.html(mw.libs.schnarkDiff.htmlDiff(getOriginal(),getCurrentValue(),true));$diffContainer.unblock();});});$validateButton.click(function(){if($validationDoctype.css('display')==='none')return$validationDoctype.fadeIn('fast');svgEdit.block($validationWrapper.show());svgEdit.$validate(getCurrentValue(),$validationDoctype.val()).done(function(textStatus,r){$validationWrapper.unblock();$validationContainer.add($validationContainer2).text('');try{r=JSON.parse(r);}catch(invalidJSON){}if(r.source)$validationDoctypeLabel.text(r.source.doctype);if(r.svgcheck&&r.svgcheck.length){$.each(r.svgcheck,function(i,msg){$validationContainer2.append(svgEdit.$validationItem2(msg));});}if(r.messages){$.each(r.messages,function(i,msg){$validationContainer.append(svgEdit.$validationItem(msg));});if(!r.messages.length)$validationContainer.append($('<li>Well done :)</li>'));}elseif(r.response){$validationContainer.html(r.response);}else{$validationContainer.text(JSON.stringify(r));}});});$uploadButton.on('change',function(){varfile=$uploadButton[0].files[0];if(!file)return;varsize=file.size;if(size>15*1024*1024)returnalert('Selected file is > 15 MiB. Aborting.');varreader=newFileReader();reader.onload=function(){// Clear upload button$uploadButton.val('');if(getCurrentValue()!==$ta.data('orignal-svg')){if(!confirm('The editor contents changed from the stored revision. Are you sure you want to replace the editor contents with the contents loaded from the file selected?')){return;// Cancel: Do nothing!}}setCurrentValue(reader.result);};reader.readAsText(file);});$gui.prependTo('#mw-content-text');},block:function($el){mw.loader.using('ext.gadget.jquery.blockUI',function(){if($el.attr('noblock'))return;$el.block({message:'<img src="//upload.wikimedia.org/wikipedia/commons/1/10/Loading-special.gif" height="15" width="128">',css:{border:'none',background:'none'}});});},$validationItem:function(validatorMsg){varp='com-svgedit-validation-',$l=$('<code>').addClass(p+'line').text('L.'+validatorMsg.lastLine),$col=validatorMsg.lastColumn?$('<code>').addClass(p+'col').text('col.'+validatorMsg.lastColumn):'',$msg=$('<span>').addClass(p+'message').text(validatorMsg.message),$msgId=$('<span>').addClass(p+'messageid').text(validatorMsg.messageid),$li=$('<li>').append($l,' ',$col,': ',$msg,' (',$msgId,')');return$li;},$validationItem2:function(validatorMsg){$.each(validatorMsg.issues,function(i,issue){validatorMsg.issues[i]=mw.html.escape(issue).replace(/\*\*(.+?)\*\*/,'<b><i>$1</i></b>').replace(/\*(.+?)\*/,'<i>$1</i>');});varp='com-svgedit-validation-',$l=$('<code>').addClass(p+'line').text('L.'+validatorMsg.line),$msg=$('<span>').addClass(p+'message').html(validatorMsg.issues.join(', ')),$li=$('<li>').append($l,': ',$msg);return$li;},$validate:function(svg,doctype){returnsvgEdit.bot.multipartMessageForUTF8Files().appendPart('svgcheck','on').appendPart('doctype',doctype).appendPart('file',svg,'input.svg').$send('//validator.toolforge.org/w3.php');},$usingScharkDiff:function(){var$deferred=$.Deferred();if(mw.libs.schnarkDiff&&mw.libs.schnarkDiff.htmlDiff){$deferred.resolve();}else{mw.hook('userjs.load-script.diff-core').add(function(){mw.libs.schnarkDiff.style.set('ins','text-decoration: underline; font-weight: bold; font-size:1.2em; color: #020; background-color: #ABE; -moz-text-decoration-color:#474;');mw.libs.schnarkDiff.style.set('del','font-size:1.2em; color: #200; background-color: #FD9; text-decoration-color:#744;');mw.util.addCSS(mw.libs.schnarkDiff.getCSS());mw.libs.schnarkDiff.config.set('minMovedLength',20);mw.libs.schnarkDiff.config.set('tooShort',3);$deferred.resolve();});mw.loader.load('//de.wikipedia.org/w/index.php?title=Benutzer:Schnark/js/diff.js/core.js&action=raw&ctype=text/javascript');}return$deferred.promise();},failURL:function(err){err=err||'Unable to extract file URL.';svgEdit.log(err);thrownewError(err);},$fetch:function(){// Fetch SVG source codesvgEdit.bot=newMwJSBot();if(!svgEdit.fileUrl)returnsvgEdit.failURL();// Assuming the SVG is UTF-8-encodedreturn$.ajax({url:svgEdit.fileUrl,cache:false,beforeSend:function(xhr){xhr.overrideMimeType('text/plain; charset=UTF-8');}});},loadCodeEditor:function($textArea/* , $parent*/){// Just in case someone complains about the license ...varmirrors=['//commons.wikimedia.org/w/index.php?','//tools-static.wmflabs.org/rillke/CodeMirror/','//mol-static.wmflabs.org/CodeMirror/'],scripts=['lib/codemirror.js','mode/xml/xml.js'],styles=['lib/codemirror.css'],params={action:'raw',ctype:'text/javascript',title:'?'},rlScripts=$.map(scripts,function(el){params.title='User:Rillke/CodeMirror/'+el;returnmirrors[0]+$.param(params);});params.ctype='text/css';varrlStyles=$.map(styles,function(el){params.title='User:Rillke/CodeMirror/'+el;returnmirrors[0]+$.param(params);});if(!mw.loader.getState('mediawiki.commons.CodeMirror')){mw.loader.implement('mediawiki.commons.CodeMirror',rlScripts,{url:{screen:rlStyles}},{/* no messages*/});}mw.loader.using('mediawiki.commons.CodeMirror',function(){varh=$textArea.parent().height(),m=$textArea.val().slice(0,6000).match(/.+\n([\t ]+)<\S+(?:.|\n)*\n\1</),settings={lineNumbers:true,mode:'xml',viewportMargin:120},l;if(m){l=m[1].length;if(l>0&&l<9){if(/ /.test(m[1])){svgEdit.log('Indention with spaces');$.extend(true,settings,{extraKeys:{Tab:function(){svgEdit.CodeMirror.execCommand('insertSoftTab');}},tabSize:l});}elseif(/\t/.test(m[1])){svgEdit.log('Indention with tabs');$.extend(true,settings,{indentWithTabs:true,tabSize:2});}}}svgEdit.CodeMirror=CodeMirror.fromTextArea($textArea[0],settings);$(svgEdit.CodeMirror.display.scroller).css({height:(h-5)+'px'});$(svgEdit.CodeMirror.display.wrapper).css({border:'1px solid #EEE',height:'auto'});});},save:function(text,summary){if(summary)summary+=' // ';varmessage=svgEdit.bot.multipartMessageForUTF8Files().appendPart('format','json').appendPart('action','upload').appendPart('filename',conf.wgTitle).appendPart('comment',summary+'Editing SVG source code using [[c:User:Rillke/SVGedit.js]]').appendPart('file',text,conf.wgTitle).appendPart('ignorewarnings',1).appendPart('token',mw.user.tokens.get('csrfToken'));if(isCommonsWiki)message.appendPart('tags','rillke-mw-js-bot');returnmessage.$send();},fetchPreview:function(svg){returnsvgEdit.bot.multipartMessageForUTF8Files().appendPart('file',svg,'input.svg').$send('//convert.toolforge.org/svg2png.php','arraybuffer');},reload:function(){window.location.href=mw.util.getUrl(conf.wgPageName);},log:function(){varargs=Array.prototype.slice.call(arguments);args.unshift(MYSELF);mw.log.apply(mw.log,args);}};// Register globallyif(!isCommonsWiki||conf.wgDBname!=='commonsarchivewiki'){// mw.loader.addSource has a check for source key uniqueness// that if it fails, throws an error.// Since I am offering many scripts, I would like to be able to register// a source from multiple code positions. However the loader has no// accessors to its internally maintained list of sources. Therefore// ensure with high probabiltiy that every source key added is unique.commonsWiki[commonwWikiKey]='//commons.wikimedia.org/w/load.php';mw.loader.addSource(commonsWiki);// Register Commons RL modulesfor(i=0;i<modules.length;i++){if(!mw.loader.getState(modules[i][0]))mw.loader.register([modules[i]]);}}// Expose globallymw.libs.svgRawEditor=svgEdit;mw.loader.using(['mediawiki.util','mediawiki.user','ext.gadget.editDropdown'],svgEdit.init);}(jQuery,mediaWiki));