E/D

    @@ -29,7 +29,7 @@ i_space.placeholder = 'input area'; i_space.style.cssText = 'width:100%;height:100px;display:block;'; - // 出力エリアエリア + // 出力用エリア var o_space = cElm('textarea'); o_space.placeholder = 'output area'; o_space.readOnly = 'true';
  • /*
     * @title E/D
     * @description 入力した内容をURLデコード、エンコードします。
     * @include http://*
     * @license MIT License
     * @require 
     */
    (function () {
      var app_id = 'E/D';
      var getById = function (id) {
        return document.getElementById(id);
      };
      var cElm = function (tag) {
        return document.createElement(tag);
      };
    
      // 起動中にブックマークレットを再度起動すると終了
      if (getById(app_id)) {
        getById(app_id).parentNode.removeChild(getById(app_id));
        return;
      }
    
      var div = cElm('div');
      div.id = 'E/D';
      div.style.cssText = 'position:fixed;top:0;left:0;z-index:2147483647;width:33%;text-align:left;';
    
      // 入力用エリア
      var i_space = cElm('textarea');
      i_space.placeholder = 'input area';
      i_space.style.cssText = 'width:100%;height:100px;display:block;';
    
      // 出力用エリア
      var o_space = cElm('textarea');
      o_space.placeholder = 'output area';
      o_space.readOnly = 'true';
      o_space.style.cssText = 'width:100%;height:100px;display:block;';
    
      // ツールバー
      var toolbar = cElm('span');
    
      // エンコード/デコードボタン
      var btn_enc = cElm('button');
      btn_enc.textContent = 'E/D';
      btn_enc.onclick = function () {
        o_space.value = '[ENC] : ' + encodeURIComponent(i_space.value) + '\n[DEC] : ' + decodeURIComponent(i_space.value);
      };
      toolbar.appendChild(btn_enc);
    
      // リセットボタン
      var btn_rst = cElm('button');
      btn_rst.textContent = 'Reset';
      btn_rst.onclick = function () {
        i_space.value = '';
        o_space.value = '';
      };
      toolbar.appendChild(btn_rst);
    
      // エリア拡張ボタン
      var btn_exp = cElm('button');
      btn_exp.textContent = 'Expand';
      btn_exp.onclick = function () {
        var target = getById('E/D');
        var width = '33%';
        var height = '100px';
        if (target.style.width == '33%') {
          width = '66%';
          height = '200px';
        } else if (target.style.width == '66%') {
          width = '100%';
          height = '300px';
        }
        target.style.width = width;
        i_space.style.width = '100%';
        o_space.style.width = '100%';
        i_space.style.height = height;
        o_space.style.height = height;
      };
      toolbar.appendChild(btn_exp);
    
      // クローズボタン
      var btn_close = cElm('button');
      btn_close.textContent = 'Close';
      btn_close.onclick = function () {
        getById('E/D').parentNode.removeChild(getById('E/D'));
      };
      toolbar.appendChild(btn_close);
    
      div.appendChild(toolbar);
      div.appendChild(i_space);
      div.appendChild(o_space);
      document.body.appendChild(div);
    
      // 入力エリアにフォーカス
      i_space.focus();
    }) ();
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2016/11/08 16:48:00 - 2016-11-08
  2. 2016/11/08 16:22:59 - 2016-11-08
  3. 2016/11/08 14:00:33 - 2016-11-08
  4. 2016/11/08 13:59:14 - 2016-11-08