JavaScript/pre2textarea のバックアップの現在との差分(No.15)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• JavaScript/pre2textarea へ行く。

• title: JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする author: aterai pubdate: 2012-07-24T18:09:17+09:00 description: JavaScriptを使用して、preタグで囲まれたソースコードを簡単にコピーするためのBookmarkletを作成する
• • JavaScriptでpreタグで囲まれたソースコードをtextareaにコピーする
    • 概要
  • 概要
    • ソースコード
    • Bookmarklet版
  • Bookmarklet版
    • メモ: ローカルにドロップして保存(ファイル名付き)
  • メモ: ローカルにドロップして保存(ファイル名付き)
    • メモ: 直接クリップボードにコピー
  • メモ: 直接クリップボードにコピー
    • メモ: Clipboard API
  • メモ: Clipboard API
    • 参考リンク
  • 参考リンク
    • コメント
  • コメント

• オリジナルはpre to textarea for Greasemonkey
  • preタグをtextareaにして簡単にコピーできるようにする

概要

• preタグで囲まれたソースコードを簡単にコピーする方法 - てんぷらメモ@はてなから移動の予定

• pre2textarea.user.js (Operaの場合、ユーザーJavaScriptフォルダにファイルをコピー)
• pre要素をダブルクリックすると、内容がtextareaに変換される
• オリジナルは、pre to textarea for Greasemonkey
  • preタグをtextareaにして簡単にコピーできるようにする
• pre2textarea.user.js
• pre要素をダブルクリックすると、内容がtextareaに変換される
• ダウンロード用のリンクを作成(Javaのソースコードの場合は自動的にファイル名を取得)し、保存ダイアログを開く
  • JavaScriptでソースコードからJavaのファイル名を取得する

#spanend
#spandel
// ==UserScript==
#spanend
#spandel
// @name        <pre> to <textarea>
#spanend
#spandel
// @namespace   http://terai.xrea.jp/
#spanend
#spandel
// @include     http://*
#spanend
#spandel
// @exclude     http://*.google.*
#spanend
#spandel
// @description pre <-> textarea
#spanend
#spandel
// @version     1.0.6
#spanend
#spandel
// ==/UserScript==
#spanend
#spandel
// Double Click <PRE>, open <TEXTAREA>
#spanend
#spanadd
* ソースコード [#sourcecode]
#spanend
#spanadd
#gist(5441120)
#spanend

#spandel
// Fork of <pre> to <textarea> http://userscripts.org/scripts/show/11438
#spanend
#spandel
// original author is Sybian http://d.hatena.ne.jp/Sybian/
#spanend
#spandel

#spanend
#spandel
// _@name        <pre> to <textarea>
#spanend
#spandel
// _@namespace   http://d.hatena.ne.jp/Sybian/
#spanend
#spandel
// _@include     http://*
#spanend
#spandel
// _@description pre <-> textarea
#spanend
#spandel
// _@version     1.0.2
#spanend
#spandel
// Ctrl+Click <PRE>, become <TEXTAREA>
#spanend
#spandel
// ESC or Ctrl+[ or Ctrl+Shift+Click in <TEXTAREA>, restore <PRE>
#spanend
#spandel

#spanend
#spandel
(function() {
#spanend
  function pre2text(pre) {
    var converter = document.createElement('div');
    converter.innerHTML = pre.innerHTML.replace(/<br[ \/]*>/ig, '\n').replace(/<.*?>/mg, '');
    return converter.childNodes[0].nodeValue.replace(/\xA0/g, ' '); //replace &nbsp;
  }
  function cleanup(tx) {
    tx.parentNode.replaceChild(tx.originalPre, tx);
  }
  var listener = function(e) {
    var tx = document.createElement("textarea"),
      rect = this.getBoundingClientRect(),
    closeListener = function(e) {
      switch(e.type) {
      case 'keydown':
        if(e.keyCode=="27") { // ESC
          cleanup(this);
        }
        break;
      case 'dblclick':
        cleanup(this);
      }
    };
    tx.addEventListener("keydown",  closeListener, false);
    tx.addEventListener("dblclick", closeListener, false);
#spandel

#spanend
    tx.style.width  = rect.width+"px";
    tx.style.height = (rect.height>240 ? 240 : rect.height) + "px";
    tx.originalPre  = this;
    tx.value = pre2text(this);
    this.tx = tx;
    this.parentNode.replaceChild(this.tx, this);
    this.tx.focus();
    this.tx.select();
  },
  pre = document.getElementsByTagName("pre"),
  i = 0, len = pre.length;
  for(; i<len; i++) {
    pre[i].addEventListener("dblclick", listener, false);
  }
#spandel
}());
#spanend
#spandel

• 名前
  • pre2textarea
• アドレス(YUI Compressor で圧縮)

  javascript:(function(){function d(g){var h=document.createElement("div");h.innerHTML=g.innerHTML.replace(/<br[ \/]*>/ig,"\n").replace(/<.*?>/mg,"");return h.childNodes[0].nodeValue.replace(/\xA0/g," ")}function c(g){g.parentNode.replaceChild(g.originalPre,g)}var e=function(j){var g=document.createElement("textarea"),h=this.getBoundingClientRect(),i=function(k){switch(k.type){case"keydown":if(k.keyCode=="27"){c(this)}break;case"dblclick":c(this)}};g.addEventListener("keydown",i,false);g.addEventListener("dblclick",i,false);g.style.width=h.width+"px";g.style.height=(h.height>240?240:h.height)+"px";g.originalPre=this;g.value=d(this);this.tx=g;this.parentNode.replaceChild(this.tx,this);this.tx.focus();this.tx.select()},f=document.getElementsByTagName("pre"),b=0,a=f.length;for(;b<a;b++){f[b].addEventListener("dblclick",e,false)}}());

  • pre2textarea
• アドレス(YUI Compressor で圧縮)

  (function(){window.URL=window.URL||window.webkitURL;function h(l,k,m){var j=new Blob([l],{type:k+";charset=UTF-8"}),i=document.createElement("a");i.innerHTML="Download: "+m;i.setAttribute("download",m);i.href=window.URL.createObjectURL(j);return i}function d(j){var i=j.match(/public(?:\s|final)+(?:class|interface|enum)\s+([^<{\s]+)/m);return(i?i[1]:"Unknown")+".java"}function e(i){var j=document.createElement("div");j.innerHTML=i.innerHTML.replace(/<br[ \/]*>/gi,"\n").replace(/<.*?>/gm,"");return j.childNodes[0].nodeValue.replace(/\xA0/g," ")}function c(j){var i=j.downloadLink;j.parentNode.replaceChild(j.originalPre,j);if(i!=null&&i.parentNode){window.URL.revokeObjectURL(i.href);i.parentNode.removeChild(i)}}var f=function(l){var k=function(m){switch(m.type){case"keydown":if(m.key==="Escape"){c(this)}break;case"dblclick":c(this)}},j=this.getBoundingClientRect(),i=document.createElement("textarea");i.addEventListener("keydown",k,false);i.addEventListener("dblclick",k,false);i.style.width=j.width+"px";i.style.height=(j.height>240?240:j.height)+"px";i.originalPre=this;i.value=e(this);this.tx=i;this.parentNode.replaceChild(this.tx,this);this.tx.focus();this.tx.select();i.downloadLink=h(i.value,"text/plain",d(i.value));i.parentNode.insertBefore(i.downloadLink,i.nextSibling);i.downloadLink.click()},g=document.getElementsByTagName("pre"),b=0,a=g.length;for(;b<a;b++){g[b].addEventListener("dblclick",f,false)}}());

• FutureSoftware開発日誌 Ver2.0 » HTML5のドラッグ＆ドロップによるファイル保存
  • Chromeでのみ動作
  • Chromeでのみ動作
  • ファイルとしてダウンロード可能

function makeDraggableDownloadLink(text, mimeType, fileName) {
  var blob = new Blob([text], {type: mimeType}),
         a = document.createElement('a');
  a.appendChild(document.createTextNode("download"));
  a.setAttribute('download', fileName);
  window.URL = window.URL || window.webkitURL;
  a.href = window.URL.createObjectURL(blob);
  a.addEventListener("dragstart", function(e) {
    e.dataTransfer.setData("DownloadURL", [mimeType,fileName,this.href].join(':'));
  }, false);
  return a;
}

• クリップボードにコピー - 素人がプログラミングを勉強していたブログ
• markdown形式でリンクをクリップボードにコピーするchrome-extension作った - fukayatsu.dev()

//ie, chrome-extension???
document.execCommand("copy");

• Clipboard API が使用できる ChromeやOpera 12.50 の場合、コピー、カットすると自動的に元のpreに戻すことが可能

メモ: Clipboard API

• Clipboard APIが使用できるChromeやOpera 12.50の場合、コピー、カットすると自動的に元のpreに戻すことが可能

var listener = function(e) {
  var tx = document.createElement("textarea"),
    rect = this.getBoundingClientRect(),
    name, ret,
  closeListener = function(e) {
    switch(e.type) {
    case 'copy':
    case 'cut':
      var dataTransfer = e.clipboardData;
      dataTransfer.items.add(this.innerText, 'text/plain');
      cleanup(this);
      e.preventDefault();
      break;
    case 'keydown':
      if(e.keyCode=="27") { // ESC
      if(e.key==="Escape") {
        cleanup(this);
      }
      break;
    case 'dblclick':
      cleanup(this);
    }
  };
  tx.addEventListener('copy',     closeListener, false);
  tx.addEventListener('cut',      closeListener, false);
  tx.addEventListener("keydown",  closeListener, false);
  tx.addEventListener("dblclick", closeListener, false);
#spandel
//......
#spanend
#spanadd
// ...
#spanend

• pre to textarea for Greasemonkey
  • http://sybian99.googlepages.com/preToTextarea.user.js
  • preをtextareaに - Sybianの日記
  • via: Shishimushi - User JavaScript
• Source for "pre select" - Userscripts.org

参考リンク

• pre to textarea for Greasemonkey
• Clipboard API and events
• Opera Desktop Team - First bite of 12.50 ‘Marlin’: Clipboard API, redesigned key event handling, -webkit- CSS, and Notification Center
• クリップボード API - Introduction to the Web Platform - DOM ECMAScripting