JavaScript Managers

Jump to bottomEditNew page
Gerhard Richard Edens edited this page May 26, 2015 · 11 revisions

Managing the JavaScript Managers

If we take a look at the lib directory we will see the following files in there:

  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js

What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.

The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:

assets

main MendixCodeManager.js

The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.

We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.

You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.

This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.

main MendixCSSManager.js

The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.

main MendixGitHubManager.js

The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.

main MendixSnippets.js

The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.

main MendixWorkshopManager.js

The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.

main MendixWorkspaceManager.js

The workspace manager created the interface of the plugin.

Add a custom footer
Add a custom sidebar

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
JavaScript Managers
Jump to bottomEditNew page

Gerhard Richard Edens edited this page May 26, 2015
·
11 revisions
Managing the JavaScript Managers
If we take a look at the lib directory we will see the following files in there:
  • main MendixCodeManager.js (Read more...)
  • main MendixCSSManager.js
  • main MendixGitHubManager.js
  • main MendixSnippets.js
  • main MendixWorkshopManager.js
  • main MendixWorkspaceManager.js
What you need to know in general is that these files make up the plugin. All functionality available. And they do that sometimes inside the script but also with the code in the node directory.
The code in the node directory is a backend-layer that makes functions available inside the webbrowser inside the brackets-shell that execute NodeJS functionality. This is an important concept you must understand. We have illustrated this in the following graphic:
assets
main MendixCodeManager.js
The code manager is determining what the open file in brackets actually is. The code manager can recognize Mendix custom widget JavaScript files. Mendix package.xml and properties.xml files.
We are developing the possibility to configure the package.xml and properties.xml files. And have already implemented that a Mendix JavaScript file can be read. All functions that are available inside the script can be seen inside a special panel on the left top inside brackets.
You are even able to click on the function and scroll to this function. The future of this functionality is that we will be able to help you rewrite your custom widget code to the latest and greatest code base. Showing you what is deprecated and suggesting alternative implementations.
This file also makes its possible for you to insert code snippets that are organized in the MendixSnippets.js file.
main MendixCSSManager.js
The CSS manager is a manager that is under development and can provide in the future a tool to manage CSS that you create for your Mendix Custom Widget.
main MendixGitHubManager.js
The GitHub manager is a manager that is used to download and execute the NodeJS code to get the AppStoreWidgetBoilerplate and rename directories, files and content of files.
main MendixSnippets.js
The snippets JavaScript file holds small pieces of code that help you develop Mendix Custom Widgets much faster. They are nice examples of the Mendix Client API.
main MendixWorkshopManager.js
The workshop manager manages the code examples and workshop that is inside the Brackets plugin that can be used inside an organization to help and understand the building of a complex custom widget.
main MendixWorkspaceManager.js
The workspace manager created the interface of the plugin.
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally