errorbuttons 1.0.0 → 1.0.2

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.
Files changed (2) hide show
  1. package/index.js +107 -33
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import buttonizer from 'buttonizer';
2
2
 
3
- const defaultDefaultStyles = {
3
+ const defaultDefaultErrStyles = {
4
4
  borderRadius: '8px',
5
5
  border: '1px solid black',
6
6
  padding: '10px 12px',
@@ -16,27 +16,52 @@ const defaultDefaultStyles = {
16
16
  display: 'flex',
17
17
  flexDirection: 'column',
18
18
  gap: '4px',
19
+ maxWidth: '400px',
20
+ wordBreak: 'break-word',
19
21
  };
20
22
 
21
- const defaultHoverStyles = {
23
+ const defaultDefaultSuccessStyles = {
24
+ borderRadius: '8px',
25
+ border: '1px solid black',
26
+ padding: '10px 12px',
27
+ fontSize: '14px',
28
+ fontWeight: 'bold',
29
+ backgroundColor: '#dfd',
30
+ cursor: 'pointer',
31
+ outlineOffset: '4px',
32
+ userSelect: 'none',
33
+ fontFamily: 'sans-serif',
34
+ pointerEvents: 'auto',
35
+ textAlign: 'right',
36
+ display: 'flex',
37
+ flexDirection: 'column',
38
+ gap: '4px',
39
+ maxWidth: '400px',
40
+ wordBreak: 'break-word',
41
+ };
42
+
43
+ const defaultHoverErrStyles = {
22
44
  backgroundColor: '#fbb',
23
45
  outline: '2px solid #fbb',
24
46
  };
25
47
 
26
- const defaultFocusStyles = { outline: '2px solid #f99' };
48
+ const defaultHoverSuccessStyles = {
49
+ backgroundColor: '#bfb',
50
+ outline: '2px solid #bfb',
51
+ };
27
52
 
28
- const defaultPressedStyles = { backgroundColor: '#f99' };
53
+ const defaultFocusErrStyles = { outline: '2px solid #f99' };
29
54
 
30
- const defaultOptionalStyles = {
31
- hover: defaultHoverStyles,
32
- focus: defaultFocusStyles,
33
- default: defaultDefaultStyles,
34
- };
55
+ const defaultFocusSuccessStyles = { outline: '2px solid #9f9' };
56
+
57
+ const defaultPressedErrStyles = { backgroundColor: '#f99' };
58
+
59
+ const defaultPressedSuccessStyles = { backgroundColor: '#9f9' };
35
60
 
36
61
  const defaultTsStyles = {
37
62
  fontWeight: 'normal',
38
- fontSize: '12px'
39
- }
63
+ fontSize: '12px',
64
+ };
40
65
 
41
66
  const defaultHolderStyles = {
42
67
  position: 'fixed',
@@ -52,25 +77,40 @@ const defaultHolderStyles = {
52
77
  alignContent: 'end',
53
78
  alignItems: 'end',
54
79
  gap: '12px',
55
- pointerEvents: 'none'
56
- }
80
+ pointerEvents: 'none',
81
+ };
57
82
 
58
- const defaultSpanStyles = {
59
- maxWidth: '400px',
60
- wordBreak: 'break-word'
61
- }
83
+ const defaultSpanStyles = {};
62
84
 
63
- export const setupErrorButtons = (myError, options={}) => {
64
- const pressedStyles=options.pressedStyles || defaultPressedStyles;
65
- const optionalStyles=options.optionalStyles || defaultOptionalStyles;
66
- const tsStyles=options.tsStyles || defaultTsStyles;
67
- const holderStyles=options.holderStyles || defaultHolderStyles;
68
- const idValue=options.idValue || 'statusbuttonerrholder';
69
- const title=options.title || `Copy to clipboard and dismiss`;
70
- const spanStyles =options.spanStyles || defaultSpanStyles;
71
- let errHolder = document.getElementById(idValue);
85
+ export const setupErrorButtons = (myError, options = {}) => {
86
+ const defaultOptionalSuccessStyles = {
87
+ hover: defaultHoverSuccessStyles,
88
+ focus: defaultFocusSuccessStyles,
89
+ default: defaultDefaultSuccessStyles,
90
+ };
91
+ const defaultOptionalErrStyles = {
92
+ hover: defaultHoverErrStyles,
93
+ focus: defaultFocusErrStyles,
94
+ default: defaultDefaultErrStyles,
95
+ };
96
+ const altMode = options.altMode || false;
97
+ const clickEffect = options.clickEffect || false;
98
+ const pressedSuccessStyles =
99
+ options.pressedSuccessStyles || defaultPressedSuccessStyles;
100
+ const pressedErrStyles = options.pressedErrStyles || defaultPressedErrStyles;
101
+ const optionalSuccessStyles =
102
+ options.optionalSuccessStyles || defaultOptionalSuccessStyles;
103
+ const optionalErrStyles =
104
+ options.optionalErrStyles || defaultOptionalErrStyles;
105
+ const tsStyles = options.tsStyles || defaultTsStyles;
106
+ const holderStyles = options.holderStyles || defaultHolderStyles;
107
+ const idValue = options.idValue || 'statusbuttonerrholder';
108
+ const title = options.title || `Copy to clipboard and dismiss`;
109
+ const spanStyles = options.spanStyles || defaultSpanStyles;
110
+ let errHolder = document.querySelector(`[data-errorbuttonid=${idValue}]`);
72
111
  if (!errHolder) {
73
112
  errHolder = document.createElement('div');
113
+ errHolder.dataset.errorbuttonid = idValue;
74
114
  errHolder.id = idValue;
75
115
  Object.assign(errHolder.style, holderStyles);
76
116
  document.body.appendChild(errHolder);
@@ -79,9 +119,23 @@ export const setupErrorButtons = (myError, options={}) => {
79
119
  statusButton.type = 'button';
80
120
  statusButton.title = title;
81
121
  let errUrlSpan = document.createElement('span');
82
- errUrlSpan.textContent = myError instanceof Response ? myError.url : myError instanceof ErrorEvent ? `${myError.filename} - ${myError.lineno}:${myError.colno}` : myError instanceof Error ? `${myError.name}` : myError instanceof PromiseRejectionEvent ? `Unhandled Promise Rejection` : Array.isArray(myError) ? myError[0] : myError instanceof string ? myError : myError.toString();
122
+ errUrlSpan.textContent =
123
+ myError instanceof Response ? myError.url
124
+ : myError instanceof ErrorEvent ? `${myError.filename} - ${myError.lineno}:${myError.colno}`
125
+ : myError instanceof Error ? `${myError.name}`
126
+ : myError instanceof PromiseRejectionEvent ? `Unhandled Promise Rejection`
127
+ : Array.isArray(myError) ? myError[0]
128
+ : myError instanceof string ? myError
129
+ : myError.toString();
83
130
  let errStatusSpan = document.createElement('span');
84
- errStatusSpan.textContent = myError instanceof Response ? `${myError.status} - ${myError.statusText}` : myError instanceof ErrorEvent ? `${myError.message}` : myError instanceof Error ? `${myError.message}` : myError instanceof PromiseRejectionEvent ? `${myError.reason}` : Array.isArray(myError) ? myError[1] : myError instanceof string ? myError : myError.toString();
131
+ errStatusSpan.textContent =
132
+ myError instanceof Response ? `${myError.status} - ${myError.statusText}`
133
+ : myError instanceof ErrorEvent ? `${myError.message}`
134
+ : myError instanceof Error ? `${myError.message}`
135
+ : myError instanceof PromiseRejectionEvent ? `${myError.reason}`
136
+ : Array.isArray(myError) ? myError[1]
137
+ : myError instanceof string ? myError
138
+ : myError.toString();
85
139
  let errTimestamp = document.createElement('span');
86
140
  Object.assign(errUrlSpan.style, spanStyles);
87
141
  Object.assign(errStatusSpan.style, spanStyles);
@@ -102,14 +156,34 @@ export const setupErrorButtons = (myError, options={}) => {
102
156
  statusText: myError.statusText,
103
157
  message: myError.message,
104
158
  reason: myError.reason,
105
- timestamp: errTimestamp.textContent
106
- }
159
+ timestamp: errTimestamp.textContent,
160
+ };
107
161
  navigator.clipboard.writeText(JSON.stringify(parsedError, null, 2));
162
+ const parent = statusButton.parentElement;
108
163
  statusButton.remove();
164
+ if (parent.childElementCount === 0) {
165
+ parent.remove();
166
+ }
109
167
  });
110
- buttonizer(statusButton, pressedStyles, optionalStyles, false, false);
168
+ if (myError instanceof Response && myError.ok) {
169
+ buttonizer(
170
+ statusButton,
171
+ pressedSuccessStyles,
172
+ optionalSuccessStyles,
173
+ altMode,
174
+ clickEffect
175
+ );
176
+ } else {
177
+ buttonizer(
178
+ statusButton,
179
+ pressedErrStyles,
180
+ optionalErrStyles,
181
+ altMode,
182
+ clickEffect
183
+ );
184
+ }
111
185
  errHolder.appendChild(statusButton);
112
186
  return statusButton;
113
- }
187
+ };
114
188
 
115
- export default setupErrorButtons;
189
+ export default setupErrorButtons;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "errorbuttons",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "license": "ISC",
5
5
  "author": "Jack Montfort",
6
6
  "type": "module",