Skip to content

Commit b5e86d8

Browse files
CodeHole7CodeHole7
committed
custom number input
1 parent 575aced commit b5e86d8

File tree

6 files changed

+163
-30
lines changed

6 files changed

+163
-30
lines changed

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
<head>
33
<link rel="stylesheet" href="/lib/style.css">
44
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
5+
<script>
6+
jQuery.fn.outerHTML = function() {
7+
return jQuery('<div />').append(this.eq(0).clone()).html();
8+
};
9+
Number.prototype.countDecimals = function () {
10+
if(Math.floor(this.valueOf()) === this.valueOf()) return 0;
11+
return this.toString().split(".")[1].length || 0;
12+
}
13+
</script>
514
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
615

716
<script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
@@ -30,6 +39,7 @@
3039
<script src="./lib/utils.js"></script>
3140
<script src="./lib/zoom.js"></script>
3241
<script src="./lib/saveInBrowser.js"></script>
42+
3343
</head>
3444
<body>
3545
<div id="image-editor-container"></div>

‎lib/canvasSettings.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,22 @@
88
$(`${this.containerSelector} .toolpanel#background-panel .content`).append(`
99
<div class="canvas-size-setting">
1010
<p>Canvas Size</p>
11-
<input type="number" min="100" id="input-width" value="640"/>
12-
<span>X</span>
13-
<input type="number" min="100" id="input-height" value="480"/>
11+
<div class="input-container">
12+
<label>Width</label>
13+
<div class="custom-number-input">
14+
<button class="decrease">-</button>
15+
<input type="number" min="100" id="input-width" value="640"/>
16+
<button class="increase">+</button>
17+
</div>
18+
</div>
19+
<div class="input-container">
20+
<label>Height</label>
21+
<div class="custom-number-input">
22+
<button class="decrease">-</button>
23+
<input type="number" min="100" id="input-height" value="480"/>
24+
<button class="increase">+</button>
25+
</div>
26+
</div>
1427
</div>
1528
`);
1629

@@ -34,17 +47,17 @@
3447
// background color
3548
$(`${this.containerSelector} .toolpanel#background-panel .content`).append(`
3649
<div class="color-settings">
37-
<p>
50+
<div class="input-container">
3851
<input type="radio" id="color-fill" name="background" value="color-fill">
3952
<label for="color-fill" style="padding-bottom: 10px">Color Fill</label><br>
40-
</p>
53+
</div>
4154
4255
<input id="color-picker" value='black'/><br>
4356
44-
<p>
57+
<div class="input-container">
4558
<input type="radio" id="gradient-fill" name="background" value="gradient-fill">
4659
<label for="gradient-fill" style="padding-bottom: 10px">Gradient Fill</label><br>
47-
</p>
60+
</div>
4861
<div id="gradient-picker"></div>
4962
</div>
5063
`)

‎lib/core.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,10 @@
156156
this.initializeUpload(this.canvas);
157157
this.initializeCopyPaste(this.canvas);
158158

159-
this.extendHideShowToolPanel();
160159
this.initializeZoomEvents();
160+
161+
this.extendHideShowToolPanel();
162+
this.extendNumberInput();
161163
}
162164

163165
this.initializeMainPanel = () => {
@@ -175,6 +177,31 @@
175177
})
176178
}
177179

180+
this.extendNumberInput = () => {
181+
$(`${containerSelector} .decrease`).click(function () {
182+
let input = $(this).closest('.custom-number-input').find('input[type=number]')
183+
let step = input.attr('step');
184+
if (!step) step = 1;
185+
else {
186+
step = parseFloat(step);
187+
}
188+
let val = parseFloat(input.val());
189+
input.val((val - step).toFixed(step.countDecimals()));
190+
input.change();
191+
})
192+
$(`${containerSelector} .increase`).click(function () {
193+
let input = $(this).closest('.custom-number-input').find('input[type=number]')
194+
let step = input.attr('step');
195+
if (!step) step = 1;
196+
else {
197+
step = parseFloat(step);
198+
}
199+
let val = parseFloat(input.val());
200+
input.val((val + step).toFixed(step.countDecimals()));
201+
input.change();
202+
})
203+
}
204+
178205
this.init();
179206
}
180207

‎lib/freeDrawSettings.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,26 @@
1212
// set dimension section
1313
$(`${this.containerSelector} .toolpanel#draw-panel .content`).append(`
1414
<div>
15-
<p>
15+
<div class="input-container">
1616
<label>Brush Width</label>
17+
<div class="custom-number-input">
18+
<button class="decrease">-</button>
1719
<input type="number" min="1" value="1" id="input-brush-width"/>
18-
</p>
19-
<p>
20+
<button class="increase">+</button>
21+
</div>
22+
</div>
23+
<div class="input-container">
2024
<label>Brush Type</label>
2125
<select id="input-brush-type">
2226
<option value="pencil" selected>Pencil</option>
2327
<option value="circle">Circle</option>
2428
<option value="spray">Spray</option>
2529
</select>
26-
</p>
27-
<p>
30+
</div>
31+
<div class="input-container">
2832
<label>Brush Color</label>
2933
<input id="color-picker" value='black'/>
30-
</p>
34+
</div>
3135
</div>
3236
`);
3337

‎lib/selectionSettings.js

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,27 @@
109109
</select>
110110
</div>
111111
<div class="sizes">
112-
<p><label>Font Size</label><input type="number" min="1" value="20" id="fontSize"></p>
113-
<p><label>Line Height</label><input type="number" min="0" max="3" value="1" step="0.1" id="lineHeight"></p>
114-
<p><label>Letter Spacing</label><input type="number" min="0" max="2000" step="100" value="0" id="charSpacing"></p>
112+
<div class="input-container"><label>Font Size</label>
113+
<div class="custom-number-input">
114+
<button class="decrease">-</button>
115+
<input type="number" min="1" value="20" id="fontSize">
116+
<button class="increase">+</button>
117+
</div>
118+
</div>
119+
<div class="input-container"><label>Line Height</label>
120+
<div class="custom-number-input">
121+
<button class="decrease">-</button>
122+
<input type="number" min="0" max="3" value="1" step="0.1" id="lineHeight">
123+
<button class="increase">+</button>
124+
</div>
125+
</div>
126+
<div class="input-container"><label>Letter Spacing</label>
127+
<div class="custom-number-input">
128+
<button class="decrease">-</button>
129+
<input type="number" min="0" max="2000" step="100" value="0" id="charSpacing">
130+
<button class="increase">+</button>
131+
</div>
132+
</div>
115133
</p>
116134
</div>
117135
<div class="align">
@@ -208,10 +226,16 @@
208226
$(`${this.containerSelector} .toolpanel#select-panel .content`).append(`
209227
<div class="border-section">
210228
<h4>Border</h4>
211-
<p><label>Width</label><input type="number" min="1" value="1" id="input-border-width"></p>
212-
<p><label>Style</label><select id="input-border-style">${BorderStyleList.map(item => `<option value='${JSON.stringify(item.value)}'>${item.label}</option>`)}</select></p>
213-
<p><label>Corner Type</label><select id="input-corner-type"><option value="miter" selected>Square</option><option value="round">Round</option></select></p>
214-
<p><label>Color</label><input id="color-picker" value="black"></p>
229+
<div class="input-container"><label>Width</label>
230+
<div class="custom-number-input">
231+
<button class="decrease">-</button>
232+
<input type="number" min="1" value="1" id="input-border-width">
233+
<button class="increase">+</button>
234+
</div>
235+
</div>
236+
<div class="input-container"><label>Style</label><select id="input-border-style">${BorderStyleList.map(item => `<option value='${JSON.stringify(item.value)}'>${item.label}</option>`)}</select></div>
237+
<div class="input-container"><label>Corner Type</label><select id="input-corner-type"><option value="miter" selected>Square</option><option value="round">Round</option></select></div>
238+
<div class="input-container"><label>Color</label><input id="color-picker" value="black"></div>
215239
<hr>
216240
</div>
217241
`);
@@ -263,10 +287,10 @@
263287
$(`${this.containerSelector} .toolpanel#select-panel .content`).append(`
264288
<div class="fill-section">
265289
<h4>Fill</h4>
266-
<p><input type="radio" id="color-fill" name="background" value="color-fill"><label for="color-fill" style="padding-bottom: 10px">Color Fill</label><br></p>
290+
<div class="input-container"><input type="radio" id="color-fill" name="background" value="color-fill"><label for="color-fill" style="padding-bottom: 10px">Color Fill</label><br></div>
267291
<input id="color-picker" value='black'/><br>
268292
269-
<p><input type="radio" id="gradient-fill" name="background" value="gradient-fill"><label for="gradient-fill" style="padding-bottom: 10px">Gradient Fill</label><br></p>
293+
<div class="input-container"><input type="radio" id="gradient-fill" name="background" value="gradient-fill"><label for="gradient-fill" style="padding-bottom: 10px">Gradient Fill</label><br></div>
270294
<div id="gradient-picker"></div>
271295
<hr>
272296
</div>
@@ -421,14 +445,14 @@
421445
$(`${this.containerSelector} .toolpanel#select-panel .content`).append(`
422446
<div class="effect-section">
423447
<h4>Effect</h4>
424-
<p><label>Opacity</label><input id="opacity" type="range" min="0" max="1" value="1" step="0.01"></p>
425-
<p><label>Blur</label><input class="effect" id="blur" type="range" min="0" max="100" value="50"></p>
426-
<p><label>Brightness</label><input class="effect" id="brightness" type="range" min="0" max="100" value="50"></p>
427-
<p><label>Saturation</label><input class="effect" id="saturation" type="range" min="0" max="100" value="50"></p>
448+
<div class="input-container"><label>Opacity</label><input id="opacity" type="range" min="0" max="1" value="1" step="0.01"></div>
449+
<div class="input-container"><label>Blur</label><input class="effect" id="blur" type="range" min="0" max="100" value="50"></div>
450+
<div class="input-container"><label>Brightness</label><input class="effect" id="brightness" type="range" min="0" max="100" value="50"></div>
451+
<div class="input-container"><label>Saturation</label><input class="effect" id="saturation" type="range" min="0" max="100" value="50"></div>
428452
<h5>Gamma</h5>
429-
<p><label>Red</label><input class="effect" id="gamma.r" type="range" min="0" max="100" value="50"></p>
430-
<p><label>Green</label><input class="effect" id="gamma.g" type="range" min="0" max="100" value="50"></p>
431-
<p><label>Blue</label><input class="effect" id="gamma.b" type="range" min="0" max="100" value="50"></p>
453+
<div class="input-container"><label>Red</label><input class="effect" id="gamma.r" type="range" min="0" max="100" value="50"></div>
454+
<div class="input-container"><label>Green</label><input class="effect" id="gamma.g" type="range" min="0" max="100" value="50"></div>
455+
<div class="input-container"><label>Blue</label><input class="effect" id="gamma.b" type="range" min="0" max="100" value="50"></div>
432456
<hr>
433457
</div>
434458
`);

‎lib/style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,4 +247,59 @@ body {
247247
.download-modal-content .button-download:hover {
248248
background: #ccc;
249249
transition: 0.3s;
250+
}
251+
252+
.toolpanel .input-container {
253+
display: flex;
254+
align-items: center;
255+
padding-top: 5px;
256+
padding-bottom: 5px;
257+
}
258+
259+
.toolpanel .input-container label {
260+
width: 50%;
261+
}
262+
263+
.toolpanel .input-container .custom-number-input {
264+
background: #ebebeb;
265+
display: flex;
266+
align-items: center;
267+
padding: 2px;
268+
height: 30px;
269+
background-color: #e4e4e4;
270+
border-radius: 6px;
271+
text-align: center;
272+
}
273+
274+
.toolpanel .input-container .custom-number-input button {
275+
width: 36px !important;
276+
height: 30px !important;
277+
background-color: #fff;
278+
background-clip: padding-box;
279+
border-radius: 6px;
280+
color: #333;
281+
border: 1px solid transparent;
282+
font-size: 16px;
283+
cursor: pointer;
284+
outline: none;
285+
}
286+
287+
.toolpanel .input-container .custom-number-input input {
288+
height: 30px !important;
289+
width: 60px !important;
290+
background: transparent !important;
291+
border: none;
292+
outline: none;
293+
text-align: center;
294+
}
295+
296+
.toolpanel .input-container .custom-number-input input::-webkit-outer-spin-button,
297+
.toolpanel .input-container .custom-number-input input::-webkit-inner-spin-button {
298+
-webkit-appearance: none;
299+
margin: 0;
300+
}
301+
302+
/* Firefox */
303+
.toolpanel .input-container .custom-number-input input[type=number] {
304+
-moz-appearance: textfield;
250305
}

0 commit comments

Comments
 (0)