From c942c614b4c683f48c8854065662905c13608057 Mon Sep 17 00:00:00 2001 From: Alex Pankratov Date: Fri, 2 Apr 2021 01:59:34 +0200 Subject: [PATCH] + board reordering in the index --- nullboard.html | 186 ++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 153 insertions(+), 33 deletions(-) diff --git a/nullboard.html b/nullboard.html index cced3d6..073f6e8 100644 --- a/nullboard.html +++ b/nullboard.html @@ -528,7 +528,7 @@ } /***/ - .dragster { + .note-dragster { z-index: 2; position: absolute; opacity: 0; @@ -547,15 +547,19 @@ 0px 1px 3px #00000030; } - .dragster a { + .note-dragster a { color: #000; } - .dragster.collapsed { + .note-dragster.collapsed { overflow: hidden; line-height: 22px; padding-top: 0; padding-bottom: 11px; + box-shadow: 1px 2px 3px #00000050; + background: #fff; +x- white-space: pre-wrap; + cursor: move; } /***/ @@ -652,26 +656,53 @@ border-bottom: 1px solid #00000028; } - .config .bulk div a { + .config .boards a.load-board { display: block; margin-right: 10px; + padding: 0 5px; + margin-left: -5px; } - .config .bulk div a.active { + .config .boards a.load-board.active { color: #1489db; } - .config .bulk div a.active:before { + .config .boards a.load-board.active:before { content: '\2022 '; display: inline-block; width: 13px; margin-left: -13px; } - .config .bulk div a.active:hover { + .config .boards a.load-board.active:hover { color: #000; } + .config .boards a.load-board.dragging { + background: #DDE1E5; + border-radius: 2px; + color: transparent; + } + + .load-dragster { + z-index: 10; + position: absolute; + opacity: 0; + font-size: 11px; + line-height: 19px; + padding-left: 5px; + background: #fff; + color: #000; + border-radius: 2px; + cursor: move; + + box-shadow: 0 +1px 0 #ACB4BC inset, + 0 -1px 0 #ACB4BC inset, + +1px 0 0 #ACB4BC inset, + -1px 0 0 #ACB4BC inset, + 0px 1px 3px #00000030; + } + .config .bulk a i, .config .bulk a b { font-style: normal; @@ -907,6 +938,7 @@ color: #fc2; } + /***/ .theme-dark .board .note.dragging, .theme-dark .board .note.dragging.raw { background: #15171A; @@ -916,16 +948,15 @@ -1px 0 0 #000 inset; } - .theme-dark .dragster { + .theme-dark .note-dragster { box-shadow: 0px 1px 4px #000000; background: #2e3032; } - .theme-dark .dragster a { + .theme-dark .note-dragster a { color: #d6d6d6; } - /***/ .theme-dark textarea, .theme-dark input { @@ -960,10 +991,14 @@ border-bottom: 1px solid #fff2; } - .theme-dark .config .bulk div a.active { + .theme-dark .config .boards a.load-board.active { color: #fc2; } + .theme-dark .config .boards a.load-board.active:hover { + color: #ddd; + } + .theme-dark .config .bulk a.switch-theme { border-top: 1px solid #fff2; } @@ -976,6 +1011,19 @@ display: none; } + /***/ + .theme-dark .config .bulk .boards .load-board.dragging { + background: #fff1; + color: transparent + } + + .theme-dark .load-dragster { + background: rgb(230, 177, 2); + box-shadow: 0px 2px 4px #000; + outline 1px solid #fc2; + color: #111; + } + /***/ .theme-dark .logo a { color: #ccc; @@ -1038,7 +1086,7 @@ .fsize-z1 .board .note .text, .fsize-z1 .board .note .edit, - .fsize-z1 .dragster { + .fsize-z1 .note-dragster { font-size: 13px; } @@ -1055,7 +1103,7 @@ line-height: 25px; } - .fsize-z1 .dragster.collapsed { + .fsize-z1 .note-dragster.collapsed { line-height: 25px; } @@ -1074,13 +1122,14 @@ } /***/ - .fsize-z1 .config { + .fsize-z1 .config, + .fsize-z1 .load-dragster { font-size: 13px; line-height: 21px; } - .fsize-z1 .config .bulk div a.active:before { - width: 15px; + .fsize-z1 .config .boards a.load-board.active:before { + width: 13px; } .fsize-z1 .config a.switch-fsize i { @@ -1199,7 +1248,7 @@ - + @@ -1234,6 +1283,7 @@ { this.title = ''; this.current = 1; // revision + this.ui_spot = 0; // 0 = not set this.history = [ ]; // revision IDs } @@ -1441,6 +1491,18 @@ return this.setJson('board.' + board_id + '.meta', meta); } + setBoardUiSpot(board_id, ui_spot) + { + var meta = this.boardIndex.get(board_id); + + if (! meta) + throw `Invalid board_id in setBoardRevision(${board_id}, ${revision})`; + + meta.ui_spot = ui_spot; + + return this.setJson('board.' + board_id + '.meta', meta); + } + /* * private */ @@ -1681,6 +1743,7 @@ // config this.listSel = null; this.itemSel = null; + this.dragster = null; this.onDragging = function(started) { } this.swapAnimMs = 200; @@ -1737,8 +1800,8 @@ var $item = $(this.item); $item.addClass('dragging'); - $('body').append('
'); - var $drag = $('body .dragster').last(); + $('body').append('
'); + var $drag = $('body .' + this.dragster).last(); $drag.innerWidth ( $item.innerWidth() ); $drag.innerHeight( $item.innerHeight() ); @@ -1755,6 +1818,7 @@ var pos = $item.offset(); this.delta.x = pos.left - this.mouseEv.clientX - scroll_x; this.delta.y = pos.top - this.mouseEv.clientY - scroll_y; + this.adjustDrag(); $drag.css({ opacity: 1 }); @@ -2493,6 +2557,20 @@ openBoard(data[0].id); } + /* + * + */ + function saveBoardOrder() + { + var $index = $('.config .load-board'); + var spot = 1; + + $index.each(function(){ + var id = parseInt( $(this).attr('board_id') ); + NB.storage.setBoardUiSpot(id, spot++); + }); + } + /* * */ @@ -2544,14 +2622,19 @@ $index.hide(); var boards = NB.storage.getBoardIndex(); + var index = []; - boards.forEach(function(meta, board_id){ + boards.forEach(function(meta, id){ index.push({ id: id, meta: meta }); }); + + index.sort(function(a, b){ return b.meta.ui_spot && a.meta.ui_spot > b.meta.ui_spot; }); + + index.forEach(function(entry){ var $e = $entry.clone(); - $e[0].board_id = board_id; - $e.html(meta.title); + $e.attr('board_id', entry.id); + $e.html(entry.meta.title); - if (board_id == id_now) + if (entry.id == id_now) $e.addClass('active'); $index.append($e); @@ -2868,11 +2951,12 @@ }; NB.storage = new Storage_Local(); - NB.drag = new Drag2(); - NB.drag.listSel = '.board .list'; - NB.drag.itemSel = '.note'; - NB.drag.onDragging = function(started) + NB.noteDrag = new Drag2(); + NB.noteDrag.listSel = '.board .list'; + NB.noteDrag.itemSel = '.note'; + NB.noteDrag.dragster = 'note-dragster'; + NB.noteDrag.onDragging = function(started) { var drag = this; var $note = $(drag.item); @@ -2897,6 +2981,33 @@ } } + NB.loadDrag = new Drag2(); + NB.loadDrag.listSel = '.config .boards'; + NB.loadDrag.itemSel = 'a.load-board'; + NB.loadDrag.dragster = 'load-dragster'; + NB.loadDrag.onDragging = function(started) + { + var drag = this; + + if (started) + { + var $drag = drag.$drag; + + $('.config .teaser').css({ display: 'none' }); + $('.config .bulk').css({ display: 'block', opacity: 1 }); + $drag.html( $(this.item).html() ); + } + else + { + $('.config .teaser').css({ display: '' }); + $('.config .bulk') + .show() + .delay(250) + .queue(function(){ $(this).css({ display: '', opacity: '' }).dequeue(); }); + saveBoardOrder(); + } + } + /* * event handlers */ @@ -2940,7 +3051,7 @@ return false; } - NB.drag.cancelPriming(); + NB.noteDrag.cancelPriming(); startEditing($(this), ev); return false; @@ -3079,12 +3190,14 @@ $('.config').on('click', '.load-board', function(){ - var board_id = $(this)[0].board_id; + var board_id = parseInt( $(this).attr('board_id') ); + + NB.loadDrag.cancelPriming(); if (NB.board && (NB.board.id == board_id)) closeBoard(); else - openBoard( $(this)[0].board_id ); + openBoard(board_id); return false; }); @@ -3150,16 +3263,23 @@ // $('.wrap').on('mousedown', '.board .note .text', function(ev){ - NB.drag.prime(this.parentNode, ev); + NB.noteDrag.prime(this.parentNode, ev); + }); + + $('.config').on('mousedown', 'a.load-board', function(ev){ + if ($('.config a.load-board').length > 1) + NB.loadDrag.prime(this, ev); }); $(document).on('mouseup', function(ev){ - NB.drag.end(); + NB.noteDrag.end(); + NB.loadDrag.end(); }); $(document).on('mousemove', function(ev){ setRevealState(ev); - NB.drag.onMouseMove(ev); + NB.noteDrag.onMouseMove(ev); + NB.loadDrag.onMouseMove(ev); }); //