eachWebsite has favorites

favorites4each_beta.user.js

// ==UserScript==
// @name        inging) favorites4eachVal
// @namespace   Violentmonkey Scripts
// @grant       none
// @version     1.0
// @author      -
// @include     /^https?://manamoa[0-9].*\/*/
// @include     *://tgd.kr/clips*
// @include     *://bbs.ruliweb.com/*
// @run-at      document-end
// @exclude     /^https?://copytoon[0-9].*\/*/
// @grant       GM_addStyle
// @grant       GM.setValue
// @grant       GM.getValue
// @require     https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js
// ==/UserScript==

/* TODO
 * 읽어오고 다시 쓰기 안 된 듯. 각 탭에서 덮어써짐 -> 쓰기전 읽어
 * import, export
 * draggable,
 * message, snackbar
 * sortable, name, added, drage
 * 
 */

(async () => {
  // let url_old = await window.location.hostname;
  // let url = await location.href;
  // let urlSub = await window.location.pathname + window.location.search;
  // let target = url_old.match(/[a-z]*/);
  // let domainName = Array.from(url.match(/(\/\/w{3}\.|\/\/)([a-z]*).*\./))[2];
  
  let domainName = Array.from(window.location.hostname.match(/((w{3}\.|[a-z]*\.)|)([a-z]*)(|[0-9]*)\.[a-z]{2,3}/))[3];
    
  // // 초기화
  // GM.setValue("favLocalStorage", JSON.stringify([]));
  
  // 초기 데이터 필요시
  let firstData;
    
  
  let favLocalStorage = [];
  
  let getFav = () => {
    favLocalStorage = JSON.parse(await GM.getValue("favLocalStorage"));
    console.log(domainName, '도메인 이름 겟', 'monkey 데이터 = ', favLocalStorage);
  };
  getFav();
  
  // let favLocalStorage = [];
  let targetLocalStorage = [];
  
  let getTargetLocalStorage = () => {
    getFav();
    if (favLocalStorage.length > 0) {
     
      // favLocalStorage.forEach(el=> {
      //   if(Object.keys(el) == domainName){
      //     targetLocalStorage = el[domainName];
      //   }
      // });
      
      let getList = favLocalStorage.filter(el => Object.keys(el) == domainName);
      // console.log('getList,',getList);
      
      if (getList.length > 0 ) {
        targetLocalStorage = getList[0][domainName];
      } else {
        targetLocalStorage = [];
        favLocalStorage.push({[domainName]:targetLocalStorage});
      }
      
    } else {
      favLocalStorage[0] = {[domainName]:targetLocalStorage};
    }
     // console.log('target 업데이트된 라인 value인지 확인', targetLocalStorage, favLocalStorage);
  }
  getTargetLocalStorage();
  
  const setTargetLocalStorage = async () => {
    
    if (favLocalStorage.length > 0) {
      let filteredList = favLocalStorage.filter(el=> Object.keys(el) != domainName);
      filteredList.push({[domainName]:targetLocalStorage});
      favLocalStorage = filteredList;  
    } 
    GM.setValue("favLocalStorage", JSON.stringify(favLocalStorage));
    
  };
  setTargetLocalStorage();
  
  let hoverMenuMarkup = `
      <div class="buttons">
        <div class="add_button">📝</div>
        <div class="clip_button">📂</div>
      </div>
      <div class='header'>
        <strong>${domainName}</strong>
      </div>
      <ul id="list_localstorage">
        ${targetLocalStorage.map((item, index) => `
          <li class="${index}"><button class="btn_delete_item">✖️</button> <a href="${Object.values(item)}">${Object.keys(item)}</a></li>
        `).join('')}
      </ul>
      <div class="bottom">
        <input id="portinput" type="text" />
        <button id="import">import</button>
        <button id="export" data-clipboard-action="copy" data-clipboard-target="#portinput">export</button>
      </div>
  `;
  
  
  let askingMenuMarkup = `
    <div class="inner">
      <div>
        <!--label for="sp_asking_title">이름</label-->
        <input type="text" id="sp_asking_title" name="sp_asking_title">
      </div>
      <div class="buttons">
        <button id="btn_asking_add">
          add
        </button>
        <button id="btn_asking_cancel">
          Cancel
        </button>
      </div>
   </div>
  `;
  
  // let iconButton = document.createElement("span");
  // iconButton.id ='sp_icon_button';
  // // iconButton.classList.add('fa','fa-smile-o');
  // iconButton.innerHTML = `<i class="fas fa-angle-double-right"></i>`;
  
  let wrapperDiv = document.createElement("div");
  wrapperDiv.id ='sp_wrapper';
  wrapperDiv.innerHTML = hoverMenuMarkup;
  
  let wrapperAskingDiv = document.createElement("div");
  wrapperAskingDiv.id ='sp_asking';
  wrapperAskingDiv.innerHTML = await askingMenuMarkup;
  
  // document.body.appendChild(iconButton);
  document.body.appendChild(wrapperDiv);
  
  let clipButton = document.querySelector(".clip_button");
  console.log(clipButton);
  
  
  let iconButtonToggle = false;
  clipButton.addEventListener('click', function(e){  
    if (!iconButtonToggle) {
      console.log('left size', wrapperDiv.offsetWidth);
      // iconButton.style.cssText = `left:${wrapperDiv.offsetWidth}px`;
      wrapperDiv.classList.add('on');
      iconButtonToggle = true;
      setTimeout(()=>{
        wrapperDiv.classList.remove('on');
      },10000);
    } else {
      // iconButton.style.cssText = `left:10px`;
      wrapperDiv.classList.remove('on');
      iconButtonToggle = false;
    }
  });

  window.setTimeout(()=>{
    // let btn_new_localstorage = document.getElementById('btn_new_localstorage');
    let btn_new_localstorage = document.querySelector('.add_button');
    let list_localstorage = document.getElementById('list_localstorage');
    let list_localstorage_list = list_localstorage.querySelectorAll('li');
    
    list_localstorage_list.forEach((listItem,listIndex) => {
      let btn_delete_item = listItem.querySelector('.btn_delete_item');
      
      btn_delete_item.addEventListener('click', function(e){
        
        getTargetLocalStorage();
        
        lastItem = targetLocalStorage[listIndex];
        console.log('마지막 지워진',lastItem);
        
        targetLocalStorage.splice(listIndex, 1);
        setTargetLocalStorage();
        
        putMessege(Object.keys(lastItem));
        
        // location.reload(); 
      });
    });
    
    btn_new_localstorage.addEventListener('click', () => {
      
      let urlSub = window.location.pathname + window.location.search;
      // console.log('현재 URL path는 ', urlSub);
      
      document.body.appendChild(wrapperAskingDiv);
      
      let btn_asking_add = document.getElementById('btn_asking_add');
      let sp_asking = document.getElementById('sp_asking');
      let btn_asking_cancel = document.getElementById('btn_asking_cancel');
      let sp_asking_title = document.getElementById('sp_asking_title');
      
      sp_asking_title.focus();
      
      let addFunc = () => {
      
        getTargetLocalStorage();
        targetLocalStorage.push({[sp_asking_title.value]:urlSub});  
        setTargetLocalStorage();
        
        document.body.removeChild(wrapperAskingDiv);
        
        
        location.reload(); 
        
      };
      
      sp_asking_title.addEventListener('keypress', (ev)=> {
        if (ev.key == "Enter") {
          addFunc();
        }
      });
      
      btn_asking_add.addEventListener('click',() => {
        addFunc();
      });
      
      btn_asking_cancel.addEventListener('click',() => {
       document.body.removeChild(wrapperAskingDiv);
      });
      // sp_asking.addEventListener('click',(ev) => {
      // // ev.stopPropagation();
      //   console.log(ev.currentTarget)
      //   // document.body.removeChild(wrapperAskingDiv);
      // });
    });
  },500);
  
  // make messege wrapper
  if (!document.querySelector('.alertify-logs')){
    let alertify = `<div class="alertify-logs bottom left"></div>`;
    document.body.insertAdjacentHTML('beforeend', alertify);
    
    console.log('load완료');
  }
  
  let lastItem = {};
  
  const undoDeletefunc = () => {
    
      getTargetLocalStorage();
      targetLocalStorage.push(lastItem); 
      setTargetLocalStorage();
      
      kickMessege(1);
      location.reload(); 
  };
  const putMessege = (makeItTarget) => {
    console.log('put messege 호출 완료');
      //let streamLocalList = JSON.parse(localStorage.getItem("streamLocalList")),
      //    lastStreamLocalList = streamLocalList[streamLocalList.length - 1];
      
      let messegeWrapper = document.querySelector('.alertify-logs');
      
      if(messegeWrapper.childNodes[0]) {
        messegeWrapper.childNodes[0].remove();
      }
      
      let messegeMarkUp = `<div class="success">${makeItTarget} <a href="#">Undo</a></div>`;
      
      messegeWrapper.insertAdjacentHTML('beforeend', messegeMarkUp);
      
      let notiBar = messegeWrapper.querySelector('.success'),
          aButton = notiBar.querySelector('a');
      
      window.setTimeout(()=>{
      	notiBar.classList.add('show');
      }, 500);
      //console.log(messegeWrapper.childNodes[0], messegeWrapper.children[0]);
      
      aButton.addEventListener('click',() => {undoDeletefunc()});
    
      window.setTimeout(()=>{
      	notiBar.classList.remove('show');
      }, 5000);
      
  };
  const kickMessege = (timing) => {
      
      let notiBar = document.querySelector('.alertify-logs .success');
      notiBar.className = "success";

      window.setTimeout(()=>{
        notiBar.remove();
      }, 2 * 1000);
  };
  
  let btn_import = document.querySelector('#import');
  let btn_export = document.querySelector('#export');
  let inp_port = document.querySelector('#portinput');
   
  // console.log(ClipboardJS, Clipboard);
  inp_port.value = JSON.stringify(favLocalStorage);
  
//   btn_export.addEventListener('click', ()=>{
//     // inp_port.value = JSON.stringify(favLocalStorage);
    
//     let clipboard = new ClipboardJS('#portinput');
//     clipboard.on( 'success', function() {       // 복사에 성공했을 때
//       console.log('success');
//     });
//     clipboard.on( 'error', function() {         // 복사에 실패했을 때
//       console.log('fail');
//     });
//   });
  

})();

GM_addStyle(`
  #sp_wrapper {
    position:fixed;
    top:0;
    left:0;bottom: 0;
    transform: translate3d(-100%,0,0);
    border:1px solid black;
    z-index: 9999;
    background:rgba(0,0,0,0.5);
    background:black;display: flex;
transition-duration: 1s;

flex-direction: column;
  }
  #sp_wrapper.on {
    transform: translate3d(0,0,0);
  }
  #sp_wrapper .btn_delete_item {
    border: 0;
    background: none;
    padding: 0 0px;
  }
  #sp_wrapper .header {
    display:flex;
    justify-content: space-between;
    padding:10px;  
    color:white;
  }  
  #sp_wrapper .buttons{
    position: absolute;
    top: 20px;
    right: -35px;
  }
.clip_button {
    background: black;
    cursor:pointer;
    font-size: 20px;
    line-height: 40px;
    width: 35px;
    height: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 5px;
  } 
.add_button {

    cursor:pointer;
    font-size: 20px;
    line-height: 40px;
    width: 35px;
    height: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 5px; 
    background: gray;
}
  #list_localstorage {
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 22px;
    flex:1;
    overflow:hidden;
    overflow-y:auto;
  }
  #list_localstorage .btn_delete_item {
    margin-right: 0;
  }
  #list_localstorage li:hover .btn_delete_item {
    color:red;
  } 
  #list_localstorage li a {
    color:white;
  }
  #list_localstorage li a:hover {
    color:grey;
    text-decoration:none;
  }
  #sp_asking {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  bottom: 0;  
    display: flex;
    align-items: center;
    justify-content: center;z-index: 99999;
background:rgba(0,0,0,0.8);
  }

  #sp_asking .inner {
    background:rgba(0,0,0,0.8);
    background:black;
    padding: 10px;
    border-radius: 10px;
  }
  #sp_asking .buttons {
    display:flex;
  }

  #sp_asking .inner button {
    width:50%;
  }
  #sp_icon_button {
      position:fixed;
      top:0px;
      left:0px;
      font-size:24px;
      color:yellow;
      border-radius: 50%;
      padding: 10px 5px;
      z-index:9999;
  }
  #sp_icon_button:hover {
    cursor:pointer;
  }
.bottom {
    display: flex;flex-wrap: wrap;
}.bottom input { width:100%;}
.bottom button { flex: 1; }

  .alertify-logs{position:fixed;z-index:1}
  .alertify-logs.bottom,.alertify-logs:not(.top){bottom:16px}
  .alertify-logs.left,.alertify-logs:not(.right){left:16px}
  .alertify-logs.left>*,.alertify-logs:not(.right)>*{float:left;transform:translateZ(0);height:auto}
  .alertify-logs.left>.show,.alertify-logs:not(.right)>.show{left:0}
  .alertify-logs.left>*,.alertify-logs.left>.hide,.alertify-logs:not(.right)>*,.alertify-logs:not(.right)>.hide{left:-110%}
  .alertify-logs.right{right:16px}
  .alertify-logs.right>*{float:right;transform:translateZ(0)}
  .alertify-logs.right>.show{right:0;opacity:1}
  .alertify-logs.right>*,.alertify-logs.right>.hide{right:-110%;opacity:0}
  .alertify-logs.top{top:0}
  .alertify-logs>*{box-sizing:border-box;transition:all .4s cubic-bezier(.25,.8,.25,1);position:relative;clear:both;backface-visibility:hidden;perspective:1000;max-height:0;margin:0;padding:0;overflow:hidden;opacity:0;pointer-events:none}
  .alertify-logs>.show{margin-top:12px;opacity:1;max-height:1000px;padding:12px;pointer-events:auto}
  .hide{display:none !important}
  .alertify,.alertify-logs{z-index:99999}
  .alertify-logs>.show{cursor:pointer}
  .alertify-logs > .success {color:white; display:flex; background:rgba(76,175,80,.9)};
`);