Skip to content

Commit f536395

Browse files
minjk-blminjk-bl
committed
Improve snippets click & double click motion for title input & editing
1 parent f9694f8 commit f536395

3 files changed

Lines changed: 117 additions & 48 deletions

File tree

‎css/file_io/udf.css‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
#vp-wrapper .vp-udf-page .CodeMirror-scroll { min-height: 80px; max-height: 250px;}
88

99
/* udf option header */
10-
.vp-option-header {
10+
/* .vp-option-header {
1111
padding-bottom: 3px;
1212
}
1313
.vp-option-header label {
@@ -18,10 +18,10 @@
1818
}
1919
.vp-option-header button {
2020
width: 70px;
21-
}
21+
} */
2222

2323
/* udf list table */
24-
#vp_udfList tr:not(:first-child):hover,
24+
/* #vp_udfList tr:not(:first-child):hover,
2525
#vp_udfList tr.selected {
2626
color: var(--font-hightlight);
2727
background-color: #F5F5F5;
@@ -39,10 +39,10 @@
3939
text-overflow: ellipsis;
4040
width: 100%;
4141
overflow: hidden;
42-
}
42+
} */
4343

4444
/* code td 긴 문자열 생략 */
45-
.vp-udf-code,
45+
/* .vp-udf-code,
4646
.vp-udf-code pre {
4747
text-overflow: ellipsis;
4848
overflow: hidden;
@@ -53,15 +53,15 @@
5353
5454
background: #ffffff00;
5555
border: 0px;
56-
}
56+
} */
5757

5858
/* 새로고침 버튼 */
59-
#vp_udfRefresh {
59+
/* #vp_udfRefresh {
6060
padding: 5px;
6161
}
6262
#vp_udfRefresh:hover {
6363
cursor: pointer;
64-
}
64+
} */
6565

6666
/* 삭제 버튼 */
6767
.vp-del-col {
@@ -243,6 +243,9 @@
243243
border: 0.25px solid var(--border-gray-color);
244244
box-sizing: border-box;
245245
}
246+
.vp-sn-item-header.selected {
247+
background: #F5F5F5;
248+
}
246249
.vp-sn-item-header .vp-sn-indicator {
247250
display: inline-block;
248251
cursor: pointer;
@@ -255,18 +258,17 @@
255258
.vp-sn-item-header .vp-sn-indicator.open {
256259
background-image: url(../../resource/chevron_big_down.svg) !important;
257260
}
258-
.vp-sn-item-title {
261+
#vp_udfPage .vp-sn-item-header input.vp-sn-item-title {
259262
width: calc(100% - 80px);
260263
outline: none;
261-
border: 0.5px solid white !important;
264+
background: transparent;
265+
border: 0.5px solid transparent;
262266
}
263-
.vp-sn-item.selected .vp-sn-item-title {
264-
background: #F5F5F5;
267+
#vp_udfPage .vp-sn-item-header.selected input.vp-sn-item-title {
265268
color: var(--font-hightlight);
266269
}
267-
.vp-sn-item-title:focus {
270+
#vp_udfPage .vp-sn-item-header input.vp-sn-item-title:focus {
268271
transition: 0.7s;
269-
border: 1px solid #FFCF73;
270272
border: 0.5px solid var(--hightlight-color) !important;
271273
}
272274
.vp-sn-imported-item {

‎src/file_io/udf.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- TEST: Added class 'cm-s-ipython' to give codemirror same style with Jupyter -->
2-
<div class="vp-option-page vp-udf-page cm-s-ipython" id="vp_inputPage">
2+
<div class="vp-option-page vp-udf-page cm-s-ipython" id="vp_udfPage">
33
<div class="vp-sn-body">
44
<div class="vp-sn-header">
55
<label>Snippets</label>

‎src/file_io/udf.js‎

Lines changed: 100 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ define([
8181
this.importedList = [];
8282
this.title_no = 0;
8383

84+
// double click setter
85+
this.clicked = 0;
86+
8487
// file navigation : state 데이터 목록
8588
this.state = {
8689
paramData:{
@@ -138,22 +141,22 @@ define([
138141
var that = this;
139142

140143
// toggle item codebox
141-
$(document).on('click', this.wrapSelector('.vp-sn-item-header .vp-sn-indicator'), function() {
142-
var parent = $(this).parent();
143-
var hasOpen = $(this).hasClass('open');
144-
// hide all codebox
145-
$(that.wrapSelector('.vp-sn-indicator')).removeClass('open');
146-
$(that.wrapSelector('.vp-sn-item-code')).hide();
144+
// $(document).on('click', this.wrapSelector('.vp-sn-item-header .vp-sn-indicator'), function() {
145+
// var parent = $(this).parent();
146+
// var hasOpen = $(this).hasClass('open');
147+
// // hide all codebox
148+
// $(that.wrapSelector('.vp-sn-indicator')).removeClass('open');
149+
// $(that.wrapSelector('.vp-sn-item-code')).hide();
147150

148-
if (!hasOpen) {
149-
// show code
150-
$(this).addClass('open');
151-
$(parent).parent().find('.vp-sn-item-code').show();
152-
} else {
153-
// hide code
154-
$(parent).parent().find('.vp-sn-item-code').hide();
155-
}
156-
});
151+
// if (!hasOpen) {
152+
// // show code
153+
// $(this).addClass('open');
154+
// $(parent).parent().find('.vp-sn-item-code').show();
155+
// } else {
156+
// // hide code
157+
// $(parent).parent().find('.vp-sn-item-code').hide();
158+
// }
159+
// });
157160

158161
// menu popup
159162
$(document).on('click', this.wrapSelector('.vp-sn-menu'), function(evt) {
@@ -285,27 +288,91 @@ define([
285288
that.title_no += 1;
286289
});
287290

291+
// item header click (toggle & select item) & double click (edit title)
292+
$(document).on('click', this.wrapSelector('.vp-sn-item-header'), function(evt) {
293+
var thisHeader = this;
294+
that.clicked++;
295+
if (that.clicked == 1) {
296+
setTimeout(function(){
297+
if(that.clicked > 1) {
298+
// double click
299+
// enable input
300+
$(thisHeader).find('.vp-sn-item-title').prop('disabled', false);
301+
$(thisHeader).find('.vp-sn-item-title').focus();
302+
303+
}
304+
// single click
305+
// select item
306+
// remove selection
307+
$(that.wrapSelector('.vp-sn-item-header')).removeClass('selected');
308+
// select item
309+
$(thisHeader).addClass('selected');
310+
311+
// toggle item
312+
var parent = $(thisHeader).parent();
313+
var indicator = $(thisHeader).find('.vp-sn-indicator');
314+
var hasOpen = $(indicator).hasClass('open');
315+
// hide all codebox
316+
$(that.wrapSelector('.vp-sn-indicator')).removeClass('open');
317+
$(that.wrapSelector('.vp-sn-item-code')).hide();
318+
319+
if (that.clicked > 1 || !hasOpen) {
320+
// show code
321+
$(indicator).addClass('open');
322+
$(parent).find('.vp-sn-item-code').show();
323+
} else {
324+
// hide code
325+
$(parent).find('.vp-sn-item-code').hide();
326+
}
327+
that.clicked = 0;
328+
}, 200);
329+
}
330+
evt.stopPropagation();
331+
});
332+
333+
// prevent occuring header click event by clicking input
334+
$(document).on('click', this.wrapSelector('.vp-sn-item-title'), function(evt) {
335+
evt.stopPropagation();
336+
});
337+
288338
// item title save
289-
$(document).on('change', this.wrapSelector('.vp-sn-item-title'), function(evt) {
339+
$(document).on('blur', this.wrapSelector('.vp-sn-item-title'), function(evt) {
290340
var prevTitle = $(this).closest('.vp-sn-item').data('title');
291-
var newTitle = $(this).val();
341+
var inputTitle = $(this).val();
292342

293-
that.codemirrorList[prevTitle].save();
294-
var code = that.codemirrorList[prevTitle].getValue();
295-
// 기존 title 제거
296-
vpSetting.removeUserDefinedCode(prevTitle);
297-
298-
// 새 title로 저장
299-
// save udf
300-
var newTimestamp = new Date().getTime();
301-
var newSnippet = { [newTitle]: { code: code, timestamp: newTimestamp } };
302-
vpSetting.saveUserDefinedCode(newSnippet);
343+
if (prevTitle == inputTitle) {
344+
;
345+
} else {
346+
// check duplicated
347+
var titleList = Object.keys(that.codemirrorList);
348+
var newTitle = inputTitle;
349+
var dupNo = 0
350+
while(titleList.includes(newTitle)) {
351+
dupNo += 1;
352+
newTitle = inputTitle + '_' + dupNo;
353+
}
354+
355+
that.codemirrorList[prevTitle].save();
356+
var code = that.codemirrorList[prevTitle].getValue();
357+
// 기존 title 제거
358+
vpSetting.removeUserDefinedCode(prevTitle);
359+
360+
// 새 title로 저장
361+
// save udf
362+
var newTimestamp = new Date().getTime();
363+
var newSnippet = { [newTitle]: { code: code, timestamp: newTimestamp } };
364+
vpSetting.saveUserDefinedCode(newSnippet);
365+
366+
// update title & codemirror
367+
$(this).closest('.vp-sn-item-title').val(newTitle);
368+
$(this).closest('.vp-sn-item').data('title', newTitle);
369+
// update codemirror
370+
that.codemirrorList[newTitle] = that.codemirrorList[prevTitle];
371+
delete that.codemirrorList[prevTitle];
372+
}
303373

304-
// update title & codemirror
305-
$(this).closest('.vp-sn-item').data('title', newTitle);
306-
// update codemirror
307-
that.codemirrorList[newTitle] = that.codemirrorList[prevTitle];
308-
delete that.codemirrorList[prevTitle];
374+
// disable
375+
$(this).prop('disabled', true);
309376
});
310377

311378
// item menu click
@@ -489,7 +556,7 @@ define([
489556
item.appendFormatLine('<div class="{0}" data-title="{1}" data-timestamp="{2}">', 'vp-sn-item', title, timestamp);
490557
item.appendFormatLine('<div class="{0}">', 'vp-sn-item-header');
491558
item.appendFormatLine('<div class="{0}"></div>', 'vp-sn-indicator');
492-
item.appendFormatLine('<input type="text" class="{0}" value="{1}" />', 'vp-sn-item-title', title);
559+
item.appendFormatLine('<input type="text" class="{0}" value="{1}" disabled/>', 'vp-sn-item-title', title);
493560
if (hasImported) {
494561
item.appendFormatLine('<i class="{0}"></i>', 'fa fa-circle vp-sn-imported-item');
495562
}

0 commit comments

Comments
 (0)