").append(b.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},b.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){b.fn[t]=function(e){return this.on(t,e)}}),b.each(["get","post"],function(e,n){b[n]=function(e,r,i,o){return b.isFunction(r)&&(o=o||i,i=r,r=t),b.ajax({url:e,type:n,dataType:o,data:r,success:i})}}),b.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Nn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":b.parseJSON,"text xml":b.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Mn(Mn(e,b.ajaxSettings),t):Mn(b.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,u,l,c,p=b.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?b(f):b.event,h=b.Deferred(),g=b.Callbacks("once memory"),m=p.statusCode||{},y={},v={},x=0,T="canceled",N={readyState:0,getResponseHeader:function(e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===x?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return x||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this},abort:function(e){var t=e||T;return l&&l.abort(t),k(0,t),this}};if(h.promise(N).complete=g.add,N.success=N.done,N.error=N.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=b.trim(p.dataType||"*").toLowerCase().match(w)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?80:443))==(mn[3]||("http:"===mn[1]?80:443)))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=b.param(p.data,p.traditional)),qn(An,p,n,N),2===x)return N;u=p.global,u&&0===b.active++&&b.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Cn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(b.lastModified[o]&&N.setRequestHeader("If-Modified-Since",b.lastModified[o]),b.etag[o]&&N.setRequestHeader("If-None-Match",b.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&N.setRequestHeader("Content-Type",p.contentType),N.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)N.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,N,p)===!1||2===x))return N.abort();T="abort";for(i in{success:1,error:1,complete:1})N[i](p[i]);if(l=qn(jn,p,n,N)){N.readyState=1,u&&d.trigger("ajaxSend",[N,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){N.abort("timeout")},p.timeout));try{x=1,l.send(y,k)}catch(C){if(!(2>x))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,C=n;2!==x&&(x=2,s&&clearTimeout(s),l=t,a=i||"",N.readyState=e>0?4:0,r&&(w=_n(p,N,r)),e>=200&&300>e||304===e?(p.ifModified&&(T=N.getResponseHeader("Last-Modified"),T&&(b.lastModified[o]=T),T=N.getResponseHeader("etag"),T&&(b.etag[o]=T)),204===e?(c=!0,C="nocontent"):304===e?(c=!0,C="notmodified"):(c=Fn(p,w),C=c.state,y=c.data,v=c.error,c=!v)):(v=C,(e||!C)&&(C="error",0>e&&(e=0))),N.status=e,N.statusText=(n||C)+"",c?h.resolveWith(f,[y,C,N]):h.rejectWith(f,[N,C,v]),N.statusCode(m),m=t,u&&d.trigger(c?"ajaxSuccess":"ajaxError",[N,p,c?y:v]),g.fireWith(f,[N,C]),u&&(d.trigger("ajaxComplete",[N,p]),--b.active||b.event.trigger("ajaxStop")))}return N},getScript:function(e,n){return b.get(e,t,n,"script")},getJSON:function(e,t,n){return b.get(e,t,n,"json")}});function _n(e,n,r){var i,o,a,s,u=e.contents,l=e.dataTypes,c=e.responseFields;for(s in c)s in r&&(n[c[s]]=r[s]);while("*"===l[0])l.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in u)if(u[s]&&u[s].test(o)){l.unshift(s);break}if(l[0]in r)a=l[0];else{for(s in r){if(!l[0]||e.converters[s+" "+l[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==l[0]&&l.unshift(a),r[a]):t}function Fn(e,t){var n,r,i,o,a={},s=0,u=e.dataTypes.slice(),l=u[0];if(e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u[1])for(i in e.converters)a[i.toLowerCase()]=e.converters[i];for(;r=u[++s];)if("*"!==r){if("*"!==l&&l!==r){if(i=a[l+" "+r]||a["* "+r],!i)for(n in a)if(o=n.split(" "),o[1]===r&&(i=a[l+" "+o[0]]||a["* "+o[0]])){i===!0?i=a[n]:a[n]!==!0&&(r=o[0],u.splice(s--,0,r));break}if(i!==!0)if(i&&e["throws"])t=i(t);else try{t=i(t)}catch(c){return{state:"parsererror",error:i?c:"No conversion from "+l+" to "+r}}}l=r}return{state:"success",data:t}}b.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return b.globalEval(e),e}}}),b.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),b.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=o.head||b("head")[0]||o.documentElement;return{send:function(t,i){n=o.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var On=[],Bn=/(=)\?(?=&|$)|\?\?/;b.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=On.pop()||b.expando+"_"+vn++;return this[e]=!0,e}}),b.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,u=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return u||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=b.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,u?n[u]=n[u].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||b.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,On.push(o)),s&&b.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}b.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=b.ajaxSettings.xhr(),b.support.cors=!!Rn&&"withCredentials"in Rn,Rn=b.support.ajax=!!Rn,Rn&&b.ajaxTransport(function(n){if(!n.crossDomain||b.support.cors){var r;return{send:function(i,o){var a,s,u=n.xhr();if(n.username?u.open(n.type,n.url,n.async,n.username,n.password):u.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)u[s]=n.xhrFields[s];n.mimeType&&u.overrideMimeType&&u.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)u.setRequestHeader(s,i[s])}catch(l){}u.send(n.hasContent&&n.data||null),r=function(e,i){var s,l,c,p;try{if(r&&(i||4===u.readyState))if(r=t,a&&(u.onreadystatechange=b.noop,$n&&delete Pn[a]),i)4!==u.readyState&&u.abort();else{p={},s=u.status,l=u.getAllResponseHeaders(),"string"==typeof u.responseText&&(p.text=u.responseText);try{c=u.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,l)},n.async?4===u.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},b(e).unload($n)),Pn[a]=r),u.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+x+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n,r,i=this.createTween(e,t),o=Yn.exec(t),a=i.cur(),s=+a||0,u=1,l=20;if(o){if(n=+o[2],r=o[3]||(b.cssNumber[e]?"":"px"),"px"!==r&&s){s=b.css(i.elem,e,!0)||n||1;do u=u||".5",s/=u,b.style(i.elem,e,s+r);while(u!==(u=i.cur()/a)&&1!==u&&--l)}i.unit=r,i.start=s,i.end=o[1]?s+(o[1]+1)*n:n}return i}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=b.now()}function Zn(e,t){b.each(t,function(t,n){var r=(Qn[t]||[]).concat(Qn["*"]),i=0,o=r.length;for(;o>i;i++)if(r[i].call(e,t,n))return})}function er(e,t,n){var r,i,o=0,a=Gn.length,s=b.Deferred().always(function(){delete u.elem}),u=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,l.startTime+l.duration-t),r=n/l.duration||0,o=1-r,a=0,u=l.tweens.length;for(;u>a;a++)l.tweens[a].run(o);return s.notifyWith(e,[l,o,n]),1>o&&u?n:(s.resolveWith(e,[l]),!1)},l=s.promise({elem:e,props:b.extend({},t),opts:b.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=b.Tween(e,l.opts,t,n,l.opts.specialEasing[t]||l.opts.easing);return l.tweens.push(r),r},stop:function(t){var n=0,r=t?l.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)l.tweens[n].run(1);return t?s.resolveWith(e,[l,t]):s.rejectWith(e,[l,t]),this}}),c=l.props;for(tr(c,l.opts.specialEasing);a>o;o++)if(r=Gn[o].call(l,e,c,l.opts))return r;return Zn(l,c),b.isFunction(l.opts.start)&&l.opts.start.call(e,l),b.fx.timer(b.extend(u,{elem:e,anim:l,queue:l.opts.queue})),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always)}function tr(e,t){var n,r,i,o,a;for(i in e)if(r=b.camelCase(i),o=t[r],n=e[i],b.isArray(n)&&(o=n[1],n=e[i]=n[0]),i!==r&&(e[r]=n,delete e[i]),a=b.cssHooks[r],a&&"expand"in a){n=a.expand(n),delete e[r];for(i in n)i in e||(e[i]=n[i],t[i]=o)}else t[r]=o}b.Animation=b.extend(er,{tweener:function(e,t){b.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,u,l,c,p,f=this,d=e.style,h={},g=[],m=e.nodeType&&nn(e);n.queue||(c=b._queueHooks(e,"fx"),null==c.unqueued&&(c.unqueued=0,p=c.empty.fire,c.empty.fire=function(){c.unqueued||p()}),c.unqueued++,f.always(function(){f.always(function(){c.unqueued--,b.queue(e,"fx").length||c.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[d.overflow,d.overflowX,d.overflowY],"inline"===b.css(e,"display")&&"none"===b.css(e,"float")&&(b.support.inlineBlockNeedsLayout&&"inline"!==un(e.nodeName)?d.zoom=1:d.display="inline-block")),n.overflow&&(d.overflow="hidden",b.support.shrinkWrapBlocks||f.always(function(){d.overflow=n.overflow[0],d.overflowX=n.overflow[1],d.overflowY=n.overflow[2]}));for(i in t)if(a=t[i],Vn.exec(a)){if(delete t[i],u=u||"toggle"===a,a===(m?"hide":"show"))continue;g.push(i)}if(o=g.length){s=b._data(e,"fxshow")||b._data(e,"fxshow",{}),"hidden"in s&&(m=s.hidden),u&&(s.hidden=!m),m?b(e).show():f.done(function(){b(e).hide()}),f.done(function(){var t;b._removeData(e,"fxshow");for(t in h)b.style(e,t,h[t])});for(i=0;o>i;i++)r=g[i],l=f.createTween(r,m?s[r]:0),h[r]=s[r]||b.style(e,r),r in s||(s[r]=l.start,m&&(l.end=l.start,l.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}b.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(b.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?b.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=b.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){b.fx.step[e.prop]?b.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[b.cssProps[e.prop]]||b.cssHooks[e.prop])?b.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},b.each(["toggle","show","hide"],function(e,t){var n=b.fn[t];b.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),b.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=b.isEmptyObject(e),o=b.speed(t,n,r),a=function(){var t=er(this,b.extend({},e),o);a.finish=function(){t.stop(!0)},(i||b._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=b.timers,a=b._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&b.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=b._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=b.timers,a=r?r.length:0;for(n.finish=!0,b.queue(this,e,[]),i&&i.cur&&i.cur.finish&&i.cur.finish.call(this),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}b.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){b.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),b.speed=function(e,t,n){var r=e&&"object"==typeof e?b.extend({},e):{complete:n||!n&&t||b.isFunction(e)&&e,duration:e,easing:n&&t||t&&!b.isFunction(t)&&t};return r.duration=b.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in b.fx.speeds?b.fx.speeds[r.duration]:b.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){b.isFunction(r.old)&&r.old.call(this),r.queue&&b.dequeue(this,r.queue)},r},b.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},b.timers=[],b.fx=rr.prototype.init,b.fx.tick=function(){var e,n=b.timers,r=0;for(Xn=b.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||b.fx.stop(),Xn=t},b.fx.timer=function(e){e()&&b.timers.push(e)&&b.fx.start()},b.fx.interval=13,b.fx.start=function(){Un||(Un=setInterval(b.fx.tick,b.fx.interval))},b.fx.stop=function(){clearInterval(Un),Un=null},b.fx.speeds={slow:600,fast:200,_default:400},b.fx.step={},b.expr&&b.expr.filters&&(b.expr.filters.animated=function(e){return b.grep(b.timers,function(t){return e===t.elem}).length}),b.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){b.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,b.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},b.offset={setOffset:function(e,t,n){var r=b.css(e,"position");"static"===r&&(e.style.position="relative");var i=b(e),o=i.offset(),a=b.css(e,"top"),s=b.css(e,"left"),u=("absolute"===r||"fixed"===r)&&b.inArray("auto",[a,s])>-1,l={},c={},p,f;u?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),b.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(l.top=t.top-o.top+p),null!=t.left&&(l.left=t.left-o.left+f),"using"in t?t.using.call(e,l):i.css(l)}},b.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===b.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),b.nodeName(e[0],"html")||(n=e.offset()),n.top+=b.css(e[0],"borderTopWidth",!0),n.left+=b.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-b.css(r,"marginTop",!0),left:t.left-n.left-b.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||o.documentElement;while(e&&!b.nodeName(e,"html")&&"static"===b.css(e,"position"))e=e.offsetParent;return e||o.documentElement})}}),b.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);b.fn[e]=function(i){return b.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?b(a).scrollLeft():o,r?o:b(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return b.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}b.each({Height:"height",Width:"width"},function(e,n){b.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){b.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return b.access(this,function(n,r,i){var o;return b.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?b.css(n,r,s):b.style(n,r,i,s)},n,a?i:t,a,null)}})}),e.jQuery=e.$=b,"function"==typeof define&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return b})})(window);
\ No newline at end of file
diff --git a/website/playground.html b/website/playground.html
new file mode 100644
index 00000000..98acfb77
--- /dev/null
+++ b/website/playground.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
+
Monaco Editor Playground
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ © 2016 Microsoft
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/website/playground/playground-runner.html b/website/playground/playground-runner.html
new file mode 100644
index 00000000..546ad7b7
--- /dev/null
+++ b/website/playground/playground-runner.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/playground/playground.css b/website/playground/playground.css
new file mode 100644
index 00000000..7bc5cdd8
--- /dev/null
+++ b/website/playground/playground.css
@@ -0,0 +1,59 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Segoe UI",Arial,"HelveticaNeue-Light", sans-serif;
+ font-size: 13px;
+ overflow: hidden;
+}
+
+select {
+ width: initial;
+}
+
+.title {
+ font-family: "Segoe UI Light","HelveticaNeue-UltraLight", sans-serif;
+ font-weight: 100;
+ font-size: 1.8em;
+}
+
+.tabArea {
+ height: 20px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #999;
+}
+.tab {
+ height: 20px;
+ line-height: 20px;
+ box-sizing: border-box;
+ color: #999;
+ padding: 0 8px;
+ border: 1px solid #999;
+ border-bottom: 0;
+ cursor: pointer;
+ float: left;
+}
+.tab.active {
+ color: black;
+ border-bottom: 1px solid white;
+}
+.action {
+ height: 20px;
+ line-height: 20px;
+ box-sizing: border-box;
+ color: black;
+ padding: 0 5px;
+ border: 1px solid #999;
+ border-bottom: 0;
+ cursor: pointer;
+ float: right;
+ padding-left: 16px;
+}
+.action.run {
+ background: url('run.png') no-repeat left center;
+}
+.editor-container {
+ border: 1px solid #999;
+ border-top: 0;
+}
+
+
diff --git a/website/playground/playground.js b/website/playground/playground.js
new file mode 100644
index 00000000..cf5c47ce
--- /dev/null
+++ b/website/playground/playground.js
@@ -0,0 +1,314 @@
+(function() {
+
+'use strict';
+
+window.onload = function() {
+ require(['require', 'vs/editor/editor.main'], function(require) {
+
+ // require(['vs/languages/typescript/common/typescript'], function() {
+ // var mode = require('vs/languages/typescript/common/typescript');
+ // var winjs = require('vs/base/common/winjs.base');
+ // winjs.xhr({ url: 'playground/samples/editor.d.ts.txt' }).then(function(response) {
+ // mode.javaScriptDefaults.addExtraLib(response.responseText, 'editor.d.ts');
+ // mode.javaScriptDefaults.addExtraLib([
+ // 'declare var require: {',
+ // ' toUrl(path: string): string;',
+ // ' (moduleName: string): any;',
+ // ' (dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
+ // ' config(data: any): any;',
+ // ' onError: Function;',
+ // '};',
+ // ].join('\n'), 'require.d.ts');
+
+ var loading = document.getElementById('loading');
+ loading.parentNode.removeChild(loading);
+ load();
+ // });
+ // });
+ });
+};
+
+var editor = null;
+var data = {
+ js: {
+ model: null,
+ state: null
+ },
+ css: {
+ model: null,
+ state: null
+ },
+ html: {
+ model: null,
+ state: null
+ }
+};
+
+function load() {
+
+ function layout() {
+ var GLOBAL_PADDING = 20;
+
+ var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
+ var HEIGHT = window.innerHeight;
+
+ var TITLE_HEIGHT = 110;
+ var FOOTER_HEIGHT = 80;
+ var TABS_HEIGHT = 20;
+ var INNER_PADDING = 20;
+ var SWITCHER_HEIGHT = 30;
+
+ var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
+ var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
+
+ playgroundContainer.style.width = WIDTH + 'px';
+ playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
+
+ sampleSwitcher.style.position = 'absolute';
+ sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
+ sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
+
+ typingContainer.style.position = 'absolute';
+ typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
+ typingContainer.style.left = GLOBAL_PADDING + 'px';
+ typingContainer.style.width = HALF_WIDTH + 'px';
+ typingContainer.style.height = REMAINING_HEIGHT + 'px';
+
+ tabArea.style.position = 'absolute';
+ tabArea.style.boxSizing = 'border-box';
+ tabArea.style.top = 0;
+ tabArea.style.left = 0;
+ tabArea.style.width = HALF_WIDTH + 'px';
+ tabArea.style.height = TABS_HEIGHT + 'px';
+
+ editorContainer.style.position = 'absolute';
+ editorContainer.style.boxSizing = 'border-box';
+ editorContainer.style.top = TABS_HEIGHT + 'px';
+ editorContainer.style.left = 0;
+ editorContainer.style.width = HALF_WIDTH + 'px';
+ editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
+
+ if (editor) {
+ editor.layout({
+ width: HALF_WIDTH - 2,
+ height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
+ });
+ }
+
+ runContainer.style.position = 'absolute';
+ runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
+ runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
+ runContainer.style.width = HALF_WIDTH + 'px';
+ runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
+
+ runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
+ if (runIframe) {
+ runIframe.style.height = runIframeHeight + 'px';
+ }
+ }
+
+ function changeTab(selectedTabNode, desiredModelId) {
+ for (var i = 0; i < tabArea.childNodes.length; i++) {
+ var child = tabArea.childNodes[i];
+ if (/tab/.test(child.className)) {
+ child.className = 'tab';
+ }
+ }
+ selectedTabNode.className = 'tab active';
+
+ var currentState = editor.saveViewState();
+
+ var currentModel = editor.getModel();
+ if (currentModel === data.js.model) {
+ data.js.state = currentState;
+ } else if (currentModel === data.css.model) {
+ data.css.state = currentState;
+ } else if (currentModel === data.html.model) {
+ data.html.state = currentState;
+ }
+
+ editor.setModel(data[desiredModelId].model);
+ editor.restoreViewState(data[desiredModelId].state);
+ editor.focus();
+ }
+
+
+ // create the typing side
+ var typingContainer = document.createElement('div');
+ typingContainer.className = 'typingContainer';
+
+ var tabArea = (function() {
+ var tabArea = document.createElement('div');
+ tabArea.className = 'tabArea';
+
+ var jsTab = document.createElement('span');
+ jsTab.className = 'tab active';
+ jsTab.appendChild(document.createTextNode('JavaScript'));
+ jsTab.onclick = function() { changeTab(jsTab, 'js'); };
+ tabArea.appendChild(jsTab);
+
+ var cssTab = document.createElement('span');
+ cssTab.className = 'tab';
+ cssTab.appendChild(document.createTextNode('CSS'));
+ cssTab.onclick = function() { changeTab(cssTab, 'css'); };
+ tabArea.appendChild(cssTab);
+
+ var htmlTab = document.createElement('span');
+ htmlTab.className = 'tab';
+ htmlTab.appendChild(document.createTextNode('HTML'));
+ htmlTab.onclick = function() { changeTab(htmlTab, 'html'); };
+ tabArea.appendChild(htmlTab);
+
+ var runBtn = document.createElement('span');
+ runBtn.className = 'action run';
+ runBtn.appendChild(document.createTextNode('Run'));
+ runBtn.onclick = function() { run(); };
+ tabArea.appendChild(runBtn);
+
+ return tabArea;
+ })();
+
+ var editorContainer = document.createElement('div');
+ editorContainer.className = 'editor-container';
+
+ typingContainer.appendChild(tabArea);
+ typingContainer.appendChild(editorContainer);
+
+ var runContainer = document.createElement('div');
+ runContainer.className = 'run-container';
+
+ var sampleSwitcher = document.createElement('select');
+ var sampleChapter;
+ ALL_SAMPLES.forEach(function (sample) {
+ if (!sampleChapter || sampleChapter.label !== sample.chapter) {
+ sampleChapter = document.createElement('optgroup');
+ sampleChapter.label = sample.chapter;
+ sampleSwitcher.appendChild(sampleChapter);
+ }
+ var sampleOption = document.createElement('option');
+ sampleOption.value = sample.sampleId;
+ sampleOption.appendChild(document.createTextNode(sample.name));
+ sampleChapter.appendChild(sampleOption);
+ });
+ sampleSwitcher.className = 'sample-switcher';
+
+ function findSample(sampleId) {
+ for (var i = 0; i < SAMPLES.length; i++) {
+ var sample = SAMPLES[i];
+ if (sample.id === sampleId) {
+ return sample;
+ }
+ }
+ return null;
+ }
+
+ function loadSample(sampleId, callback) {
+ var sample = findSample(sampleId);
+ if (sample) {
+ return callback(null, sample);
+ }
+
+ var script = document.createElement('script');
+ script.src = 'playground/samples/' + sampleId + '.js';
+ script.onload = function() {
+ var sample = findSample(sampleId);
+ return callback(sample ? null : new Error('sample not found'), sample);
+ };
+ script.onerror = function(err) {
+ return callback(err, null);
+ };
+ document.head.appendChild(script);
+ }
+
+ sampleSwitcher.onchange = function() {
+ var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
+ window.location.hash = sampleId;
+ };
+
+ var playgroundContainer = document.getElementById('playground');
+
+ layout();
+ window.onresize = layout;
+
+ playgroundContainer.appendChild(sampleSwitcher);
+ playgroundContainer.appendChild(typingContainer);
+ playgroundContainer.appendChild(runContainer);
+
+ data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
+ data.css.model = monaco.editor.createModel('css', 'css');
+ data.html.model = monaco.editor.createModel('html', 'html');
+
+ editor = monaco.editor.create(editorContainer, {
+ model: data.js.model
+ });
+
+ var currentToken = 0;
+ function parseHash(firstTime) {
+ var sampleId = window.location.hash.replace(/^#/, '');
+ if (!sampleId) {
+ sampleId = ALL_SAMPLES[0].sampleId;
+ }
+
+ if (firstTime) {
+ for (var i = 0; i < sampleSwitcher.options.length; i++) {
+ var opt = sampleSwitcher.options[i];
+ if (opt.value === sampleId) {
+ sampleSwitcher.selectedIndex = i;
+ break;
+ }
+ }
+ }
+
+ var myToken = (++currentToken);
+ loadSample(sampleId, function(err, sample) {
+ if (err) {
+ alert('Sample not found! ' + err.message);
+ return;
+ }
+ if (myToken !== currentToken) {
+ return;
+ }
+ data.js.model.setValue(sample.js);
+ data.html.model.setValue(sample.html);
+ data.css.model.setValue(sample.css);
+ editor.setScrollTop(0);
+ run();
+ });
+ }
+ window.onhashchange = parseHash;
+ parseHash(true);
+
+ function run() {
+ doRun(runContainer);
+ }
+}
+
+var runIframe = null, runIframeHeight = 0;
+function doRun(runContainer) {
+ if (runIframe) {
+ // Unload old iframe
+ runContainer.removeChild(runIframe);
+ }
+
+ // Load new iframe
+ runIframe = document.createElement('iframe');
+ runIframe.id = 'runner';
+ runIframe.src = 'playground/playground-runner.html';
+ runIframe.className = 'run-iframe';
+ runIframe.style.boxSizing = 'border-box';
+ runIframe.style.height = runIframeHeight + 'px';
+ runIframe.style.width = '100%';
+ runIframe.style.border = '1px solid lightgrey';
+ runIframe.frameborder = '0';
+ runContainer.appendChild(runIframe);
+
+ var getLang = function(lang) {
+ return data[lang].model.getValue();
+ };
+
+ runIframe.addEventListener('load', function(e) {
+ runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
+ });
+}
+
+})();
\ No newline at end of file
diff --git a/website/playground/playground.mdoc b/website/playground/playground.mdoc
new file mode 100644
index 00000000..085e2156
--- /dev/null
+++ b/website/playground/playground.mdoc
@@ -0,0 +1,1577 @@
+= Creating the editor
+
+== Hello world!
+=======================JS
+// The Monaco Editor can be easily created, given an
+// empty container and an options literal.
+// Two members of the literal are "value" and "mode".
+// The editor takes the full size of its container.
+
+var container = document.getElementById("container");
+var jsCode = "function hello() {\n\talert('Hello world!');\n}";
+
+Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Editor basic options
+=======================JS
+// Through the options literal, the behaviour of the editor can be easily customized.
+
+var container = document.getElementById("container");
+var jsCode = "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line";
+
+// Here are the available config options that can be passed
+// to the editor and their default values. Try changing them!
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+
+ mode: "text/javascript",
+
+ // Show line numbers in the gutter ?
+ lineNumbers: true,
+
+ // Tab size in characters
+ tabSize: "auto",
+
+ // Insert spaces instead of tabs ?
+ insertSpaces: "auto",
+
+ // Rounded corners for rendering selection ?
+ roundedSelection: true,
+
+ // Scrolling one page after the last line ?
+ scrollBeyondLastLine: true,
+
+ // Scrollbars rendering
+ scrollbar: {
+ // other values are "visible" or "hidden"
+ vertical: "auto",
+ horizontal: "auto"
+ },
+
+ // Automatic Layout: Should a timer be installed
+ // which fires every 100ms to scan the editor's
+ // container for size changes ?
+ // Setting to true has a severe performance penalty.
+ // One can call .layout() on the editor manually.
+ automaticLayout: false,
+
+ // Is the editor in read only mode ?
+ readOnly: false,
+
+ // What theme should be used ?
+ // Values supported: vs, vs-dark
+ theme: "vs",
+});
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Hard wrapping
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = "// jqeuery-min excerpt:\n// 1 2 3 4\n//34567890123456789012345678901234567890\n(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p=\"1.9.1\",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\\d*\\.|)\\d+(?:[eE][+-]?\\d+|)/.source,w=/\\S+/g,T=/^[\\s\\uFEFF\\xA0]+|[\\s\\uFEFF\\xA0]+$/g,N=/^(?:(<[\\w\\W]+>)[^>]*|#([\\w-]*))$/,C=/^<(\\w+)\\s*\\/?>(?:<\\/\\1>|)$/,k=/^[\\],:{}\\s]*$/,E=/(?:^|:|,)(?:\\s*\\[)+/g,S=/\\\\(?:[\"\\\\\\/bfnrt]|u[\\da-fA-F]{4})/g,A=/\"[^\"\\\\\\r\\n]*\"|true|false|null|-?(?:\\d+\\.|)\\d+(?:[eE][+-]?\\d+|)/g,j=/^-ms-/,D=/-([\\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||\"load\"===e.type||\"complete\"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener(\"DOMContentLoaded\",H,!1),e.removeEventListener(\"load\",H,!1)):(o.detachEvent(\"onreadystatechange\",H),e.detachEvent(\"onload\",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if(\"string\"==typeof e){if(i=\"<\"===e.charAt(0)&&\">\"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElemen";
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript",
+
+ // If `wrappingColumn` is -1, then no wrapping occurs and
+ // long lines are rendered on one line. However, this might
+ // mean that not all code is rendered (... may be used).
+ // If `wrappingColumn` is 0, then viewport width wrapping is set
+ // If `wrappingColumn` is > 0, then the lines will wrap at its value
+ // Defaults to 300
+ wrappingColumn: 40,
+
+ // If more than half of the lines are on lines longer than
+ // `longLineBoundary`, the editor forces viewport width wrapping
+ // By default the value is 300, but here we're using a larger
+ // value to circumvent this default behavior
+ longLineBoundary: 1e4
+});
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Syntax highlighting for HTML elements
+=======================JS
+// The syntax highlighting functionality can be used independently of the editor.
+require(["vs/editor/editor.main"], function ($) {
+
+ // The colorizeElement-function will read the data-lang-attribute
+ // from the element to select the correct language mode. In this
+ // sample it is text/css.
+ Monaco.Editor.colorizeElement(document.getElementById('code'));
+});
+
+=======================HTML
+
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+ margin: 0;
+ padding: 3em 6em;
+ font-family: tahoma, arial, sans-serif;
+ color: #000;
+}
+
+#navigation a {
+ font-weight: bold;
+ text-decoration: none !important;
+}
+
+h1 {
+ font-size: 2.5em;
+}
+
+h2 {
+ font-size: 1.7em;
+}
+
+h1:before, h2:before {
+ content: "some contents";
+}
+
+code {
+ font-family: courier, monospace;
+ font-size: 80%;
+ color: #418A8A;
+}
+
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+
+
+
+
+= Interacting with the editor
+
+== Adding a command
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+var myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);
+var myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);
+
+editor.addCommand(KeyCode.Tab, function(ctx, args) {
+ // services available in `ctx`
+ alert('my command is executing with context: ' + JSON.stringify(args.context));
+
+}, 'myCondition1 && myCondition2')
+
+myCondition1.set(true);
+
+setTimeout(function() {
+ alert('now enabling also myCondition2, try pressing Tab!');
+ myCondition2.set(true);
+ // you can use myCondition2.reset() to go back to the default
+}, 2000);
+=======================HTML
+
+
+=======================END
+
+== Adding an action
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = "var array = [3, 4, 5];\n";
+
+var editor = Monaco.Editor.create(container, {
+ value: [
+ '',
+ 'class Example {',
+ '\tprivate m:number;',
+ '',
+ '\tpublic met(): string {',
+ '\t\treturn "Hello world!";',
+ '\t}',
+ '}'
+ ].join('\n'),
+ mode: "text/typescript"
+});
+
+// Explanation:
+// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
+// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
+// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
+// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
+// Press Ctrl-F10 => the action will run if it is enabled
+
+editor.addAction({
+ // An unique identifier of the contributed action.
+ id: 'my-unique-id',
+
+ // A label of the action that will be presented to the user.
+ label: 'My Label!!!',
+
+ // An optional array of keybindings for the action.
+ keybindings: [KeyMod.CtrlCmd | KeyCode.F10],
+
+ keybindingContext: null,
+
+ // Control if the action should show up in the context menu and where.
+ // Built-in groups:
+ // 1_goto/* => e.g. 1_goto/1_peekDefinition
+ // 2_change/* => e.g. 2_change/2_format
+ // 3_edit/* => e.g. 3_edit/1_copy
+ // 4_tools/* => e.g. 4_tools/1_commands
+ // You can also create your own group.
+ // Defaults to null (don't show in context menu).
+ contextMenuGroupId: '2_change/2_bla',
+
+ // Method that will be executed when the action is triggered.
+ // @param editor The editor instance is passed in as a convinience
+ run: function(ed) {
+ alert("i'm running => " + ed.getPosition());
+ return null;
+ },
+
+ // Optional enablement conditions. All members are optional
+ enablement: {
+ // The action is enabled only if text in the editor is focused (e.g. blinking cursor).
+ // Warning: This condition will be disabled if the action is marked to be displayed in the context menu
+ // Defaults to false.
+ textFocus: true,
+
+ // The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).
+ // Defaults to false.
+ //widgetFocus: true,
+
+ // The action is enabled only if the editor is not in read only mode.
+ // Defaults to false.
+ //writeableEditor: true,
+
+ // The action is enabled only if the cursor position is over a word (i.e. not whitespace).
+ // Defaults to false.
+ wordAtPosition: true,
+
+ // The action is enabled only if the cursor position is over tokens of a certain kind.
+ // Defaults to no tokens required.
+ tokensAtPosition: ['identifier', '', 'keyword'],
+ }
+});
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Inserting a code snippet
+=======================JS
+// There is a way to insert a snippet. The snippet syntax is very easy, use {{ and }} to indicate a placeholder.
+// Use the same value inside {{ and }} to have linked editing! That value will be the default entered text.
+// Use an empty placeholder {{}} to indicate the end position of the cursor if the user hits Enter.
+var container = document.getElementById("container");
+var jsCode = "var array = [3, 4, 5];\n";
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+var snippet = require("vs/editor/contrib/snippet/common/snippet");
+
+var template =
+ 'for (var {{index}} = 0; {{index}} < {{array}}.length; {{index}}++) {\n' +
+ '\tvar {{element}} = {{array}}[{{index}}];\n' +
+ '\t{{}}\n' +
+ '}';
+
+editor.setPosition({ lineNumber: 2, column :1 });
+
+snippet.getSnippetController(editor).run(new snippet.CodeSnippet(template), 0, 0);
+
+editor.focus();
+
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Revealing a position
+
+=======================JS
+var container = document.getElementById("container");
+var jsCodeArr = [
+ '// ------------------------------',
+ '// ------------------------------',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};',
+ '',
+ ''
+];
+
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+
+jsCodeArr[49] += 'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';
+
+var jsCode = jsCodeArr.join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+var shouldRevealLineInCenterOfViewport = true;
+var shouldRevealColumn = true;
+
+editor.revealPosition({
+ lineNumber: 50,
+ column: 120
+}, shouldRevealLineInCenterOfViewport, shouldRevealColumn);
+
+=======================HTML
+
+
+=======================END
+
+
+
+
+== Rendering glyphs in the margin
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript",
+ glyphMargin: true
+});
+
+var decorationId = editor.changeDecorations(function(changeAccessor) {
+ return changeAccessor.addDecoration({
+ startLineNumber: 3,
+ startColumn: 1,
+ endLineNumber: 3,
+ endColumn: 1
+ }, {
+ isWholeLine: true,
+ className: 'myContentClass',
+ glyphMarginClassName: 'myGlyphMarginClass'
+ });
+});
+
+
+// You can now use `decorationId` to change or remove the decoration
+
+=======================HTML
+
+
+=======================CSS
+.myGlyphMarginClass {
+ background: red;
+}
+.myContentClass {
+ background: lightblue;
+}
+
+=======================END
+
+
+
+
+== Line and Inline decorations
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+var lineDecorationId = editor.changeDecorations(function(changeAccessor) {
+ return changeAccessor.addDecoration({
+ startLineNumber: 3,
+ startColumn: 1,
+ endLineNumber: 5,
+ endColumn: 1
+ }, {
+ isWholeLine: true,
+ linesDecorationsClassName: 'myLineDecoration'
+ });
+});
+
+var inlineDecorationId = editor.changeDecorations(function(changeAccessor) {
+ return changeAccessor.addDecoration({
+ startLineNumber: 7,
+ startColumn: 1,
+ endLineNumber: 7,
+ endColumn: 24
+ }, {
+ inlineClassName: 'myInlineDecoration'
+ });
+});
+
+=======================HTML
+
+
+=======================CSS
+.myInlineDecoration {
+ color: red !important;
+ cursor: pointer;
+ text-decoration: underline;
+ font-weight: bold;
+ font-style: oblique;
+}
+.myLineDecoration {
+ background: lightblue;
+ width: 5px !important;
+ left: 3px;
+}
+
+=======================END
+
+
+
+
+== Customizing the line numbers
+
+=======================JS
+function lineNumbersFunc(originalLineNumber) {
+ var map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
+ if (originalLineNumber < map.length) {
+ return map[originalLineNumber];
+ }
+ return originalLineNumber;
+}
+
+var container = document.getElementById("container");
+var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript",
+ lineNumbers: lineNumbersFunc
+});
+
+=======================HTML
+
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+== Customizing the hover
+
+=======================JS
+require([
+ 'require',
+ 'vs/base/common/winjs.base',
+ 'vs/editor/common/core/range',
+ 'vs/editor/contrib/hover/browser/hoverOperation',
+ 'vs/editor/contrib/hover/browser/hoverWidgets'
+], function(require, WinJS) {
+
+ var Range = require('vs/editor/common/core/range').Range;
+ var HoverOperation = require('vs/editor/contrib/hover/browser/hoverOperation').HoverOperation;
+ var ContentHoverWidget = require('vs/editor/contrib/hover/browser/hoverWidgets').ContentHoverWidget;
+
+ var ContentComputer = WinJS.Class.define(function ContentComputer(range, text, tokenType) {
+ }, {
+
+ setContext: function (range, text, tokenType) {
+ this.a = range.startLineNumber;
+ this.b = range.startColumn;
+ this.result = [
+ 'Text: ' + text,
+ 'Token type: ' + tokenType
+ ];
+ },
+
+ computeAsync: function () {
+ return WinJS.Promise.timeout(500).then(function() {
+ return this.a + ' x ' + this.b + ' = ' + (this.a * this.b);
+ }.bind(this));
+ },
+
+ computeSync: function () {
+ return this.a + ' + ' + this.b + ' = ' + (this.a + this.b);
+ },
+
+ onResult: function(r) {
+ this.result.push(r);
+ },
+
+ getResult: function() {
+ return this.result;
+ }
+ });
+
+ var ContentWidget = WinJS.Class.derive(ContentHoverWidget, function ContentWidget(editor) {
+ ContentHoverWidget.call(this, 'my.hover.widget.id', editor);
+ this.lastRange = null;
+ this.computer = new ContentComputer();
+ this.hoverOperation = new HoverOperation(
+ this.computer,
+ this.withResult.bind(this),
+ null,
+ this.withResult.bind(this)
+ );
+ }, {
+
+ startShowingAt: function (range, text, tokenType) {
+ if (this.lastRange && this.lastRange.equalsRange(range)) {
+ // We have to show the widget at the exact same range as before, so no work is needed
+ return;
+ }
+
+ this.hoverOperation.cancel();
+ this.hide();
+
+ this.lastRange = range;
+ this.computer.setContext(range, text, tokenType);
+ this.hoverOperation.start();
+ },
+
+ hide: function () {
+ this.lastRange = null;
+ if (this.hoverOperation) {
+ this.hoverOperation.cancel();
+ }
+ ContentHoverWidget.prototype.hide.call(this);
+ },
+
+ withResult: function (someResult) {
+ this._domNode.innerHTML = someResult.join('
');
+ this.showAt({
+ lineNumber: this.lastRange.startLineNumber,
+ column: this.lastRange.startColumn
+ });
+ }
+ });
+
+ var addCustomHoverTo = (function() {
+
+ var editor = null;
+ var contentWidget = null;
+
+ function hide() {
+ contentWidget.hide();
+ }
+
+ function onMouseMove(e) {
+ var targetType = e.target.type;
+
+ if (targetType === Monaco.Editor.MouseTargetType.CONTENT_WIDGET && e.target.detail === 'my.hover.widget.id') {
+ // mouse moved on top of content hover widget
+ return;
+ }
+
+ if (targetType === Monaco.Editor.MouseTargetType.CONTENT_TEXT) {
+ // Extract current token under cursor
+ var currentTokenInfo = null;
+ editor.getModel().tokenIterator(e.target.position, function (it) {
+ currentTokenInfo = it.next();
+ });
+
+ if(currentTokenInfo) {
+ var showRange = new Range(currentTokenInfo.lineNumber, currentTokenInfo.startColumn, currentTokenInfo.lineNumber, currentTokenInfo.endColumn);
+
+ contentWidget.startShowingAt(showRange, editor.getModel().getValueInRange(showRange), currentTokenInfo.token.type);
+ }
+ } else {
+ hide();
+ }
+ }
+
+ function setup(ed) {
+ editor = ed;
+ contentWidget = new ContentWidget(editor);
+
+ editor.addListener(Monaco.Editor.EventType.MouseMove, onMouseMove);
+ editor.addListener(Monaco.Editor.EventType.MouseLeave, hide);
+ editor.addListener(Monaco.Editor.EventType.KeyDown, hide);
+ editor.addListener(Monaco.Editor.EventType.ModelChanged, hide);
+ editor.addListener('scroll', hide);
+ }
+
+ return setup;
+ })();
+
+
+ var editor = createEditor();
+ addCustomHoverTo(editor);
+});
+
+function createEditor() {
+
+ var container = document.getElementById("container");
+ var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+ ].join('\n');
+
+ return Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript",
+ glyphMargin: true,
+ hover: false
+ });
+
+}
+
+=======================HTML
+
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+== Listening to Mouse Events
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+ '"use strict";',
+ 'function Person(age) {',
+ ' if (age) {',
+ ' this.age = age;',
+ ' }',
+ '}',
+ 'Person.prototype.getAge = function () {',
+ ' return this.age;',
+ '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript",
+ glyphMargin: true,
+ nativeContextMenu: false
+});
+
+var decorationId = editor.changeDecorations(function(changeAccessor) {
+ return changeAccessor.addDecoration({
+ startLineNumber: 3,
+ startColumn: 1,
+ endLineNumber: 3,
+ endColumn: 1
+ }, {
+ isWholeLine: true,
+ className: 'myContentClass',
+ glyphMarginClassName: 'myGlyphMarginClass'
+ });
+});
+
+// Add a zone to make hit testing more interesting
+var viewZoneId = null;
+editor.changeViewZones(function(changeAccessor) {
+ var domNode = document.createElement('div');
+ domNode.style.background = 'lightgreen';
+ viewZoneId = changeAccessor.addZone({
+ afterLineNumber: 3,
+ heightInLines: 3,
+ domNode: domNode
+ });
+});
+
+// Add a content widget (scrolls inline with text)
+var contentWidget = {
+ domNode: null,
+ getId: function() {
+ return 'my.content.widget';
+ },
+ getDomNode: function() {
+ if (!this.domNode) {
+ this.domNode = document.createElement('div');
+ this.domNode.innerHTML = 'My content widget';
+ this.domNode.style.background = 'grey';
+ }
+ return this.domNode;
+ },
+ getPosition: function() {
+ return {
+ position: {
+ lineNumber: 7,
+ column: 8
+ },
+ preference: [Monaco.Editor.ContentWidgetPositionPreference.ABOVE, Monaco.Editor.ContentWidgetPositionPreference.BELOW]
+ };
+ }
+};
+editor.addContentWidget(contentWidget);
+
+// Add an overlay widget
+var overlayWidget = {
+ domNode: null,
+ getId: function() {
+ return 'my.overlay.widget';
+ },
+ getDomNode: function() {
+ if (!this.domNode) {
+ this.domNode = document.createElement('div');
+ this.domNode.innerHTML = 'My overlay widget';
+ this.domNode.style.background = 'grey';
+ this.domNode.style.right = '30px';
+ this.domNode.style.top = '50px';
+ }
+ return this.domNode;
+ },
+ getPosition: function() {
+ return null;
+ }
+};
+editor.addOverlayWidget(overlayWidget);
+
+var output = document.getElementById('output');
+function showEvent(str) {
+ while(output.childNodes.length > 6) {
+ output.removeChild(output.firstChild.nextSibling.nextSibling);
+ }
+ output.appendChild(document.createTextNode(str));
+ output.appendChild(document.createElement('br'));
+}
+
+
+
+editor.addListener(Monaco.Editor.EventType.MouseMove, function (e) {
+ showEvent('mousemove - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.MouseDown, function (e) {
+ showEvent('mousedown - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.ContextMenu, function (e) {
+ showEvent('contextmenu - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.MouseLeave, function (e) {
+ showEvent('mouseleave');
+});
+
+=======================HTML
+
Last 3 events:
+
+
+
+=======================CSS
+.myGlyphMarginClass {
+ background: red;
+}
+.myContentClass {
+ background: lightblue;
+}
+
+=======================END
+
+
+
+
+== Listening on keydown events
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = "function hello() {\n\talert('Hello world!');\n}";
+
+var editor = Monaco.Editor.create(container, {
+ value: jsCode,
+ mode: "text/javascript"
+});
+
+function onF9() {
+ alert('F9 pressed!');
+ // prevent default
+ return true;
+}
+
+var myBinding = editor.addCommand(KeyCode.F9, onF9);
+
+// When cleaning up remember to call myBinding.dispose()
+
+=======================HTML
+
+
+=======================CSS
+
+
+=======================END
+
+= Customizing the appearence
+
+== Exposed CSS classes
+=======================JS
+// The editor exposes a set of CSS classes that can be overwritten.
+var container = document.getElementById("container");
+Monaco.Editor.create(container, {
+ value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
+ mode: "text/plain"
+});
+
+=======================HTML
+
+
+=======================CSS
+/* The editor */
+.monaco-editor {
+ font-family: Arial;
+ font-size: 20px;
+ line-height: inherit;
+ background: #EDF9FA;
+}
+
+/* The editor's background */
+.monaco-editor-background {
+ background: #EDF9FA;
+}
+
+/* Cursor */
+.monaco-editor .cursor {
+ background: darkblue;
+}
+
+/* Current line */
+.monaco-editor .current-line {
+ background: rgba(0, 0, 255, 0.1);
+}
+
+/* Line Numbers */
+.monaco-editor .line-numbers {
+ background-color: #EDF9FA;
+ color: green;
+}
+
+/* Line Decorations */
+.monaco-editor .lines-decorations {
+ background-color: #EDF9FA;
+}
+
+/* Selection */
+.monaco-editor .dynamic.focused > .selections-layer > .selected-text {
+ background: rgba(128, 0, 0, 0.2) !important;
+}
+.monaco-editor .dynamic > .selections-layer > .selected-text {
+ background: rgba(128, 0, 0, 0.1) !important;
+}
+
+/* Word Highlight */
+.monaco-editor .wordHighlight {
+ background-color: rgba(0, 0, 0, 0);
+ -webkit-animation: none;
+ -moz-animation: none;
+ -ms-animation: none;
+ animation: none;
+}
+
+=======================END
+
+
+
+
+== Scrollbars
+
+=======================JS
+// Remember to check out the CSS too!
+var container = document.getElementById("container");
+var htmlCode = "\n\n \n \n
{{title}}
+