@puzzlelabs/puzzle-glossary v0.8.0
Getting Started
Installation with NPM:
npm install @puzzlelabs/puzzle-glossary
Installation with CDN:
<script
type="module"
src="https://unpkg.com/@puzzlelabs/puzzle-glossary/dist/puzzle-glossary/puzzle-glossary.esm.js"
></script>
Highlight Widget Configuration
document.addEventListener('highlightWidgetReady', function() {
highlightWidgetManager.config = {
// It needs to select specific parts of page:
selectors: ['body'],
// It needs to mark words one time:
hasMarkAll: false,
// It needs to hide Puzzle Labs logo in widget:
puzzleBranding: false,
// It needs not to mark hyperlinks:
hasMarkHyperlink: false,
// It needs to add CTA (Call to action):
callToAction: {
text: 'CTA',
link: 'https://puzzlelabs.ai',
},
};
highlightWidgetManager.handlers = {
onCopyClick: (event) => {
console.log(event.type); // event.type === "onCopyClick"
console.log(event.details.concept); // Concept
console.log(event.details.marker); // Marker element
},
onMarkerHover: (event) => {
console.log(event.type); // event.type === "onMarkerHover"
console.log(event.details); // details === Concept
},
onCtaClick: (event) => {
console.log(event.type); // event.type === "onCtaClick"
console.log(event.details); // details === Concept
},
onResourceClick: (event) => {
console.log(event.type); // event.type === "onResourceClick"
console.log(event.details.concept); // Concept
console.log(event.details.marker); // Marker element
console.log(event.details.resource); // Resource
},
onEvent: (event) => {
console.log(event.type); // One of the available events types
console.log(event.details) // One of the available events
},
};
highlightWidgetManager.theme = {
// It needs to change mode (dark/light):
mode: 'light',
// It needs to change font (make sure this is added to website):
fontFamily: 'Times New Roman',
// It needs to change style and type (highlight/underline) of marker:
marker: {
color: '#E7FF57',
type: 'highlight',
},
// It needs to change style of resources:
resource: {
color: args['theme.resource.color'],
},
// It needs to change style of CTA (Call to action):
callToAction: {
color: '#fff',
backgroundColor: '#000',
},
// It needs to change style of widget modal:
modal: {
primaryColor: '#000',
secondaryColor: '#74747F',
backgroundColor: '#E7E8FE',
},
};
// first argument is glosary id, { mark: true } say manager after initialization highlight concept automaticaly
highlightWidgetManager.init('6437d691b3c98451b429460f', { mark: true });
// Or you can mark separetly
// highlightWidgetManager.init('6437d691b3c98451b429460f').then(() => {
// highlightWidgetManager.mark();
// });
})
Page Widget Configuration
<page-widget api-key="6437d691b3c98451b429460f"/>
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
12 months ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago