errorbuttons 1.0.1 → 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 +101 -30
  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',
@@ -17,28 +17,51 @@ const defaultDefaultStyles = {
17
17
  flexDirection: 'column',
18
18
  gap: '4px',
19
19
  maxWidth: '400px',
20
- wordBreak: 'break-word'
20
+ wordBreak: 'break-word',
21
21
  };
22
22
 
23
- 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 = {
24
44
  backgroundColor: '#fbb',
25
45
  outline: '2px solid #fbb',
26
46
  };
27
47
 
28
- const defaultFocusStyles = { outline: '2px solid #f99' };
48
+ const defaultHoverSuccessStyles = {
49
+ backgroundColor: '#bfb',
50
+ outline: '2px solid #bfb',
51
+ };
29
52
 
30
- const defaultPressedStyles = { backgroundColor: '#f99' };
53
+ const defaultFocusErrStyles = { outline: '2px solid #f99' };
31
54
 
32
- const defaultOptionalStyles = {
33
- hover: defaultHoverStyles,
34
- focus: defaultFocusStyles,
35
- default: defaultDefaultStyles,
36
- };
55
+ const defaultFocusSuccessStyles = { outline: '2px solid #9f9' };
56
+
57
+ const defaultPressedErrStyles = { backgroundColor: '#f99' };
58
+
59
+ const defaultPressedSuccessStyles = { backgroundColor: '#9f9' };
37
60
 
38
61
  const defaultTsStyles = {
39
62
  fontWeight: 'normal',
40
- fontSize: '12px'
41
- }
63
+ fontSize: '12px',
64
+ };
42
65
 
43
66
  const defaultHolderStyles = {
44
67
  position: 'fixed',
@@ -54,23 +77,41 @@ const defaultHolderStyles = {
54
77
  alignContent: 'end',
55
78
  alignItems: 'end',
56
79
  gap: '12px',
57
- pointerEvents: 'none'
58
- }
80
+ pointerEvents: 'none',
81
+ };
59
82
 
60
- const defaultSpanStyles = {}
83
+ const defaultSpanStyles = {};
61
84
 
62
- export const setupErrorButtons = (myError, options={}) => {
63
- const pressedStyles=options.pressedStyles || defaultPressedStyles;
64
- const optionalStyles=options.optionalStyles || defaultOptionalStyles;
65
- const tsStyles=options.tsStyles || defaultTsStyles;
66
- const holderStyles=options.holderStyles || defaultHolderStyles;
67
- const idValue=options.idValue || 'statusbuttonerrholder';
68
- const title=options.title || `Copy to clipboard and dismiss`;
69
- const spanStyles =options.spanStyles || defaultSpanStyles;
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;
70
110
  let errHolder = document.querySelector(`[data-errorbuttonid=${idValue}]`);
71
111
  if (!errHolder) {
72
112
  errHolder = document.createElement('div');
73
113
  errHolder.dataset.errorbuttonid = idValue;
114
+ errHolder.id = idValue;
74
115
  Object.assign(errHolder.style, holderStyles);
75
116
  document.body.appendChild(errHolder);
76
117
  }
@@ -78,9 +119,23 @@ export const setupErrorButtons = (myError, options={}) => {
78
119
  statusButton.type = 'button';
79
120
  statusButton.title = title;
80
121
  let errUrlSpan = document.createElement('span');
81
- 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();
82
130
  let errStatusSpan = document.createElement('span');
83
- 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();
84
139
  let errTimestamp = document.createElement('span');
85
140
  Object.assign(errUrlSpan.style, spanStyles);
86
141
  Object.assign(errStatusSpan.style, spanStyles);
@@ -101,8 +156,8 @@ export const setupErrorButtons = (myError, options={}) => {
101
156
  statusText: myError.statusText,
102
157
  message: myError.message,
103
158
  reason: myError.reason,
104
- timestamp: errTimestamp.textContent
105
- }
159
+ timestamp: errTimestamp.textContent,
160
+ };
106
161
  navigator.clipboard.writeText(JSON.stringify(parsedError, null, 2));
107
162
  const parent = statusButton.parentElement;
108
163
  statusButton.remove();
@@ -110,9 +165,25 @@ export const setupErrorButtons = (myError, options={}) => {
110
165
  parent.remove();
111
166
  }
112
167
  });
113
- 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
+ }
114
185
  errHolder.appendChild(statusButton);
115
186
  return statusButton;
116
- }
187
+ };
117
188
 
118
- 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.1",
3
+ "version": "1.0.2",
4
4
  "license": "ISC",
5
5
  "author": "Jack Montfort",
6
6
  "type": "module",