Skip to content

Commit e9b1bac

Browse files
zombieFoxzombieFox
committed
[feature] add drag and drop link sort
1 parent c1cce01 commit e9b1bac

File tree

12 files changed

+97
-59
lines changed

12 files changed

+97
-59
lines changed

‎css/link.css‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,19 @@
6767
transition: none;
6868
}
6969

70+
.link-item-placeholder{
71+
background-color:rgba(var(--theme-accent),0.2);
72+
border-radius:var(--theme-radius);
73+
width:100%;
74+
height:100%;
75+
position: relative;
76+
top:50%;
77+
left:50%;
78+
transform:translate(-50%,-50%);
79+
box-shadow: inset 000var(--line-width) rgb(var(--theme-accent)), inset 000calc(var(--line-width) *4) rgba(var(--theme-accent),0.1), inset 000calc(var(--line-width) *8) rgba(var(--theme-accent),0.1);
80+
pointer-events: none;
81+
}
82+
7083
.link-panel-front{
7184
background-color:rgb(var(--gray-02));
7285
border-radius:var(--theme-radius);
@@ -206,6 +219,7 @@
206219

207220
.link-control-item{
208221
background-color: transparent;
222+
border-radius:0;
209223
margin-bottom:0;
210224
border:0;
211225
padding:0;
@@ -260,9 +274,9 @@
260274
justify-content: flex-end;
261275
}
262276

263-
.link-item:focus-within .link-url,
264-
.link-item:focus .link-url,
265-
.link-item:hover .link-url{
277+
.is-link-url-show .link-item:focus-within .link-url,
278+
.is-link-url-show .link-item:focus .link-url,
279+
.is-link-url-show .link-item:hover .link-url{
266280
height:var(--link-item-url-height);
267281
}
268282

‎index.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -875,21 +875,14 @@ <h1 class="menu-item-header-text">Style</h1>
875875
<h1class="menu-item-header-text">Sort</h1>
876876
</div>
877877
<divclass="menu-item-form">
878-
<divclass="input-wrap">
879-
<inputid="control-link-sort-none" class="control-link-sort-none" type="radio" name="control-link-sort" value="none" tabindex="1">
880-
<labelfor="control-link-sort-none">None (as added)</label>
881-
</div>
882-
<divclass="input-wrap">
883-
<inputid="control-link-sort-letter" class="control-link-sort-letter" type="radio" name="control-link-sort" value="letter" tabindex="1">
884-
<labelfor="control-link-sort-letter">Letter</label>
878+
<divclass="button-wrap">
879+
<buttonclass="control-link-sort-letter button mb-0" tabindex="1">By Letter</button>
885880
</div>
886-
<divclass="input-wrap">
887-
<inputid="control-link-sort-icon" class="control-link-sort-icon" type="radio" name="control-link-sort" value="icon" tabindex="1">
888-
<labelfor="control-link-sort-icon">Icon</label>
881+
<divclass="button-wrap">
882+
<buttonclass="control-link-sort-icon button mb-0" tabindex="1">By Icon</button>
889883
</div>
890-
<divclass="input-wrap">
891-
<inputid="control-link-sort-name" class="control-link-sort-name" type="radio" name="control-link-sort" value="name" tabindex="1">
892-
<labelfor="control-link-sort-name">Name</label>
884+
<divclass="button-wrap">
885+
<buttonclass="control-link-sort-name button mb-0" tabindex="1">By Name</button>
893886
</div>
894887
</div>
895888
</div>
@@ -1010,6 +1003,9 @@ <h1 class="menu-item-header-text">Image</h1>
10101003

10111004
</body>
10121005

1006+
<!-- vendor -->
1007+
<scriptsrc="js/vendor/html5sortable.min.js"></script>
1008+
<!-- nightTab -->
10131009
<scriptsrc="js/helper.js"></script>
10141010
<scriptsrc="js/data.js"></script>
10151011
<scriptsrc="js/fontawesome.js"></script>

‎js/bookmarks.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -183,27 +183,10 @@ var bookmarks = (function(){
183183
};
184184
returnfound;
185185
};
186-
var_allBookmarks=function(){
187-
varaction={
188-
none: function(array){
189-
returnhelper.sortObject(array,"timeStamp");
190-
},
191-
name: function(array){
192-
returnhelper.sortObject(array,"name");
193-
},
194-
letter: function(array){
195-
returnhelper.sortObject(array,"letter");
196-
},
197-
icon: function(array){
198-
returnhelper.sortObject(array,"icon.name");
199-
}
200-
};
201-
returnaction[state.get().link.sort](all);
202-
};
203186
if(data&&typeofdata.timeStamp=="number"){
204187
return_singleBookmark();
205188
}else{
206-
return_allBookmarks();
189+
returnall;
207190
};
208191
};
209192

@@ -233,6 +216,25 @@ var bookmarks = (function(){
233216
};
234217
};
235218

219+
varsort=function(by){
220+
varaction={
221+
name: function(array){
222+
returnhelper.sortObject(array,"name");
223+
},
224+
letter: function(array){
225+
returnhelper.sortObject(array,"letter");
226+
},
227+
icon: function(array){
228+
returnhelper.sortObject(array,"icon.name");
229+
}
230+
};
231+
all=action[by](all);
232+
};
233+
234+
varmove=function(origin,destination){
235+
all=helper.moveArrayItem(all,origin,destination);
236+
};
237+
236238
varinit=function(){
237239
if(data.load()){
238240
restore(data.load());
@@ -246,6 +248,8 @@ var bookmarks = (function(){
246248
get: get,
247249
add: add,
248250
edit: edit,
251+
sort: sort,
252+
move: move,
249253
remove: remove,
250254
restore: restore
251255
};

‎js/control.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1918,35 +1918,27 @@ var control = (function(){
19181918
func: function(){
19191919
render();
19201920
}
1921-
},{
1922-
element: helper.e(".control-link-sort-none"),
1923-
path: "link.sort",
1924-
type: "radio",
1925-
func: function(){
1926-
link.clear();
1927-
link.render.item.all();
1928-
}
19291921
},{
19301922
element: helper.e(".control-link-sort-letter"),
1931-
path: "link.sort",
1932-
type: "radio",
1923+
type: "button",
19331924
func: function(){
1925+
bookmarks.sort("letter");
19341926
link.clear();
19351927
link.render.item.all();
19361928
}
19371929
},{
19381930
element: helper.e(".control-link-sort-icon"),
1939-
path: "link.sort",
1940-
type: "radio",
1931+
type: "button",
19411932
func: function(){
1933+
bookmarks.sort("icon");
19421934
link.clear();
19431935
link.render.item.all();
19441936
}
19451937
},{
19461938
element: helper.e(".control-link-sort-name"),
1947-
path: "link.sort",
1948-
type: "radio",
1939+
type: "button",
19491940
func: function(){
1941+
bookmarks.sort("name");
19501942
link.clear();
19511943
link.render.item.all();
19521944
}
@@ -2712,7 +2704,6 @@ var control = (function(){
27122704
helper.e(".control-link-new-tab").disabled=true;
27132705
helper.e(".control-link-style-block").disabled=true;
27142706
helper.e(".control-link-style-list").disabled=true;
2715-
helper.e(".control-link-sort-none").disabled=true;
27162707
helper.e(".control-link-sort-name").disabled=true;
27172708
helper.e(".control-link-sort-letter").disabled=true;
27182709
helper.e(".control-link-sort-icon").disabled=true;
@@ -2735,7 +2726,6 @@ var control = (function(){
27352726
helper.e(".control-link-new-tab").disabled=false;
27362727
helper.e(".control-link-style-block").disabled=false;
27372728
helper.e(".control-link-style-list").disabled=false;
2738-
helper.e(".control-link-sort-none").disabled=false;
27392729
helper.e(".control-link-sort-name").disabled=false;
27402730
helper.e(".control-link-sort-letter").disabled=false;
27412731
helper.e(".control-link-sort-icon").disabled=false;

‎js/helper.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ var helper = (function(){
267267
returnelement;
268268
};
269269

270-
function_makeAddress(path){
270+
var_makeAddress=function(path){
271271
vararray;
272272
if(path.indexOf("[")!=-1&&path.indexOf("]")!=-1){
273273
array=path.split(".").join(",").split("[").join(",").split("]").join(",").split(",");
@@ -285,7 +285,7 @@ var helper = (function(){
285285
returnarray;
286286
};
287287

288-
functionsetObject(override){
288+
varsetObject=function(override){
289289
varoptions={
290290
path: null,
291291
object: null,
@@ -321,7 +321,7 @@ var helper = (function(){
321321
};
322322
};
323323

324-
functiongetObject(override){
324+
vargetObject=function(override){
325325
varoptions={
326326
object: null,
327327
path: null
@@ -360,7 +360,7 @@ var helper = (function(){
360360
};
361361
};
362362

363-
functionmakeObject(string){
363+
varmakeObject=function(string){
364364
var_stringOrBooleanOrNumber=function(stringToTest){
365365
if(stringToTest=="true"){
366366
returntrue;
@@ -419,6 +419,17 @@ var helper = (function(){
419419
};
420420
};
421421

422+
varmoveArrayItem=function(array,oldIndex,newIndex){
423+
if(newIndex>=array.length){
424+
vark=newIndex-array.length+1;
425+
while(k--){
426+
array.push(undefined);
427+
};
428+
};
429+
array.splice(newIndex,0,array.splice(oldIndex,1)[0]);
430+
returnarray;
431+
};
432+
422433
varallEqual=function(array){
423434
returnarray.every(function(arrayItem){
424435
returnarrayItem===array[0];
@@ -564,6 +575,7 @@ var helper = (function(){
564575
setObject: setObject,
565576
getObject: getObject,
566577
makeObject: makeObject,
578+
moveArrayItem: moveArrayItem,
567579
randomNumber: randomNumber,
568580
toWords: toWords,
569581
ordinalWords: ordinalWords,

‎js/init.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ transitional.init();
1212
date.init();
1313
clock.init();
1414
keyboard.init();
15-
tip.init();
1615
layout.init();
1716
background.init();
1817
search.init();

‎js/link.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
varlink=(function(){
22

3+
varbind=function(){
4+
sortable(".link-area",{
5+
items: ".link-item",
6+
placeholder: helper.node("div|class:link-item-placeholder")
7+
});
8+
sortable(".link-area")[0].addEventListener("sortupdate",function(event){
9+
bookmarks.move(event.detail.origin.index,event.detail.destination.index);
10+
data.save();
11+
});
12+
};
13+
314
var_previousFocusLink=null;
415

516
var_returnToPreviousFocusLink=function(){
@@ -658,6 +669,7 @@ var link = (function(){
658669
render.item.display.letter();
659670
render.item.display.icon();
660671
render.item.name();
672+
bind();
661673
};
662674

663675
// exposed methods

‎js/state.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,7 @@ var state = (function(){
167167
show: true,
168168
newTab: false,
169169
edit: false,
170-
style: "block",
171-
sort: "none"
170+
style: "block"
172171
},
173172
layout: {
174173
alignment: {

‎js/update.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,12 @@ var update = (function(){
478478
returndata;
479479
};
480480

481+
var_update_3150=function(data){
482+
data.version="3.15.0";
483+
deletedata.state.link.sort;
484+
returndata;
485+
};
486+
481487
// var _update_300 = function(data){
482488
// data.version = 3.00;
483489
// return data;
@@ -608,6 +614,10 @@ var update = (function(){
608614
console.log("\t= running update 3.11.0");
609615
data=_update_3110(data);
610616
};
617+
if(version.compare(data.version,"3.15.0")==-1){
618+
console.log("\t= running update 3.15.0");
619+
data=_update_3150(data);
620+
};
611621
};
612622
// if no update is needed
613623
// version bump

0 commit comments

Comments
(0)