master

分支 (1)

管理

管理

master

hyblog
/
test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HYBLOG</title>
  <script src="./js/jquery.min.js"></script>
  <style>
    html {
      --theme-fg-color: #000;
      --theme-bg-color: #fff;
      background-color: var(--theme-bg-color);
      user-select: none;
    }
    @font-face {
      font-family: 'unifont';
      src: url('./unifont-15.0.01.woff');
    }
    body{
      margin: 0;
      font-family: 'unifont';
      color: var(--theme-fg-color);
    }
    .prompt {
      /* display: flex;
      flex-wrap: wrap; */
    }
    .input {
      display: flex;
      flex-wrap: wrap;
    }
    .cursor {
      background-color: var(--theme-fg-color);
      color: var(--theme-bg-color);
    }
    .newline {
      flex-grow: 1;
    }
    .output {
      display: flex;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <div id="main">
    <div class="prompt">
      <div class="input">
        <div class="tag">HYBLOG&gt;</div>
        <div class="char cursor">&nbsp;</div>
      </div>
    </div>
  </div>

  <script>
    $(document).on('keydown', e => {
      // console.log(e.keyCode)
      if (e.ctrlKey || e.metaKey) return

      if (!$('#main').children().last().hasClass('prompt')) {
        console.log('watting')
        return
      }

      if (e.keyCode == 8) {
        // backspace
        const prev = $('.prompt:last-child .input .cursor').prev()
        if (!prev.hasClass('tag')) {
          prev.remove()
        }
      }
      if (e.keyCode == 9) {
        // tab
        e.preventDefault()
      }
      if (e.keyCode == 35) {
        // end
        $('.prompt:last .input .cursor').removeClass('cursor')
        $('.prompt:last .input .char:last').addClass('cursor')
      }
      if (e.keyCode == 36) {
        // home
        $('.prompt:last .input .cursor').removeClass('cursor')
        $('.prompt:last .input .char:first').addClass('cursor')
      }
      if (e.keyCode == 37) {
        // left
        const current = $('.prompt:last .input .cursor')
        if (current.prev().length > 0 && !current.prev().hasClass('tag')) {
          current.prev().addClass('cursor')
          current.removeClass('cursor')
        }

      }
      if (e.keyCode == 39) {
        // right
        const current = $('.prompt:last .input .cursor')
        if (current.next().length > 0) {
          current.next().addClass('cursor')
          current.removeClass('cursor')
        }
      }
      if (e.keyCode == 13) {
        // enter
        let str = ''
        $('.prompt:last .input').children('.char').each((i,item) => {
          str += $(item).html()
        })
        str = str.replaceAll('&nbsp;', ' ').trim()
        console.log(str)
        $('.prompt:last .input .char').removeClass('cursor')
        execCmd(str)
      }

      let inputChar
      if (e.keyCode >= 48 && e.keyCode <= 57) {
        // 86key 0-9
        if (!e.shiftKey) {
          inputChar = String.fromCharCode(e.keyCode)
        }else{
          inputChar = ['!','@','#','$','%','^','&','*','(',')'][e.keyCode - 49]
        }
      }else if (e.keyCode >= 65 && e.keyCode <= 90) {
        // a-z
        inputChar = String.fromCharCode(e.keyCode)
      }else if (e.keyCode >= 96 && e.keyCode <= 105) {
        // numpad 0-9
        inputChar = (e.keyCode - 96).toString()
      }else if (e.keyCode == 32) {
        // space
        inputChar = '&nbsp;'
      }else{
        // symbols
        let keymap = {}
        if (!e.shiftKey) {
          keymap = {
            106: '*',
            107: '+',
            110: '.',
            111: '/',
            186: ';',
            187: '=',
            188: ',',
            189: '-',
            190: '.',
            191: '/',
            192: '`',
            219: '[',
            220: '\\',
            221: ']',
            222: '\'',
          }
        }else{
          keymap = {
            106: '*',
            107: '+',
            110: '.',
            111: '/',
            186: ':',
            187: '+',
            188: '<',
            189: '_',
            190: '>',
            191: '?',
            192: '~',
            219: '{',
            220: '|',
            221: '}',
            222: '"',
          }
        }
        if (keymap[e.keyCode]) inputChar = keymap[e.keyCode]
      }

      if (inputChar) {
        $('.prompt:last-child .input .cursor').before(`<div class="char">${inputChar}</div>`)
      }
    })

    function newPrompt() {
      $('#main').append(`
        <div class="prompt">
          <div class="input">
            <div class="tag">HYBLOG&gt;</div>
            <div class="char cursor">&nbsp;</div>
          </div>
        </div>
      `)
    }

    function execCmd(cmd) {
      if (!cmd) {
        newPrompt()
        return
      }
      let output = $('<div class="output"><div class="char cursor">&nbsp;</div></div>')
      $('#main').append(output)
      // document.documentElement.style.setProperty('--theme-fg-color', color)
      output.html(cmd+': COMMAND NOT FOUND')
      newPrompt()
    }

    function loadcontent(content) {
      console.log('loadcontent', content)
    }

    function testAjax() {
      $.ajax({
        url: './content/test1.js',
        dataType: 'jsonp',
        jsonpCallback: 'loadcontent'
      })
    }
    testAjax()
  </script>
</body>
</html>