Page 1 of 1

Module: AceEditorGadget

Posted: Mon May 22, 2017 2:33 pm
by Peter
Hello,

here's an implementation of the Ace-Editor (https://ace.c9.io/).

Image
Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
AceEditorGadget.sbi:

Code: Select all

DeclareModule AceEditor
  
  EnableExplicit
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height)
  
  Declare SetMode(Gadget, Mode.s)
  Declare SetTheme(Gadget, Theme.s)
  
  Declare.s GetValue(Gadget)
  Declare   SetValue(Gadget, Value.s)
  
  Declare Focus(Gadget)
  Declare Undo(Gadget)
  Declare Redo(Gadget)
  
  Declare Find(Gadget, Needle.s, SearchObject)
  Declare FindAll(Gadget, String.s)
  Declare FindNext(Gadget)
  Declare FindPrevious(Gadget)
  Declare Indent(Gadget)
  Declare GotoLine(Gadget, LineNumber, ColumnNumber)
  Declare Resize(Gadget)
  
EndDeclareModule

Module AceEditor
  
  EnableExplicit
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Macro GetEditor
    GetSelector
    ! var editor = selector.data("editor");
  EndMacro
  
  Procedure Init(Callback)  
    
    ! require(["//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"],
    !   function() {
    IsInitialized = #True
    !     v_callback();
    !   }
    ! );
    
  EndProcedure
  
  Procedure Gadget(Gadget, x, y, Width, Height)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height)
    Else
      ContainerGadget(Gadget, x, y, Width, Height)
    EndIf
    
    CloseGadgetList()
    
    GetSelector
    
    ! editor = ace.edit(selector[0]);
    
    ! selector.data("editor", editor);
    
    ProcedureReturn Gadget
    
  EndProcedure
  
  Procedure SetMode(Gadget, Mode.s)
    GetEditor
    ! editor.getSession().setMode("ace/mode/" + v_mode);
  EndProcedure
  
  Procedure SetTheme(Gadget, Theme.s)
    GetEditor
    ! editor.setTheme("ace/theme/" + v_theme);
  EndProcedure
  
  Procedure.s GetValue(Gadget)
    GetEditor
    ! return editor.getValue();
  EndProcedure
  
  Procedure SetValue(Gadget, Value.s)
    GetEditor
    ! editor.setValue(v_value, 1);
  EndProcedure
  
  Procedure Focus(Gadget)
    GetEditor
    ! editor.focus();
  EndProcedure
  
  Procedure Undo(Gadget)
    GetEditor
    ! editor.undo();
  EndProcedure
  
  Procedure Redo(Gadget)
    GetEditor
    ! editor.redo();
  EndProcedure
  
  Procedure Find(Gadget, Needle.s, SearchObject)
    ; find(String needle, Object options, Boolean animate)
    GetEditor
    ! editor.find(v_needle, v_searchobject);
  EndProcedure
  
  Procedure FindAll(Gadget, String.s)
    ; findAll(String The, Object The, Boolean keeps)  Number
    GetEditor
    ! editor.findAll(v_string);
  EndProcedure
  
  Procedure FindNext(Gadget)
    ; findNext(Object options, Boolean animate)
    GetEditor
    ! editor.findNext();
  EndProcedure
  
  Procedure FindPrevious(Gadget)
    ; findPrevious(Object options, Boolean animate)
    GetEditor
    ! editor.findPrevious();
  EndProcedure
  
  Procedure Indent(Gadget)
    ; findPrevious(Object options, Boolean animate)
    GetEditor
    ! editor.indent();
  EndProcedure
  
  Procedure GotoLine(Gadget, LineNumber, ColumnNumber)
    ; gotoLine(Number lineNumber, Number column, Boolean animate)
    GetEditor
    ! editor.gotoLine(v_linenumber, v_columnnumber);
  EndProcedure
  
  Procedure Resize(Gadget)
    ; resize(Boolean force)
    GetEditor
    ! editor.resize(true);
  EndProcedure

EndModule
Example:

Code: Select all

XIncludeFile "AceEditorGadget.sbi"

EnableExplicit

Enumeration
  #Window
  #Toolbar
  #Toolbar_New
  #Toolbar_Open
  #Toolbar_Save
  #Toolbar_Search
  #AceEditor
EndEnumeration

#dijitEditorIconNewPage = "dijitEditorIcon dijitEditorIconNewPage"
#dijitIconFolderOpen    = "dijitIconFolderOpen"
#dijitIconSave          = "dijitIconSave"
#dijitIconSearch        = "dijitIconSearch"

Procedure.s GetTestSource()
  
  Protected TestSource.s 
  
  TestSource = "function ValidFunction() {" + #CRLF$ + #CRLF$ +
               "  alert('Hello World');" + #CRLF$ + #CRLF$ +
               "}" + #CRLF$ + #CRLF$ + 
               "function InvalidFunction( {" + #CRLF$ + #CRLF$ +
               "}" + #CRLF$
  
  ProcedureReturn TestSource
  
EndProcedure

Procedure ToolBarStandardButton(Button, ButtonIcon.s, Mode = #PB_ToolBar_Normal, Text.s = "")
  
  ; see: http://forums.spiderbasic.com/viewtopic.php?p=3581#p3581
  
  ToolBarImageButton(Button, 0, Mode)
  ! var b = spider.toolbar.current.buttons[v_button];
  ! var i = $(b.domNode).find(".dijitIcon");
  ! i.addClass(v_buttonicon);
  
  If Text <> ""
    ! var s = $(b.domNode).find(".dijitButtonText");
    ! s.removeClass("dijitDisplayNone");
    ! s.text(v_text);
  EndIf
  
EndProcedure

Procedure ReadFileCallback(Status, Filename.s, File, Size)
  
  Protected FileContent.s = ""
  
  Select Status 
      
    Case #PB_Status_Loaded
      
      While Not Eof(File)
        FileContent + ReadString(File) + #CRLF$
      Wend
      CloseFile(File)
      
      AceEditor::SetValue(#AceEditor, FileContent)
      
  EndSelect
    
EndProcedure

Procedure OpenFileRequesterCallback()
  NextSelectedFile()
  ReadFile(#PB_Any, SelectedFileID(), @ReadFileCallback(), #PB_LocalFile | #PB_Ascii)
EndProcedure

Procedure MenuEvent()
  
  Select EventMenu()
      
    Case #Toolbar_New
      AceEditor::SetValue(#AceEditor, "")
      
    Case #Toolbar_Open
      OpenFileRequester("", @OpenFileRequesterCallback())
      
    Case #Toolbar_Save
      
      If CreateFile(0, "Text.txt", 0)      ; we create a new text file
        WriteString(0, AceEditor::GetValue(#AceEditor))
        ExportFile(0, "text/plain")
        CloseFile(0)                      
      EndIf
      
    Case #Toolbar_Search
      
      Protected SearchString.s = "World"
      
      Protected SearchObject
      
      ! v_searchobject = {
      !   backwards : false,     // Whether to search backwards from where cursor currently is. Defaults to false.
      !   wrap : false,          // Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
      !   caseSensitive : false, // Whether the search ought to be case-sensitive. Defaults to false.
      !   wholeWord : false,     // Whether the search matches only on whole words. Defaults to false.
      !   range : null,          // The Range to search within. Set this to null for the whole document
      !   regExp : false,        // Whether the search is a regular expression or not. Defaults to false.
      !   start : 0,             // The starting Range or cursor position to begin the search
      !   skipCurrent : false    // Whether or not to include the current line in the search. Default to false.  
      ! }
      
      AceEditor::Find(#AceEditor, SearchString, SearchObject)
      AceEditor::FindNext(#AceEditor)
      AceEditor::FindPrevious(#AceEditor)
      AceEditor::Focus(#AceEditor)
            
  EndSelect      
  
EndProcedure

Procedure SizeWindowEvent()
  
  ResizeGadget(#AceEditor, #PB_Ignore, #PB_Ignore, WindowWidth(#Window), WindowHeight(#Window) - ToolBarHeight(#Toolbar))
  
  AceEditor::Resize(#AceEditor)
  
EndProcedure
  
Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "AceEditorGadgetDemo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  CreateToolBar(#Toolbar, WindowID(#Window))
  
  ToolBarStandardButton(#Toolbar_New, #dijitEditorIconNewPage)
  ToolBarToolTip(#Toolbar, #Toolbar_New, "New")
  
  ToolBarStandardButton(#Toolbar_Open, #dijitIconFolderOpen)
  ToolBarToolTip(#Toolbar, #Toolbar_Open, "Open...")
  
  ToolBarStandardButton(#Toolbar_Save, #dijitIconSave)  
  ToolBarToolTip(#Toolbar, #Toolbar_Save, "Save...")
  
  ToolBarSeparator()
  
  ToolBarStandardButton(#Toolbar_Search, #dijitIconSearch)  
  ToolBarToolTip(#Toolbar, #Toolbar_Search, "Search 'World'")

  AceEditor::Gadget(#AceEditor, 0, 0, WindowWidth(#Window), WindowHeight(#Window) - ToolBarHeight(#Toolbar))
  
  AceEditor::SetTheme(#AceEditor, "chrome")
  AceEditor::SetMode (#AceEditor, "javascript")
  
  ; (Overview of themes and modes: https://ace.c9.io/build/kitchen-sink.html)
  
  AceEditor::SetValue(#AceEditor, GetTestSource())
  
  AceEditor::Focus(#AceEditor)
  
  AceEditor::GotoLine(#AceEditor, 2, 2)
  
  BindEvent(#PB_Event_Menu, @MenuEvent())
  BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent())
  
EndProcedure

AceEditor::Init(@Main())
Greetings ... Peter

Re: Module: AceEditorGadget

Posted: Mon May 22, 2017 3:26 pm
by falsam
Thank Peter ;)