Share your advanced knowledge/code with the community.
User avatar
Peter
 
Posts: 447
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Module: AceEditorGadget

by Peter Mon May 22, 2017 2:33 pm

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
falsam
 
Posts: 237
Joined: Mon May 05, 2014 9:49 pm
Location: France

Re: Module: AceEditorGadget

by falsam Mon May 22, 2017 3:26 pm

Thank Peter ;)
➽ Windows 10 - JDK 1.8 - SB 2.20 - Android 5.5
Mood ☀️
http://falsam.com

Sorry for my poor english
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 1 guest