├── images
└── puppy.jpg
├── plugin.html
├── README.md
├── package.json
├── style.css
├── minimap_test.js
└── minimap.js
/images/puppy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketinventor/ace-minimap/HEAD/images/puppy.jpg
--------------------------------------------------------------------------------
/plugin.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ace-minimap
2 | A plugin to add a minimap to ace text editor
3 |
4 | Based on https://github.com/laughinghan/minimap/blob/master/public/minimap.js and https://github.com/atom-minimap/minimap.
5 | See open & closed issues for progress.
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ace Minimap",
3 | "description": "Add a minimap to ace text editor",
4 | "version": "0.0.1",
5 | "author": "Elliot Gerchak",
6 | "contributors": [
7 | {
8 | "name": "",
9 | "email": ""
10 | }
11 | ],
12 | "repository": {
13 | "type": "git",
14 | "url": "https://github.com/rocketinventor/ace-minimap"
15 | },
16 | "plugins": {
17 | "minimap": {}
18 | },
19 | "categories": ["utilities"],
20 | "licenses": []
21 | }
22 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | #minimap {
2 | opacity: 0.7;
3 | position: fixed;
4 | z-index: 65534;
5 | -webkit-user-select: none;
6 | -moz-user-select: none;
7 | -ms-user-select: none;
8 | width: 92px;
9 | height: 400px;
10 | font-size: 6px;
11 | box-sizing: border-box;
12 | color: white;
13 | }
14 |
15 | #youarehere {
16 | background-color: #888;
17 | opacity: .2;
18 | position: fixed;
19 | z-index: 65535;
20 | -webkit-user-select: none;
21 | -moz-user-select: none;
22 | -ms-user-select: none;
23 | box-sizing: border-box;
24 | border: 2px solid black;
25 | width: 92px;
26 | height: 63.3px;
27 | }
28 |
--------------------------------------------------------------------------------
/minimap_test.js:
--------------------------------------------------------------------------------
1 | "use client";
2 | "use mocha";
3 |
4 | define(function(require, exports, module) {
5 | main.consumes = ["plugin.test", "minimap"];
6 | main.provides = [];
7 | return main;
8 |
9 | function main(options, imports, register) {
10 | var test = imports["plugin.test"];
11 | var minimap = imports.minimap;
12 |
13 | var describe = test.describe;
14 | var it = test.it;
15 | var before = test.before;
16 | var after = test.after;
17 | var beforeEach = test.beforeEach;
18 | var afterEach = test.afterEach;
19 | var assert = test.assert;
20 | var expect = test.expect;
21 |
22 | /***** Initialization *****/
23 |
24 | describe("The module", function(){
25 | this.timeout(2000);
26 |
27 | beforeEach(function() {
28 | });
29 |
30 | afterEach(function () {
31 | });
32 |
33 | it("has a sync test", function() {
34 | });
35 |
36 | it("has a async test", function(done) {
37 | done();
38 | });
39 |
40 | it("has a failing test", function() {
41 | assert.equal(10, 11);
42 | });
43 | });
44 |
45 | register(null, {});
46 | }
47 | });
--------------------------------------------------------------------------------
/minimap.js:
--------------------------------------------------------------------------------
1 | define(function(require, exports, module) {
2 | main.consumes = [
3 | "Plugin", "ui", "commands", "menus", "preferences", "settings"
4 | ];
5 | main.provides = ["minimap"];
6 | return main;
7 |
8 | function main(options, imports, register) {
9 | var Plugin = imports.Plugin;
10 | var ui = imports.ui;
11 | var menus = imports.menus;
12 | var commands = imports.commands;
13 | var settings = imports.settings;
14 | var prefs = imports.preferences;
15 |
16 | /***** Initialization *****/
17 |
18 | var plugin = new Plugin("Ajax.org", main.consumes);
19 | var emit = plugin.getEmitter();
20 |
21 | var showing;
22 | function load() {
23 | commands.addCommand({
24 | name: "minimap",
25 | bindKey: { mac: "Command-M", win: "Ctrl-M" },
26 | isAvailable: function(){ return true; },
27 | exec: function() {
28 | showing ? hide() : show();
29 | }
30 | }, plugin);
31 |
32 | menus.addItemByPath("View/Minimap", new ui.item({
33 | command: "minimap"
34 | }), 400, plugin);
35 |
36 | settings.on("read", function(e){
37 | settings.setDefaults("user/ace-minimap", [
38 | ["Theme", "ace_editor"],
39 | // ["Opacity", ".70"],
40 | // ["Autostart", "1"]
41 | ]);
42 | });
43 |
44 | prefs.add({
45 | "General" : {
46 | position: 10,
47 | "Minimap" : {
48 | position: 15,
49 | // "Opacity": {
50 | // type: "dropdown",
51 | // setting: "user/my-plugin/@opacity",
52 | // width: "75",
53 | // position: 2000,
54 | // items: [
55 | // { value: "1.0", caption: "100%" },
56 | // { value: "0.9", caption: "90%" },
57 | // { value: "0.8", caption: "80%" },
58 | // { value: "0.7", caption: "70%" },
59 | // { value: "0.6", caption: "60%" },
60 | // { value: "0.5", caption: "50%" },
61 | // { value: "0.4", caption: "40%" },
62 | // { value: "0.3", caption: "30%" },
63 | // { value: "0.2", caption: "20%" },
64 | // { value: "0.15", caption: "15%" }
65 | // ]
66 | // },
67 | // "Autostart": {
68 | // type: "checkbox",
69 | // setting: "user/my-plugin/@autostart",
70 | // position: 10000
71 | // },
72 | "Background Color": {
73 | type: "dropdown",
74 | setting: "user/ace-minimap/@theme",
75 | position: 1000,
76 | items: [
77 | { value: "ace_editor", caption: "Automatic" },
78 | { value: "black", caption: "Dark" },
79 | { value: "gray", caption: "Light" },
80 | { value: "rgba(0, 0, 0, 0)", caption: "None" }
81 | ]
82 | }
83 | }
84 | }
85 | }, plugin);
86 | }
87 |
88 | var drawn = false;
89 | function draw() {
90 | if (drawn) return;
91 | drawn = true;
92 |
93 | // Insert HTML and CSS
94 |
95 | // find the parentNode of the third scrollbar; it should be the text editor one.
96 | var scrollbar = document.getElementsByClassName("ace_scrollbar-inner")[2];
97 | // make the it wider
98 | scrollbar.parentNode.style.width = "110px";
99 |
100 | // create parent element inside scrollbar
101 | var minimap = document.createElement("div");
102 | scrollbar.appendChild(minimap);
103 | // set Id of new div
104 | minimap.id = "minimap";
105 | minimap = document.getElementById("minimap");
106 |
107 | // create "youarehere"
108 | var youarehere = document.createElement("div");
109 | minimap.appendChild(youarehere);
110 | youarehere.id = "youarehere";
111 |
112 | // Insert CSS
113 | ui.insertCss(require("text!./style.css"), options.staticPrefix, plugin);
114 |
115 | emit("draw");
116 | }
117 |
118 | /***** Methods *****/
119 |
120 | function show() {
121 | draw();
122 |
123 | var div = document.getElementById("minimap");
124 | div.style.display = "block";
125 | if (settings.get("user/ace-minimap/@theme") == "ace_editor") {
126 | var elem1 = document.querySelector("ace_editor");
127 | var color = window.getComputedStyle(elem1, null).backgroundColor;
128 | div.style.backgroundColor = color;
129 | } else {
130 | div.style.backgroundColor = settings.get("user/ace-minimap/@theme");
131 | }
132 |
133 | // var opacity = settings.get("user/ace-minimap/@opacity");
134 | // div.style.opacity = opacity;
135 | // div.setAttribute("style","opacity:" + opacity + ";)");
136 | // div.setAttribute("style"," -moz-opacity:" + opacity + ";)");
137 | // div.setAttribute("style","filter:alpha(opacity=" + opacity * 10 + ")");
138 | // div.setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
139 | // div.innerHTML = settings.get("user/ace-minimap/@theme");
140 |
141 | emit("show");
142 | showing = true;
143 | }
144 |
145 | function hide() {
146 | if (!drawn) return;
147 |
148 | document.getElementById("minimap").style.display = "none";
149 |
150 | emit("hide");
151 | showing = false;
152 | }
153 |
154 | /***** Lifecycle *****/
155 |
156 | plugin.on("load", function() {
157 | load();
158 | // if (settings.get("user/ace-minimap/@autostart") == 1)
159 | show();
160 | });
161 |
162 | plugin.on("unload", function() {
163 | drawn = false;
164 | showing = false;
165 | });
166 |
167 | settings.on("user/ace-minimap/@theme", function(value) {
168 | console.log("Value changed to:", value);
169 | show();
170 | }, plugin);
171 |
172 | /***** Register and define API *****/
173 |
174 | /**
175 | * This is an example of an implementation of a plugin.
176 | * @singleton
177 | */
178 | plugin.freezePublicAPI({
179 | /**
180 | * @property showing whether this plugin is being shown
181 | */
182 | get showing(){ return showing; },
183 |
184 | _events: [
185 | /**
186 | * @event show The plugin is shown
187 | */
188 | "show",
189 |
190 | /**
191 | * @event hide The plugin is hidden
192 | */
193 | "hide"
194 | ],
195 |
196 | /**
197 | * Show the plugin
198 | */
199 | show: show,
200 |
201 | /**
202 | * Hide the plugin
203 | */
204 | hide: hide,
205 | });
206 |
207 | register(null, {
208 | "minimap": plugin
209 | });
210 | }
211 | });
--------------------------------------------------------------------------------