@digital-ai/dot-illustrations 2.0.38 → 2.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +25 -11
- package/demo/script.js +43 -28
- package/package.json +1 -1
package/demo/index.html
CHANGED
|
@@ -244,23 +244,37 @@
|
|
|
244
244
|
<div id="modal-image" class="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl"></div>
|
|
245
245
|
<p class="text-base font-semibold text-gray-900 dark:text-white mb-4" id="modal-illustration-name"></p>
|
|
246
246
|
<div class="w-full space-y-3 mb-4">
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<div class="
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
247
|
+
<!-- Illustration fields (shown for illustrations) -->
|
|
248
|
+
<div id="modal-illus-fields">
|
|
249
|
+
<div class="mb-3">
|
|
250
|
+
<label class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 block">Dot Code</label>
|
|
251
|
+
<div class="flex gap-2">
|
|
252
|
+
<textarea id="modal-dot-code" readonly rows="2"
|
|
253
|
+
class="flex-1 px-3 py-2 text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white resize-none outline-none"></textarea>
|
|
254
|
+
<button id="modal-copy-dot-code"
|
|
255
|
+
class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/30 transition">Copy</button>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div>
|
|
259
|
+
<label class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 block">HTML Code</label>
|
|
260
|
+
<div class="flex gap-2">
|
|
261
|
+
<textarea id="modal-code" readonly rows="2"
|
|
262
|
+
class="flex-1 px-3 py-2 text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white resize-none outline-none"></textarea>
|
|
263
|
+
<button id="modal-copy-code"
|
|
264
|
+
class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/30 transition">Copy</button>
|
|
265
|
+
</div>
|
|
254
266
|
</div>
|
|
255
267
|
</div>
|
|
256
|
-
|
|
257
|
-
|
|
268
|
+
<!-- Integration field — single usage snippet (no React component equivalent) -->
|
|
269
|
+
<div id="modal-integ-fields" class="hidden">
|
|
270
|
+
<label class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 block">Usage</label>
|
|
258
271
|
<div class="flex gap-2">
|
|
259
|
-
<textarea id="modal-code" readonly rows="2"
|
|
272
|
+
<textarea id="modal-integ-code" readonly rows="2"
|
|
260
273
|
class="flex-1 px-3 py-2 text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white resize-none outline-none"></textarea>
|
|
261
|
-
<button id="modal-copy-code"
|
|
274
|
+
<button id="modal-copy-integ-code"
|
|
262
275
|
class="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/30 transition">Copy</button>
|
|
263
276
|
</div>
|
|
277
|
+
<p class="text-[10px] text-gray-400 dark:text-gray-500 mt-1.5">Requires <code class="font-mono">index.css</code> — no React component equivalent.</p>
|
|
264
278
|
</div>
|
|
265
279
|
</div>
|
|
266
280
|
<button id="modal-close-bottom"
|
package/demo/script.js
CHANGED
|
@@ -377,43 +377,58 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
377
377
|
if (!descriptionsLoaded) return;
|
|
378
378
|
|
|
379
379
|
const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
|
|
380
|
-
const isInteg = type === 'integration' || integrationsList.includes(item) && !illustrations.includes(item);
|
|
380
|
+
const isInteg = type === 'integration' || (integrationsList.includes(item) && !illustrations.includes(item));
|
|
381
|
+
|
|
382
|
+
// Toggle field visibility
|
|
383
|
+
const illusFields = document.getElementById('modal-illus-fields');
|
|
384
|
+
const integFields = document.getElementById('modal-integ-fields');
|
|
385
|
+
if (illusFields) illusFields.classList.toggle('hidden', isInteg);
|
|
386
|
+
if (integFields) integFields.classList.toggle('hidden', !isInteg);
|
|
381
387
|
|
|
382
|
-
let imgHtml, dotCodeString, codeString;
|
|
383
388
|
if (isInteg) {
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
389
|
+
// Integration modal — single usage field
|
|
390
|
+
modalImage.innerHTML = `<img src="../integrations/${item}.svg" alt="${item}" style="width:140px;height:140px;object-fit:contain;" />`;
|
|
391
|
+
const usageCode = `<span class="dot-integration"><img class="${item}"/></span>`;
|
|
392
|
+
const integCodeEl = document.getElementById('modal-integ-code');
|
|
393
|
+
if (integCodeEl) integCodeEl.value = usageCode;
|
|
394
|
+
const copyInteg = document.getElementById('modal-copy-integ-code');
|
|
395
|
+
if (copyInteg) {
|
|
396
|
+
copyInteg.onclick = () => {
|
|
397
|
+
navigator.clipboard.writeText(usageCode).then(() => {
|
|
398
|
+
copyInteg.textContent = 'Copied!';
|
|
399
|
+
showToast('Copied: ' + usageCode);
|
|
400
|
+
setTimeout(() => { copyInteg.textContent = 'Copy'; }, 2000);
|
|
401
|
+
});
|
|
402
|
+
};
|
|
403
|
+
}
|
|
387
404
|
} else {
|
|
405
|
+
// Illustration modal — Dot Code + HTML Code
|
|
388
406
|
const cat = globalList.includes(item) ? 'global' : 'dashboards';
|
|
389
407
|
const svgPath = `illustrations/${themeClass}/${cat}/${item}.svg`;
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
408
|
+
modalImage.innerHTML = `<span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}" style="width:220px;height:220px;object-fit:contain;"/></span>`;
|
|
409
|
+
|
|
410
|
+
const dotCode = `<DotIllustration illustrationId="${item}" />`;
|
|
411
|
+
const htmlCode = `<span class="dot-illustration"><img src="${svgPath}" class="${item} ${themeClass}"/></span>`;
|
|
412
|
+
const modalDotCode = document.getElementById('modal-dot-code');
|
|
413
|
+
if (modalDotCode) modalDotCode.value = dotCode;
|
|
414
|
+
modalCode.value = htmlCode;
|
|
415
|
+
|
|
416
|
+
const modalCopyDotCode = document.getElementById('modal-copy-dot-code');
|
|
417
|
+
if (modalCopyDotCode) {
|
|
418
|
+
modalCopyDotCode.onclick = () => {
|
|
419
|
+
navigator.clipboard.writeText(dotCode).then(() => {
|
|
420
|
+
modalCopyDotCode.textContent = 'Copied!';
|
|
421
|
+
showToast('Copied: ' + dotCode);
|
|
422
|
+
setTimeout(() => { modalCopyDotCode.textContent = 'Copy'; }, 2000);
|
|
423
|
+
});
|
|
424
|
+
};
|
|
425
|
+
}
|
|
393
426
|
}
|
|
394
427
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
if (modalIllustrationName) modalIllustrationName.textContent = item;
|
|
398
|
-
const modalDotCode = document.getElementById('modal-dot-code');
|
|
399
|
-
if (modalDotCode) modalDotCode.value = dotCodeString;
|
|
400
|
-
modalCode.value = codeString;
|
|
401
|
-
|
|
428
|
+
const nameEl = document.getElementById('modal-illustration-name');
|
|
429
|
+
if (nameEl) nameEl.textContent = item;
|
|
402
430
|
modal.classList.add('active');
|
|
403
431
|
modal.classList.remove('hidden');
|
|
404
|
-
|
|
405
|
-
const modalCopyDotCode = document.getElementById('modal-copy-dot-code');
|
|
406
|
-
if (modalCopyDotCode) {
|
|
407
|
-
modalCopyDotCode.onclick = () => {
|
|
408
|
-
if (modalDotCode) {
|
|
409
|
-
navigator.clipboard.writeText(modalDotCode.value).then(() => {
|
|
410
|
-
modalCopyDotCode.textContent = 'Copied!';
|
|
411
|
-
showToast('Copied Dot Code: ' + modalDotCode.value);
|
|
412
|
-
setTimeout(() => { modalCopyDotCode.textContent = 'Copy Dot Code'; }, 2000);
|
|
413
|
-
});
|
|
414
|
-
}
|
|
415
|
-
};
|
|
416
|
-
}
|
|
417
432
|
}
|
|
418
433
|
function closeModal() {
|
|
419
434
|
modal.classList.remove('active');
|
package/package.json
CHANGED