The widget can be attached to any HTML page.
<link rel="stylesheet" href="(location)/dodex.min.css">
<!-- JSONEditor is optional - JSONEditor css for editing private content in JSON files -->
<link href="(location)/jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<style>
/* Size and location of JSONEditor window */
.editor {
width: 80%; height: 400px; position: fixed; bottom: 0; left: 0;
}
</style>
<body>
<div class="dodex--open">
<img src="(location)/dodex/images/dodex_g.ico">
</div>
<!-- JSONEditor is Optional - container for the frontend JSON editor - will be positioned based on .editor class -->
<div id="jsoneditor" class="editor"></div>
<!-- Note; dodex-input will handle the implementation - see the input popup -->
<script src="(location)/jsoneditor/dist/jsoneditor.min.js"></script>
<script src="(location)/dodex.min.js" type="text/javascript"></script>
<script src="(location)/dodex-input.min.js" type="text/javascript"></script>
<script src="(location)/dodex-mess.min.js" type="text/javascript"></script>
<script>
doDex.init({
input: doDexInput, // "private: none" is default so no popup input form
mess: doDexMess // defaults to "server: localhost:3087" for websockets
});
</script>
</body>
<script>
var dodex = window.doDex; // global variable
var input = window.doDexInput; // global variable
var mess = window.doDexMess; // global variable
/* Card content can be customized - returns an object
This content is used for cards A-Z and static card 27
*/
dodex.setContentFile("(location)/content.js");
// Change size and or position - returns a Promise
dodex.init({
width:375,
height: 200,
top: "100px",
left: "50%",
input: input, // required if using frontend content load
private: "partial", // frontend load of private content, "none", "full", "partial"(only cards 28-52) - default none
replace: true, // append to or replace default content - default false(append only)
mess: mess, // required for dodex messaging client
server: "localhost:3087" // see node_modules/dodex-mess/server for details on demo server
})
// Add up to 24 additional cards. Card # must start at 28.
.then(function () {
for (var i = 0; i < 3; i++) {
dodex.addCard({/*see custom content section*/});
}
/* Auto display of widget */
dodex.openDodex();
});
</script>
import dodex from "dodex";
var dodex = require("dodex").default;
import dodex from "dodex";
import input from "dodex-input"
import mess from "dodex-mess"
import jsonEditor from "jsoneditor"
window.JSONEditor = jsonEditor;
/* This content is used for cards A-Z and static card 27 */
dodex.setContentFile("<location>/content.js");
dodex.init({
width: 375,
height: 200,
left: "50%",
top: "100px",
input: input, // required if using frontend content load
private: "partial", // frontend load of private content, "none", "full", "partial"(only cards 28-52) - default none
replace: true, // append to or replace default content - default false(append only)
mess: mess, // requireed if using messaging client.
server: "localhost:3087" // default demo server - see node_modules/dodex-mess/server
})
.then(function () {
/* Add up to 24 additional cards. */
for(var i = 0; i < 1; i++) {
dodex.addCard(content);
}
/* Auto display of widget */
dodex.openDodex();
});
var content = {
cards: {
card28: { // Notice, card # starts at 28
tab: "Me1", // Maximum 3 characters
front: {
content: `<h1>My Personal Stuff</h1>`
},
back: {
content: `<h1>More personal Stuff</h1>`
}
}}}
Adding content to the dodex cards(content can be from a javascript or JSON file).
Use the following as a javascript template. You only need to include cards with content. See node_modules/dodex/data for examples.
Note; The window scoped "dodexContent" is required to load content at initialization. This allows content without using a module.(dodex.setContentFile). The additional card content as well as content loaded from the front-end Input module, use plain objects.
dodexContent = {
cards: {
card1: {
tab: "A",
front: {
content: ""
},
back: {
content: ""
}
},
card2: {
tab: "B",
front: {
content: ""
},
back: {
content: ""
}
},
card3: {
tab: "C",
front: {
content: `<h1>Best's Contact Form</h1><a href="#!contact"><i class="fa fa-fw fa-phone"></i>Contact</a>`
},
back: {
content: `<h1>Lorem Ipsum</h1><a href="https://www.yahoo.com" target="_">Yahoo</a>`
}
},
card27: {
tab: "",
front: {
content: ""
},
back: {
content: `<h1 style="font-size: 14px;">
<svg height="18" width="17" style="font-family: 'Open Sans', sans-serif;">
<text x="3" y="18" fill="#059">O</text><text x="0" y="15" fill="#059">D</text></svg> doDex</h1>`
}
}
}
}
Note; Firefox works best by only clicking the tabs.
If using dodex-input, browser must support the "indexedDB" storage feature. To clear content from indexedDB, execute from your browser's dev-tools console; indexedDB.deleteDatabase("dodex"). Or use the dodex-input popup to remove personal content stored in "indexedDB".
npm install dodex --save or download from https://github.com/DaveO-Home/dodex.npm install dodex-input --save or download from https://github.com/DaveO-Home/dodex-input.npm install dodex-mess --save or download from https://github.com/DaveO-Home/dodex-mess.npm install jsoneditor --save or download from https://github.com/josdejong/jsoneditor(this is optional).node_modules/dodex/ javascript, css and images to appropriate directories; If using a bundler like browserify, you may only need to copy the content.js(or create your own) and images.dodex-vertx to serve dodex.node_modules/dodex-mess/server to serve dodex.Note; Content can also be loaded from a JSON file. See dodex-input README for details on the frontend JSON editor.
Here's an example of dodex loaded in a bootstrap environment (view on GitHub https://github.com/DaveO-Home/dodex).
See getting started.
node_modules/dodex/test/index.htmlThis project is licensed under the MIT License - see the LICENSE file for details
FAQs
A rolodex widget for menuing and data/links access
The npm package dodex receives a total of 7 weekly downloads. As such, dodex popularity was classified as not popular.
We found that dodex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.