komagataのブログ

@machidaさんが

「全てのテキストエリアはgithubみたいに画像のD&D・コピペができて欲しい。あとMarkdownで書きたい。」

と常々言っていて、僕もちょっとしたコメント欄でもMarkdownが使えたら嬉しいけどいちいち実装が面倒なので、

「確かにそうですよねー」

と言って流していました。

しかし流すのにも限界がきたので、TEXTAREを画像のD&DとコピペができるMarkdown Editorにするnpmモジュールを作りました。

komagata/textarea-markdown: Make textarea a markdown editor.

railsで使うなら下記のような感じです。

<textarea id="editor" data-preview="#preview"></textarea>
<div id="preview"></div>

import TextareaMarkdown from 'textarea-markdown'

document.addEventListener('DOMContentLoaded', () => {
  const token = document.querySelector("meta[name=\"csrf-token\"]").content;
  const textarea = document.querySelector('#editor');

  new TextareaMarkdown(textarea, {
    endPoint: '/api/image.json',
    paramName: 'file',
    responseKey: 'url',
    csrfToken: token,
    placeholder: '%filenameをアップロード中...'
  })
});

少し便利なところが、textareaのdata-previewにセレクターを入れておくとそこがpreview（HTMLが反映される場所）になるところです。

仕事で使いつつ、もうちょっとリッチな補完とか入れていく予定です。

rubyでいえばGemfileに

gem "foo", path: "~/foo"

みたいに書くヤツ。

npm linkを使う

いい感じにシンボリックリンクを貼ってくれるnpm linkを使うと良い。

npmモジュール側のディレクトリで下記。

$ npm link

利用側のディレクトリで下記。

$ npm link foo

モジュールが完成したら、下記で解除。

$ npm unlink foo

webpackerでrailsプロジェクトでもjsの再利用が進んだのでgemに負けじと活用したいです。

webpackerのお陰で最近jsを書いてるんですが、初歩的なところで悩んでいます。

動的に増える要素へのイベント設定をjQueryを使わずに書きたい。

// jQuery版
$(".foo").on("click", () => {
  console.log("FOO↑↑↑");
})

// ES6版
const elements = document.querySelectorAll(".foo");
Array.from(elements, (element) => {
  element.addEventListener("click", () => {
    console.log("FOO↑↑↑");
  })
})

.fooなDOMがのちほどAjaxなどで動的に増えた時、jQuery版は動くけど、ES6版だと動かないじゃない？

下記のように書くというのをどこかで見たんですが、div全部取ってくるなんて遅そうで怖い。

const elements = document.getElementsByTagName("div");
Array.from(elements, (element) => {
  if (element.classList.contains(".foo")) {
    element.addEventListener("click", () => {
      console.log("FOO↑↑↑");
    })
  }
});

どう書くのが普通なんでしょう？

回答編：Event Delegationで動的に増える要素に対応する | komagataのブログ

ユーザーの行動を記録して外部のサイトに送りたい。 アクション毎にリクエスト送ると無駄だから離脱時に一括して送りたい。 そういう時はbeforeunloadイベントを使えばいい。Mobile Safariでは動かないので代わりにpagehideイベントを使う。

主要モバイルブラウザ遷移時のイベントの種類と挙動 - Qiita

ただ、非同期でデータを外部に送ると送信を待たずに終わってしまうので同期リクエストにする必要がある。

しかし、今作っているのは色んなサイトに埋め込んでもらうJSプログラム。

それ入れると離脱時に待たされるとか言語道断なのでこういう方法は自サイトじゃないと使え無さそう。