给Memos页面增加编辑、归档及删除功能

2023-07-19T14:44:15+08:00

更新

2023-07-19 新增删除功能；

前言

书接上回，继续完善Memos页面。这次给页面增加编辑和归档功能，让我们的Memos页面使用起来更加的方便。

说明

值得一提的是，两个功能都需要Memos发布框的支持。还没有折腾的同学看这里： Memos页面添加发布框

编辑

首先，给你的每一条Memos 增加一个按钮，并绑定一个点击事件:

<button class="edit-btn" onclick="editMemo('+JSON.stringify(data[i]).replace(/"/g, '&quot;')+')">编辑button>

添加点击事件

function editMemo(e) {
  var memoContent = e.content,memoId = e.id,memoRelationList = e.relationList,memoResourceList = e.resourceList,memoVisibility = e.visibility;
  getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display"),
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && getEditor == "show"){
    memosTextarea.value = memoContent;
    memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
    submitMemoBtn.classList.add("d-none");
    editMemoDom.classList.remove("d-none");
    document.body.scrollIntoView({behavior: 'smooth'});
  }
  editMemoBtn.addEventListener("click", function () {
    memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token"),
    memoContent = memosTextarea.value,
    memoResourceList = window.localStorage && JSON.parse(window.localStorage.getItem("memos-resource-list")) ? window.localStorage && JSON.parse(window.localStorage.getItem("memos-resource-list")) : e.resourceList,
    memoVisibility = memosVisibilitySelect.value;
    let TAG_REG = /(?<=#)([^#\s!.,;:?"'()]+)(?= )/g;
    let memosTag = memoContent.match(TAG_REG);
    let hasContent = memoContent.length !== 0;
    if (hasContent) {
      var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
      var memoBody = {content:memoContent,id:memoId,relationList:memoRelationList,resourceList:memoResourceList,visibility:memoVisibility}
      fetch(memoUrl, {
        method: 'PATCH',
        body: JSON.stringify(memoBody),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(function(res) {
        if (res.status == 200) {
          if (memosTag !== null) {
            const memoTagUrl = memosPath + "/api/v1/tag?openId=" + memosOpenId;
            (async () => {
              for await (const i of memosTag) {
                const response = await fetch(memoTagUrl, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({
                    name: i
                  })
                });
              }
            })();
          }
          cocoMessage.success(
          '保存成功',
          ()=>{
            submitMemoBtn.classList.remove("d-none");
            editMemoDom.classList.add("d-none");
            location.reload();
          })
        }
      })
    }
  })
}

cancelEditBtn.addEventListener("click", function () {
  if (!editMemoDom.classList.contains("d-none")) {
    memosTextarea.value = '';
    memosTextarea.style.height = 'inherit';
    editMemoDom.classList.add("d-none");
    submitMemoBtn.classList.remove("d-none");
  }
})

归档

首先，还是给你的每一条Memos 增加一个按钮，并绑定一个点击事件:

<button class="archive-btn" onclick="archiveMemo(\''+data[i].id+'\')">归档button>

然后，添加点击事件

function archiveMemo(memoId) { //获取Memos的ID值
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token"); //登录信息
  if(memosOpenId && memoId){ //判断是否登录以及获取到Memos的ID值
    var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
    var memoBody = {id:memoId,rowStatus:"ARCHIVED"};
    fetch(memoUrl, {
      method: 'PATCH',
      body: JSON.stringify(memoBody),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function(res) {
      if (res.status == 200) {
        cocoMessage.success(
        '归档成功',
        ()=>{
          location.reload();
        })
      }
    })
  }
}

删除

首先，还是给你的每一条Memos 增加一个按钮，并绑定一个点击事件:

<button class="delete-btn" onclick="deleteMemo(\''+data[i].id+'\')">删除button>

然后，添加点击事件

function deleteMemo(memoId) {
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && memoId){
    var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
    fetch(memoUrl, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function(res) {
      if (res.status == 200) {
        cocoMessage.success(
        '删除成功',
        ()=>{
          location.reload();
        })
      }
    }).catch(err => {
      cocoMessage.error('出错了，再检查一下吧')
    })
  }
}

开始连接，给Memos页面增加转发功能

2023-07-06T20:30:23+08:00

前言

其实这个想法来自于 @小饿同学。在Memos页面拥有了发布框之后，我也一直在想，除了方便快捷之外，怎么可以让发布框更好用。转发功能的概念，让我眼前一亮。

小饿：转发功能，其实就是复制好友说说再评论，就更加接近微博了，信息连接效率会指数级提升。

Memos诞生很长时间以来，很多人都是当个笔记应用，记录生活。后来因为[@林木木] 开始折腾。有了各种API，开始出现单独的Memos页面，也有了浏览器插件，各种手机APP。生态圈一下子就建立起来了。再到后来，木木兄为Memos开发了广场页面，尽可能多的将大家的信息聚合起来，自此，Memos开启了社交时代。

木木的「广场」页面，其实已经非常趋近于微博。发布框加上后，功能已经非常完整了。所以当你拥有了一个Memos广场页面，并且加上了发布框。这个转发的功能，也可以折腾起来了。

部署

首先，给你的每一条Memos 增加一个转发按钮，并绑定一个点击事件。

<a onclick="transPond('+JSON.stringify(memosForm)+')">a>

然后，定义转发的内容。

let memosForm = {
  creatorName:creatorName,
  content:transData,
  url:memosLink
};

再然后，需要找到你页面中的发布框以及当前登录信息。

var memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
var memosPath = window.localStorage && window.localStorage.getItem("memos-access-path");
var getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display");
var memosTextarea = document.querySelector(".memos-editor-textarea");
var memosVisibilitySelect = document.querySelector(".select-memos-value");
var submitMemoBtn = document.querySelector(".submit-memos-btn");
var editMemoDom = document.querySelector(".edit-memos");
var editMemoBtn = document.querySelector(".edit-memos-btn");
var cancelEditBtn = document.querySelector(".cancel-edit-btn");

最后，给发布框中，添加转发内容。

var transRes = '[@'+ a.creatorName+']('+a.url+') \n\n> '+a.creatorName+': '+a.content;
memosTextarea.value = transRes;
memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
document.body.scrollIntoView({behavior: 'smooth'})

完整点击事件代码如下：

//转发
function transPond(a){
  var memosTextarea = document.querySelector(".memos-editor-textarea");
  var getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display");
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && getEditor == "show"){
    var transRes = '[@'+ a.creatorName+']('+a.url+') \n\n> '+a.creatorName+': '+a.content;
    memosTextarea.value = transRes;
    memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
    document.body.scrollIntoView({behavior: 'smooth'})
  }else{
    window.open(a.url);//如果没登录，则不转发直接跳转。
  }
}

最后

效果如下：

有呀

给Memos页面增加编辑、归档及删除功能

更新

前言

说明

编辑

归档

删除

开始连接，给Memos页面增加转发功能

前言

部署

最后