17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/client/libs/CSInterface.js:
--------------------------------------------------------------------------------
1 | /**************************************************************************************************
2 | *
3 | * ADOBE SYSTEMS INCORPORATED
4 | * Copyright 2013 Adobe Systems Incorporated
5 | * All Rights Reserved.
6 | *
7 | * NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the
8 | * terms of the Adobe license agreement accompanying it. If you have received this file from a
9 | * source other than Adobe, then your use, modification, or distribution of it requires the prior
10 | * written permission of Adobe.
11 | *
12 | **************************************************************************************************/
13 |
14 | /** CSInterface - v9.2.0 */
15 |
16 | /**
17 | * Stores constants for the window types supported by the CSXS infrastructure.
18 | */
19 | function CSXSWindowType() {
20 | }
21 |
22 | /** Constant for the CSXS window type Panel. */
23 | CSXSWindowType._PANEL = "Panel";
24 |
25 | /** Constant for the CSXS window type Modeless. */
26 | CSXSWindowType._MODELESS = "Modeless";
27 |
28 | /** Constant for the CSXS window type ModalDialog. */
29 | CSXSWindowType._MODAL_DIALOG = "ModalDialog";
30 |
31 | /** EvalScript error message */
32 | EvalScript_ErrMessage = "EvalScript error.";
33 |
34 | /**
35 | * @class Version
36 | * Defines a version number with major, minor, micro, and special
37 | * components. The major, minor and micro values are numeric; the special
38 | * value can be any string.
39 | *
40 | * @param major The major version component, a positive integer up to nine digits long.
41 | * @param minor The minor version component, a positive integer up to nine digits long.
42 | * @param micro The micro version component, a positive integer up to nine digits long.
43 | * @param special The special version component, an arbitrary string.
44 | *
45 | * @return A new \c Version object.
46 | */
47 | function Version(major, minor, micro, special) {
48 | this.major = major;
49 | this.minor = minor;
50 | this.micro = micro;
51 | this.special = special;
52 | }
53 |
54 | /**
55 | * The maximum value allowed for a numeric version component.
56 | * This reflects the maximum value allowed in PlugPlug and the manifest schema.
57 | */
58 | Version.MAX_NUM = 999999999;
59 |
60 | /**
61 | * @class VersionBound
62 | * Defines a boundary for a version range, which associates a \c Version object
63 | * with a flag for whether it is an inclusive or exclusive boundary.
64 | *
65 | * @param version The \c #Version object.
66 | * @param inclusive True if this boundary is inclusive, false if it is exclusive.
67 | *
68 | * @return A new \c VersionBound object.
69 | */
70 | function VersionBound(version, inclusive) {
71 | this.version = version;
72 | this.inclusive = inclusive;
73 | }
74 |
75 | /**
76 | * @class VersionRange
77 | * Defines a range of versions using a lower boundary and optional upper boundary.
78 | *
79 | * @param lowerBound The \c #VersionBound object.
80 | * @param upperBound The \c #VersionBound object, or null for a range with no upper boundary.
81 | *
82 | * @return A new \c VersionRange object.
83 | */
84 | function VersionRange(lowerBound, upperBound) {
85 | this.lowerBound = lowerBound;
86 | this.upperBound = upperBound;
87 | }
88 |
89 | /**
90 | * @class Runtime
91 | * Represents a runtime related to the CEP infrastructure.
92 | * Extensions can declare dependencies on particular
93 | * CEP runtime versions in the extension manifest.
94 | *
95 | * @param name The runtime name.
96 | * @param version A \c #VersionRange object that defines a range of valid versions.
97 | *
98 | * @return A new \c Runtime object.
99 | */
100 | function Runtime(name, versionRange) {
101 | this.name = name;
102 | this.versionRange = versionRange;
103 | }
104 |
105 | /**
106 | * @class Extension
107 | * Encapsulates a CEP-based extension to an Adobe application.
108 | *
109 | * @param id The unique identifier of this extension.
110 | * @param name The localizable display name of this extension.
111 | * @param mainPath The path of the "index.html" file.
112 | * @param basePath The base path of this extension.
113 | * @param windowType The window type of the main window of this extension.
114 | Valid values are defined by \c #CSXSWindowType.
115 | * @param width The default width in pixels of the main window of this extension.
116 | * @param height The default height in pixels of the main window of this extension.
117 | * @param minWidth The minimum width in pixels of the main window of this extension.
118 | * @param minHeight The minimum height in pixels of the main window of this extension.
119 | * @param maxWidth The maximum width in pixels of the main window of this extension.
120 | * @param maxHeight The maximum height in pixels of the main window of this extension.
121 | * @param defaultExtensionDataXml The extension data contained in the default \c ExtensionDispatchInfo section of the extension manifest.
122 | * @param specialExtensionDataXml The extension data contained in the application-specific \c ExtensionDispatchInfo section of the extension manifest.
123 | * @param requiredRuntimeList An array of \c Runtime objects for runtimes required by this extension.
124 | * @param isAutoVisible True if this extension is visible on loading.
125 | * @param isPluginExtension True if this extension has been deployed in the Plugins folder of the host application.
126 | *
127 | * @return A new \c Extension object.
128 | */
129 | function Extension(id, name, mainPath, basePath, windowType, width, height, minWidth, minHeight, maxWidth, maxHeight,
130 | defaultExtensionDataXml, specialExtensionDataXml, requiredRuntimeList, isAutoVisible, isPluginExtension) {
131 | this.id = id;
132 | this.name = name;
133 | this.mainPath = mainPath;
134 | this.basePath = basePath;
135 | this.windowType = windowType;
136 | this.width = width;
137 | this.height = height;
138 | this.minWidth = minWidth;
139 | this.minHeight = minHeight;
140 | this.maxWidth = maxWidth;
141 | this.maxHeight = maxHeight;
142 | this.defaultExtensionDataXml = defaultExtensionDataXml;
143 | this.specialExtensionDataXml = specialExtensionDataXml;
144 | this.requiredRuntimeList = requiredRuntimeList;
145 | this.isAutoVisible = isAutoVisible;
146 | this.isPluginExtension = isPluginExtension;
147 | }
148 |
149 | /**
150 | * @class CSEvent
151 | * A standard JavaScript event, the base class for CEP events.
152 | *
153 | * @param type The name of the event type.
154 | * @param scope The scope of event, can be "GLOBAL" or "APPLICATION".
155 | * @param appId The unique identifier of the application that generated the event.
156 | * @param extensionId The unique identifier of the extension that generated the event.
157 | *
158 | * @return A new \c CSEvent object
159 | */
160 | function CSEvent(type, scope, appId, extensionId) {
161 | this.type = type;
162 | this.scope = scope;
163 | this.appId = appId;
164 | this.extensionId = extensionId;
165 | }
166 |
167 | /** Event-specific data. */
168 | CSEvent.prototype.data = "";
169 |
170 | /**
171 | * @class SystemPath
172 | * Stores operating-system-specific location constants for use in the
173 | * \c #CSInterface.getSystemPath() method.
174 | * @return A new \c SystemPath object.
175 | */
176 | function SystemPath() {
177 | }
178 |
179 | /** The path to user data. */
180 | SystemPath.USER_DATA = "userData";
181 |
182 | /** The path to common files for Adobe applications. */
183 | SystemPath.COMMON_FILES = "commonFiles";
184 |
185 | /** The path to the user's default document folder. */
186 | SystemPath.MY_DOCUMENTS = "myDocuments";
187 |
188 | /** @deprecated. Use \c #SystemPath.Extension. */
189 | SystemPath.APPLICATION = "application";
190 |
191 | /** The path to current extension. */
192 | SystemPath.EXTENSION = "extension";
193 |
194 | /** The path to hosting application's executable. */
195 | SystemPath.HOST_APPLICATION = "hostApplication";
196 |
197 | /**
198 | * @class ColorType
199 | * Stores color-type constants.
200 | */
201 | function ColorType() {
202 | }
203 |
204 | /** RGB color type. */
205 | ColorType.RGB = "rgb";
206 |
207 | /** Gradient color type. */
208 | ColorType.GRADIENT = "gradient";
209 |
210 | /** Null color type. */
211 | ColorType.NONE = "none";
212 |
213 | /**
214 | * @class RGBColor
215 | * Stores an RGB color with red, green, blue, and alpha values.
216 | * All values are in the range [0.0 to 255.0]. Invalid numeric values are
217 | * converted to numbers within this range.
218 | *
219 | * @param red The red value, in the range [0.0 to 255.0].
220 | * @param green The green value, in the range [0.0 to 255.0].
221 | * @param blue The blue value, in the range [0.0 to 255.0].
222 | * @param alpha The alpha (transparency) value, in the range [0.0 to 255.0].
223 | * The default, 255.0, means that the color is fully opaque.
224 | *
225 | * @return A new RGBColor object.
226 | */
227 | function RGBColor(red, green, blue, alpha) {
228 | this.red = red;
229 | this.green = green;
230 | this.blue = blue;
231 | this.alpha = alpha;
232 | }
233 |
234 | /**
235 | * @class Direction
236 | * A point value in which the y component is 0 and the x component
237 | * is positive or negative for a right or left direction,
238 | * or the x component is 0 and the y component is positive or negative for
239 | * an up or down direction.
240 | *
241 | * @param x The horizontal component of the point.
242 | * @param y The vertical component of the point.
243 | *
244 | * @return A new \c Direction object.
245 | */
246 | function Direction(x, y) {
247 | this.x = x;
248 | this.y = y;
249 | }
250 |
251 | /**
252 | * @class GradientStop
253 | * Stores gradient stop information.
254 | *
255 | * @param offset The offset of the gradient stop, in the range [0.0 to 1.0].
256 | * @param rgbColor The color of the gradient at this point, an \c #RGBColor object.
257 | *
258 | * @return GradientStop object.
259 | */
260 | function GradientStop(offset, rgbColor) {
261 | this.offset = offset;
262 | this.rgbColor = rgbColor;
263 | }
264 |
265 | /**
266 | * @class GradientColor
267 | * Stores gradient color information.
268 | *
269 | * @param type The gradient type, must be "linear".
270 | * @param direction A \c #Direction object for the direction of the gradient
271 | (up, down, right, or left).
272 | * @param numStops The number of stops in the gradient.
273 | * @param gradientStopList An array of \c #GradientStop objects.
274 | *
275 | * @return A new \c GradientColor object.
276 | */
277 | function GradientColor(type, direction, numStops, arrGradientStop) {
278 | this.type = type;
279 | this.direction = direction;
280 | this.numStops = numStops;
281 | this.arrGradientStop = arrGradientStop;
282 | }
283 |
284 | /**
285 | * @class UIColor
286 | * Stores color information, including the type, anti-alias level, and specific color
287 | * values in a color object of an appropriate type.
288 | *
289 | * @param type The color type, 1 for "rgb" and 2 for "gradient".
290 | The supplied color object must correspond to this type.
291 | * @param antialiasLevel The anti-alias level constant.
292 | * @param color A \c #RGBColor or \c #GradientColor object containing specific color information.
293 | *
294 | * @return A new \c UIColor object.
295 | */
296 | function UIColor(type, antialiasLevel, color) {
297 | this.type = type;
298 | this.antialiasLevel = antialiasLevel;
299 | this.color = color;
300 | }
301 |
302 | /**
303 | * @class AppSkinInfo
304 | * Stores window-skin properties, such as color and font. All color parameter values are \c #UIColor objects except that systemHighlightColor is \c #RGBColor object.
305 | *
306 | * @param baseFontFamily The base font family of the application.
307 | * @param baseFontSize The base font size of the application.
308 | * @param appBarBackgroundColor The application bar background color.
309 | * @param panelBackgroundColor The background color of the extension panel.
310 | * @param appBarBackgroundColorSRGB The application bar background color, as sRGB.
311 | * @param panelBackgroundColorSRGB The background color of the extension panel, as sRGB.
312 | * @param systemHighlightColor The highlight color of the extension panel, if provided by the host application. Otherwise, the operating-system highlight color.
313 | *
314 | * @return AppSkinInfo object.
315 | */
316 | function AppSkinInfo(baseFontFamily, baseFontSize, appBarBackgroundColor, panelBackgroundColor, appBarBackgroundColorSRGB, panelBackgroundColorSRGB, systemHighlightColor) {
317 | this.baseFontFamily = baseFontFamily;
318 | this.baseFontSize = baseFontSize;
319 | this.appBarBackgroundColor = appBarBackgroundColor;
320 | this.panelBackgroundColor = panelBackgroundColor;
321 | this.appBarBackgroundColorSRGB = appBarBackgroundColorSRGB;
322 | this.panelBackgroundColorSRGB = panelBackgroundColorSRGB;
323 | this.systemHighlightColor = systemHighlightColor;
324 | }
325 |
326 | /**
327 | * @class HostEnvironment
328 | * Stores information about the environment in which the extension is loaded.
329 | *
330 | * @param appName The application's name.
331 | * @param appVersion The application's version.
332 | * @param appLocale The application's current license locale.
333 | * @param appUILocale The application's current UI locale.
334 | * @param appId The application's unique identifier.
335 | * @param isAppOnline True if the application is currently online.
336 | * @param appSkinInfo An \c #AppSkinInfo object containing the application's default color and font styles.
337 | *
338 | * @return A new \c HostEnvironment object.
339 | */
340 | function HostEnvironment(appName, appVersion, appLocale, appUILocale, appId, isAppOnline, appSkinInfo) {
341 | this.appName = appName;
342 | this.appVersion = appVersion;
343 | this.appLocale = appLocale;
344 | this.appUILocale = appUILocale;
345 | this.appId = appId;
346 | this.isAppOnline = isAppOnline;
347 | this.appSkinInfo = appSkinInfo;
348 | }
349 |
350 | /**
351 | * @class HostCapabilities
352 | * Stores information about the host capabilities.
353 | *
354 | * @param EXTENDED_PANEL_MENU True if the application supports panel menu.
355 | * @param EXTENDED_PANEL_ICONS True if the application supports panel icon.
356 | * @param DELEGATE_APE_ENGINE True if the application supports delegated APE engine.
357 | * @param SUPPORT_HTML_EXTENSIONS True if the application supports HTML extensions.
358 | * @param DISABLE_FLASH_EXTENSIONS True if the application disables FLASH extensions.
359 | *
360 | * @return A new \c HostCapabilities object.
361 | */
362 | function HostCapabilities(EXTENDED_PANEL_MENU, EXTENDED_PANEL_ICONS, DELEGATE_APE_ENGINE, SUPPORT_HTML_EXTENSIONS, DISABLE_FLASH_EXTENSIONS) {
363 | this.EXTENDED_PANEL_MENU = EXTENDED_PANEL_MENU;
364 | this.EXTENDED_PANEL_ICONS = EXTENDED_PANEL_ICONS;
365 | this.DELEGATE_APE_ENGINE = DELEGATE_APE_ENGINE;
366 | this.SUPPORT_HTML_EXTENSIONS = SUPPORT_HTML_EXTENSIONS;
367 | this.DISABLE_FLASH_EXTENSIONS = DISABLE_FLASH_EXTENSIONS; // Since 5.0.0
368 | }
369 |
370 | /**
371 | * @class ApiVersion
372 | * Stores current api version.
373 | *
374 | * Since 4.2.0
375 | *
376 | * @param major The major version
377 | * @param minor The minor version.
378 | * @param micro The micro version.
379 | *
380 | * @return ApiVersion object.
381 | */
382 | function ApiVersion(major, minor, micro) {
383 | this.major = major;
384 | this.minor = minor;
385 | this.micro = micro;
386 | }
387 |
388 | /**
389 | * @class MenuItemStatus
390 | * Stores flyout menu item status
391 | *
392 | * Since 5.2.0
393 | *
394 | * @param menuItemLabel The menu item label.
395 | * @param enabled True if user wants to enable the menu item.
396 | * @param checked True if user wants to check the menu item.
397 | *
398 | * @return MenuItemStatus object.
399 | */
400 | function MenuItemStatus(menuItemLabel, enabled, checked) {
401 | this.menuItemLabel = menuItemLabel;
402 | this.enabled = enabled;
403 | this.checked = checked;
404 | }
405 |
406 | /**
407 | * @class ContextMenuItemStatus
408 | * Stores the status of the context menu item.
409 | *
410 | * Since 5.2.0
411 | *
412 | * @param menuItemID The menu item id.
413 | * @param enabled True if user wants to enable the menu item.
414 | * @param checked True if user wants to check the menu item.
415 | *
416 | * @return MenuItemStatus object.
417 | */
418 | function ContextMenuItemStatus(menuItemID, enabled, checked) {
419 | this.menuItemID = menuItemID;
420 | this.enabled = enabled;
421 | this.checked = checked;
422 | }
423 | //------------------------------ CSInterface ----------------------------------
424 |
425 | /**
426 | * @class CSInterface
427 | * This is the entry point to the CEP extensibility infrastructure.
428 | * Instantiate this object and use it to:
429 | *
430 | *
Access information about the host application in which an extension is running
431 | *
Launch an extension
432 | *
Register interest in event notifications, and dispatch events
433 | *
434 | *
435 | * @return A new \c CSInterface object
436 | */
437 | function CSInterface() {
438 | }
439 |
440 | /**
441 | * User can add this event listener to handle native application theme color changes.
442 | * Callback function gives extensions ability to fine-tune their theme color after the
443 | * global theme color has been changed.
444 | * The callback function should be like below:
445 | *
446 | * @example
447 | * // event is a CSEvent object, but user can ignore it.
448 | * function OnAppThemeColorChanged(event)
449 | * {
450 | * // Should get a latest HostEnvironment object from application.
451 | * var skinInfo = JSON.parse(window.__adobe_cep__.getHostEnvironment()).appSkinInfo;
452 | * // Gets the style information such as color info from the skinInfo,
453 | * // and redraw all UI controls of your extension according to the style info.
454 | * }
455 | */
456 | CSInterface.THEME_COLOR_CHANGED_EVENT = "com.adobe.csxs.events.ThemeColorChanged";
457 |
458 | /** The host environment data object. */
459 | CSInterface.prototype.hostEnvironment = window.__adobe_cep__ ? JSON.parse(window.__adobe_cep__.getHostEnvironment()) : null;
460 |
461 | /** Retrieves information about the host environment in which the
462 | * extension is currently running.
463 | *
464 | * @return A \c #HostEnvironment object.
465 | */
466 | CSInterface.prototype.getHostEnvironment = function () {
467 | this.hostEnvironment = JSON.parse(window.__adobe_cep__.getHostEnvironment());
468 | return this.hostEnvironment;
469 | };
470 |
471 | /** Closes this extension. */
472 | CSInterface.prototype.closeExtension = function () {
473 | window.__adobe_cep__.closeExtension();
474 | };
475 |
476 | /**
477 | * Retrieves a path for which a constant is defined in the system.
478 | *
479 | * @param pathType The path-type constant defined in \c #SystemPath ,
480 | *
481 | * @return The platform-specific system path string.
482 | */
483 | CSInterface.prototype.getSystemPath = function (pathType) {
484 | var path = decodeURI(window.__adobe_cep__.getSystemPath(pathType));
485 | var OSVersion = this.getOSInformation();
486 | if (OSVersion.indexOf("Windows") >= 0) {
487 | path = path.replace("file:///", "");
488 | }
489 | else if (OSVersion.indexOf("Mac") >= 0) {
490 | path = path.replace("file://", "");
491 | }
492 | return path;
493 | };
494 |
495 | /**
496 | * Evaluates a JavaScript script, which can use the JavaScript DOM
497 | * of the host application.
498 | *
499 | * @param script The JavaScript script.
500 | * @param callback Optional. A callback function that receives the result of execution.
501 | * If execution fails, the callback function receives the error message \c EvalScript_ErrMessage.
502 | */
503 | CSInterface.prototype.evalScript = function (script, callback) {
504 | if (callback === null || callback === undefined) {
505 | callback = function (result) { };
506 | }
507 | window.__adobe_cep__.evalScript(script, callback);
508 | };
509 |
510 | /**
511 | * Retrieves the unique identifier of the application.
512 | * in which the extension is currently running.
513 | *
514 | * @return The unique ID string.
515 | */
516 | CSInterface.prototype.getApplicationID = function () {
517 | var appId = this.hostEnvironment.appId;
518 | return appId;
519 | };
520 |
521 | /**
522 | * Retrieves host capability information for the application
523 | * in which the extension is currently running.
524 | *
525 | * @return A \c #HostCapabilities object.
526 | */
527 | CSInterface.prototype.getHostCapabilities = function () {
528 | var hostCapabilities = JSON.parse(window.__adobe_cep__.getHostCapabilities());
529 | return hostCapabilities;
530 | };
531 |
532 | /**
533 | * Triggers a CEP event programmatically. Yoy can use it to dispatch
534 | * an event of a predefined type, or of a type you have defined.
535 | *
536 | * @param event A \c CSEvent object.
537 | */
538 | CSInterface.prototype.dispatchEvent = function (event) {
539 | if (typeof event.data == "object") {
540 | event.data = JSON.stringify(event.data);
541 | }
542 |
543 | window.__adobe_cep__.dispatchEvent(event);
544 | };
545 |
546 | /**
547 | * Registers an interest in a CEP event of a particular type, and
548 | * assigns an event handler.
549 | * The event infrastructure notifies your extension when events of this type occur,
550 | * passing the event object to the registered handler function.
551 | *
552 | * @param type The name of the event type of interest.
553 | * @param listener The JavaScript handler function or method.
554 | * @param obj Optional, the object containing the handler method, if any.
555 | * Default is null.
556 | */
557 | CSInterface.prototype.addEventListener = function (type, listener, obj) {
558 | window.__adobe_cep__.addEventListener(type, listener, obj);
559 | };
560 |
561 | /**
562 | * Removes a registered event listener.
563 | *
564 | * @param type The name of the event type of interest.
565 | * @param listener The JavaScript handler function or method that was registered.
566 | * @param obj Optional, the object containing the handler method, if any.
567 | * Default is null.
568 | */
569 | CSInterface.prototype.removeEventListener = function (type, listener, obj) {
570 | window.__adobe_cep__.removeEventListener(type, listener, obj);
571 | };
572 |
573 | /**
574 | * Loads and launches another extension, or activates the extension if it is already loaded.
575 | *
576 | * @param extensionId The extension's unique identifier.
577 | * @param startupParams Not currently used, pass "".
578 | *
579 | * @example
580 | * To launch the extension "help" with ID "HLP" from this extension, call:
581 | * requestOpenExtension("HLP", "");
582 | *
583 | */
584 | CSInterface.prototype.requestOpenExtension = function (extensionId, params) {
585 | window.__adobe_cep__.requestOpenExtension(extensionId, params);
586 | };
587 |
588 | /**
589 | * Retrieves the list of extensions currently loaded in the current host application.
590 | * The extension list is initialized once, and remains the same during the lifetime
591 | * of the CEP session.
592 | *
593 | * @param extensionIds Optional, an array of unique identifiers for extensions of interest.
594 | * If omitted, retrieves data for all extensions.
595 | *
596 | * @return Zero or more \c #Extension objects.
597 | */
598 | CSInterface.prototype.getExtensions = function (extensionIds) {
599 | var extensionIdsStr = JSON.stringify(extensionIds);
600 | var extensionsStr = window.__adobe_cep__.getExtensions(extensionIdsStr);
601 |
602 | var extensions = JSON.parse(extensionsStr);
603 | return extensions;
604 | };
605 |
606 | /**
607 | * Retrieves network-related preferences.
608 | *
609 | * @return A JavaScript object containing network preferences.
610 | */
611 | CSInterface.prototype.getNetworkPreferences = function () {
612 | var result = window.__adobe_cep__.getNetworkPreferences();
613 | var networkPre = JSON.parse(result);
614 |
615 | return networkPre;
616 | };
617 |
618 | /**
619 | * Initializes the resource bundle for this extension with property values
620 | * for the current application and locale.
621 | * To support multiple locales, you must define a property file for each locale,
622 | * containing keyed display-string values for that locale.
623 | * See localization documentation for Extension Builder and related products.
624 | *
625 | * Keys can be in the
626 | * form key.value="localized string", for use in HTML text elements.
627 | * For example, in this input element, the localized \c key.value string is displayed
628 | * instead of the empty \c value string:
629 | *
630 | *
631 | *
632 | * @return An object containing the resource bundle information.
633 | */
634 | CSInterface.prototype.initResourceBundle = function () {
635 | var resourceBundle = JSON.parse(window.__adobe_cep__.initResourceBundle());
636 | var resElms = document.querySelectorAll('[data-locale]');
637 | for (var n = 0; n < resElms.length; n++) {
638 | var resEl = resElms[n];
639 | // Get the resource key from the element.
640 | var resKey = resEl.getAttribute('data-locale');
641 | if (resKey) {
642 | // Get all the resources that start with the key.
643 | for (var key in resourceBundle) {
644 | if (key.indexOf(resKey) === 0) {
645 | var resValue = resourceBundle[key];
646 | if (key.length == resKey.length) {
647 | resEl.innerHTML = resValue;
648 | }
649 | else if ('.' == key.charAt(resKey.length)) {
650 | var attrKey = key.substring(resKey.length + 1);
651 | resEl[attrKey] = resValue;
652 | }
653 | }
654 | }
655 | }
656 | }
657 | return resourceBundle;
658 | };
659 |
660 | /**
661 | * Writes installation information to a file.
662 | *
663 | * @return The file path.
664 | */
665 | CSInterface.prototype.dumpInstallationInfo = function () {
666 | return window.__adobe_cep__.dumpInstallationInfo();
667 | };
668 |
669 | /**
670 | * Retrieves version information for the current Operating System,
671 | * See http://www.useragentstring.com/pages/Chrome/ for Chrome \c navigator.userAgent values.
672 | *
673 | * @return A string containing the OS version, or "unknown Operation System".
674 | * If user customizes the User Agent by setting CEF command parameter "--user-agent", only
675 | * "Mac OS X" or "Windows" will be returned.
676 | */
677 | CSInterface.prototype.getOSInformation = function () {
678 | var userAgent = navigator.userAgent;
679 |
680 | if ((navigator.platform == "Win32") || (navigator.platform == "Windows")) {
681 | var winVersion = "Windows";
682 | var winBit = "";
683 | if (userAgent.indexOf("Windows") > -1) {
684 | if (userAgent.indexOf("Windows NT 5.0") > -1) {
685 | winVersion = "Windows 2000";
686 | }
687 | else if (userAgent.indexOf("Windows NT 5.1") > -1) {
688 | winVersion = "Windows XP";
689 | }
690 | else if (userAgent.indexOf("Windows NT 5.2") > -1) {
691 | winVersion = "Windows Server 2003";
692 | }
693 | else if (userAgent.indexOf("Windows NT 6.0") > -1) {
694 | winVersion = "Windows Vista";
695 | }
696 | else if (userAgent.indexOf("Windows NT 6.1") > -1) {
697 | winVersion = "Windows 7";
698 | }
699 | else if (userAgent.indexOf("Windows NT 6.2") > -1) {
700 | winVersion = "Windows 8";
701 | }
702 | else if (userAgent.indexOf("Windows NT 6.3") > -1) {
703 | winVersion = "Windows 8.1";
704 | }
705 | else if (userAgent.indexOf("Windows NT 10") > -1) {
706 | winVersion = "Windows 10";
707 | }
708 |
709 | if (userAgent.indexOf("WOW64") > -1 || userAgent.indexOf("Win64") > -1) {
710 | winBit = " 64-bit";
711 | }
712 | else {
713 | winBit = " 32-bit";
714 | }
715 | }
716 |
717 | return winVersion + winBit;
718 | }
719 | else if ((navigator.platform == "MacIntel") || (navigator.platform == "Macintosh")) {
720 | var result = "Mac OS X";
721 |
722 | if (userAgent.indexOf("Mac OS X") > -1) {
723 | result = userAgent.substring(userAgent.indexOf("Mac OS X"), userAgent.indexOf(")"));
724 | result = result.replace(/_/g, ".");
725 | }
726 |
727 | return result;
728 | }
729 |
730 | return "Unknown Operation System";
731 | };
732 |
733 | /**
734 | * Opens a page in the default system browser.
735 | *
736 | * Since 4.2.0
737 | *
738 | * @param url The URL of the page/file to open, or the email address.
739 | * Must use HTTP/HTTPS/file/mailto protocol. For example:
740 | * "http://www.adobe.com"
741 | * "https://github.com"
742 | * "file:///C:/log.txt"
743 | * "mailto:test@adobe.com"
744 | *
745 | * @return One of these error codes:\n
746 | *
\n
747 | *
NO_ERROR - 0
\n
748 | *
ERR_UNKNOWN - 1
\n
749 | *
ERR_INVALID_PARAMS - 2
\n
750 | *
ERR_INVALID_URL - 201
\n
751 | *
\n
752 | */
753 | CSInterface.prototype.openURLInDefaultBrowser = function (url) {
754 | return cep.util.openURLInDefaultBrowser(url);
755 | };
756 |
757 | /**
758 | * Retrieves extension ID.
759 | *
760 | * Since 4.2.0
761 | *
762 | * @return extension ID.
763 | */
764 | CSInterface.prototype.getExtensionID = function () {
765 | return window.__adobe_cep__.getExtensionId();
766 | };
767 |
768 | /**
769 | * Retrieves the scale factor of screen.
770 | * On Windows platform, the value of scale factor might be different from operating system's scale factor,
771 | * since host application may use its self-defined scale factor.
772 | *
773 | * Since 4.2.0
774 | *
775 | * @return One of the following float number.
776 | *
\n
777 | *
-1.0 when error occurs
\n
778 | *
1.0 means normal screen
\n
779 | *
>1.0 means HiDPI screen
\n
780 | *
\n
781 | */
782 | CSInterface.prototype.getScaleFactor = function () {
783 | return window.__adobe_cep__.getScaleFactor();
784 | };
785 |
786 | /**
787 | * Retrieves the scale factor of Monitor.
788 | *
789 | * Since 8.5.0
790 | *
791 | * @return value >= 1.0f
792 | * only available for windows machine
793 | */
794 | if (navigator.appVersion.toLowerCase().indexOf("windows") >= 0) {
795 | CSInterface.prototype.getMonitorScaleFactor = function () {
796 | return window.__adobe_cep__.getMonitorScaleFactor();
797 | };
798 | }
799 |
800 | /**
801 | * Set a handler to detect any changes of scale factor. This only works on Mac.
802 | *
803 | * Since 4.2.0
804 | *
805 | * @param handler The function to be called when scale factor is changed.
806 | *
807 | */
808 | CSInterface.prototype.setScaleFactorChangedHandler = function (handler) {
809 | window.__adobe_cep__.setScaleFactorChangedHandler(handler);
810 | };
811 |
812 | /**
813 | * Retrieves current API version.
814 | *
815 | * Since 4.2.0
816 | *
817 | * @return ApiVersion object.
818 | *
819 | */
820 | CSInterface.prototype.getCurrentApiVersion = function () {
821 | var apiVersion = JSON.parse(window.__adobe_cep__.getCurrentApiVersion());
822 | return apiVersion;
823 | };
824 |
825 | /**
826 | * Set panel flyout menu by an XML.
827 | *
828 | * Since 5.2.0
829 | *
830 | * Register a callback function for "com.adobe.csxs.events.flyoutMenuClicked" to get notified when a
831 | * menu item is clicked.
832 | * The "data" attribute of event is an object which contains "menuId" and "menuName" attributes.
833 | *
834 | * Register callback functions for "com.adobe.csxs.events.flyoutMenuOpened" and "com.adobe.csxs.events.flyoutMenuClosed"
835 | * respectively to get notified when flyout menu is opened or closed.
836 | *
837 | * @param menu A XML string which describes menu structure.
838 | * An example menu XML:
839 | *
850 | *
851 | */
852 | CSInterface.prototype.setPanelFlyoutMenu = function (menu) {
853 | if ("string" != typeof menu) {
854 | return;
855 | }
856 |
857 | window.__adobe_cep__.invokeSync("setPanelFlyoutMenu", menu);
858 | };
859 |
860 | /**
861 | * Updates a menu item in the extension window's flyout menu, by setting the enabled
862 | * and selection status.
863 | *
864 | * Since 5.2.0
865 | *
866 | * @param menuItemLabel The menu item label.
867 | * @param enabled True to enable the item, false to disable it (gray it out).
868 | * @param checked True to select the item, false to deselect it.
869 | *
870 | * @return false when the host application does not support this functionality (HostCapabilities.EXTENDED_PANEL_MENU is false).
871 | * Fails silently if menu label is invalid.
872 | *
873 | * @see HostCapabilities.EXTENDED_PANEL_MENU
874 | */
875 | CSInterface.prototype.updatePanelMenuItem = function (menuItemLabel, enabled, checked) {
876 | var ret = false;
877 | if (this.getHostCapabilities().EXTENDED_PANEL_MENU) {
878 | var itemStatus = new MenuItemStatus(menuItemLabel, enabled, checked);
879 | ret = window.__adobe_cep__.invokeSync("updatePanelMenuItem", JSON.stringify(itemStatus));
880 | }
881 | return ret;
882 | };
883 |
884 |
885 | /**
886 | * Set context menu by XML string.
887 | *
888 | * Since 5.2.0
889 | *
890 | * There are a number of conventions used to communicate what type of menu item to create and how it should be handled.
891 | * - an item without menu ID or menu name is disabled and is not shown.
892 | * - if the item name is "---" (three hyphens) then it is treated as a separator. The menu ID in this case will always be NULL.
893 | * - Checkable attribute takes precedence over Checked attribute.
894 | * - a PNG icon. For optimal display results please supply a 16 x 16px icon as larger dimensions will increase the size of the menu item.
895 | The Chrome extension contextMenus API was taken as a reference.
896 | https://developer.chrome.com/extensions/contextMenus
897 | * - the items with icons and checkable items cannot coexist on the same menu level. The former take precedences over the latter.
898 | *
899 | * @param menu A XML string which describes menu structure.
900 | * @param callback The callback function which is called when a menu item is clicked. The only parameter is the returned ID of clicked menu item.
901 | *
902 | * @description An example menu XML:
903 | *
914 | */
915 | CSInterface.prototype.setContextMenu = function (menu, callback) {
916 | if ("string" != typeof menu) {
917 | return;
918 | }
919 |
920 | window.__adobe_cep__.invokeAsync("setContextMenu", menu, callback);
921 | };
922 |
923 | /**
924 | * Set context menu by JSON string.
925 | *
926 | * Since 6.0.0
927 | *
928 | * There are a number of conventions used to communicate what type of menu item to create and how it should be handled.
929 | * - an item without menu ID or menu name is disabled and is not shown.
930 | * - if the item label is "---" (three hyphens) then it is treated as a separator. The menu ID in this case will always be NULL.
931 | * - Checkable attribute takes precedence over Checked attribute.
932 | * - a PNG icon. For optimal display results please supply a 16 x 16px icon as larger dimensions will increase the size of the menu item.
933 | The Chrome extension contextMenus API was taken as a reference.
934 | * - the items with icons and checkable items cannot coexist on the same menu level. The former take precedences over the latter.
935 | https://developer.chrome.com/extensions/contextMenus
936 | *
937 | * @param menu A JSON string which describes menu structure.
938 | * @param callback The callback function which is called when a menu item is clicked. The only parameter is the returned ID of clicked menu item.
939 | *
940 | * @description An example menu JSON:
941 | *
942 | * {
943 | * "menu": [
944 | * {
945 | * "id": "menuItemId1",
946 | * "label": "testExample1",
947 | * "enabled": true,
948 | * "checkable": true,
949 | * "checked": false,
950 | * "icon": "./image/small_16X16.png"
951 | * },
952 | * {
953 | * "id": "menuItemId2",
954 | * "label": "testExample2",
955 | * "menu": [
956 | * {
957 | * "id": "menuItemId2-1",
958 | * "label": "testExample2-1",
959 | * "menu": [
960 | * {
961 | * "id": "menuItemId2-1-1",
962 | * "label": "testExample2-1-1",
963 | * "enabled": false,
964 | * "checkable": true,
965 | * "checked": true
966 | * }
967 | * ]
968 | * },
969 | * {
970 | * "id": "menuItemId2-2",
971 | * "label": "testExample2-2",
972 | * "enabled": true,
973 | * "checkable": true,
974 | * "checked": true
975 | * }
976 | * ]
977 | * },
978 | * {
979 | * "label": "---"
980 | * },
981 | * {
982 | * "id": "menuItemId3",
983 | * "label": "testExample3",
984 | * "enabled": false,
985 | * "checkable": true,
986 | * "checked": false
987 | * }
988 | * ]
989 | * }
990 | *
991 | */
992 | CSInterface.prototype.setContextMenuByJSON = function (menu, callback) {
993 | if ("string" != typeof menu) {
994 | return;
995 | }
996 |
997 | window.__adobe_cep__.invokeAsync("setContextMenuByJSON", menu, callback);
998 | };
999 |
1000 | /**
1001 | * Updates a context menu item by setting the enabled and selection status.
1002 | *
1003 | * Since 5.2.0
1004 | *
1005 | * @param menuItemID The menu item ID.
1006 | * @param enabled True to enable the item, false to disable it (gray it out).
1007 | * @param checked True to select the item, false to deselect it.
1008 | */
1009 | CSInterface.prototype.updateContextMenuItem = function (menuItemID, enabled, checked) {
1010 | var itemStatus = new ContextMenuItemStatus(menuItemID, enabled, checked);
1011 | ret = window.__adobe_cep__.invokeSync("updateContextMenuItem", JSON.stringify(itemStatus));
1012 | };
1013 |
1014 | /**
1015 | * Get the visibility status of an extension window.
1016 | *
1017 | * Since 6.0.0
1018 | *
1019 | * @return true if the extension window is visible; false if the extension window is hidden.
1020 | */
1021 | CSInterface.prototype.isWindowVisible = function () {
1022 | return window.__adobe_cep__.invokeSync("isWindowVisible", "");
1023 | };
1024 |
1025 | /**
1026 | * Resize extension's content to the specified dimensions.
1027 | * 1. Works with modal and modeless extensions in all Adobe products.
1028 | * 2. Extension's manifest min/max size constraints apply and take precedence.
1029 | * 3. For panel extensions
1030 | * 3.1 This works in all Adobe products except:
1031 | * * Premiere Pro
1032 | * * Prelude
1033 | * * After Effects
1034 | * 3.2 When the panel is in certain states (especially when being docked),
1035 | * it will not change to the desired dimensions even when the
1036 | * specified size satisfies min/max constraints.
1037 | *
1038 | * Since 6.0.0
1039 | *
1040 | * @param width The new width
1041 | * @param height The new height
1042 | */
1043 | CSInterface.prototype.resizeContent = function (width, height) {
1044 | window.__adobe_cep__.resizeContent(width, height);
1045 | };
1046 |
1047 | /**
1048 | * Register the invalid certificate callback for an extension.
1049 | * This callback will be triggered when the extension tries to access the web site that contains the invalid certificate on the main frame.
1050 | * But if the extension does not call this function and tries to access the web site containing the invalid certificate, a default error page will be shown.
1051 | *
1052 | * Since 6.1.0
1053 | *
1054 | * @param callback the callback function
1055 | */
1056 | CSInterface.prototype.registerInvalidCertificateCallback = function (callback) {
1057 | return window.__adobe_cep__.registerInvalidCertificateCallback(callback);
1058 | };
1059 |
1060 | /**
1061 | * Register an interest in some key events to prevent them from being sent to the host application.
1062 | *
1063 | * This function works with modeless extensions and panel extensions.
1064 | * Generally all the key events will be sent to the host application for these two extensions if the current focused element
1065 | * is not text input or dropdown,
1066 | * If you want to intercept some key events and want them to be handled in the extension, please call this function
1067 | * in advance to prevent them being sent to the host application.
1068 | *
1069 | * Since 6.1.0
1070 | *
1071 | * @param keyEventsInterest A JSON string describing those key events you are interested in. A null object or
1072 | an empty string will lead to removing the interest
1073 | *
1074 | * This JSON string should be an array, each object has following keys:
1075 | *
1076 | * keyCode: [Required] represents an OS system dependent virtual key code identifying
1077 | * the unmodified value of the pressed key.
1078 | * ctrlKey: [optional] a Boolean that indicates if the control key was pressed (true) or not (false) when the event occurred.
1079 | * altKey: [optional] a Boolean that indicates if the alt key was pressed (true) or not (false) when the event occurred.
1080 | * shiftKey: [optional] a Boolean that indicates if the shift key was pressed (true) or not (false) when the event occurred.
1081 | * metaKey: [optional] (Mac Only) a Boolean that indicates if the Meta key was pressed (true) or not (false) when the event occurred.
1082 | * On Macintosh keyboards, this is the command key. To detect Windows key on Windows, please use keyCode instead.
1083 | * An example JSON string:
1084 | *
1085 | * [
1086 | * {
1087 | * "keyCode": 48
1088 | * },
1089 | * {
1090 | * "keyCode": 123,
1091 | * "ctrlKey": true
1092 | * },
1093 | * {
1094 | * "keyCode": 123,
1095 | * "ctrlKey": true,
1096 | * "metaKey": true
1097 | * }
1098 | * ]
1099 | *
1100 | */
1101 | CSInterface.prototype.registerKeyEventsInterest = function (keyEventsInterest) {
1102 | return window.__adobe_cep__.registerKeyEventsInterest(keyEventsInterest);
1103 | };
1104 |
1105 | /**
1106 | * Set the title of the extension window.
1107 | * This function works with modal and modeless extensions in all Adobe products, and panel extensions in Photoshop, InDesign, InCopy, Illustrator, Flash Pro and Dreamweaver.
1108 | *
1109 | * Since 6.1.0
1110 | *
1111 | * @param title The window title.
1112 | */
1113 | CSInterface.prototype.setWindowTitle = function (title) {
1114 | window.__adobe_cep__.invokeSync("setWindowTitle", title);
1115 | };
1116 |
1117 | /**
1118 | * Get the title of the extension window.
1119 | * This function works with modal and modeless extensions in all Adobe products, and panel extensions in Photoshop, InDesign, InCopy, Illustrator, Flash Pro and Dreamweaver.
1120 | *
1121 | * Since 6.1.0
1122 | *
1123 | * @return The window title.
1124 | */
1125 | CSInterface.prototype.getWindowTitle = function () {
1126 | return window.__adobe_cep__.invokeSync("getWindowTitle", "");
1127 | };
--------------------------------------------------------------------------------
/client/libs/events.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | 'use strict';
3 |
4 | var csInterface = new CSInterface();
5 |
6 | csInterface.addEventListener('console', function(evt) {
7 | console.log('Host > ' + evt.data);
8 | });
9 |
10 | csInterface.addEventListener('mighty.rollcall', function(evt) {
11 | dispatchEvent('mighty.rollanswer', extFolder())
12 | });
13 |
14 | function dispatchEvent(name, data) {
15 | var event = new CSEvent(name, 'APPLICATION');
16 | event.data = data;
17 | csInterface.dispatchEvent(event);
18 | }
19 |
20 | }());
21 |
--------------------------------------------------------------------------------
/client/libs/menus.js:
--------------------------------------------------------------------------------
1 | var csInterface = new CSInterface();
2 | // var isFlipped = false;
3 |
4 | var menu_FlyoutXML = '';
7 | // \
8 | // \
9 | // \
10 |
11 | csInterface.setPanelFlyoutMenu(menu_FlyoutXML);
12 | csInterface.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", setPanelCallback);
13 |
14 |
15 | function setPanelCallback(event) {
16 | if (event.data.menuId == "refresh") {
17 | location.reload();
18 | }
19 | }
20 |
21 | // var menu_ContextXML = '';
27 |
28 | // csInterface.setContextMenu(menu_ContextXML, setContextMenuCallback);
29 |
30 | // function setContextMenuCallback(event) {
31 | // if (event == "refresh") {
32 | // location.reload();
33 | // } else if (event == "width") {
34 | // alert(window.innerWidth);
35 | // } else if (event === 'resize') {
36 | // // csInterface.resizeContent(200, 200)
37 | // } else {
38 | // console.log(event);
39 | // }
40 | // }
41 |
--------------------------------------------------------------------------------
/client/libs/preStyle.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-size: 12px;
3 | --quad: cubic-bezier(0.48, 0.04, 0.52, 0.96);
4 | --quart: cubic-bezier(0.76, 0.00, 0.24, 1.00);
5 | --quint: cubic-bezier(0.84, 0.00, 0.16, 1.00);
6 | --color-bg: #323232;
7 | --color-scroll: #2a2a2a;
8 | --color-scroll-thumb: #3e3e3e;
9 | --color-scroll-thumb-hover: #525252;
10 | --color-ui-idle: #3d3d3d;
11 | --color-ui-active: #4b4b4b;
12 | --color-ui-ultra: #797979;
13 | --color-text-idle: #b9b9b9;
14 | --color-text-hover: #c0c0c0;
15 | --color-text-active: #d0d0d0;
16 | --color-ui-selected: #46a0f5;
17 | --color-ui-border: #3e3e3e;
18 | --color-ui-hover: #292929;
19 | --color-text: #a1a1a1;
20 | --font-size: .875rem;
21 |
22 | --color-R: #eb6d5a;
23 | --color-G: #66ff3b;
24 | --color-B: #3593eb;
25 |
26 | --panel-height: 50px;
27 | --panel-width: 50px;
28 | font-family: Rubik;
29 | color: #a1a1a1;
30 | margin: .5rem .25rem 0px .25rem;
31 | background-color: var(--color-bg);
32 | }
33 |
34 | svg {
35 | width: 100%;
36 | }
37 |
38 | ::-webkit-scrollbar {
39 | width: 10px;
40 | background: var(--color-scroll);
41 | }
42 | ::-webkit-scrollbar-thumb {
43 | width: var(--thumb-width);
44 | background: var(--color-scroll-thumb);
45 | border-radius: var(--scroll-radius);
46 | }
47 | ::-webkit-scrollbar-thumb:hover {
48 | background: var(--color-scroll-thumb-hover);
49 | }
50 | ::-webkit-scrollbar-corner, ::-webkit-scrollbar-resizer, ::-webkit-scrollbar-button {
51 | display: none;
52 | }
53 |
54 | /* ::-webkit-scrollbar-button {
55 | display: none;
56 | } */
57 |
58 |
59 | #app {
60 | /* max-width: 50px; */
61 | /* min-width: 30px; */
62 | box-sizing: border-box;
63 | /* border: 2px solid red; */
64 | /* height: var(--panel-height); */
65 | width: 100%;
66 | }
67 |
68 | .visualizerModKeys {
69 | display: grid;
70 | grid-column-gap: .25rem;
71 | background-color: var(--color-ui-hover);
72 | }
73 | [class^="modKey"] {
74 | box-sizing: border-box;
75 | display: flex;
76 | justify-content: center;
77 | align-items: center;
78 | }
79 | .modKey-Shift-Active { background-color: var(--color-G);}
80 | .modKey-Ctrl-Active { background-color: var(--color-R);}
81 | .modKey-Alt-Active { background-color: var(--color-B);}
82 |
83 |
84 | /* @font-face {
85 | font-family: 'Swap-Font';
86 | src:
87 | url('../../UI/fonts/Swap-Font.ttf?ehpwfl') format('truetype'),
88 | url('../../UI/fonts/Swap-Font.woff?ehpwfl') format('woff'),
89 | url('../../UI/fonts/Swap-Font.svg?ehpwfl#Swap-Font') format('svg');
90 | font-weight: normal;
91 | font-style: normal;
92 | } */
93 |
94 | .set {
95 | width: 100%;
96 | height: 2rem;
97 | font-size: 1.25rem;
98 | cursor: default;
99 | user-select: none;
100 | display: flex;
101 | justify-content: space-around;
102 | align-items: center;
103 | }
104 |
105 | /* icomoon font */
106 | /* [class^="swap-icon-"], [class*=" swap-icon-"] {
107 | font-family: 'Swap-Font' !important;
108 | speak: none;
109 | font-style: normal;
110 | font-weight: normal;
111 | font-variant: normal;
112 | text-transform: none;
113 | line-height: 1;
114 | -webkit-font-smoothing: antialiased;
115 | }
116 |
117 | .swap-icon-swapH:before {
118 | content: "\e907";
119 | }
120 | .swap-icon-swapV:before {
121 | content: "\e908";
122 | }
123 | .swap-icon-artboard:before {
124 | content: "\e900";
125 | }
126 | .swap-icon-doc:before {
127 | content: "\e901";
128 | }
129 | .swap-icon-layer:before {
130 | content: "\e902";
131 | }
132 | .swap-icon-selection:before {
133 | content: "\e903";
134 | }
135 | .swap-icon-both:before {
136 | content: "\e904";
137 | }
138 | .swap-icon-fill:before {
139 | content: "\e905";
140 | }
141 | .swap-icon-stroke:before {
142 | content: "\e906";
143 | }
144 | .swap-icon-close:before {
145 | content: "\e91f";
146 | }
147 | .swap-icon-angleDown:before {
148 | content: "\e926";
149 | }
150 | .swap-icon-angleLeft:before {
151 | content: "\e927";
152 | }
153 | .swap-icon-angleRight:before {
154 | content: "\e928";
155 | }
156 | .swap-icon-angleUp:before {
157 | content: "\e929";
158 | }
159 | .swap-icon-angleUpDown:before {
160 | content: "\e915";
161 | } */
162 |
163 | /* Scrollbar */
164 | ::-webkit-scrollbar {
165 | /* if none, uncomment: */
166 | /* display: none */
167 | background: #2A2A2A;
168 | }
169 |
170 | ::-webkit-scrollbar-thumb {
171 | background: #3E3E3E;
172 | border-radius: 20px;
173 | }
174 |
175 | ::-webkit-scrollbar-thumb:hover {
176 | background: #525252;
177 | }
178 |
179 | ::-webkit-scrollbar-button {
180 | display: none;
181 | }
182 |
183 | ::-webkit-scrollbar:single-button {
184 | /* margin: 1rem 0px; */
185 | }
186 |
187 | ::-webkit-scrollbar-button:start {
188 | /* background-image: url('./scrollbarUpBtnAlt.png'); */
189 | }
190 |
191 | ::-webkit-scrollbar-button:end {
192 | /* background-image: url('./scrollbarDownBtnAlt.png'); */
193 | }
194 |
195 | ::-webkit-scrollbar-button:start:hover {
196 | /* background-image: url('./scrollbarUpBtnAltHover.png'); */
197 | }
198 |
199 | ::-webkit-scrollbar-button:end:hover {
200 | /* background-image: url('./scrollbarDownBtnAltHover.png'); */
201 | }
202 |
--------------------------------------------------------------------------------
/client/libs/reference.js:
--------------------------------------------------------------------------------
1 | var csInterface = new CSInterface();
2 |
3 | function extFolder() {
4 | var str = csInterface.getSystemPath(SystemPath.EXTENSION);
5 | var parent = str.substring(str.lastIndexOf('/') + 1, str.length);
6 | return parent;
7 | }
8 |
9 | function loadJSX(fileName) {
10 | var root = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/";
11 | csInterface.evalScript('$.evalFile("' + root + fileName + '")');
12 | }
13 |
14 | function loadUniversalJSXLibraries() {
15 | var libs = ["json2.jsx", "Console.jsx"];
16 | var root = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/universal/";
17 | for (var i = 0; i < libs.length; i++)
18 | csInterface.evalScript('$.evalFile("' + root + libs[i] + '")');
19 | }
20 |
21 | /**
22 | * Premiere Pro Panel
23 | */
24 | function toHex(color, delta) {
25 | function computeValue(value, delta) {
26 | var computedValue = !isNaN(delta) ? value + delta : value;
27 | if (computedValue < 0) {
28 | computedValue = 0;
29 | } else if (computedValue > 255) {
30 | computedValue = 255;
31 | }
32 |
33 | computedValue = Math.round(computedValue).toString(16);
34 | return computedValue.length == 1 ? "0" + computedValue : computedValue;
35 | }
36 |
37 | var hex = "";
38 | if (color) {
39 | with (color) {
40 | hex = computeValue(red, delta) + computeValue(green, delta) + computeValue(blue, delta);
41 | };
42 | }
43 | return "#" + hex;
44 | }
45 |
46 | // https://stackoverflow.com/a/11923973
47 | function rgbToHsl(c) {
48 | var r = c[0] / 255, g = c[1] / 255, b = c[2] / 255;
49 | var max = Math.max(r, g, b), min = Math.min(r, g, b);
50 | var h, s, l = (max + min) / 2;
51 |
52 | if (max == min) {
53 | h = s = 0; // achromatic
54 | } else {
55 | var d = max - min;
56 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
57 | switch (max) {
58 | case r: h = (g - b) / d + (g < b ? 6 : 0); break;
59 | case g: h = (b - r) / d + 2; break;
60 | case b: h = (r - g) / d + 4; break;
61 | }
62 | h /= 6;
63 | }
64 | // return new Array(h, s, l);
65 | return new Array(h * 360, s * 100, l * 100);
66 | }
67 |
68 | // https://stackoverflow.com/a/44134328
69 | function hslToHex(h, s, l) {
70 | h /= 360;
71 | s /= 100;
72 | l /= 100;
73 | let r, g, b;
74 | if (s === 0) {
75 | r = g = b = l; // achromatic
76 | } else {
77 | const hue2rgb = (p, q, t) => {
78 | if (t < 0) t += 1;
79 | if (t > 1) t -= 1;
80 | if (t < 1 / 6) return p + (q - p) * 6 * t;
81 | if (t < 1 / 2) return q;
82 | if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
83 | return p;
84 | };
85 | const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
86 | const p = 2 * l - q;
87 | r = hue2rgb(p, q, h + 1 / 3);
88 | g = hue2rgb(p, q, h);
89 | b = hue2rgb(p, q, h - 1 / 3);
90 | }
91 | const toHex = x => {
92 | const hex = Math.round(x * 255).toString(16);
93 | return hex.length === 1 ? '0' + hex : hex;
94 | };
95 | return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
96 | }
97 |
98 | /// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
99 | function componentToHex(c) {
100 | var hex = c.toString(16);
101 | return hex.length == 1 ? "0" + hex : hex;
102 | }
103 |
104 | function rgbToHex(r, g, b) {
105 | return componentToHex(r) + componentToHex(g) + componentToHex(b);
106 | }
107 |
108 | function hexToRgb(hex) {
109 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
110 | return result ? {
111 | r: parseInt(result[1], 16),
112 | g: parseInt(result[2], 16),
113 | b: parseInt(result[3], 16)
114 | } : null;
115 | }
116 |
--------------------------------------------------------------------------------
/client/libs/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
49 |
--------------------------------------------------------------------------------
/client/libs/v-outside-events.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue-outside-events @ 1.1.3
3 | * Nicholas Hutchind
4 | *
5 | * Vue directive to react to various events outside the current element
6 | *
7 | * License: MIT
8 | */
9 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e["vue-outside-events"]=t()}(this,function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(t,i){var n={};return n.directiveName=t,n.eventName=i,n.bind=function(n,o,u){var d=void 0!==console.error?console.error:console.log,r=null,v=void 0;if("function"!=typeof o.value)if("object"===e(o.value)&&o.value.hasOwnProperty("handler")&&"function"==typeof o.value.handler)r=o.value.handler,delete(v=Object.assign({},o.value)).handler;else{var a="["+t+"]: provided expression '"+o.expression+"' must be a function or an object containing a property named 'handler' that is a function.";u.context.name&&(a+="\nFound in component '"+u.context.name+"'"),d(a)}else r=o.value;var c=function(e){n.contains(e.target)||n===e.target||r(e,n,v)};n["__vueEventOutside__"+i]=c,document.addEventListener(i,c)},n.unbind=function(e,t){document.removeEventListener(i,e["__vueEventOutside__"+i]),e["__vueEventOutside__"+i]=null},n},i={directiveName:"event-outside",bind:function(t,i,n){var o=void 0!==console.error?console.error:console.log,u=void 0;if("object"!==e(i.value)||void 0===i.value.name||"string"!=typeof i.value.name||void 0===i.value.handler||"function"!=typeof i.value.handler){var d="[v-event-outside]: provided expression '"+i.expression+'\' must be an object containing a "name" string and a "handler" function.';return n.context.name&&(d+="\nFound in component '"+n.context.name+"'"),void o(d)}if(delete(u=Object.assign({},i.value)).name,delete u.handler,i.modifiers.jquery&&void 0===window.$&&void 0===window.jQuery){var r="[v-event-outside]: jQuery is not present in window.";return n.context.name&&(r+="\nFound in component '"+n.context.name+"'"),void o(r)}var v=function(e){t.contains(e.target)||t===e.target||i.value.handler(e,t,u)};t["__vueEventOutside__"+i.value.name]=v,i.modifiers.jquery?jQuery(document).on(i.value.name,v):document.addEventListener(i.value.name,v)},unbind:function(e,t){t.modifiers.jquery?jQuery(document).off(t.value.name,e["__vueEventOutside__"+t.value.name]):document.removeEventListener(t.value.name,e["__vueEventOutside__"+t.value.name]),e["__vueEventOutside__"+t.value.name]=null}},n=t("click-outside","click"),o=t("dblclick-outside","dblclick"),u=t("focus-outside","focusin"),d=t("blur-outside","focusout"),r=t("mousemove-outside","mousemove"),v=t("mousedown-outside","mousedown"),a=t("mouseup-outside","mouseup"),c=t("mouseover-outside","mouseover"),s=t("mouseout-outside","mouseout"),m=t("change-outside","change"),l=t("select-outside","select"),f=t("submit-outside","submit"),p=t("keydown-outside","keydown"),y=t("keypress-outside","keypress"),_=t("keyup-outside","keyup"),b={install:function(e){e.directive(n.directiveName,n),e.directive(o.directiveName,o),e.directive(u.directiveName,u),e.directive(d.directiveName,d),e.directive(r.directiveName,r),e.directive(v.directiveName,v),e.directive(a.directiveName,a),e.directive(c.directiveName,c),e.directive(s.directiveName,s),e.directive(m.directiveName,m),e.directive(l.directiveName,l),e.directive(f.directiveName,f),e.directive(p.directiveName,p),e.directive(y.directiveName,y),e.directive(y.directiveName,y),e.directive(_.directiveName,_),e.directive(i.directiveName,i)}};return"undefined"!=typeof window&&window.Vue&&window.Vue.use(b),b});
10 |
--------------------------------------------------------------------------------
/client/main.js:
--------------------------------------------------------------------------------
1 | var csInterface = new CSInterface();
2 | loadUniversalJSXLibraries();
3 | loadJSX(csInterface.hostEnvironment.appName + '/host.jsx');
4 | window.Event = new Vue();
5 |
6 | Vue.component('app', {
7 | template: `
8 |