Skip to content

Commit 46a1770

Browse files
aaronshafaaronshaf
committed
Use docs/ folder for gh-pages (to show demo app)
1 parent 78f6a39 commit 46a1770

File tree

16 files changed

+59644
-13
lines changed

16 files changed

+59644
-13
lines changed

‎dist/pdf-annotate.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/pdf-annotate.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/__build__/index.js

Lines changed: 2497 additions & 0 deletions
Large diffs are not rendered by default.

‎web/example.pdf renamed to ‎docs/example.pdf

File renamed without changes.

‎web/index.html renamed to ‎docs/index.html

File renamed without changes.

‎web/index.js renamed to ‎docs/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ render();
6262
localStorage.getItem(`${RENDER_OPTIONS.documentId}/text/size`) || 10,
6363
localStorage.getItem(`${RENDER_OPTIONS.documentId}/text/color`) || '#000000'
6464
);
65-
65+
6666
initColorPicker(document.querySelector('.text-color'), textColor, function (value) {
6767
setText(textSize, value);
6868
});
@@ -82,7 +82,7 @@ render();
8282
modified = true;
8383
textColor = color;
8484
localStorage.setItem(`${RENDER_OPTIONS.documentId}/text/color`, textColor);
85-
85+
8686
let selected = document.querySelector('.toolbar .text-color.color-selected');
8787
if (selected) {
8888
selected.classList.remove('color-selected');
@@ -101,7 +101,7 @@ render();
101101
UI.setText(textSize, textColor);
102102
}
103103
}
104-
104+
105105
function handleTextSizeChange(e) {
106106
setText(e.target.value, textColor);
107107
}
@@ -146,7 +146,7 @@ render();
146146
modified = true;
147147
penColor = color;
148148
localStorage.setItem(`${RENDER_OPTIONS.documentId}/pen/color`, penColor);
149-
149+
150150
let selected = document.querySelector('.toolbar .pen-color.color-selected');
151151
if (selected) {
152152
selected.classList.remove('color-selected');
@@ -344,7 +344,7 @@ render();
344344
commentList.innerHTML = '';
345345
commentForm.style.display = 'none';
346346
commentForm.onsubmit = null;
347-
347+
348348
insertComment({content: 'No comments'});
349349
}
350350
}

‎docs/shared/initColorPicker.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Color picker component
2+
const COLORS = [
3+
{hex: '#000000', name: 'Black'},
4+
{hex: '#EF4437', name: 'Red'},
5+
{hex: '#E71F63', name: 'Pink'},
6+
{hex: '#8F3E97', name: 'Purple'},
7+
{hex: '#65499D', name: 'Deep Purple'},
8+
{hex: '#4554A4', name: 'Indigo'},
9+
{hex: '#2083C5', name: 'Blue'},
10+
{hex: '#35A4DC', name: 'Light Blue'},
11+
{hex: '#09BCD3', name: 'Cyan'},
12+
{hex: '#009688', name: 'Teal'},
13+
{hex: '#43A047', name: 'Green'},
14+
{hex: '#8BC34A', name: 'Light Green'},
15+
{hex: '#FDC010', name: 'Yellow'},
16+
{hex: '#F8971C', name: 'Orange'},
17+
{hex: '#F0592B', name: 'Deep Orange'},
18+
{hex: '#F06291', name: 'Light Pink'}
19+
];
20+
21+
export default function initColorPicker(el, value, onChange) {
22+
function setColor(value, fireOnChange = true) {
23+
currentValue = value;
24+
a.setAttribute('data-color', value);
25+
a.style.background = value;
26+
if (fireOnChange && typeof onChange === 'function') {
27+
onChange(value);
28+
}
29+
closePicker();
30+
}
31+
32+
function togglePicker() {
33+
if (isPickerOpen) {
34+
closePicker();
35+
} else {
36+
openPicker();
37+
}
38+
}
39+
40+
function closePicker() {
41+
document.removeEventListener('keyup', handleDocumentKeyup);
42+
if (picker && picker.parentNode) {
43+
picker.parentNode.removeChild(picker);
44+
}
45+
isPickerOpen = false;
46+
a.focus();
47+
}
48+
49+
function openPicker() {
50+
if (!picker) {
51+
picker = document.createElement('div');
52+
picker.style.background = '#fff';
53+
picker.style.border = '1px solid #ccc';
54+
picker.style.padding = '2px';
55+
picker.style.position = 'absolute';
56+
picker.style.width = '122px';
57+
el.style.position = 'relative';
58+
59+
COLORS.map(createColorOption).forEach((c) => {
60+
c.style.margin = '2px';
61+
c.onclick = function () { setColor(c.getAttribute('data-color')); };
62+
picker.appendChild(c);
63+
});
64+
}
65+
66+
document.addEventListener('keyup', handleDocumentKeyup);
67+
el.appendChild(picker);
68+
isPickerOpen = true;
69+
}
70+
71+
function createColorOption(color) {
72+
let e = document.createElement('a');
73+
e.className = 'color';
74+
e.setAttribute('href', 'javascript://');
75+
e.setAttribute('title', color.name);
76+
e.setAttribute('data-color', color.hex);
77+
e.style.background = color.hex;
78+
return e;
79+
}
80+
81+
function handleDocumentKeyup(e) {
82+
if (e.keyCode === 27) {
83+
closePicker();
84+
}
85+
}
86+
87+
let picker;
88+
let isPickerOpen = false;
89+
let currentValue;
90+
let a = createColorOption({hex: value});
91+
a.onclick = togglePicker;
92+
el.appendChild(a);
93+
setColor(value, false);
94+
}

0 commit comments

Comments
 (0)