Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
 
Posts: 123
Joined: Thu Mar 27, 2014 8:34 am

Code editor + completion (CodeMirror / ACE)

by eddy Fri May 02, 2014 12:05 am

- code editor features: code completion, syntax coloring and more...
- supported language (JS,XML,HTML,VB,PHP,....)
- using CodeMirror plugin : http://codemirror.net/
- This plugin is used by JSBin sandbox: http://jsbin.com

Code: Select all
CompilerIf #PB_Compiler_Debugger
  Debug "Disable SpiderBasic debugger"
CompilerEndIf

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_FileName, dataType:v_FileType, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_OnLoadFunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_OnLoadFunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.i LoadCSS(FileName.s, *OnLoadFunction)
  Protected jqxhr=LoadAsynchronously(FileName, *OnLoadFunction, "text")
  !return v_jqxhr.done(function(data, status, jqxhr) {
  !   $('<style></style>').appendTo('head').html(data);
  !})
EndProcedure

; *****************************
; Code Mirror
; *****************************

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode
    Select errorCode
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout"
      Default : Debug "Error: "+error
    EndSelect
    Debug ""
    ProcedureReturn
  EndIf
 
  Static k
  k+1
  Select k
    Case 1 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/show-hint.js", @Loading())
    Case 2 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/javascript-hint.js", @Loading())
    Case 3 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/mode/javascript/javascript.js", @Loading())
    Case 4 : LoadCSS("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.css", @Loading())
    Case 5 : LoadCSS("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/show-hint.css", @Loading())     
    Default
      !var myCodeMirror = CodeMirror(document.body, { lineNumbers: true
      !, extraKeys: {"Ctrl-Space": "autocomplete"}
      !, value: 'function myScript(){return 100;}\n'
      !, mode:  'javascript'
      !});
  EndSelect
EndProcedure

LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.js", @Loading())
Last edited by eddy on Fri May 02, 2014 5:35 pm, edited 2 times in total.
Peter
 
Posts: 353
Joined: Mon Feb 24, 2014 10:17 pm

Re: Code editor + completion (CodeMirror)

by Peter Fri May 02, 2014 7:53 am

my favourite code editor is Ace (http://ace.c9.io/#nav=about):

Code: Select all
Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.s GetTestSource()
 
  Protected ReturnValue.s = ""
 
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
 
  ProcedureReturn ReturnValue
 
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
 
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode
    Select errorCode
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout"
      Default : Debug "Error: "+error
    EndSelect
    Debug ""
    ProcedureReturn
  EndIf
 
  Protected TestSource.s = GetTestSource()
 
  !var selector = $("<div id='ace' style='position:absolute;top:10px;left:10px;width:400px;height:300px;border:1px solid black' />");
  !$("body").append(selector);
  !var editor = ace.edit("ace");
  !editor.getSession().setMode("ace/mode/javascript");
  !editor.getSession().setValue(v_testsource);
  !editor.focus();
 
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())


Greetings ... Peter

// Edit: updated the code to the current SpiderBasic-Version
Last edited by Peter on Mon May 08, 2017 6:58 am, edited 1 time in total.
User avatar
eddy
 
Posts: 123
Joined: Thu Mar 27, 2014 8:34 am

Re: Code editor + completion (CodeMirror)

by eddy Fri May 02, 2014 5:32 pm

I works in debug mode.
Interesting... I'll test it.
skinkairewalker
 
Posts: 35
Joined: Tue Jun 14, 2016 7:17 pm

Re: Code editor + completion (CodeMirror)

by skinkairewalker Fri May 19, 2017 10:42 pm

Peter wrote:my favourite code editor is Ace (http://ace.c9.io/#nav=about):

Code: Select all
Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.s GetTestSource()
 
  Protected ReturnValue.s = ""
 
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
 
  ProcedureReturn ReturnValue
 
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
 
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode
    Select errorCode
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout"
      Default : Debug "Error: "+error
    EndSelect
    Debug ""
    ProcedureReturn
  EndIf
 
  Protected TestSource.s = GetTestSource()
 
  !var selector = $("<div id='ace' style='position:absolute;top:10px;left:10px;width:400px;height:300px;border:1px solid black' />");
  !$("body").append(selector);
  !var editor = ace.edit("ace");
  !editor.getSession().setMode("ace/mode/javascript");
  !editor.getSession().setValue(v_testsource);
  !editor.focus();
 
EndProcedure

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())


Greetings ... Peter

// Edit: updated the code to the current SpiderBasic-Version



how can i change to my own sintax highlight ?
Return to Showcase

Who is online

Users browsing this forum: No registered users and 1 guest