panel

LingDong- · Oct 2, 2019 · fa78524 · fa78524
1 parent d3e5f15
commit fa78524
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -16,10 +16,19 @@
       <div class="ribbon">
         韵书<select class="selectRhymebook"></select>&nbsp;&nbsp;&nbsp;&nbsp;
         格律<select class="selectMeter"></select>
+        <button class="btnOpenPanel"></button>
       </div>
     </div>
+
     <div class="main">
 
     </div>
+    <div class="panel panelHidden">
+      <div class="panelInner">
+        <select class="selectRhymeGroup"><option>东</option></select>
+        <input class="searchInput"></input>
+        <div class="panelMain"></div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -15,6 +15,7 @@ function createWindow () {
     height: 600,
     useContentSize:true,
     titleBarStyle: 'hidden',
+    backgroundColor: '#1e2124',
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: true,

diff --git a/src/app.js b/src/app.js
@@ -2,7 +2,9 @@ var notebook;
 var cellDoms = [];
 var lastFocusTextDom = undefined;
 var bogusFocusChange = false;
+var panelOpen = false;
 
+var mainDom = document.getElementsByClassName("main")[0];
 
 var meterDom = document.getElementsByClassName("selectMeter")[0];
 meterDom.onchange = function(){
@@ -26,6 +28,7 @@ rhymebookDom.onchange = function(){
     lastFocusTextDom.focus();
     notebook.cells[getCurrentCellIndex()].rhymebook = rhymebookDom.value
   }
+  updateSelectRhymeGroup();
 }
 for (var k in RHYMEBOOKS){
   var op = document.createElement('option');
@@ -34,11 +37,90 @@ for (var k in RHYMEBOOKS){
   rhymebookDom.appendChild(op);
 }
 
+
+function updateSelectRhymeGroup(){
+  var sel = document.getElementsByClassName("selectRhymeGroup")[0]
+  sel.innerHTML = "";
+  var book = RHYMEBOOKS[rhymebookDom.value]
+  for (var i = 0; i < book.length; i++){
+    for (var j = 0; j < book[i].length; j++){
+      var k = book[i][j][0];
+      var op = document.createElement('option');
+      op.innerHTML = k
+      op.value = i+","+j
+      sel.appendChild(op);
+    }
+  }
+  updateViewRhymeGroup();
+  sel.onchange = updateViewRhymeGroup;
+}
+
+function updateViewRhymeGroup(){
+  var div = document.getElementsByClassName("panelMain")[0]
+  var sel = document.getElementsByClassName("selectRhymeGroup")[0]
+  var inp = document.getElementsByClassName("searchInput")[0]
+
+  var [i,j] = sel.value.split(",");
+  div.innerHTML = RHYMEBOOKS[rhymebookDom.value][i][j].split('').map(function(x){
+    if (x==inp.value){
+      return `<span style="color:var(--color-text-hl)"><b>${x}</b></span>`
+    }else{
+      return x;
+    }
+  }).join(" ");
+}
+function updateSearchForRhymeGroup(){
+
+  var inp = document.getElementsByClassName("searchInput")[0]
+  var sel = document.getElementsByClassName("selectRhymeGroup")[0]
+
+  var book = RHYMEBOOKS[rhymebookDom.value]
+  for (var i = 0; i < book.length; i++){
+    for (var j = 0; j < book[i].length; j++){
+      var k = book[i][j].indexOf(inp.value[0])
+      if (k != -1){
+        sel.value = i+","+j
+        break
+      }
+    }
+  }
+  updateViewRhymeGroup();
+}
+var cachedSearchRhymeGroupValue = "";
+setInterval(function(){
+  var inp = document.getElementsByClassName("searchInput")[0]
+  if (inp.value.length && inp.value != cachedSearchRhymeGroupValue){
+    cachedSearchRhymeGroupValue = inp.value
+    updateViewRhymeGroup();
+  }
+},100)
+document.getElementsByClassName("searchInput")[0].onchange = updateSearchForRhymeGroup;
+updateSelectRhymeGroup();
+
+
+
+var btnOpenPanel = document.getElementsByClassName("btnOpenPanel")[0];
+var panelDom = document.getElementsByClassName("panel")[0]
+var iconLeft = makeIcon({name:"left",width:12,height:12,stroke:5,color:"--color-text-dim"});
+var iconRight = makeIcon({name:"right",width:12,height:12,stroke:5,color:"--color-text-dim"});
+btnOpenPanel.innerHTML = iconLeft
+btnOpenPanel.onclick = function(){
+  panelOpen = !panelOpen;
+  if (panelOpen){
+    btnOpenPanel.innerHTML = iconRight;
+    panelDom.classList.remove("panelHidden")
+    mainDom.classList.add("mainSided");
+  }else{
+    btnOpenPanel.innerHTML = iconLeft;
+    panelDom.classList.add("panelHidden")
+    mainDom.classList.remove("mainSided");
+  }
+}
 function loadNotebook(path){
   notebook = loadJSON(path);
   cellDoms = []
   lastFocusTextDom = undefined;
-  document.getElementsByClassName("main")[0].innerHTML = "";
+  mainDom.innerHTML = "";
   for (var i = 0; i < notebook.cells.length; i++){
     insertCellFromNotebook(cellDoms.length, notebook.cells[i]);
   }
@@ -97,9 +179,9 @@ function insertCellFromNotebook(idx,cell){
     }
   })
   if (!cellDoms.length){
-    document.getElementsByClassName("main")[0].appendChild(cellDom);
+    mainDom.appendChild(cellDom);
   }else{
-    document.getElementsByClassName("main")[0].insertBefore(cellDom,cellDoms[idx]);
+    mainDom.insertBefore(cellDom,cellDoms[idx]);
   }
   cellDoms.splice(idx,0,cellDom);
   return cellDom
@@ -114,7 +196,7 @@ function insertCell(idx,text){
 
 var menuFunctions = {
   removeCell: function(idx){
-    document.getElementsByClassName("main")[0].removeChild(cellDoms[idx])
+    mainDom.removeChild(cellDoms[idx])
     notebook.cells.splice(idx,1);
     cellDoms.splice(idx,1);
   },

diff --git a/style/color.css b/style/color.css
@@ -17,6 +17,7 @@
   --color-error-line: rgba(255,100,100,0.4);
   --color-warn-line: rgba(255,240,50,0.4);
   --color-button-bg: rgb(40,43,46);
+  --color-button-active: rgb(41,82,185);
 }
 
 /*:root {

diff --git a/style/style.css b/style/style.css
@@ -27,7 +27,33 @@ body{
   overflow: scroll;
   padding-left: 20px;
   padding-right: 20px;
+  transition: width 0.2s;
 }
+.mainSided{
+  width: calc(100% - 240px);
+}
+
+.panel{
+  position: absolute;
+  top: 60px;
+  right: 0px;
+  overflow: scroll;
+  width:200px;
+  height: calc(100% - 60px);
+  transition: width 0.2s;
+}
+
+.panelHidden{
+  width:0px;
+}
+
+.panelInner{
+  width: 180px;
+  margin: 10px 20px 10px 0px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .noSelect {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -156,10 +182,8 @@ body{
   padding: 12px;
   padding-bottom: 8px;
 }
-.selectRhymebook{
-
-}
-select{
+
+select, button{
   display: inline-block;
   -webkit-app-region: no-drag;
   background-color: var(--color-button-bg);
@@ -171,9 +195,48 @@ select{
   border-bottom: 1px solid rgba(0,0,0,0.15);
   box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
   margin: 2px;
-  padding-left: 100px;
+  padding-left:  10px;
   padding-right: 10px;
   outline: none;
   font-family: sans-serif;
   font-size: 12px;
 }
+button:active{
+  background-color: var(--color-button-active);
+}
+
+input {
+  color: var(--color-text);
+  background: var(--color-textarea-bg);
+  border: none;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-radius: 2px 2px 2px 2px;
+  font-family: sans-serif;
+  font-size: 15px;
+}
+input:focus {
+  outline: none;
+  box-shadow: -2px 0px 3px rgba(0,0,0,0.2) inset, 0px 0px 0px 1px var(--color-border-focus);
+}
+
+.btnOpenPanel{
+  float: right;
+  margin-right: 10px;
+  padding-top: 4px;
+}
+
+.searchInput{
+  transform: translate(4px,2px);
+  width: 120px;
+}
+
+.panelMain{
+  color: var(--color-text-dim);
+  white-space: normal;
+  word-break: break-all;
+  height: auto;
+  padding: 5px;
+  padding-left: 10px;
+  font-size: 14px;
+}