Code666 (代码贴、代码片段)

[JavaScript] 仿制在线便签网站正在重写前端js →→→→→进入此内容的聊天室

来自 4n0n4me, 2023-01-11, 写在 JavaScript, 查看 47 次.
URL http://www.code666.cn/view/2d02bf2e
  1. import { Remarkable } from 'https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.1/remarkable.min.js'
  2.  
  3. import { hljs } from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'
  4.  
  5. import misc from './misc';
  6.  
  7. import { cookie, Cookie } from 'https://cdn.jsdelivr.net/npm/cookie.js'
  8.  
  9. const index = location.search.slice(1)
  10.  
  11. const jq = jQuery.noConflict();
  12.  
  13. /**
  14.  *
  15.  * @type {Function}
  16.  * @param {string} selector
  17.  * @returns {Element}
  18.  */
  19. const $ = document.querySelector.bind(document)
  20.  
  21. /**
  22.  *
  23.  * @type {Function}
  24.  * @param {string} selector
  25.  * @returns {Array[Element]}
  26.  */
  27. const $$ = document.querySelectorAll.bind(document)
  28.  
  29. if (index.length > 0) {
  30.     document.title = `${index} - Textboard Beta`
  31. }
  32.  
  33. /* ---------------------------------------------------------------- */
  34.  
  35. let md = new Remarkable({
  36.     highlight: function (str, lang) {
  37.         if (lang && hljs.getLanguage(lang)) {
  38.             try {
  39.                 return hljs.highlight(lang, str).value;
  40.             } catch (err) { }
  41.         }
  42.  
  43.         try {
  44.             return hljs.highlightAuto(str).value;
  45.         } catch (err) { }
  46.  
  47.         return ''; // use external default escaping
  48.     }
  49. });
  50.  
  51. md.core.ruler.enable([
  52.     'abbr',
  53. ]);
  54. md.block.ruler.enable([
  55.     'footnote',
  56.     'deflist',
  57. ]);
  58. md.inline.ruler.enable([
  59.     'footnote_inline',
  60.     'ins',
  61.     'mark',
  62.     'sub',
  63.     'sup',
  64. ]);
  65.  
  66.  
  67. md.renderer.rules.text = function (tokens, idx) {
  68.     tokens[idx].content = remarkable.utils.escapeHtml(tokens[idx].content);
  69.  
  70.     if (tokens[idx].content.indexOf('?') !== -1) {
  71.         tokens[idx].content = tokens[idx].content.replace(/(^|\s)(\/?\?)\S+?(?=[,.!?:)]?\s|jq)/gm, function (match) {
  72.             let pageLink = remarkable.utils.escapeHtml(remarkable.utils.replaceEntities(match.trim()));
  73.             let whiteSpace = '';
  74.             if (match[0] !== '?' && match[0] !== '/') {
  75.                 whiteSpace = match[0];
  76.             }
  77.             return whiteSpace + '<a href="' + pageLink.replace(/^\s?\//, '') + '" target="_blank">' + pageLink + '</a>';
  78.         });
  79.     }
  80.  
  81.     return tokens[idx].content;
  82. };
  83.  
  84. /* ---------------------------------------------------------------- */
  85.  
  86. function updateTextareaSize() {
  87.     let textarea = $('#textarea')
  88.     textarea.style.height = 0;
  89.     textarea.style.height = textarea.scrollHeight + 'px';
  90. }
  91.  
  92. $('#textarea') = updateTextareaSize
  93.  
  94. updateTextareaSize()
  95.  
  96. function scrollToAnchor() {
  97.     if (document.getElementById(location.hash.slice(1))) {
  98.         document.getElementById(location.hash.slice(1)).scrollIntoView()
  99.     } else if (document.getElementsByName(location.hash.slice(1))) {
  100.         document.getElementsByName(location.hash.slice(1))[0].scrollIntoView()
  101.     }
  102. }
  103.  
  104. /* ---------------------------------------------------------------- */
  105.  
  106. let date = new Date
  107. if (date.getDate() == 25 && date.getMonth() + 1 == 12) { // Christmas
  108.     misc.addSnowflake()
  109. }
  110.  
  111. /* ---------------------------------------------------------------- */
  112.  
  113. let status = {
  114.     page: {},
  115.     local: {},
  116.     loadSuccessful: null,
  117.     editing: null,
  118.     pwd: {},
  119. }
  120.  
  121. try {
  122.     status.pwd = cookie.get('password')
  123. } catch (e) { }
  124.  
  125. function fetchPage() {
  126.     updatePageInfo()
  127.     let password = payloadPassword('viewpwd')
  128.     loadContent({ index, password })
  129.     scrollToAnchor()
  130. }
  131.  
  132. function updatePageInfo(payload) {
  133.     fetch(`/api/check?index=${payload.index}`).then((data) => {
  134.         status.page = { ...status.page, ...data }
  135.     })
  136. }
  137.  
  138. function loadContent(payload) {
  139.     fetch(`/api/read`, { method: 'POST', body: JSON.stringify(payload) }).then((data) => {
  140.         if (data.status == 'error') {
  141.             status.loadSuccessful = false
  142.             $('#edit').disabled = true
  143.             showContent('密码错误，查看失败')
  144.             alert('密码错误，查看失败')
  145.             // 报错
  146.         } else if (typeof data.text == 'string') {
  147.             status.local.text = data.text
  148.             status.loadSuccessful = true
  149.             showContent(md.renderer(data.text))
  150.         }
  151.     })
  152. }
  153.  
  154. function startEdit() {
  155.     if (!status.loadSuccessful || status.editing) return
  156.     $('#textarea').value = pagedata.text
  157.     status.editing = true
  158.     showEditor()
  159. }
  160.  
  161. function savePage() {
  162.     if (!status.loadSuccessful || !status.editing) return
  163.     let password = payloadPassword('editpwd')
  164.     status.loadSuccessful = false
  165.     $('#text').textContent = '正在提交……'
  166.     submitEdit({ index, password })
  167.     fetchPage()
  168.     status.editing = false
  169.     hideEditor()
  170. }
  171.  
  172. function submitEdit(payload) {
  173.     fetch(`/api/write`, { method: 'POST', body: JSON.stringify(payload) }).then((data) => {
  174.         if (data.status == 'error') {
  175.             alert('密码错误，修改失败') // 报错
  176.         } // 经我检查，此处的回调确实就只有报错这一个功能
  177.     })
  178. }
  179.  
  180. function showContent(text) {
  181.     $('#text').innerHTML = text
  182. }
  183.  
  184. // 解释代码是新手的行为，但这个函数我确实无从下手，必须解释一下
  185. function payloadPassword(name) {
  186.     // 不需要密码就用null，需要密码就找历史密码
  187.     let password = status.page[name] ? status.pwd[name] : null
  188.     // 没有历史密码就要求输入
  189.     if (password === undefined) {
  190.         password = prompt('请输入查看密码：')
  191.         if (typeof password != 'string') {
  192.             // 报错
  193.             return false
  194.         }
  195.         // 记录历史密码
  196.         status.pwd[name] = password
  197.         cookie.set('password', JSON.stringify(status.pwd), {
  198.             path: location.pathname
  199.         })
  200.     }
  201.     return password
  202. }
  203.  
  204. function showEditor() {
  205.     $('#edit').classList.add('hidden')
  206.     $('#submit').classList.remove('hidden')
  207.     $('#text').classList.add('hidden')
  208.     $('#textarea').classList.remove('hidden')
  209.     updateTextareaSize()
  210. }
  211.  
  212. function hideEditor() {
  213.     $('#edit').classList.remove('hidden')
  214.     $('#submit').classList.add('hidden')
  215.     $('#text').classList.remove('hidden')
  216.     $('#textarea').classList.add('hidden')
  217. }
  218.  
  219. /* ---------------------------------------------------------------- */
  220.  
  221. fetchPage()
  222.  

回复 "仿制在线便签网站正在重写前端js"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666