'launch.hl' - This is the file that is evaluated when your module is launched
89 | li
90 | innerValue:'desktop.hl' - This creates a 'desktop icon' for your module
91 | li
92 | innerValue:'startup.hl' - Evaluated when the server is started
93 | li
94 | innerValue:'install.hl' - Evaluated when your module is installed
95 | li
96 | innerValue:'uninstall.hl' - Evaluated when your module is uninstalled
97 | button:foo-button
98 | innerValue:Click me!
99 | onclick
100 | set-widget-property:foo-button
101 | innerValue:Hello World
102 | "
103 |
104 |
105 |
106 |
107 |
108 | /*
109 | * Then creating our "desktop.hl" file.
110 | */
111 | save-file:/modules/{0}/desktop.hl
112 | :x:/../*/name?value
113 | src:@"
114 | /*
115 | * Desktop widget.
116 | *
117 | * This becomes your module's 'desktop icon'.
118 | */
119 | container
120 | element:a
121 | class:jumbo-button
122 | title:This module says Hello World!
123 | widgets
124 | span
125 | innerValue:Hello
126 | literal
127 | element:span
128 | class:icon-happy
129 | "
130 |
131 |
132 |
133 |
134 |
135 | /*
136 | * Then creating our "startup.hl" file.
137 | */
138 | to-upper:x:/../*/name?value
139 | save-file:/modules/{0}/startup.hl
140 | :x:/../*/name?value
141 | src:@"
142 | /*
143 | * Provide whatever startup logic your module requires here, if any.
144 | *
145 | * For instance, create Active Events necessary to wire up your module.
146 | * Below is an example of creating a 'path' event for instance, which unrolls
147 | * the path declaration of @YOUR-APP-NAME to your module's main folder.
148 | */
149 | split:x:/..?name
150 | =:/
151 | set:x:/@split/0/-
152 | join:x:/@split/*?name
153 | sep:/
154 | eval-x:x:/+/*
155 | create-event:p5.io.unroll-path.@{0}
156 | return:/{{0}}
157 | :x:/@join?value
158 | "
159 | :x:/@to-upper?value
160 |
161 |
162 |
163 |
164 |
165 | /*
166 | * Then creating our "uninstall.hl" file.
167 | */
168 | save-file:/modules/{0}/install.hl
169 | :x:/../*/name?value
170 | src:@"
171 | /*
172 | * Provide whatever installation logic your module requires here, if any.
173 | *
174 | * Common tasks for this file, is to create your database (if any), etc.
175 | * This file is empty, since this particular example currently doesn't have
176 | * any installation logic.
177 | */
178 | .foo
179 | "
180 |
181 |
182 |
183 |
184 |
185 | /*
186 | * Then creating our "uninstall.hl" file.
187 | */
188 | save-file:/modules/{0}/uninstall.hl
189 | :x:/../*/name?value
190 | src:@"
191 | /*
192 | * Provide whatever uninstall logic your module requires here, if any.
193 | *
194 | * Common tasks for this file, is to delete all Active Events created by
195 | * your module, such as the following example illustrates.
196 | */
197 | delete-event:p5.io.unroll-path.@{0}
198 | "
199 | :x:/@to-upper?value
200 |
--------------------------------------------------------------------------------
/helpers/file-explorer/file-explorer-widget.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * This file wraps Hyper IDE's _"file explorer"_, that allows the user to browse
3 | * his or her folders/files on his server, and select files for editing its content,
4 | * and/or manipulate his or hers folders somehow.
5 | *
6 | * The file explorer for Hyper IDE is implemented using the __[micro.widgets.tree]__
7 | * extension widget.
8 | */
9 | micro.widgets.tree:hyper-ide-folder-tree-browser
10 | class:micro-widgets-tree hyper-ide-tree-view
11 | items
12 | /:/
13 |
14 | oninit
15 |
16 | /*
17 | * Expanding root item.
18 | */
19 | micro.widgets.tree.toggle-items:hyper-ide-folder-tree-browser
20 | items
21 | /
22 |
23 | /*
24 | * Callback invoked when TreeView wants more items.
25 | */
26 | .onexpand
27 |
28 | /*
29 | * Making sure we wrap our stuff inside of a try/catch block,
30 | * since this will prevent the default exception handler from
31 | * being evaluated, in case user tries to access file objects
32 | * he does not have permission to access.
33 | */
34 | try
35 |
36 | /*
37 | * We need to track whether or not an exception occurs, from
38 | * our [.onexpand], and into our [.onselect]. We do this by setting
39 | * a "signal" viewstate value if an exception occurs.
40 | *
41 | * However, we need to default its value to empty, in case
42 | * no exception occurs.
43 | */
44 | p5.web.viewstate.set:hyper-ide.no-select
45 |
46 | /*
47 | * Checking if this is a request for a folder.
48 | */
49 | if
50 | ends-with:x:/../*/_item-id?value
51 | src:/
52 |
53 | /*
54 | * Invoking file responsible for actually retrieving files
55 | * and folders structure, and returning items to caller.
56 | */
57 | eval-x:x:/+/*
58 | micro.evaluate.file:@IDE/helpers/file-explorer/get-file-explorer-objects.hl
59 | folder:x:/../*/_item-id?value
60 | add:x:/..if/*/return/*/items
61 | src:x:/@micro.evaluate.file/*
62 | return
63 | items
64 |
65 | catch
66 |
67 | /*
68 | * Giving user some feedback, and making sure we delete any
69 | * additional toolbars that was created.
70 | */
71 | micro.windows.info:x:/@message?value
72 | class:micro-windows-info warning
73 | if
74 | fetch:x:/0/0?value
75 | widget-exists:hyper-ide-active-folder-toolbar
76 | delete-widget:hyper-ide-active-folder-toolbar
77 |
78 | /*
79 | * Making sure we don't try to select item in any ways
80 | * further down in file.
81 | */
82 | p5.web.viewstate.set:hyper-ide.no-select
83 | src:bool:true
84 |
85 | /*
86 | * Callback invoked when an item ise selected.
87 | */
88 | .onselect
89 |
90 | /*
91 | * Checking if we had an exception while invoking our [.onexpand],
92 | * at which point we don't evaluate this lambda.
93 | */
94 | p5.web.viewstate.get:hyper-ide.no-select
95 | if:x:/-/*?value
96 |
97 | /*
98 | * Re-setting exception signal and returning early.
99 | */
100 | p5.web.viewstate.set:hyper-ide.no-select
101 | return
102 |
103 | /*
104 | * Making sure we wrap our stuff inside of a try/catch block,
105 | * since this will prevent the default exception handler from
106 | * being evaluated, in case user tries to access file objects
107 | * he does not have permission to access.
108 | */
109 | try
110 |
111 | /*
112 | * Checking if this is a de-select invocation.
113 | */
114 | if:x:/../*/items/*?count
115 | =:int:0
116 |
117 | /*
118 | * De-select invocation.
119 | */
120 | return
121 |
122 | /*
123 | * Checking if this is a request for a folder or a file.
124 | */
125 | if
126 | ends-with:x:/../*/items/0?name
127 | src:/
128 |
129 | /*
130 | * Request for folder.
131 | *
132 | * Invoking file responsible for selecting the folder.
133 | */
134 | eval-x:x:/+/*
135 | micro.evaluate.file:@IDE/helpers/file-explorer/select-folder.hl
136 | folder:x:/../*/items/0?name
137 |
138 | else
139 |
140 | /*
141 | * Request for file.
142 | *
143 | * Invoking file responsible for selecting the file.
144 | */
145 | eval-x:x:/+/*
146 | micro.evaluate.file:@IDE/helpers/file-explorer/select-file.hl
147 | file:x:/../*/items/0?name
148 |
149 | /*
150 | * Raising the file explorer "active event changed" event.
151 | */
152 | hyper-ide.file-explorer.item-changed:x:/../*/items/0?name
153 |
154 | catch
155 |
156 | /*
157 | * Giving user some feedback, and making sure we delete any
158 | * additional toolbars that was created.
159 | */
160 | micro.windows.info:x:/@message?value
161 | class:micro-windows-info warning
162 | if
163 | fetch:x:/0/0?value
164 | widget-exists:hyper-ide-active-folder-toolbar
165 | delete-widget:hyper-ide-active-folder-toolbar
166 |
167 | /*
168 | * Returning false to let caller know we don't want to invoke
169 | * our [.onexpand] lambda callback.
170 | */
171 | return:bool:false
172 |
--------------------------------------------------------------------------------
/media/main.css:
--------------------------------------------------------------------------------
1 | .hyper-ide-container {
2 | padding-top: 0;
3 | }
4 |
5 | .hyper-ide-container .micro-codemirror-wrapper {
6 | margin-bottom: 0;
7 | }
8 |
9 | /* All Hyper IDE toolbars */
10 | .hyper-ide-toolbar {
11 | margin-bottom: 0;
12 | margin-top: .5rem;
13 | }
14 |
15 | /* Bookmark textbox */
16 | .hyper-ide-bookmark-textbox {
17 | position: absolute;
18 | top: 1rem;
19 | right: 1rem;
20 | max-width: 100%;
21 | width: 500px !important;
22 | box-shadow: 0 0 15px rgba(128,128,0,.7) !important;
23 | }
24 |
25 | /* Main content */
26 | .hyper-ide-content {
27 | height: auto;
28 | }
29 | @media screen and (min-width:800px) {
30 | .hyper-ide-content {
31 | height: calc(100vh - 2rem - var(--form-el-pad) * 2 - .5rem);
32 | margin-bottom: -.5rem;
33 | }
34 | .micro-widgets-modal-content .hyper-ide-content {
35 | height: calc(100vh - 7rem - var(--form-el-pad) * 2 - .5rem);
36 | }
37 | }
38 | .micro-widgets-modal-content .hyper-ide-content {
39 | margin-bottom: 1rem;
40 | }
41 |
42 | /* If user wants to use "page scroll" instead of editor/treeview scroll, then this class will apply */
43 | .hyper-ide-page-scroll {
44 | padding-bottom: 0;
45 | }
46 | .hyper-ide-page-scroll .hyper-ide-content {
47 | height: auto;
48 | min-height: calc(100vh - 2rem - var(--form-el-pad) * 2 - .5rem);
49 | margin-bottom: .5rem;
50 | overflow: visible;
51 | }
52 |
53 | /* TreeView wrapper for browsing files (column wrapper) */
54 | .hyper-ide-solution-explorer-col {
55 | min-height: calc(100% - var(--form-el-pad) * 2);
56 | margin-bottom: 0;
57 | margin-top: .5rem;
58 | }
59 |
60 | /* TreeView wrapper for browsing files (inside of column) */
61 | .hyper-ide-solution-explorer {
62 | height: 100%;
63 | margin-bottom: 0;
64 | overflow: auto;
65 | }
66 |
67 | /* Actual TreeView (file explorer) CSS class */
68 | .hyper-ide-tree-view {
69 | overflow: scroll;
70 | height: 100%;
71 | margin-right: -1rem;
72 | padding-right: 1rem;
73 | min-width: fit-content;
74 | padding-bottom: 2rem;
75 | margin-bottom: 0;
76 | }
77 |
78 | /* Wrapper column around editors (and splash screen) */
79 | .hyper-ide-editor-col {
80 | min-height: calc(100% - var(--form-el-pad) * 2);
81 | margin-top: .5rem;
82 | }
83 |
84 | @media screen and (min-width:800px) {
85 | .hyper-ide-editor-col {
86 | margin-bottom: 0;
87 | }
88 | }
89 |
90 | /* Hyper IDE splash screen, which you see when you initially start Hyper IDE */
91 | .hyper-ide-splash {
92 | height: auto;
93 | min-height: 100%;
94 | position: relative;
95 | margin-bottom: 0;
96 | }
97 |
98 | /* "Tab control" wrapping editor (both tab buttons, and editor surface) */
99 | .hyper-ide-editor-tab {
100 | height: 100%;
101 | }
102 | .hyper-ide-page-scroll .hyper-ide-editor-tab {
103 | overflow: hidden;
104 | }
105 |
106 | /* "Tab control buttons" wrapper */
107 | .hyper-ide-editor-tab-buttons {
108 | overflow: auto;
109 | white-space: nowrap;
110 | }
111 |
112 | /* "Tab control buttons", inside of editor "tab control" */
113 | .hyper-ide-editor-tab-buttons > span {
114 | border-bottom-left-radius: 0;
115 | border-bottom-right-radius: 0;
116 | border: none;
117 | width: 10rem;
118 | text-align: left;
119 | overflow: hidden;
120 | text-overflow: ellipsis;
121 | white-space: nowrap;
122 | position: relative;
123 | font-style: italic;
124 | margin-left: .2rem;
125 | margin-top: 1px;
126 | margin-bottom: -1px;
127 | font-size: .7rem;
128 | padding-right: 2rem;
129 | cursor: pointer;
130 | background-image: var(--button-toggled-bg);
131 | }
132 | .hyper-ide-editor-tab-buttons > span:first-child {
133 | margin-left: var(--border-radius);
134 | }
135 |
136 | .hyper-ide-editor-tab-buttons > .toggled {
137 | z-index: 1;
138 | font-weight: bold;
139 | font-style: normal;
140 | background-image: var(--button-bg);
141 | }
142 |
143 | .hyper-ide-editor-tab-buttons > span > span.hyper-ide-close {
144 | position: absolute;
145 | font-size: .5rem;
146 | top: calc(var(--border-radius) / 2);
147 | right: calc(var(--border-radius) / 2);
148 | padding: .25rem;
149 | border-radius: .25rem;
150 | min-width: unset;
151 | width: auto;
152 | height: auto;
153 | }
154 |
155 | /* "Tab control" content wrapper */
156 | .hyper-ide-editor-tab-content {
157 | height: calc(100% - 1.7rem - 1px);
158 | margin-bottom: 0;
159 | }
160 |
161 | /* Making sure we modify main CodeMirror (Micro) wrapper class */
162 | .micro-codemirror-wrapper {
163 | height: 100%;
164 | }
165 |
166 | /* Wraps CodeMirror instance(s) */
167 | .hyper-ide-codemirror-wrapper {
168 | height: calc(100vh - 5.5rem);
169 | box-sizing: content-box;
170 | }
171 | .hyper-ide-page-scroll .hyper-ide-codemirror-wrapper {
172 | height: auto;
173 | min-height: calc(100vh - 5.5rem);
174 | }
175 |
176 | /* CodeMirror instance, inside of editors */
177 | .hyper-ide-codemirror-wrapper .CodeMirror {
178 | height: 100% !important;
179 | min-height: 100%;
180 | }
181 |
182 | /* Our animation for our UFO on our splash screen */
183 | @keyframes hyper-ide-ufo {
184 | 0% {
185 | transform: rotate(-90deg) scale(0.1);
186 | margin-top: -500px;
187 | }
188 |
189 | 100% {
190 | transform: rotate(0deg) scale(1);
191 | margin-top: 0;
192 | }
193 | }
194 | /* UFO styles (image on splash screen) */
195 | .hyper-ide-ufo {
196 | margin-left: auto;
197 | margin-right: auto;
198 | display: block;
199 | max-width: 50%;
200 | animation-name: hyper-ide-ufo;
201 | animation-duration: .5s;
202 | animation-fill-mode: forwards;
203 | margin-bottom: 2rem;
204 | }
205 |
206 | .hyper-ide-copyright {
207 | position: absolute;
208 | bottom: 0;
209 | right: 1rem;
210 | margin-bottom: .5rem;
211 | font-style: italic;
212 | font-size: .7rem;
213 | }
214 |
--------------------------------------------------------------------------------
/help-files/Hyper IDE/01 - Introduction.md:
--------------------------------------------------------------------------------
1 | ## Introduction to Hyper IDE
2 |
3 | Hyper IDE is a web based integrated development environment. Even though it's main purpose is to allow for
4 | development in primarily Hyperlambda, HTML, CSS and JavaScript - It supports more than 100 programming
5 | languages, to a varying degree. It also works on clients such as your phone and tablet, althought it's
6 | probably best used in combination with a normal computer. Hyper IDE is highly modularised, and easily
7 | extendible, and also allows you to easily customise it. Hyper IDE is entirely built in
8 | Hyperlambda, which probably serves as a testimonial to Hyperlambda's _"powers"_. Hyper IDE is using
9 | CodeMirror as its front end code editor. Hyper IDE also doubles as a file manager.
10 |
11 | ### The file explorer
12 |
13 | To the left in Hyper IDE, you can find a _"tree view widget"_. We will refer to this widget as your
14 | _"file explorer"_. It displays all the files on your server, and allows you to select and open files
15 | for editing, in addition to modify and edit your folders. The first time you click a folder in the tree view,
16 | it will automatically expand the folder, and display its sub-folders and files. If you choose to explicitly
17 | close the folder later, by clicking the folder icon, you will have to click the folder icon again to
18 | expand it.
19 |
20 | As you select a file in the file explorer, Hyper IDE will find the correct CodeMirror mode, according to the file
21 | extension of your file. The mapping between file extensions and CodeMirror modes can be found
22 | in your `/hyper-ide/configuration/extension2cm-instance.hl` file, and you can edit this file to add support for
23 | additional file extensions, and/or CodeMirror modes.
24 |
25 | Unless you have explicitly disabled the _"bookmark"_ plugin, you can also retrieve the URL to the currently
26 | selected item from your file explorer, which might be a folder, or a file, which allows you to bookmark files
27 | and folders, or send them to colleagues or friends as URLs.
28 |
29 | As you browse your folders and files on your server, the toolbar changes according to which file or folder
30 | you have selected, providing context sensitive toolbar items. If you choose the _"/micro/media/skins/"_ folder
31 | for instance, you'll have a _"Create new skin wizard"_ toolbar item.
32 |
33 | ### The Toolbar
34 |
35 | At the top of Hyper IDE, you can find a toolbar. This toolbar is _"context sensitive"_, and will change
36 | according to what type of object you have selected. If you select a folder, you will be given the option to
37 | create a new file, and/or a sub-folder. If you select a file, you will not be given these options. Hence,
38 | to create a new file or folder, you must first select the folder where you want to place your file.
39 | Try to select back and forth between a file and a folder to see how it changes. Both files and folders
40 | can be renamed. If you hover your mouse over a toolbar button, you will get some information about what
41 | that particular button does.
42 |
43 | **Notice**, depending upon what plugins you have (turned on) in your installation, you might
44 | have additional buttons, such as the _"Create new template module"_ plugin, which allows you to create
45 | new apps, by following a _"wizard"_. This button will only be visible when you have selected the `/modules/`
46 | folder. Some plugins are _"context sensitive"_, and only available for
47 | specific folders, and/or specific file extensions. You can also easily extend this toolbar, and create
48 | your own plugins.
49 |
50 | ### Keyboard shortcuts
51 |
52 | Hyper IDE has many keyboard shortcuts. Most of these are created as CodeMirror shortcuts, which implies that
53 | some sort of CodeMirror editor must be active, and have focus, for the keyboard shortcut to work.
54 | Below is a list of these keyboard shortcuts.
55 |
56 | * __Alt+S__ - Saves the active document
57 | * __Alt+W__ - Activates the next open document
58 | * __Alt+Q__ - Activates the previous open document
59 | * __Alt+X__ - Closes the active document
60 | * __Alt+M__ - Maximize the active editor
61 | * __Cx+Space__ - Displays the AutoCompleter
62 | * __Tab__ - Indents selected code 2 more spaces
63 | * __Shift+Tab__ - De-indents selected code 2 spaces
64 | * __Alt+F__ - Search, _"sticky"_ version (regex support)
65 | * __Cx+F__ - Search, _"highlight"_ version (regex support)
66 | * __Cx+Alt+F__ - Replace in file
67 | * __Alt+G__ - Go to line number
68 | * __Cx+Z__ - Undo
69 | * __Cx+Shift+Z__ - Redo
70 |
71 | **Notice**, on a Mac OS X computer, you'll have to use the **CMD** key where it says _"Cx"_ above, while on other
72 | types of systems, you must use the **CTRL** key. In addition to the above explicit keyboard shortcuts, most modal widgets
73 | can be closed with the _"Escape"_ key and the _"OK"_ button will be clicked with the Carriage Return key.
74 |
75 | ### Settings
76 |
77 | Hyper IDE comes with 57 themes out of the box. These are for the most parts themes that are distributed with
78 | CodeMirror, and allows you to change the background color, font size, etc, of your CodeMirror editor. In
79 | addition Hyper IDE will use your chosen Phosphorus Five skin, which allows you to change its Micro skin
80 | by changing the skin that Phosphorus Five is using for your user.
81 |
82 | ### Plugins
83 |
84 | Most features in Hyper IDE can be turned on or off, and some features are only available if you are logged in
85 | as root. In addition, plugins can be turned on or off according to the declarations of plugins in the
86 | file `/modules/hyper-ide/configuration/plugins.hl`. If you want to enable all plugins, you can simply
87 | delete this file, if it exists, since all plugins are enabled by default. If you want to turn off all
88 | plugins, you can create an empty _"plugins.hl"_ file. If you want to only allow some specific plugin,
89 | you can create a `plugins.hl` file, and declare which plugins you want to enable as items in this file.
90 |
91 | The available plugins in your installation, can for the most parts be found in your
92 | `/modules/hyper-ide/startup/plugins/` folder - However, this depends upon your installation, and which
93 | additional modules you have installed. Plugins are Active Events, and resolved according to their namespace -
94 | So any Hyperlambda file, and/or C# module, might in theory create plugins for Hyper IDE. This allows you
95 | to extend Hyper IDE, without modifying any of the files inside of your Hyper IDE folder - Which allows
96 | you to easily upgrade to newer versions later, without loosing your custom extensions.
97 |
98 | If you want to see all available plugins for your current installation, you can evaluate the following snippet.
99 |
100 | ```hyperlambda-snippet
101 | .plugins
102 | ~hyper-ide.folder-plugins.
103 | ~hyper-ide.plugins.
104 | ~hyper-ide.global-plugin.
105 | vocabulary:x:/-/*?name
106 | create-widgets
107 | micro.widgets.modal:all-plugins
108 | widgets
109 | h3
110 | innerValue:Available plugins
111 | pre
112 | innerValue:x:/@vocabulary
113 | div
114 | class:right
115 | widgets
116 | button
117 | innerValue:Close
118 | onclick
119 | delete-widget:all-plugins
120 | ```
121 |
122 | ### Responsiveness
123 |
124 | Although Hyper IDE is remarkably responsive, at least compared to Visual Studio, it is a web based IDE.
125 | This for obvious reasons have some benefits, and some disadvantages. One of the disadvantages is that if
126 | you expand a huge amount of folders in your file explorer, and also edit a lot of files at the same time -
127 | You might feel that Hyper IDE starts acting slow. If Hyper IDE starts acting slow on you, then you might
128 | benefit from saving your work, and reloading your page, to make sure you have less active widgets on your
129 | page. Typically, you probably wouldn't want to edit more than a handful of files at the same time,
130 | since this would result in that Hyper IDE becomes less responsive.
131 |
132 | Hyper IDE's purpose also is to mainly be an IDE for web application development.
133 |
--------------------------------------------------------------------------------
/helpers/lambda-events/hyper-ide.editors.close.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * This file closes all editors who's paths starts with the given **[filter]**, unless they
3 | * have unsaved changes. If you want to force closing also editors with unsaved changes,
4 | * you can supply a **[force]** argument, and set its value to boolean _"true"_.
5 | *
6 | * If you provide a boolean _"true"_ value for **[exact]**, only the editor being
7 | * an exact match for the specified **[filter]** argument will be closed.
8 | */
9 |
10 | /*
11 | * Separates arguments from the rest of our lambda.
12 | */
13 | .signal
14 |
15 |
16 |
17 |
18 |
19 | /*
20 | * Sanity checking arguments.
21 | */
22 | micro.lambda.contract.optional:x:/..
23 | exact:bool
24 | filter:string
25 | force:bool
26 |
27 |
28 |
29 |
30 |
31 | /*
32 | * Defaults.
33 | */
34 | .defaults
35 | filter:/
36 |
37 |
38 |
39 |
40 |
41 | /*
42 | * Retrieving all open editors, and checking that there actually are any
43 | * open editors, and if not, returning early.
44 | */
45 | hyper-ide.editors.get-open-editors
46 | if:x:/@hyper-ide.editors.get-open-editors/*?count
47 | =:int:0
48 |
49 | /*
50 | * No open editors, returning early to avoid evaluating the rest of our lambda.
51 | */
52 | micro.windows.info:There are no open editors
53 | class:micro-windows-info warning
54 | return:bool:false
55 |
56 |
57 |
58 |
59 |
60 | /*
61 | * Retrieving active editor, since we'll need to track if it was closed or
62 | * not during our lambda evaluation.
63 | */
64 | hyper-ide.active-editor.get-filepath
65 |
66 |
67 |
68 |
69 |
70 | /*
71 | * Used to track dirty editors we are not closing.
72 | */
73 | .dirty
74 |
75 |
76 |
77 |
78 |
79 | /*
80 | * Used to track if active editor is closed.
81 | */
82 | _active-deleted:bool:false
83 |
84 |
85 |
86 |
87 |
88 | /*
89 | * Iterating through all open editors.
90 | */
91 | for-each:x:/@hyper-ide.editors.get-open-editors/*
92 |
93 | /*
94 | * Checking if currently iterated editor is a match for our [filter] condition.
95 | */
96 | if:x:/@_dp/#?name
97 | =:x:(/../*/filter|/@.defaults/*/filter)/$?value
98 | or:x:/../*/exact?value.bool
99 | !=:bool:true
100 | and
101 | starts-with:x:/@_dp/#?name
102 | src:x:(/../*/filter|/@.defaults/*/filter)/$?value
103 |
104 | /*
105 | * Checking if currently iterated editor is dirty, and [force] is not true.
106 | */
107 | if:x:/@_dp/#/*/clean?value
108 | =:bool:false
109 | and:x:/../*/force?value.bool
110 | !=:bool:true
111 |
112 | /*
113 | * Currently iterated editor is dirty, and user did not want to [force] closing,
114 | * hence we do not close it, but store the editor in our [.dirty] list, and
115 | * continue our iteration.
116 | */
117 | add:x:/@.dirty
118 | src:x:/@_dp/#?name
119 | continue
120 |
121 | /*
122 | * Checking if this was our active editor.
123 | */
124 | if:x:/@_dp/#?name
125 | =:x:/@hyper-ide.active-editor.get-filepath?value
126 |
127 | /*
128 | * This is our active editor, making sure we track the fact that it
129 | * was closed.
130 | */
131 | set:x:/@_active-deleted?value
132 | src:bool:true
133 |
134 | /*
135 | * This is where the actual deletion of our editor is done.
136 | *
137 | * We'll need to delete the editor's toolbar, activate tab view button,
138 | * and actual editor.
139 | */
140 |
141 | /*
142 | * Deleting actual editor.
143 | */
144 | p5.web.widgets.find-first:hyper-ide-editor-tab-editors
145 | .editor:x:/@_dp/#?name
146 | delete-widget:x:/@p5.web.widgets.find-first/*/*?value
147 |
148 | /*
149 | * Then its activate button.
150 | */
151 | p5.web.widgets.find-first:hyper-ide-editor-tab-buttons
152 | .activate:x:/@_dp/#?name
153 | delete-widget:x:/@p5.web.widgets.find-first/*/*?value
154 |
155 | /*
156 | * Then its toolbar.
157 | */
158 | p5.web.widgets.find-first
159 | .toolbar:x:/@_dp/#?name
160 | delete-widget:x:/@p5.web.widgets.find-first/*/*?value
161 |
162 | /*
163 | * Removing currently iterated editor from our list of editors.
164 | *
165 | * This is done such that we end up with a list of available editors,
166 | * after we have closed all editors caller wants to close, which (might) be
167 | * used to determine which editor we should activate, if any.
168 | */
169 | set:x:/@_dp/#
170 |
171 |
172 |
173 |
174 |
175 | /*
176 | * Checking if there was dirty editors, that were not closed, and if so,
177 | * showing a modal widget, warning user, asking him if he really wants to
178 | * close these editors, setting the last dirty editor to active, and returning
179 | * early to avoid evaluation of the rest of our lambda.
180 | */
181 | if:x:/@.dirty/*
182 |
183 | /*
184 | * Dirty editors exists, and they were not closed, even though caller
185 | * requested to have these editors closed.
186 | *
187 | * Hence, we display a modal window to caller, allowing him to force closing,
188 | * sets the last dirty editor to active, and return early, to avoid evaluating
189 | * the rest of our lambda.
190 | *
191 | * First passing in all arguments to our "recursive" invocation, to make sure
192 | * we get our [exact] and [filter] arguments correctly mapped up in our second
193 | * invocation.
194 | */
195 | add:x:/+/**/hyper-ide.editors.close
196 | src:x:/@.signal/--/<-
197 | micro.windows.confirm
198 | header:You have unsaved changes
199 | body:Some of your editors have unsaved changes, are you sure you want to close these? If you do, your changes will not be saved.
200 | onok
201 |
202 | /*
203 | * Invoking "self" with [force] argument, deleting modal widget first.
204 | */
205 | hyper-ide.editors.close
206 | force:bool:true
207 |
208 | /*
209 | * Checking if we need to activate our last dirty editor.
210 | */
211 | if:x:/@hyper-ide.active-editor.get-filepath?value
212 | !=:x:/@.dirty/0/-?name
213 |
214 | /*
215 | * We need to set our last dirty editor to active.
216 | */
217 | hyper-ide.editors.set-active-editor:x:/@.dirty/0/-?name
218 |
219 | /*
220 | * Returning "failure" to caller.
221 | */
222 | return:bool:false
223 |
224 |
225 |
226 |
227 |
228 | /*
229 | * Checking if active editor was deleted, and if it was, we'll need to
230 | * either load up another editor, or load our splash screen, depending
231 | * upon whether or not there are anymore available editors.
232 | */
233 | if:x:/@_active-deleted?value
234 |
235 | /*
236 | * Active editor was closed.
237 | *
238 | * Checking if there are anymore editors left.
239 | */
240 | if:x:/@hyper-ide.editors.get-open-editors/*?count
241 | >:int:0
242 |
243 | /*
244 | * Setting the last available editor as our active editor.
245 | */
246 | hyper-ide.editors.set-active-editor:x:/@hyper-ide.editors.get-open-editors/0/-?name
247 |
248 | /*
249 | * Raising changed event.
250 | */
251 | hyper-ide.file-explorer.item-changed:x:/@hyper-ide.editors.get-open-editors/0/-?name
252 |
253 | else
254 |
255 | /*
256 | * No more editors, deleting editor wrapper, and loading our splash screen.
257 | */
258 | delete-widget:hyper-ide-editor-tab
259 | hyper-ide._load-splash
260 |
261 | /*
262 | * Raising our "all editors closed" event.
263 | */
264 | hyper-ide.on-all-editors-closed
265 |
266 | /*
267 | * Checking if active item in file explorer is a file, and if it is, we make
268 | * sure we de-select it.
269 | */
270 | hyper-ide.file-explorer.get-active-item
271 | if
272 | ends-with:x:/@hyper-ide.file-explorer.get-active-item?value
273 | src:/
274 | not
275 |
276 | /*
277 | * Active file explorer item is a file, hence we de-select it.
278 | */
279 | hyper-ide.file-explorer.set-active-item
280 |
281 |
282 |
283 |
284 |
285 | /*
286 | * Returning "success" to caller.
287 | */
288 | return:bool:true
289 |
--------------------------------------------------------------------------------
/helpers/app-templates/angular-todo.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Template for a new _"AngularJS module"_.
3 | *
4 | * This file creates a simple _"TODO"_ type of AngularJS application.
5 | * The file requires a __[name]__ argument being the name of new module to create, which
6 | * will become your module's URL.
7 | *
8 | * This file is used by the __[hyper-ide.folder-plugin.create-module]__
9 | * plugin when the user creates a new module by following a wizard.
10 | */
11 |
12 |
13 |
14 |
15 |
16 | /*
17 | * Sanity checking arguments.
18 | */
19 | micro.lambda.contract.min:x:/..
20 | name:string
21 |
22 |
23 |
24 |
25 |
26 | /*
27 | * Creates our new module.
28 | *
29 | * First making sure our main module folder exists.
30 | */
31 | create-folder:/modules/{0}/
32 | :x:/../*/name?value
33 |
34 |
35 |
36 |
37 |
38 | /*
39 | * We'll need the module name in UPPERCASE later down the road.
40 | */
41 | to-upper:x:/../*/name?value
42 |
43 |
44 |
45 |
46 |
47 | /*
48 | * Creating our "desktop.hl" file.
49 | */
50 | save-file:/modules/{0}/desktop.hl
51 | :x:/../*/name?value
52 | src:@"
53 | /*
54 | * Desktop widget.
55 | *
56 | * This becomes your module's 'desktop icon'.
57 | */
58 | container
59 | element:a
60 | class:desktop-app button shaded
61 | title:A simple AngularJS TODO app
62 | widgets
63 | span
64 | class:desktop-app-name
65 | widgets
66 | literal
67 | element:span
68 | class:icon-happy desktop-app-icon
69 | span
70 | class:desktop-app-text
71 | innerValue:TODO
72 | "
73 |
74 |
75 |
76 |
77 |
78 | /*
79 | * Then creating our "startup.hl" file.
80 | */
81 | to-upper:x:/../*/name?value
82 | save-file:/modules/{0}/startup.hl
83 | :x:/../*/name?value
84 | src:@"
85 | /*
86 | * Provide whatever startup logic your module requires here, if any.
87 | *
88 | * For instance, create Active Events necessary to wire up your module.
89 | * Below is an example of creating a 'path' event for instance, which unrolls
90 | * the path declaration of @YOUR-APP-NAME to your module's main folder.
91 | */
92 | split:x:/..?name
93 | =:/
94 | set:x:/@split/0/-
95 | join:x:/@split/*?name
96 | sep:/
97 | eval-x:x:/+/*
98 | create-event:p5.io.unroll-path.@{0}
99 | return:/{{0}}
100 | :x:/@join?value
101 | "
102 | :x:/@to-upper?value
103 |
104 |
105 |
106 |
107 |
108 | /*
109 | * Then creating our "install.hl" file.
110 | */
111 | save-file:/modules/{0}/install.hl
112 | :x:/../*/name?value
113 | src:@"
114 |
115 |
116 | /*
117 | * Creates our database.
118 | *
119 | * Notice, if the schema exists from before, this will throw an exception,
120 | * which we simply silently catch.
121 | */
122 | try
123 | p5.config.get:p5.data.prefix
124 | p5.mysql.connect:[sys]
125 | p5.mysql.execute:create schema `{{0}}{0}`
126 | :x:/@p5.config.get/*?value
127 | p5.mysql.connect:[{0}]
128 | p5.mysql.execute:@""
129 | create table if not exists `items` (
130 | `id` int(10) unsigned not null auto_increment,
131 | `description` varchar(1024) collate utf8mb4_unicode_ci not null,
132 | primary key (`id`)
133 | ) engine=InnoDB auto_increment=0 default charset=utf8mb4 collate=utf8mb4_unicode_ci;""
134 | catch
135 |
136 | /*
137 | * Database exists from before.
138 | */
139 | "
140 | :x:/../*/name?value
141 |
142 |
143 |
144 |
145 |
146 | /*
147 | * Then creating our "uninstall.hl" file.
148 | */
149 | save-file:/modules/{0}/uninstall.hl
150 | :x:/../*/name?value
151 | src:@"
152 | /*
153 | * Provide whatever uninstall logic your module requires here, if any.
154 | *
155 | * Common tasks for this file, is to delete all Active Events created by
156 | * your module, such as the following example illustrates.
157 | */
158 | delete-event:p5.io.unroll-path.@{0}
159 | "
160 | :x:/@to-upper?value
161 |
162 |
163 |
164 |
165 |
166 | /*
167 | * Then creating our "launch.hl" file.
168 | */
169 | save-file:/modules/{0}/launch.hl
170 | :x:/../*/name?value
171 | src:@"
172 | p5.web.echo-file:@{0}/index.html
173 | "
174 | :x:/@to-upper?value
175 |
176 |
177 |
178 |
179 |
180 | /*
181 | * Then creating our "index.html" file.
182 | */
183 | save-file:/modules/{0}/index.html
184 | :x:/../*/name?value
185 | src:@"
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | {0} file? I need you to confirm this action before I allow you to do this."
59 | :x:/@hyper-ide.file-explorer.get-active-item?value
60 | p
61 | innerValue:@"Warning, this action is permanent!"
62 | div
63 | class:right
64 | widgets
65 | div
66 | class:strip
67 | widgets
68 | button
69 | innerValue:Yes
70 | oninit
71 |
72 | /*
73 | * Setting initial focus to "Yes" button.
74 | */
75 | micro.page.set-focus:x:/../*/_event?value
76 |
77 | onclick
78 |
79 | /*
80 | * Forward evaluated above.
81 | */
82 | .filename:x:/../*/hyper-ide.file-explorer.get-active-item?value
83 |
84 | /*
85 | * Deleting actual file.
86 | */
87 | delete-file:x:/@.filename?value
88 |
89 | /*
90 | * Deleting selected item from tree.
91 | *
92 | * Notice, selected tree view item will always be the file
93 | * user is trying to delete.
94 | */
95 | micro.widgets.tree.get-selected-items:hyper-ide-folder-tree-browser
96 | add:x:/../*/micro.widgets.tree.delete-items
97 | src:x:/@micro.widgets.tree.get-selected-items/*
98 | micro.widgets.tree.delete-items:hyper-ide-folder-tree-browser
99 |
100 | /*
101 | * Making sure we close editor for file, if there exists
102 | * at least one editor that is open.
103 | */
104 | hyper-ide.editors.get-open-editors
105 | if:x:/@hyper-ide.editors.get-open-editors/*?count
106 | >:int:0
107 | eval-x:x:/+/*
108 | hyper-ide.editors.close
109 | filter:x:/@.filename?value
110 | exact:bool:true
111 | force:bool:true
112 |
113 | /*
114 | * Notice, in case file that was deleted didn't have a CodeMirror
115 | * editor for its file extension, there might still exist
116 | * a toolbar for it. Hence, checking if it does, and deleting
117 | * the toolbar, if it exists.
118 | */
119 | p5.web.widgets.find-first:hyper-ide-toolbar-wrapper
120 | .toolbar:x:/@.filename?value
121 | if:x:/@p5.web.widgets.find-first/*/*?value
122 | delete-widget:x:/@p5.web.widgets.find-first/*/*?value
123 |
124 | /*
125 | * Deleting modal window.
126 | */
127 | delete-widget:hyper-ide-confirm-delete-file
128 |
129 | button
130 | innerValue:No
131 | onclick
132 |
133 | /*
134 | * Simply deleting modal widget.
135 | */
136 | delete-widget:hyper-ide-confirm-delete-file
137 |
138 | /*
139 | * Deletes a folder.
140 | */
141 | hyper-ide._delete-folder
142 |
143 | /*
144 | * Retrieving folder name.
145 | */
146 | hyper-ide.file-explorer.get-active-item
147 |
148 | /*
149 | * Deleting folder, asking user to confirm the action.
150 | */
151 | create-widgets
152 | micro.widgets.modal:hyper-ide-confirm-delete-folder
153 | widgets
154 | h3
155 | innerValue:Confirm deletion
156 | literal
157 | element:p
158 | style:"float:left;font-size:5rem;margin-right:.5rem;"
159 | class:icon-bin
160 | p
161 | innerValue:@"Are you sure you want to delete the {0} folder? This will delete all files and sub-folders,
162 | and close all editors that are editing files inside of your folder. I need you to confirm this action before I allow you to do this."
163 | :x:/@hyper-ide.file-explorer.get-active-item?value
164 | p
165 | innerValue:@"Warning, this action is permanent!"
166 | div
167 | class:right
168 | widgets
169 | div
170 | class:strip
171 | widgets
172 | button
173 | innerValue:Yes
174 | oninit
175 |
176 | /*
177 | * Setting initial focus to "Yes" button.
178 | */
179 | micro.page.set-focus:x:/../*/_event?value
180 |
181 | onclick
182 |
183 | /*
184 | * Figuring out which folder user is trying to delete.
185 | */
186 | get-widget-property:hyper-ide-active-folder-toolbar
187 | .folder
188 |
189 | /*
190 | * Deleting actual folder.
191 | */
192 | delete-folder:x:/@get-widget-property/*/*?value
193 |
194 | /*
195 | * Deleting selected item from tree.
196 | *
197 | * Notice, selected tree view item will always be the file or folder
198 | * user is trying to delete, since selecting a tree node,
199 | * changes the active file object edited.
200 | */
201 | micro.widgets.tree.get-selected-items:hyper-ide-folder-tree-browser
202 | add:x:/../*/micro.widgets.tree.delete-items
203 | src:x:/@micro.widgets.tree.get-selected-items/*
204 | micro.widgets.tree.delete-items:hyper-ide-folder-tree-browser
205 |
206 | /*
207 | * Making sure we close all editors that are editing files beneath
208 | * currently deleted folder.
209 | */
210 | eval-x:x:/+/*
211 | hyper-ide.editors.close
212 | filter:x:/@get-widget-property/*/*?value
213 | force:bool:true
214 |
215 | /*
216 | * Checking if folder toolbar exists, and deleting it if it does.
217 | */
218 | if
219 | fetch:x:/0/0?value
220 | widget-exists:hyper-ide-active-folder-toolbar
221 | delete-widget:hyper-ide-active-folder-toolbar
222 |
223 | /*
224 | * Deleting modal window.
225 | */
226 | delete-widget:hyper-ide-confirm-delete-folder
227 |
228 | button
229 | innerValue:No
230 | onclick
231 |
232 | /*
233 | * Simply deleting modal widget.
234 | */
235 | delete-widget:hyper-ide-confirm-delete-folder
236 |
237 | onclick
238 |
239 | /*
240 | * Checking if user is trying to delete a file, or a folder.
241 | */
242 | hyper-ide.file-explorer.get-active-item
243 | if
244 | ends-with:x:/@hyper-ide.file-explorer.get-active-item?value
245 | src:/
246 |
247 | /*
248 | * Deletes a folder.
249 | */
250 | hyper-ide._delete-folder
251 |
252 | else
253 |
254 | /*
255 | * Deletes a file.
256 | */
257 | hyper-ide._delete-file
258 |
--------------------------------------------------------------------------------
/startup/plugins/hyper-ide.folder-plugin.execute.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Creates the __[hyper-ide.folder-plugin.execute]__ Active Event.
3 | */
4 |
5 | /*
6 | * This event creates our execute shell script in folder plugin button. This
7 | * button is only visible if the currently selected object in your folder
8 | * explorer is a folder, and not a file.
9 | *
10 | * When the button is clicked, it will create a modal window, allowing the
11 | * user to type in some bash script, or select a template script taken from
12 | * the _"/modules/hyper-ide/helpers/shell-snippets/"_ folder, and execute
13 | * that shell script with the current path being the selected folder from
14 | * the file explorer.
15 | *
16 | * **Notice**, whether or not the user has permissions to actually execute
17 | * shell scripts, depends upon how the authorization objects in your system
18 | * have been setup.
19 | */
20 | create-event:hyper-ide.folder-plugin.execute
21 | return
22 | button
23 | innerValue:@""
24 | title:Open terminal window
25 | onclick
26 |
27 | /*
28 | * Retrieving current folder.
29 | */
30 | p5.web.widgets.find-first-ancestor:x:/../*/_event?value
31 | .folder
32 | get-widget-property:x:/-/*/*?value
33 | .folder
34 |
35 | /*
36 | * Retrieving active code.
37 | */
38 | p5.web.session.get:hyper-ide.terminal-code
39 | if:x:/@p5.web.session.get/*?value
40 | set:x:/../*/.code?value
41 | src:x:/@p5.web.session.get/*?value
42 | .code:
43 |
44 | /*
45 | * Opens a modal window, asking user for command(s) he wants to execute.
46 | */
47 | eval-x:x:/+/**/.folder|/+/**/.code
48 | create-widgets
49 | micro.widgets.modal:hyper-ide-execute-modal
50 | widgets
51 | micro.widgets.cover:hyper-ide-eval-shell-obscurer
52 | style:"display:none;"
53 | message:Executing your script ...
54 | h3
55 | innerValue:Shell script
56 | oninit
57 |
58 | /*
59 | * Forward evaluated above.
60 | */
61 | .folder:x:/../*/get-widget-property/*/*?value
62 |
63 | /*
64 | * Displaying working folder as part of header.
65 | */
66 | set-widget-property:x:/../*/_event?value
67 | innerValue:x:/@.folder?value
68 |
69 | div
70 | class:strip fill air-top
71 | widgets
72 |
73 | /*
74 | * Template snippets selector.
75 | */
76 | label
77 | innerValue:Template
78 | select
79 | oninit
80 |
81 | /*
82 | * Listing all files in "shell-snippets" folder, and creating
83 | * one option element for each.
84 | */
85 | list-files:@IDE/helpers/shell-snippets/
86 | filter:.sh
87 | for-each:x:/@list-files/*?name
88 | split:x:/@_dp?value
89 | =:/
90 | =:.
91 | create-widget
92 | element:option
93 | parent:x:/../*/_event?value
94 | innerValue:x:/@split/0/-2?name
95 | value:x:/@_dp?value
96 |
97 | onchange
98 |
99 | /*
100 | * Loading file, and setting value of CodeMirror editor.
101 | */
102 | get-widget-property:x:/../*/_event?value
103 | value
104 | load-file:x:/@get-widget-property/*/*?value
105 | replace:x:/@load-file/*?value
106 | src:`
107 | dest:\`
108 | replace:x:/@replace?value
109 | src:$
110 | dest:\$
111 | p5.web.widgets.find:hyper-ide-terminal-commands
112 | element:textarea
113 | p5.web.send-javascript:@"p5['{0}'].getDoc().setValue(`{1}`);"
114 | :x:/@p5.web.widgets.find/*/*?value
115 | :x:/@replace?value
116 |
117 | widgets
118 | option
119 | innerValue:Select template snippet ...
120 |
121 | micro.widgets.codemirror:hyper-ide-terminal-commands
122 | .data-field:code
123 | auto-focus:true
124 | mode:shell
125 | value:x:/../*/.code?value
126 |
127 | div
128 | class:right air-top
129 | widgets
130 | div
131 | class:strip
132 | widgets
133 |
134 | /*
135 | * Execute button.
136 | */
137 | button:hyper-ide-execute-shell-script-button
138 | innerValue:Execute
139 | onclick
140 |
141 | /*
142 | * Making sure we show obscurer, for then to invoke "real" implementation.
143 | */
144 | set-widget-property:hyper-ide-eval-shell-obscurer
145 | style:"display:block;position:absolute;"
146 | p5.web.send-javascript:@"p5.$('hyper-ide-execute-shell-script-button').raise('.onclick');"
147 |
148 | .onclick
149 |
150 | /*
151 | * Forward evaluated above.
152 | */
153 | .folder:x:/../*/get-widget-property/*/*?value
154 |
155 | /*
156 | * Retrieving script.
157 | */
158 | micro.form.serialize:hyper-ide-execute-modal
159 |
160 | /*
161 | * Saving current code in session, since it's highly likely that
162 | * user wants to execute similar code the next time he or she opens this window.
163 | */
164 | p5.web.session.set:hyper-ide.terminal-code
165 | src:x:/@micro.form.serialize/*/code?value
166 |
167 | /*
168 | * Checking platform, since we might need to convert
169 | * from CR/LF to only LF, in case we're on MacOSX or Unix.
170 | */
171 | p5.system.platform
172 | if:x:/@p5.system.platform?value
173 | =:Unix
174 | or:x:/@p5.system.platform?value
175 | =:MacOSX
176 |
177 | /*
178 | * Replacing CR/LF before we save file to get platform specific CR sequence.
179 | */
180 | p5.system.platform.normalize-string:x:/@micro.form.serialize/*/code?value
181 | save-file:~/temp/temp-bash.sh
182 | src:x:/@p5.system.platform.normalize-string?value
183 |
184 | else
185 |
186 | /*
187 | * Saving file with CR/LF as new line characters.
188 | */
189 | save-file:~/temp/temp-bash.sh
190 | src:x:/@micro.form.serialize/*/code?value
191 |
192 | /*
193 | * In case temp file contains passwords and such, we want
194 | * to make 100% certain of that we can successfully delete
195 | * it after execution, even if an exception occurs.
196 | */
197 | try
198 |
199 | /*
200 | * Executing file with current folder being the currently open folder.
201 | */
202 | p5.system.platform.execute-file:~/temp/temp-bash.sh
203 | working-folder:x:/@.folder?value
204 |
205 | /*
206 | * Displaying results of evaluation, making sure we
207 | * HTML encode it, to be sure.
208 | */
209 | p5.html.html-encode:x:/@p5.system.platform.execute-file/*?value
210 | set-widget-property:hyper-ide-execute-result
211 | visible:true
212 | class:success air-top
213 | innerValue:x:/@p5.html.html-encode?value
214 |
215 | catch
216 |
217 | /*
218 | * Displaying error to user.
219 | */
220 | p5.html.html-encode:x:/@message?value
221 | set-widget-property:hyper-ide-execute-result
222 | visible:true
223 | class:warning air-top
224 | innerValue:x:/@p5.html.html-encode?value
225 |
226 | finally
227 |
228 | /*
229 | * Deleting temporary file.
230 | */
231 | delete-file:~/temp/temp-bash.sh
232 |
233 | /*
234 | * Making sure we hide obscurer.
235 | */
236 | set-widget-property:hyper-ide-eval-shell-obscurer
237 | style:"display:none;"
238 |
239 | /*
240 | * Close window button.
241 | */
242 | button
243 | innerValue:Close
244 | onclick
245 |
246 | /*
247 | * Simply closing modal window, making sure we save the active code
248 | * in our session at the same time.
249 | */
250 | delete-widget:hyper-ide-execute-modal
251 |
252 | literal:hyper-ide-execute-result
253 | class:air-top
254 | style:"font-size:.7rem;"
255 | element:pre
256 | visible:false
257 |
--------------------------------------------------------------------------------
/helpers/edit-file.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Edits the specified __[file]__, using some sort of CodeMirror editor,
3 | * according to which mappings exists in Hyper IDE for the file's extension.
4 | * This file is being evaluated when the user selects a file node in
5 | * his file explorer, and the file is not open from before in a (non-active)
6 | * editor.
7 | */
8 |
9 |
10 |
11 |
12 |
13 | /*
14 | * Making sure user has access to file.
15 | */
16 | if
17 | p5.io.authorize.read-file:x:/../*/file?value
18 | =:bool:false
19 |
20 | /*
21 | * User doesn't have access to read this file.
22 | */
23 | micro.windows.info:You don't have access to read this file
24 | class:micro-windows-info warning
25 | return
26 |
27 |
28 |
29 |
30 |
31 | /*
32 | * Hiding any previously shown edit file toolbars.
33 | */
34 | p5.web.widgets.find-first-like:hyper-ide-toolbar-wrapper
35 | .toolbar
36 | class:visible
37 | micro.css.delete:x:/@p5.web.widgets.find-first-like/*/*?value
38 | class:visible
39 | micro.css.add:x:/@p5.web.widgets.find-first-like/*/*?value
40 | class:hide
41 |
42 |
43 |
44 |
45 |
46 | /*
47 | * Making sure we load correct editor according to file extension.
48 | *
49 | * First loading file extension to CM mode mapping file.
50 | * This file contains a bunch of file extensions, that are "mapped" towards
51 | * CodeMirror modes.
52 | *
53 | * Hence, we load the file, do a loopkup for our file extension, at which point
54 | * we end up with a CodeMirror mode.
55 | */
56 | load-file:@IDE/configuration/extension2cm-instance.hl
57 |
58 |
59 |
60 |
61 |
62 | /*
63 | * Checking if mode exists for file extension.
64 | *
65 | * First figuring our file extension of file caller wants to edit.
66 | */
67 | .file-type
68 | split:x:/../*/file?value
69 | =:.
70 | if:x:/@load-file/*/*/{0}
71 | :x:/@split/0/-?name
72 |
73 | /*
74 | * There exists a CodeMirror mode for file type.
75 | */
76 | set:x:/@.file-type?value
77 | src:x:/@load-file/*/*/{0}?value
78 | :x:/@split/0/-?name
79 |
80 | /*
81 | * Checking if splash screen is open, and closing it if it is.
82 | */
83 | if
84 | fetch:x:/0/0?value
85 | widget-exists:hyper-ide-splash
86 | delete-widget:hyper-ide-splash
87 |
88 | /*
89 | * Making sure our "tab control" exists.
90 | *
91 | * The "tab control" widget will "wrap" all of our editors.
92 | */
93 | if
94 | fetch:x:/0/0?value
95 | widget-exists:hyper-ide-editor-tab
96 | not
97 |
98 | /*
99 | * Creating our "tab control" wrapper.
100 | */
101 | create-widget:hyper-ide-editor-tab
102 | parent:hyper-ide-file-editor
103 | class:hyper-ide-editor-tab
104 | widgets
105 | container:hyper-ide-editor-tab-buttons
106 | class:hyper-ide-editor-tab-buttons
107 | container:hyper-ide-editor-tab-editors
108 | class:hyper-ide-editor-tab-content shaded rounded
109 |
110 | /*
111 | * Making sure we hide any previously created editors.
112 | */
113 | p5.web.widgets.find-first-like:hyper-ide-file-editor
114 | .editor
115 | class:visible
116 | micro.css.delete:x:/@p5.web.widgets.find-first-like/*/*?value
117 | class:visible
118 | micro.css.add:x:/@p5.web.widgets.find-first-like/*/*?value
119 | class:hide
120 |
121 | /*
122 | * Notice, to prevent non-active editors' content being serialised back from
123 | * client upon consecutive Ajax requests, we disable all non-active editors'
124 | * textarea.
125 | *
126 | * This will preserve a lot of bandwidth, and hence make Hyper IDE more responsive.
127 | */
128 | p5.web.widgets.find-first:x:/@p5.web.widgets.find-first-like/*/*?value
129 | element:textarea
130 | set-widget-property:x:/@p5.web.widgets.find-first/*/*?value
131 | disabled
132 |
133 | /*
134 | * "Un-toggling" existing toggled tab button.
135 | */
136 | p5.web.widgets.find-first-like:hyper-ide-editor-tab-buttons
137 | .activate
138 | class:toggled
139 | micro.css.delete:x:/@p5.web.widgets.find-first-like/*/*?value
140 | class:toggled
141 |
142 | /*
143 | * Loading file, such that we can pass its content into our editor instance.
144 | *
145 | * Making sure we do not convert the file.
146 | */
147 | load-file:x:/../*/file?value
148 | convert:false
149 |
150 | /*
151 | * CodeMirror mode for file's extension exists.
152 | *
153 | * Adding CodeMirror editor with correct mode to our [widgets] collection below.
154 | */
155 | eval-x:x:/+/*/*/*
156 | add:x:/../*/create-widgets/*/div/*/widgets/=editor
157 | src
158 | micro.widgets.codemirror
159 | .data-field:content
160 | mode:x:/@load-file/@load-file/*/*/{0}?value
161 | :x:/@split/0/-?name
162 | value:x:/@load-file/*?value
163 | auto-focus:true
164 | keys
165 | Alt-S:p5.$('hyper-ide-file-editor').raise('.onsave');
166 | Alt-X:p5.$('hyper-ide-file-editor').raise('.onclose');
167 | Alt-W:p5.$('hyper-ide-file-editor').raise('.onnext');
168 | Alt-Q:p5.$('hyper-ide-file-editor').raise('.onprevious');
169 |
170 | else
171 |
172 | /*
173 | * No CodeMirror editor exists for file type.
174 | */
175 | split:x:/../*/file?value
176 | =:.
177 | set:x:/@.file-type?value
178 | src:x:/@split/0/-?name
179 |
180 | /*
181 | * Removing instantiation of actual editor.
182 | */
183 | set:x:/../*/create-widgets(/2|/1)|/../*/hyper-ide.on-file-edited|/../*/create-widgets/*/micro.widgets.file/*/folder
184 |
185 |
186 |
187 |
188 |
189 | /*
190 | * Making sure we hide any previously created file toolbars.
191 | */
192 | p5.web.widgets.find-first-like
193 | .toolbar
194 | class:visible
195 | micro.css.delete:x:/@p5.web.widgets.find-first-like/*/*?value
196 | class:visible
197 | micro.css.add:x:/@p5.web.widgets.find-first-like/*/*?value
198 | class:hide
199 |
200 |
201 |
202 |
203 |
204 | /*
205 | * Adding all file specific plugins.
206 | */
207 | eval-x:x:/+/*/*
208 | add:x:/../*/create-widgets/**/micro.widgets.file/*/widgets
209 | micro.evaluate.file:@IDE/helpers/get-plugins.hl
210 | type:hyper-ide.plugins.{0}
211 | :x:/@.file-type?value
212 |
213 |
214 |
215 |
216 |
217 | /*
218 | * Figuring out filename of file, without its folder.
219 | */
220 | split:x:/../*/file?value
221 | =:/
222 |
223 |
224 |
225 |
226 |
227 | /*
228 | * Creating our widgets.
229 | *
230 | * We create one "tab control button", then we add one editor into "tab control editors",
231 | * before we finally create one toolbar for saving file, etc. The latter will also contain
232 | * all plugins for current mode.
233 | */
234 | create-widgets
235 |
236 |
237 | /*
238 | * Toolbar for saving editor's content, closing it, etc.
239 | */
240 | micro.widgets.file
241 | folder:@IDE/helpers/toolbars/file-editor/
242 | after:hyper-ide-toolbars
243 | class:strip right hyper-ide-toolbar visible
244 | .toolbar:x:/../*/file?value
245 | events
246 |
247 | /*
248 | * Invoked when for some reasons active file changes name.
249 | *
250 | * This event is invoked when for instance the file is renamed, etc.
251 | */
252 | hyper-ide.set-active-filename
253 |
254 | /*
255 | * Checking if this is our active editor, and if not, returning early.
256 | */
257 | get-widget-property:x:/../*/_event?value
258 | class
259 | if:x:/@get-widget-property/*/*?value
260 | ~:hide
261 | return
262 |
263 | /*
264 | * Updating [.file] attribute for widget.
265 | */
266 | set-widget-property:x:/../*/_event?value
267 | .toolbar:x:/../*/_arg?value
268 |
269 | widgets
270 |
271 |
272 | /*
273 | * Activate tab/editor button.
274 | */
275 | span
276 | parent:hyper-ide-editor-tab-buttons
277 | class:hyper-ide-activate-tab-button toggled button
278 | role:button
279 | .activate:x:/../*/file?value
280 | title:x:/../*/file?value
281 | events
282 |
283 |
284 | /*
285 | * Invoked when for some reasons active file changes name.
286 | */
287 | hyper-ide.set-active-filename
288 |
289 | /*
290 | * Checking if this is our active file, and if not, returning early.
291 | */
292 | get-widget-property:x:/../*/_event?value
293 | class
294 | if:x:/@get-widget-property/*/*?value
295 | !~:toggled
296 | return
297 |
298 | /*
299 | * Updating [.file] attribute for widget.
300 | */
301 | split:x:/../*/_arg?value
302 | =:/
303 | p5.web.widgets.get-children:x:/../*/_event?value
304 | set-widget-property:x:/-/*/0?value
305 | innerValue:x:/@split/0/-?name
306 | set-widget-property:x:/../*/_event?value
307 | .activate:x:/../*/_arg?value
308 | title:x:/../*/_arg?value
309 |
310 | onclick
311 |
312 | /*
313 | * Getting filename for editor.
314 | */
315 | get-widget-property:x:/../*/_event?value
316 | .activate
317 |
318 | /*
319 | * Activating editor, and verifying invocation was a success.
320 | */
321 | hyper-ide.editors.set-active-editor:x:/@get-widget-property/*/*?value
322 |
323 | widgets
324 | span
325 | innerValue:x:/@split/0/-?name
326 |
327 | /*
328 | * Close editor button.
329 | */
330 | literal
331 | element:span
332 | class:hyper-ide-close icon-cross button
333 | title:Close editor
334 | role:button
335 | onclick
336 |
337 | /*
338 | * Closing active editor.
339 | */
340 | p5.web.widgets.get-parent:x:/../*/_event?value
341 | get-widget-property:x:/-/*/*?value
342 | .activate
343 | eval-x:x:/+/*
344 | hyper-ide.editors.close
345 | filter:x:/@get-widget-property/*/*?value
346 |
347 |
348 | /*
349 | * Actual editor for file.
350 | *
351 | * Dynamically created above according to file extension.
352 | */
353 | div
354 | parent:hyper-ide-editor-tab-editors
355 | class:hyper-ide-codemirror-wrapper visible
356 | .editor:x:/../*/file?value
357 | data-editor:x:/../*/file?value
358 | events
359 |
360 |
361 | /*
362 | * Invoked when for some reasons active file changes name.
363 | */
364 | hyper-ide.set-active-filename
365 |
366 | /*
367 | * Checking if this is our active editor, and if not, returning early.
368 | */
369 | get-widget-property:x:/../*/_event?value
370 | class
371 | if:x:/@get-widget-property/*/*?value
372 | ~:hide
373 | return
374 |
375 | /*
376 | * Updating [.file] attribute for widget.
377 | */
378 | set-widget-property:x:/../*/_event?value
379 | .editor:x:/../*/_arg?value
380 |
381 |
382 | widgets:editor
383 |
384 |
385 |
386 |
387 |
388 | /*
389 | * Raising our "file edited" event.
390 | */
391 | hyper-ide.on-file-edited
392 |
--------------------------------------------------------------------------------
/helpers/toolbars/secondary-toolbar/01-rename.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Renaming file or folder toolbar button.
3 | */
4 | button
5 | innerValue:@""
6 | title:Renames your active file or folder
7 | disabled
8 | events
9 |
10 | /*
11 | * Sink invoked when active item in file explorer has been changed.
12 | */
13 | hyper-ide.file-explorer.item-changed
14 |
15 | /*
16 | * Checking if there is a selected item.
17 | */
18 | if:x:/../*/_arg?value
19 |
20 | /*
21 | * Enabling button.
22 | */
23 | delete-widget-property:x:/../*/_event?value
24 | disabled
25 |
26 | else
27 |
28 | /*
29 | * Disabling button since there is no active item in file explorer.
30 | */
31 | set-widget-property:x:/../*/_event?value
32 | disabled
33 |
34 | /*
35 | * Renames the currently active file explorer's folder.
36 | */
37 | hyper-ide._rename-folder
38 |
39 | /*
40 | * Retrieving folder name.
41 | */
42 | hyper-ide.file-explorer.get-active-item
43 | split:x:/@hyper-ide.file-explorer.get-active-item?value
44 | =:/
45 |
46 | /*
47 | * Renaming folder.
48 | */
49 | eval-x:x:/+/**(/.folder-name|/.value)
50 | create-widgets
51 | micro.widgets.modal:hyper-ide-confirm-rename-folder
52 | widgets
53 | h3
54 | innerValue:New name
55 | micro.widgets.wizard-form:hyper-ide-rename-folder-form
56 | text:hyper-ide-new-folder-name
57 | info:Name
58 | .data-field:name
59 | placeholder:New name for your folder ...
60 | onkeydown:@"if (event.keyCode == 13) {p5.$('hyper-ide-rename-folder-btn').raise('onclick');return false;} else if (event.keyCode == 27) {p5.$('hyper-ide-rename-cancel').raise('onclick');return false;}"
61 | oninit
62 |
63 | /*
64 | * Forward evaluated above.
65 | */
66 | .folder-name:x:/../*/split/0/-?name
67 |
68 | /*
69 | * Setting initial focus to "Yes" button, and setting
70 | * initial value to old name.
71 | */
72 | set-widget-property:x:/../*/_event?value
73 | value:x:/@.folder-name?value
74 | micro.page.set-focus:x:/../*/_event?value
75 |
76 | div
77 | class:right
78 | widgets
79 | div
80 | class:strip
81 | widgets
82 | button:hyper-ide-rename-folder-btn
83 | innerValue:OK
84 | onclick
85 |
86 | /*
87 | * Forward evaluated above.
88 | */
89 | .value:x:/../*/hyper-ide.file-explorer.get-active-item?value
90 |
91 | /*
92 | * Closing all files matching filter, with [force] argument.
93 | */
94 | eval-x:x:/+/*
95 | hyper-ide.editors.close
96 | filter:x:/@.value?value
97 | force:bool:true
98 |
99 | /*
100 | * Serializing form, figuring out new name for folder,
101 | * and changing its name.
102 | */
103 | micro.form.serialize:hyper-ide-rename-folder-form
104 | split:x:/@.value?value
105 | =:/
106 | set:x:/@split/0/-
107 | join:x:/@split/*?name
108 | sep:/
109 | set:x:/@join?value
110 | src:/{0}/{1}/
111 | :x:/@join?value
112 | :x:/@micro.form.serialize/*/name?value
113 | trim:x:/@join?value
114 | chars:/
115 | move-folder:x:/@.value?value
116 | dest:/{0}/
117 | :x:/@trim?value
118 |
119 | /*
120 | * Refreshing tree, and de-selecting folder.
121 | */
122 | split:x:/@.value?value
123 | =:/
124 | set:x:/@split/0/-
125 | join:x:/@split/*?name
126 | sep:/
127 | hyper-ide.file-explorer.set-active-item:/{0}/
128 | :x:/@join?value
129 | hyper-ide.file-explorer.refresh-active-folder
130 | hyper-ide.file-explorer.set-active-item:/{0}/
131 | :x:/@trim?value
132 | eval-x:x:/+/*
133 | add:x:/+/*
134 | src:/{0}/
135 | :x:/@trim?value
136 | micro.widgets.tree.toggle-items:hyper-ide-folder-tree-browser
137 | items
138 |
139 | /*
140 | * Deleting modal widget, and giving user some feedback.
141 | */
142 | delete-widget:hyper-ide-confirm-rename-folder
143 |
144 | button:hyper-ide-rename-cancel
145 | innerValue:Cancel
146 | onclick
147 |
148 | /*
149 | * Simply deleting modal widget.
150 | */
151 | delete-widget:hyper-ide-confirm-rename-folder
152 |
153 | /*
154 | * Renames the currently active file explorer's file.
155 | */
156 | hyper-ide._rename-file
157 |
158 | /*
159 | * Retrieving file name.
160 | */
161 | hyper-ide.file-explorer.get-active-item
162 |
163 | /*
164 | * Then passing filename into modal widget.
165 | */
166 | eval-x:x:/+/**/.filename
167 | create-widgets
168 | micro.widgets.modal:hyper-ide-confirm-rename-file
169 | widgets
170 | h3
171 | innerValue:New name
172 | micro.widgets.wizard-form:hyper-ide-rename-file-form
173 | text:hyper-ide-new-file-name
174 | info:Name
175 | .data-field:name
176 | placeholder:New name for your file ...
177 | onkeydown:@"if (event.keyCode == 13) {p5.$('hyper-ide-rename-file-btn').raise('onclick');return false;} else if (event.keyCode == 27) {p5.$('hyper-ide-rename-cancel').raise('onclick');return false;}"
178 | oninit
179 |
180 | /*
181 | * Forward evaluated above.
182 | */
183 | .filename:x:/../*/hyper-ide.file-explorer.get-active-item?value
184 | split:x:/-?value
185 | =:/
186 |
187 | /*
188 | * Setting initial focus to "Yes" button, and setting
189 | * initial value to old name.
190 | */
191 | set-widget-property:x:/../*/_event?value
192 | value:x:/@split/0/-?name
193 | micro.page.set-focus:x:/../*/_event?value
194 |
195 | div
196 | class:right
197 | widgets
198 | div
199 | class:strip
200 | widgets
201 | button:hyper-ide-rename-file-btn
202 | innerValue:OK
203 | onclick
204 |
205 | /*
206 | * Forward evaluated above.
207 | */
208 | .filename:x:/../*/hyper-ide.file-explorer.get-active-item?value
209 |
210 | /*
211 | * Finding file's folder name.
212 | *
213 | * Making sure we get it in canonised form.
214 | */
215 | .folder
216 | split:x:/@.filename?value
217 | =:/
218 | set:x:/@split/0/-
219 | join:x:/@split/*?name
220 | sep:/
221 | set:x:/@join?value
222 | src:/{0}/
223 | :x:/@join?value
224 | trim-left:x:/@join?value
225 | chars:/
226 | set:x:/@.folder?value
227 | src:/{0}
228 | :x:/@trim-left?value
229 |
230 | /*
231 | * Serializing form to figure out new name for file.
232 | */
233 | micro.form.serialize:hyper-ide-rename-file-form
234 |
235 | /*
236 | * Renaming file.
237 | */
238 | move-file:x:/@.filename?value
239 | dest:{0}{1}
240 | :x:/@.folder?value
241 | :x:/@micro.form.serialize/*/name?value
242 |
243 | /*
244 | * Refreshing tree, since folder's content now has changed.
245 | */
246 | hyper-ide.file-explorer.refresh-folder:x:/@.folder?value
247 |
248 | /*
249 | * Updating item in editor.
250 | */
251 | hyper-ide.set-active-filename:{0}{1}
252 | :x:/@.folder?value
253 | :x:/@micro.form.serialize/*/name?value
254 |
255 | /*
256 | * Since refreshing the folder changes the active item
257 | * in our tree view, we set it again here.
258 | */
259 | hyper-ide.file-explorer.set-active-item:{0}{1}
260 | :x:/@.folder?value
261 | :x:/@micro.form.serialize/*/name?value
262 |
263 | /*
264 | * Deleting modal widget, and giving user some feedback.
265 | */
266 | delete-widget:hyper-ide-confirm-rename-file
267 |
268 | button:hyper-ide-rename-cancel
269 | innerValue:Cancel
270 | onclick
271 |
272 | /*
273 | * Simply deleting modal widget.
274 | */
275 | delete-widget:hyper-ide-confirm-rename-file
276 |
277 | onclick
278 |
279 | /*
280 | * Checking if user is trying to rename a file, or a folder.
281 | */
282 | hyper-ide.file-explorer.get-active-item
283 | if
284 | ends-with:x:/@hyper-ide.file-explorer.get-active-item?value
285 | src:/
286 |
287 | /*
288 | * Renaming a folder.
289 | */
290 | hyper-ide._rename-folder
291 |
292 | else
293 |
294 | /*
295 | * Renaming a file.
296 | */
297 | hyper-ide._rename-file
298 |
--------------------------------------------------------------------------------
/help-files/Hyper IDE/05 - Hyper IDE API.md:
--------------------------------------------------------------------------------
1 | ## Hyper IDE's API
2 |
3 | Hyper IDE has a rich API, which allows you to automate tasks, and extend it as you see fit. Below is a list
4 | of all Active Events that are available when Hyper IDE is open.
5 |
6 | * __[hyper-ide.is-open]__ - Return true if Hyper IDE is open
7 | * __[hyper-ide.file-explorer.select-path]__ - Expands the specified __[\_arg]__ path in your file explorer, and starts the correct editor, if you are giving it a path to a file
8 | * __[hyper-ide.file-explorer.set-active-item]__ - Sets the active file explorer item. Notice, will not expand folders as the above event will, but expects the specified __[\_arg]__ folder/file to already have been loaded in your file explorer
9 | * __[hyper-ide.file-explorer.get-active-item]__ - Returns the active file explorer item to caller
10 | * __[hyper-ide.file-explorer.refresh-active-folder]__ - Reloads the currently active item in your file explorer
11 | * __[hyper-ide.active-editor.get-filepath]__ - Returns the path of the currently edited file, if any
12 | * __[hyper-ide.active-editor.get-id]__ - Returns the ID of the currently active editor, if any
13 | * __[hyper-ide.active-editor.get-code]__ - Returns the code for the currently active editor, if any
14 | * __[hyper-ide.active-editor.set-code]__ - Sets the code for the currently active editor
15 | * __[hyper-ide.active-editor.is-clean]__ - Returns false if your currently active editor has unsaved changes
16 | * __[hyper-ide.active-editor.set-clean]__ - Sets the clean flag for your currently active editor, pass in "true" or "false"
17 | * __[hyper-ide.active-editor.save]__ - Saves your currently active editor
18 | * __[hyper-ide.active-editor.close]__ - Closes your currently active editor
19 | * __[hyper-ide.editors.get-open-editors]__ - Returns the file path to all open editors
20 | * __[hyper-ide.editors.set-active-editor]__ - Sets the currently active editor, requires the editor to already have been opened
21 | * __[hyper-ide.editors.activate-previous-editor]__ - Activates the previous available editor
22 | * __[hyper-ide.editors.activate-next-editor]__ - Activates the next available editor
23 | * __[hyper-ide.editors.close]__ - Closes one or more editors. Pass in __[filter]__ being a file/folder path which will declare which editors it will close, and __[exact]__ being boolean true, if you only want to close the editor with the exact matching __[filter]__ path
24 | * __[desktop.help.display]__ - Displays the help files for Hyper IDE. Optionally pass in __[file]__ to open a specific help file.
25 |
26 | Notice that Hyper IDE will also raise the **[hyper-ide.file-explorer.item-changed]** Active Event when the file
27 | explorer's active item has been changed. The new item selected in the file explorer, will be available as **[\_arg]**
28 | from within your lambda event.
29 |
30 | ### Creating plugins for Hyper IDE
31 |
32 | Hyper IDE easily allows you to create your own plugins. These plugins can be global plugins, at which point
33 | they're available all the time - Or they can be plugins that are only available if some specific type of editor
34 | is your active editor. Below is an example of a plugin that will show an information bubble window, but which will
35 | only be available if your edited file is an HTML type of file.
36 |
37 | ```hyperlambda-snippet
38 | /*
39 | * Creates our bubble window HTML plugin.
40 | */
41 | create-event:hyper-ide.plugins.htmlmixed.is-html-file
42 | return
43 | button
44 | innerValue:@""
45 | title:Shows an information window
46 | onclick
47 |
48 | /*
49 | * Displays an information "bubble" window.
50 | */
51 | micro.windows.info:This is an HTML file!
52 | ```
53 |
54 | If you evaluate the code above, for then to edit an HTML file, you will see that you've got an additional
55 | toolbar button, which once clicked displays an information bubble window for you.
56 |
57 | Hyper IDE will automatically figure out which plugins to load according to their Active Event names. The naming
58 | convention for this is as follows `hyper-ide.plugins.code-mirror-mode.plugin-name`. From our above example,
59 | `htmlmixed` is the CodeMirror mode name for files that are HTML files. Hence, Hyper IDE will load up that
60 | additional plugin button, every time you open an HTML file for editing. To create a similar information bubble
61 | window for CSS files, you can do so with the following code.
62 |
63 | ```hyperlambda-snippet
64 | /*
65 | * Creates our bubble window CSS plugin.
66 | */
67 | create-event:hyper-ide.plugins.css.is-css-file
68 | return
69 | button
70 | innerValue:@""
71 | title:Shows an information window
72 | onclick
73 |
74 | /*
75 | * Displays an information "bubble" window.
76 | */
77 | micro.windows.info:This is a CSS file!
78 | ```
79 |
80 | If you want to create a plugin which is only available when a folder is selected in your file explorer, you
81 | can change the above `.plugins.` to `.folder-plugin.`. If you want to create a plugin which is only available
82 | when some specific folder is activated, you'll need to use the **[hyper-ide.file-explorer.get-active-item]**
83 | lambda event to determine which folder has been activated, before returning your plugin to caller. The
84 | **[hyper-ide.folder-plugins.create-module]** plugin illustrates this, since it's only available when the _"/modules/"_
85 | folder is activated.
86 |
87 | Notice, even though most plugins in Hyper IDE are simple buttons, creating any type of plugin, being for instance
88 | a textbox, or a select widget, is easily accomplished, as long as whatever you return from your plugin Active Event,
89 | can somehow be stuffed inside of a Micro _"strip"_ widget.
90 |
91 | If you want to create a global plugin for Hyper IDE, which is always always available, regardless of which file or
92 | folder object is active in your file explorer, you can do so with the following naming
93 | convention `hyper-ide.global-plugin.YOUR-PLUGIN-NAME`.
94 |
95 | ### Hyper IDE as a plugin
96 |
97 | You can also consume Hyper IDE in your own application, as an extension widget. This extension widget's Active Event
98 | name is **[hyper-ide.widgets.ide]**. This allows you to in its entirely load up Hyper IDE as an extension widget
99 | in your own applications. Whether or not this makes sense or not, is arguably questionable. However, it may have
100 | uses for you, when debugging your applications - So I've chosen to allow for it. Notice, if you consume Hyper IDE
101 | as an extension widget, you're responsible yourself to load up its CSS file. This can be done with the following
102 | code.
103 |
104 | ```hyperlambda-snippet
105 | /*
106 | * Loads Hyper IDE's CSS file, for then to instantiate the Hyper IDE
107 | * extension widget inside a modal widget.
108 | */
109 | p5.web.include-css-file:@IDE/media/main.css
110 | create-widgets
111 | micro.widgets.modal
112 | class:micro-widgets-modal large
113 | widgets
114 |
115 | /*
116 | * The Hyper IDE extension widget.
117 | */
118 | hyper-ide.widgets.ide
119 | ```
120 |
121 | By explicitly choosing to not load Hyper IDE's CSS file, this allows you to override the CSS classes used for the
122 | editor, to customise its appearance, by creating your own CSS file(s), and change its content. Notice, you can
123 | only instantiate Hyper IDE once on your page. Hence, make sure you check to see if it's already open, before you
124 | create your extension widget. Evaluating the above code while Hyper IDE is already open, will raise an exception.
125 |
126 | ### Template project types
127 |
128 | If you select the _"/modules/"_ folder, you'll see a _"create new module"_ plugin. By default, there are only a
129 | handful of different project types here, such as _"hello-world"_, _"datagrid"_ and _"angular-todo"_. However,
130 | these are simple template file, which you can extend yourself, with your own module types. To create your own
131 | template module types, create a new file encapsulating your template in your _"/modules/hyper-ide/helpers/app-template/"_
132 | folder. Such template projects can also require additional settings from the user. This can be seen in
133 | [this file](hyper-ide?path=/modules/hyper-ide/helpers/app-templates/datagrid.hl) for instance, which has a
134 | **[.settings]** segment, which is expected to be a lambda object, containing additional widgets, the user
135 | needs to interact with, as he creates a new module.
136 |
137 | As the user creates a new module, your new module template file, will be evaluated with a **[name]** argument,
138 | which is the name of the template he chose to create. In addition, all additional **[.settings]** widget's values
139 | will be passed in, allowing you to retrieve these additional settings, as the user supplied them during creation.
140 | Below is a screenshot of how the process of creating such a new template module might appear to the end user.
141 |
142 | https://phosphorusfive.files.wordpress.com/2018/03/new-module-screenshot.png
143 |
144 | Such template projects might provide a valuable addon to avoid having to repeat repetetive tasks which
145 | are for some reasons necessary to create boiler plate code for, every time you create a new module.
146 |
147 | **Notice**, if you add such template new module extensions, you should take care of not loosing your files
148 | as you upgrade Hyper IDE and/or Phosphorus Five.
149 |
150 | ### Adding your own shell snippets
151 |
152 | You can also extend Hyper IDE with custom shell snippets, which allows you to evaluate some piece of bash
153 | code, from within the context of a folder. This is done by adding your shell bash file
154 | inside [this folder](hyper-ide?path=/modules/hyper-ide/helpers/shell-snippets/). These are the shell snippets
155 | the user can select from as he clicks the _"Open terminal window"_ plugin button for a folder.
156 |
157 | Such snippets can be shell commands that checks in your code to a Term Service server for instance, or starts
158 | a build process. All such shell snippets will be executed from within the context of the currently selected
159 | folder from your file explorer. Below is a screenshot of which snippets are available out of the box.
160 |
161 | https://phosphorusfive.files.wordpress.com/2018/03/shell-snippets-screenshot.png
162 |
163 | **Notice**, if you add such shell snippets extensions, you should take care of not loosing your files
164 | as you upgrade Hyper IDE and/or Phosphorus Five.
165 |
166 | **Notice** - Instead of adding your own template shell snippets, you can also directly execute a _".sh"_ file.
167 | This allows you to create for instance compiler scripts, and similar types of scripts, as an integral part
168 | of your projects, for then to evaluate them directly by opening up the file, and evaluating it due to
169 | the _"execute shell snippet file"_ plugin, that's distributed directly out of the box with Hyper IDE. You can
170 | also easily create your own plugin, which doesn't have to be a part of Hyper IDE, but which creates a plugin
171 | Active Event to evaluate _".bat"_ files, if you're on a windows system.
172 |
173 | ### Extending the general toolbars
174 |
175 | Even though you'd probably most of the times want to create specific file types of extension toolbar buttons,
176 | you can also modify the default toolbar buttons, by adding your button/widget into the correct folder
177 | inside of [this folder](/hyper-ide?path=/modules/hyper-ide/helpers/toolbars/). Here you can see all the different
178 | toolbar sections, encapsulated inside of their correct folders, allowing you to globally extend your toolbar
179 | as you see fit.
180 |
181 | **Notice**, if you add such toolbar extensions, you should take care of not loosing your files
182 | as you upgrade Hyper IDE and/or Phosphorus Five.
183 |
184 |
--------------------------------------------------------------------------------
/startup/plugins/hyper-ide.folder-plugins.create-module.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Creates the __[hyper-ide.folder-plugin.create-module]__ Active Event.
3 | */
4 |
5 | /*
6 | * Creates our _"create new module plugin"_ button. This button is only visible
7 | * if the currently selected object in your file explorer is the _"/modules/"_ folder.
8 | *
9 | * When this button is clicked, it will guide the user through a wizard, allowing
10 | * him to create a new module, from a list of _"template modules"_, which you
11 | * can find in the _"/modules/hyper-ide/helpers/app-templates/"_ folder.
12 | */
13 | create-event:hyper-ide.folder-plugin.create-module
14 |
15 | /*
16 | * Verifying we're in our "/modules/" folder, and if not, returning early.
17 | *
18 | * This is to prevent this plugin to be visible in any other folders than our "/modules/" folder.
19 | */
20 | hyper-ide.file-explorer.get-active-item
21 | if:x:/@hyper-ide.file-explorer.get-active-item?value
22 | !=:/modules/
23 | return
24 |
25 | /*
26 | * Returning plugin button to caller.
27 | */
28 | return
29 | button
30 | innerValue:@""
31 | title:Create new module
32 | events
33 |
34 | /*
35 | * "API" event for allowing other parts of the system to initiate
36 | * "app creation process".
37 | *
38 | * Requires [app-type].
39 | */
40 | hyper-ide._plugins.create-app
41 |
42 | /*
43 | * Sanity checking arguments.
44 | */
45 | micro.lambda.contract.min:x:/..
46 | app-type:string
47 |
48 | /*
49 | * Simply raising [onclick] for button, for then to parametrise select
50 | * drop down list, with whatever [app-type] was specified.
51 | */
52 | p5.web.widgets.ajax-events.raise:x:/../*/_event?value
53 | onclick
54 | p5.web.widgets.find-like:hyper-ide-new-module-template-type
55 | value:/{0}.hl
56 | :x:/../*/app-type?value
57 | get-widget-property:x:/-/*/*?value
58 | value
59 | set-widget-property:hyper-ide-new-module-template-type
60 | value:x:/@get-widget-property/*/*?value
61 |
62 | onclick
63 |
64 | /*
65 | * Showing a modal window, asking user to supply a name for his project.
66 | */
67 | create-widgets
68 | micro.widgets.modal:hyper-ide-new-module-modal
69 | widgets
70 | h3
71 | innerValue:Create new module
72 | p
73 | innerValue:@"Provide a name for your module, such as foo-bar, which also will become its URL.
74 | Then choose a template type for your app."
75 | micro.widgets.wizard-form
76 | text
77 | info:Name
78 | .data-field:name
79 | onkeydown:@"if (event.keyCode == 13) {p5.$('hyper-ide-create-module-button').raise('onclick');return false;}"
80 | oninit
81 |
82 | /*
83 | * Setting initial focus to "name" textbox.
84 | */
85 | micro.page.set-focus:x:/../*/_event?value
86 |
87 | select:hyper-ide-new-module-template-type
88 | info:Type
89 | .data-field:type
90 | onchange
91 |
92 | /*
93 | * Re-databinding settings for module type.
94 | */
95 | hyper-ide.new-module.template-type-changed
96 |
97 | oninit
98 |
99 | /*
100 | * Creating one option element for each app-template that exists in installation.
101 | */
102 | list-files:@IDE/helpers/app-templates/
103 | filter:.hl
104 | for-each:x:/@list-files/*?name
105 | split:x:/@_dp?value
106 | =:/
107 | =:.
108 | if:x:/@split/0/-2?name
109 | =:hello-world
110 | add:x:/..for-each/*/create-widget
111 | src:selected
112 | create-widget
113 | parent:x:/../*/_event?value
114 | element:option
115 | value:x:/@_dp?value
116 | innerValue:x:/@split/0/-2?name
117 |
118 | /*
119 | * Invoking our "databind template type" event initially.
120 | */
121 | hyper-ide.new-module.template-type-changed
122 |
123 | events
124 |
125 | /*
126 | * Invoked when the template type is changed.
127 | *
128 | * Rebinds the template options widget.
129 | */
130 | hyper-ide.new-module.template-type-changed
131 |
132 | /*
133 | * Retrieving the select list's selected value, and databinding
134 | * the "template type settings" accordingly.
135 | *
136 | * But first, clearing any previously created additional settings, for
137 | * previously selected template types.
138 | */
139 | clear-widget:hyper-ide-new-module-template-settings
140 | get-widget-property:hyper-ide-new-module-template-type
141 | value
142 | load-file:x:/@get-widget-property/*/*?value
143 | if:x:/@load-file/*/*/.settings
144 |
145 | /*
146 | * Selected template type contains additional settings.
147 | */
148 | add:x:/./*/create-widget/*/widgets
149 | src:x:/@load-file/*/*/.settings/*
150 | create-widget
151 | parent:hyper-ide-new-module-template-settings
152 | widgets
153 |
154 | container:hyper-ide-new-module-template-settings
155 |
156 | div
157 | class:right
158 | widgets
159 | div
160 | class:strip
161 | widgets
162 | button:hyper-ide-create-module-button
163 | innerValue:Create
164 | onclick
165 |
166 | /*
167 | * Creating a new default "empty module", with all the relevant base files,
168 | * necessary to tie things up.
169 | *
170 | * But first verifying the name of the module is something we can accept.
171 | */
172 | micro.form.serialize:hyper-ide-new-module-modal
173 | match:x:/@micro.form.serialize/*/name?value
174 | src:regex:/^[-a-z_0-9]{3,}$/
175 | if:x:/@match/*?count
176 | =:int:0
177 |
178 | /*
179 | * Not a valid module name, informing user, and returning early.
180 | */
181 | micro.windows.info:Only use a-z, 0-9, _ or - characters, and use at least 3 characters.
182 | class:micro-windows-info warning
183 | return
184 |
185 | /*
186 | * Checking if a module with the same exists from before.
187 | */
188 | if
189 | fetch:x:/0/0?value
190 | folder-exists:/modules/{0}/
191 | :x:/@micro.form.serialize/*/name?value
192 |
193 | /*
194 | * Not a valid module name, informing user, and returning early.
195 | */
196 | micro.windows.info:That module exists from before
197 | class:micro-windows-info warning
198 | return
199 |
200 |
201 | /*
202 | * Invoking file responsible for creating user's selected module type,
203 | * which depends upon which application template type user has selected.
204 | */
205 | add:x:/+
206 | src:x:/@micro.form.serialize/*(!/type)
207 | micro.evaluate.file:x:/@micro.form.serialize/*/type?value
208 |
209 |
210 | /*
211 | * Evaluating startup file, if it exists.
212 | */
213 | if
214 | fetch:x:/0/0?value
215 | file-exists:/modules/{0}/install.hl
216 | :x:/@micro.form.serialize/*/name?value
217 | micro.evaluate.file:/modules/{0}/install.hl
218 | :x:/@micro.form.serialize/*/name?value
219 | if
220 | fetch:x:/0/0?value
221 | file-exists:/modules/{0}/startup.hl
222 | :x:/@micro.form.serialize/*/name?value
223 | micro.evaluate.file:/modules/{0}/startup.hl
224 | :x:/@micro.form.serialize/*/name?value
225 |
226 |
227 | /*
228 | * Deleting modal window, refreshing treeview, and informing user.
229 | */
230 | delete-widget:hyper-ide-new-module-modal
231 | micro.windows.info:Your module was successfully created
232 | class:micro-windows-info success
233 | micro.widgets.tree.refresh-items:hyper-ide-folder-tree-browser
234 | items
235 | /modules/
236 |
237 | /*
238 | * Immediately start editing our "launch.hl" file, which we'll need to
239 | * to by first selecting module's folder (to expand it), and then selecting
240 | * module's "launch.hl" file.
241 | */
242 | add:x:/+/*/items
243 | src:/modules/{0}/
244 | :x:/@micro.form.serialize/*/name?value
245 | micro.widgets.tree.toggle-items:hyper-ide-folder-tree-browser
246 | force-expand:true
247 | items
248 | add:x:/+/*/items
249 | src:/modules/{0}/launch.hl
250 | :x:/@micro.form.serialize/*/name?value
251 | micro.widgets.tree.select-items:hyper-ide-folder-tree-browser
252 | items
253 |
254 | button
255 | innerValue:Close
256 | onclick
257 |
258 | /*
259 | * Simply deletes modal widget.
260 | */
261 | delete-widget:hyper-ide-new-module-modal
262 |
--------------------------------------------------------------------------------
/helpers/create-skin.hl:
--------------------------------------------------------------------------------
1 | /*
2 | * Guides the user through the process of creating a new Micro skin CSS file.
3 | *
4 | * Uses a _"wizard"_ modal widget to help user through the process of creting
5 | * a new _"skin"_ CSS file for Micro. It does this by extracting all CSS variables
6 | * in the main _"micro.css"_ file between the comments _"/* VARIABLES_BEGIN *\/"_
7 | * and _"/* VARIABLES_END *\/"_", and allows the user to fill in these values himself.
8 | */
9 | load-file:@MICRO/media/micro.css
10 |
11 |
12 |
13 |
14 |
15 | /*
16 | * Finding all CSS variables that are available to us.
17 | */
18 | split:x:/@load-file/*?value
19 | =:":root"
20 | split:x:/@split/2?name
21 | =:{
22 | =:}
23 | split:x:/@split/1?name
24 | =:*/
25 | split:x:/@split/1?name
26 | =:"\r\n"
27 | .vars
28 | for-each:x:/@split/*?name
29 | trim:x:/@_dp?value
30 | chars:"\t -;"
31 | split:x:/@trim?value
32 | =:":"
33 | trim:x:/@split/1?name
34 | chars:"; \t\r\n"
35 | add:x:/@.vars
36 | src:"{0}:{1}"
37 | :x:/@split/0?name
38 | :x:/@trim?value
39 | set:x:/@.vars/*/=
40 |
41 |
42 |
43 |
44 | /*
45 | * Applying all CSS variables into our tab widget.
46 | */
47 | .no:int:1
48 | while:x:/@.vars/*
49 | eval-x:x:/+/*/*/*/name
50 | add:x:/../*/create-widgets/*/*/*/micro.widgets.tab
51 | src
52 | view
53 | name:Settings {0}
54 | :x:/@.no?value
55 | widgets
56 | apply:x:/../*/create-widgets/*/*/widgets/*/micro.widgets.tab/0/-/*/widgets
57 | src:x:/@.vars/*/[0,7]
58 | template
59 | div
60 | class:strip fill
61 | widgets
62 | label
63 | class:description-9
64 | {innerValue}:x:?name
65 | input
66 | type:text
67 | {value}:x:?value
68 | {.data-field}:x:?name
69 | set:x:/@.no?value
70 | +:x:/@.no?value
71 | _:1
72 | set:x:/@.vars/*/[0,7]
73 |
74 |
75 |
76 |
77 |
78 | /*
79 | * Adding the "preview" view.
80 | */
81 | add:x:/../*/create-widgets/**/micro.widgets.tab
82 | src
83 | view
84 | name:Preview
85 | widgets
86 | div
87 | oninit
88 |
89 | /*
90 | * Injecting a style tag overriding the default skin
91 | * with whatever settings user supplied.
92 | *
93 | * First creating our skin's CSS.
94 | */
95 | micro.form.serialize:hyper-ide-create-skin-wizard-modal
96 | .css:@""
106 | :x:/@.css?value
107 | create-widgets
108 | text:x:/@.css?value
109 | parent:x:/../*/_event?value
110 |
111 |
112 | widgets
113 |
114 | /*
115 | * Then illustrating samples of most of our widgets, to
116 | * simply show off how the skin will look like.
117 | */
118 | div:hyper-ide-preview-widget
119 | class:hyper-ide-preview-skin background air-left air-right air-bottom air-inner
120 | widgets
121 | h2
122 | innerValue:Header H2
123 | p
124 | innerValue:@"Some paragraph with inline code and
125 | a hyperlink and a strong and emphasized string."
126 | pre
127 | innerValue:@"Some pre formatted
128 | piece of text"
129 | div
130 | class:strip fill
131 | widgets
132 | label
133 | innerValue:Label
134 | input
135 | type:text
136 | placeholder:Some piece of input ...
137 | label
138 | widgets
139 | span
140 | innerValue:Check
141 | input
142 | type:checkbox
143 | div
144 | class:strip fill
145 | widgets
146 | label
147 | innerValue:Disabled
148 | input
149 | type:text
150 | disabled
151 | value:Some piece of input
152 | label
153 | widgets
154 | span
155 | innerValue:Check
156 | input
157 | disabled
158 | checked
159 | type:checkbox
160 | label
161 | widgets
162 | span
163 | innerValue:Radio button 1
164 | input
165 | type:radio
166 | name:hyper-ide-preview-rdo
167 | label
168 | widgets
169 | span
170 | innerValue:Radio button 2
171 | input
172 | type:radio
173 | name:hyper-ide-preview-rdo
174 | label
175 | widgets
176 | span
177 | innerValue:Disabled radio button
178 | input
179 | type:radio
180 | disabled
181 | name:hyper-ide-preview-rdo
182 | div
183 | class:shaded rounded air-inner bg
184 | innerValue:Shaded and rounded div with bg
185 | div 186 | class:air-inner success 187 | innerValue:Success div
188 | div 189 | class:warning air-inner 190 | innerValue:Warning div
191 | button 192 | class:air-right 193 | innerValue:Some button 194 | button 195 | class:toggled air-right 196 | innerValue:Toggled button 197 | button 198 | disabled 199 | innerValue:Disabled button 200 | 201 | 202 | 203 | 204 | 205 | /* 206 | * Creating a modal widget, with one textbox for each variable. 207 | */ 208 | create-widgets 209 | micro.widgets.modal:hyper-ide-create-skin-wizard-modal 210 | class:micro-widgets-modal large 211 | widgets 212 | h3 213 | innerValue:Skin wizard 214 | micro.widgets.tab 215 | div 216 | class:strip right air-top 217 | widgets 218 | button 219 | innerValue:Generate 220 | onclick 221 | 222 | /* 223 | * Creating (another) modal widget to ask user for a name for his new skin. 224 | */ 225 | create-widgets 226 | micro.widgets.modal:hyper-ide-create-skin-wizard-modal-name 227 | widgets 228 | h3 229 | innerValue:Provide a name for your skin 230 | div 231 | class:fill strip 232 | widgets 233 | label 234 | innerValue:Name 235 | input:hyper-ide-new-skin-name 236 | type:text 237 | placeholder:Name for your skin ... 238 | onkeydown:@"if (event.keyCode == 13) {p5.$('hyper-ide-save-new-skin').raise('onclick');return false;} else if (event.keyCode == 27) {p5.$('hyper-ide-save-new-skin-cancel').raise('onclick');return false;}" 239 | oninit 240 | 241 | /* 242 | * Setting initial focus to textbox. 243 | */ 244 | micro.page.set-focus:x:/../*/_event?value 245 | 246 | div 247 | class:right strip 248 | widgets 249 | button:hyper-ide-save-new-skin 250 | innerValue:Save 251 | onclick 252 | 253 | /* 254 | * Serializing form and saving to a skin file. 255 | * 256 | * Notice, to avoid serializing preview widgets, we delete them first. 257 | * 258 | */ 259 | delete-widget:hyper-ide-preview-widget 260 | micro.form.serialize:hyper-ide-create-skin-wizard-modal 261 | 262 | /* 263 | * Building CSS. 264 | */ 265 | .css:@"/* CSS variables */ 266 | :root {" 267 | for-each:x:/@micro.form.serialize/* 268 | set:x:/@.css?value 269 | src:"{0}--{1}:{2};" 270 | :x:/@.css?value 271 | :x:/@_dp/#?name 272 | :x:/@_dp/#?value 273 | set:x:/@.css?value 274 | src:"{0}}}" 275 | :x:/@.css?value 276 | 277 | /* 278 | * Retrieving and sanity checking filename. 279 | */ 280 | get-widget-property:hyper-ide-new-skin-name 281 | value 282 | match:x:/@get-widget-property/*/*?value 283 | src:regex:/^[-_a-z0-9]+$/i 284 | if:x:/@match/*?count 285 | =:int:0 286 | or:x:/@match/0?name 287 | =: 288 | 289 | /* 290 | * Not a legal name for a file. 291 | */ 292 | micro.windows.info:Not a legal name for your skin 293 | class:micro-windows-info warning 294 | return 295 | 296 | /* 297 | * Saving skin file. 298 | */ 299 | save-file:@MICRO/media/skins/{0}.css 300 | :x:/@get-widget-property/*/*?value 301 | src:x:/@.css?value 302 | 303 | /* 304 | * Deleting both modal widgets. 305 | */ 306 | delete-widget:hyper-ide-create-skin-wizard-modal-name 307 | delete-widget:hyper-ide-create-skin-wizard-modal 308 | 309 | /* 310 | * Refreshing tree view's active folder, which should be the skin folder. 311 | */ 312 | hyper-ide.file-explorer.refresh-active-folder 313 | 314 | /* 315 | * Opening up our CSS file for editing. 316 | */ 317 | hyper-ide.file-explorer.select-path:/modules/micro/media/skins/{0}.css 318 | :x:/@get-widget-property/*/*?value 319 | 320 | button:hyper-ide-save-new-skin-cancel 321 | innerValue:Cancel 322 | onclick 323 | 324 | /* 325 | * Simply deleting modal widget. 326 | */ 327 | delete-widget:hyper-ide-create-skin-wizard-modal-name 328 | 329 | button 330 | innerValue:Cancel 331 | onclick 332 | 333 | /* 334 | * Simply deleting modal widget. 335 | */ 336 | delete-widget:hyper-ide-create-skin-wizard-modal 337 | --------------------------------------------------------------------------------