(function(){
  var a = document.querySelectorAll("a"), d;

  for (var i=0; i<a.length; i++){
    a[i].addEventListener( "mouseover", rmHref, false);
    a[i].addEventListener("mouseout" ,rmSelhelper , false);
  }

  function rmHref(){
    d = this.getAttribute("href")||"";
    this.setAttribute("data-selecthelper-href", d);
    this.removeAttribute("href");
  }

  function rmSelhelper(){
    d = this.getAttribute("data-selecthelper-href")||"";
    this.setAttribute("href" , d);
    this.removeAttribute("data-selecthelper-href");
  }
})();

リンクのマウスオーバーでテキストのリンクが削除（動作はdata-*に置き換えで退避）されるので選択しやすくなります。

対象セレクターを絞り込む場合の対応で querySelectorAll のほうを使っています。
実際のハイパーリンクが動作するところまで考慮してませんので、改造するならば、なんらかの条件で removeEventListener を実行すればいいと思います(ページリロードしたほうが早そうだけど)。
元ページでほかにイベントリスナーが設定されている場合の動作まで検証してないので、あくまでも純粋なテキストリンクむけです
あと、クロスブラウザまで考えていませんので

Comments
TrackBacks: 0

Movable Type：アイテムの編集のページ内で、画像サムネイルつき画像リンクのコードを生成するブックマークレット

Posted by: maRk
2014年1月13日 08:41
Last update: Jan 12, 2015 22:41
JavaScript | MTカスタマイズ

Movable Type の管理画面のアイテムの編集のところで、アイテムの埋め込みにサムネイルつきの画像へのリンクのコードを追加表示させるためのブックマークレットです。

（なお、Movable Type 6.0.1での動作確認です）

画像アイテムのページでは、「アイテムの埋め込み」にはURLしか表示されていません。

記事内で使用するときには、それほど問題はないのですが、他の場所でその画像を使いたい場合、自前でHTMLをかく必要があります。

このブックマークレットでは、このページでの情報から、画像へのサムネイルつきの画像リンクを作成して、~~ページ内の「アイテムの埋め込み」に追加します。~~プロンプトで表示します。

コードを Hatena::Let に置いておきました。

Movable Type アイテム埋め込みコード作成 - Hatena::Let

リンク先の Movable Type アイテム埋め込みコード作成のリンクを右クリックからブックマークするか、ツールバーにドラッグするなどしてブラウザに登録します。

使用すると、プロンプトで埋め込みコードが入って出力されます。

コードの中身を提示しておきます（はてなからの呼び出しは気持ちよくない場合に。画像以外にも改造できるかと）

(function($){
  var itemview = $("div.asset-preview");
  if(!itemview) return;
  var imgthumb, imgthumb_src, imgthumb_w, imgthumb_h, imgthumb_htm, item_embed;
  var item_uri = $("#asset-url").val();
  if($(itemview).hasClass("asset-type-image")){
    imgthumb = $("div .thumbnail img");
    imgthumb_src = imgthumb.attr("src");
    imgthumb_w = imgthumb.attr("width");
    imgthumb_h = imgthumb.attr("height");
    imgthumb_htm = '<img src="' + imgthumb_src + '" width="' + imgthumb_w +'" height="' + imgthumb_h +'" alt="" />';
    item_embed = '<a href="' + item_uri + '">' + imgthumb_htm + '</a>';
    return prompt("　　　　　　　　　　　アイテムの埋め込み　　　　　　　　　　", item_embed);
  } else {
    return;
  }
})(jQuery);

以上を適当にJavaScriptファイルとして作成してサーバーにあげておき、このファイルのJS Loader ぽいコードを作り、それをブックマークレットにすれば同じような動作になるはずです。

余談ですが、アイテムの編集のところでform要素のなかにtextarea を流し込むと、「説明」というフィールドがおかしくなるみたいでした（なので、とりあえずプロンプト）。

具体的には、上で作ったHTMLをappendToする、その後textareaが追加・表示されてから、「変更を保存」を押すとappendしたほうのフィールドが説明のフィールドに置き換わってしまいます。

Comments
TrackBacks: 0

mt.Vicuna Simple にカスタマイズした Pin it ボタンをつけてみる

Posted by: maRk
2013年2月 6日 13:20
Last update: Jan 12, 2015 23:04
JavaScript | MTカスタマイズ

mt.Vicuna Simple テンプレートに Pinterest の Pin it ボタンを設置してみます

はじめに

すでに使っている人向けで記述してますので、HTML構造については、本家サイト(vicuna.jp)など参照してください。

参考にしているのは、 Pinterest ブログ上に設置されているコードで、旧タイプのボタンをカスタマイズしたものです。

通常は、Pin It Button for Web Sites （http://pinterest.com/about/goodies/）のフォームにサイトのURL をいれて得たコードをもとに URLのパラメータを Movable Type 用のテンプレートタグに置き換えするなどしてカスタマイズします（このページではこの方法の説明はしません）。

表題のとおりに、mt.Vicuna テンプレートでの貼付け法で、ほぼ初期の状態で設置の動作を確認したものです。カスタマイズされたものについてはこのとおりに動作しない場合もあり得ます。

設置について

ボタンをつける箇所は、ブログ記事テンプレートのタイトル下の ul .info のリストに追加するということとして説明しています。

Pin itボタンパーツ

<li class="pint">
     <a class="pinit" onclick="pinitbtn(this);return false;" href="http://pinterest.com/">
        <img src="http://passets-ec.pinterest.com/images/pinit_preview_none.png" width="49" height="25" alt="pin it" />
     </a>
</li>

<ul class="info"></ul> 内にいれます。

Pin it をおこなう部分

前掲のコードはすでに設置されているものとして、以下のコードを</body> より前に設置

以下は、テンプレートタグを利用して直接 JavaScript コードを埋め込む場合です。

<script type="text/javascript">
//<![CDATA[
var pinitbtn = function(elm){
  var desc,url,media='', image='', section;
  desc = '<$mt:EntryTitle remove_html="1" encode_js="1"$>';
  url = '<$mt:EntryPermalink encode_js="1"$>';
 
  section = elm.parentNode.parentNode.parentNode.getElementsByTagName('DIV')[0];

      if (section) {
        image = section.getElementsByTagName('IMG')[0];
        if (section.getAttribute('class','textBody') && image && image.src) {
          media = image.src;
        }

      if (desc && url && media) {      
        window.open( 'http://pinterest.com/pin/create/button/?url='
        + encodeURIComponent(url)
        + '&media='
            + encodeURIComponent(media)
        + '&description='
            + encodeURIComponent(desc)
       , 'signin'
       , 'width=665,height=300,scrollbars=1,resizable=1');
      }
}
};
//]>
</script>

詳細

外部ファイルにしたいとき

タイトルなどの情報を JavaScript から取得する形にしたいときはそれぞれ url は location.href とか、rel=canonical(指定してあるとき)など、 desc はPin itしたときテキストエリアに入るテキストで、タイトルでいいときは document.title などです。

section でエントリの部分を拾ってきます。要素がカスタマイズされているとノードの取得がうまくいかないかもしれませんので適宜調整がいるでしょう。

記事に画像があるときとないときがあるような場合、記事中の画像の有無でふり分けて出力といった方法が考えられます。

Pinterest ブログのほうでは、ボタン設置の a要素の内容は空として、背景画像にボタンの画像をあてているようです。

mt.Vicuna Simple テンプレート

mt5-theme-mtvicuna-simple GitHub

Comments
TrackBack Closed

Pluploadのローカルテストの自分用ノート

Posted by: maRk
2012年4月 3日 13:51
Last update: Apr 03, 2012 13:51
JavaScript | myown

Pluploadでのメモ。アップロード先のディレクトリについてなど

以下は正しい情報でない可能性が高く個人のメモ以上のものはありませんのであしからずです。

Plupload

上記サイトのダウンロードよりGPLv2ライセンスのものを一式もらってくる

今の時点では、Version 1.5.2 (2012-01-06)

examplesフォルダのcusom.html とか、jqueryフォルダ内のhtmlファイルをブラウザで開く（php動作下）。

アップロードしたファイルは、MAMPの環境だと、MAMP/temp/php/. に入っている

これをテストフォルダにするには、upload.phpファイルを開き、以下の行をコメントにする

$targetDir = ini_get("Directive") . DIRECTORY_SEPARATOR . "plupload";

ちなみに、upload_tmp_dir はphp.iniのupload_tmp_dir = に記述されている場所にあたる。

MAMPだと、スタートページを開いて、phpinfoタブからupload_tmp_dir ディレクティブを調べれば確認できる

そして、$targetDir = 'uploads'; のコメント（//）を外すと、upload.phpが入っているのと同じ階層にuploadsフォルダが作られる

ローカルの場合ではセーフモードなしなので、本番サーヴァの場合にセーフモード対策も考慮しないといけないことになるかもしれない(5.3系ので試してるからそこまで考えてないけど)。

jqueryフォルダ内のページで、queue widget の HTML5 runtime などが動かなかったので、以下の対処。

upload.php というファイルが読み込めないことがエラーの原因なので、// General settings のurl: を正しいパスに書き換えればよいとおもわれる。

自分の場合はupload.php をjqueryフォルダ内にコピーしておこないました。

Comments
TrackBack Closed

Lightbox効果をFancyboxにスイッチ

Posted by: maRk
2011年10月 2日 21:31
Last update: Jan 12, 2015 22:04
JavaScript

jQueryのLightbox効果のプラグインをFancyboxに移行することにしました。

サンプルのコードをよく読んでいなかったりして、コチラの手際が悪くて躓いていましたのでメモとして残しておきます。自分でも使い方はよくわかっていなくて、細かな解説ができませんのでそこのところはよろしく--ということで

Movable Typeテーマ、mtVicuna Simple(https://github.com/naoaki011/mt5-theme-mtvicuna-simple)を使われている環境のかたは、bundleされているようですのでプラグイン上で設定されたほうが早いです（たぶん）

設置までの大まかな流れ

Fancybox一式をダウンロード、展開、サーヴァーにあげる
jQuery本体の読み込み（CDN経由を推奨するとFacyboxのサイトには記載されている）
Fancyboxのプラグインファイルとlightbox効果のスタイルシートを読み込ませる
Fancyboxを有効にする
記事内で使用する箇所をFancybox用に調整する
編集記事を更新して完了

Facyboxのダウンロードは以下より。この記事作成の時点でヴァージョンは1.3.4でした

Fancybox (Downloadのリンクバナーから)

jQueryのロードは、Google APIs経由で

Lightbox表示のためのスタイルをhead要素に

<link rel="stylesheet" href="PATH/TO/fancybox/jquery.fancybox-1.3.4.css" />
 <!-- ファイル名の箇所はfancyboxフォルダ内のCSSファイルを参照のこと -->

次のようなことでFacyboxが使えるようになるみたいです。これがないと通常の画像リンクをクリックしたときと同じです。

class属性の値がfacyboxというものだったとして

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<a href="test1.jpg" class="fancybox">
    <img src="test1_thumb.jpg" alt="" />
</a>

グループを使う場合は（my_groupというclassがあるとして）、

<script type="text/javascript">
$(document).ready(function() {

    $(a[rel=my_group]).fancybox({
                   'transitionIn'       : 'none',
                   'transitionOut'    : 'none',
                   'titlePosition'      : 'over'
   });

});
</script>

・・・・・・
<a href="test1.jpg" rel="my_group" title="test1">
    <img src="test1_thumb.jpg" alt="" />
</a>
<a href="test2.jpg" rel="my_group" title="test2">
    <img src="test2_thumb.jpg" alt="" />
</a>

・・・・・・

あと細かなカスタマイズとかは、
Tips & Tricks をみるといろいろ記載されているようです

オプションとかメソッドの一覧は以下に

Fancy lightbox alternative| API & Options

提示したコードの出力がぐちゃぐちゃだったのでなおしました。

Comments
TrackBack Closed

MT：カスタムボタン：公開日の秒数を切り上げ0に設定してフォームに投げるボタン

Posted by: maRk
2011年6月 4日 08:46
Last update: Jan 12, 2015 22:09
JavaScript | MTカスタマイズ | plugins

久々のCustom Editor Button用追加ボタンです。投稿日のフォームへ秒数を00にして切り上げた状態のものをセットします。

最近公開時間の秒数を00にそろえるというのが自分のマイブームとなっています（何をやってるんだか）。ようするにきっちりと揃えたいというだけなのです。前は現在時刻をフォームにいれるボタンを使っていましたが、秒数だけ修正するのに面倒になってきたのでボタンを作ることにしました。

config.yamlファイル

name: PublishDateSetZeroSecondsButton
id: PublishDateSetZeroSecondsButton
key: PublishDateSetZeroSecondsButton
author_link: http://www.markdiary.com/
author_name: maRk
description: utility button for Custom Editor Button2 plugins
version: 0.1
#
# require Custom Editor Button 2 Plugin https://github.com/aklaswad/mt-plugin-custom-editor-button-2/
#
buttons:
    util_curtime2:
        title: Publish Date would set as zero seconds to Current Time
        image: images/now0.png
        code: |
            function ceb_util_curtime2 (text, args) {
                function zp(num) {
                    if(num < 10){num = '0' + num;}
                    return num;
                }
                var now = new Date();
                    if (zp(now.getMinutes()) < 59 ){
                        var date = '' + now.getFullYear() + '-' + zp(now.getMonth() + 1) + '-' + zp(now.getDate());
                        var time = zp(now.getHours()) + ':' + zp(now.getMinutes() + 1) + ':00';
                        document.entry_form.authored_on_date.value = date;
                        document.entry_form.authored_on_time.value = time;
                    } else if (zp(now.getHours()) != 23 && zp(now.getMinutes()) == 59) {
                        var time = zp(now.getHours()+1) + ':' +'00:00';
                        document.entry_form.authored_on_time.value = time;
                    } else { var time = zp(now.getHours()) + ':' + zp(now.getMinutes()) + ':00';
                      alert('wait few minutes');
                }
                return undefined;
            }

config.yamlは、PublishDateSetZeroSecondsButtonフォルダにいれてpluginsディレクトリへ。now0.pngは適当な画像を/mt-static/plugins/PublishDateSetZeroSecondsButton/images/.にいれるとします。

＊　Custom Editor Button 2プラグインが必要です

Comments
TrackBack Closed

カテゴリー、月別アーカイブに新はてなブックマークボタンをつけてみました

Posted by: maRk
2011年2月 2日 22:06
Last update: Jan 12, 2015 22:17
JavaScript | net

カテゴリ一覧のページに新はてなブックマークボタンを仕込んでおきました。

使いやすくなりました! はてなブックマークボタン

上のページでフォーム内でリンクを入力すると、なんか新しいはてなブックマークボタン作成のコードが作成されるらしいです。

あ、というか本題とはあまり関係ないですね。とかいってそのまま続けますが、このようなブックマークレットをブラウザに登録して使っています（←使っているといっている割にはブログ記事で活用してません）。

javascript:(function(){
var%20h='http://b.hatena.ne.jp/guide/bbutton?url=';
var%20u=encodeURIComponent(location.href)+'&title=';
var%20t=encodeURIComponent(document.title);
window.location.href=h+u+t;
})();

新はてなブックマークボタンのMovable Typeでのつけ方（というよりはコードのvalid指南？）は、小粋空間さんのページにまとめられているので参考になると思います。

新しいはてなブックマークボタンを(X)HTML validにする方法: 小粋空間

簡単に要点だけ拾っていくと（勝手に当方で解釈して付け足してる部分があります）以下のようです（「動く」という表現はスクリプトだかが動作するという意味です。いちおう）。

属性のdata-*はつけてなくても動く
data-hatena-bookmark-layoutがないとブックマークボタンのスタイルがスタンダード（ブックマークボタン「B!」とブックマーク数の表示、通常サイズ）になる
data-hatena-bookmark-titleがなくてもタイトルを自動で読んでくれる（たいていdocument.titleぽいですが、登録済みのエントリはそのブックマークエントリのタイトルなのか？？）
async属性を外しても動く
複数のはてなブックマークボタン設置でもbookmark_button.jsは一回だけロードしておけばよい
a要素のhref、ブクマエントリのページのリンク(http://b.hatena.ne.jp/entry/)＋MTEntryPermalink

どうでもいいことですが、ワタくシの場合はcreateElement()でスクリプト読み込むようにしてますです。アーカイブリストページにボタンを使う理由は――ええと、何だっけ。以上です

Comments
TrackBack Closed

Index of all entries

BlogTop > JavaScript Archive

Search

Ajax BlogSearch

Categories

Feeds

Atom

Elsewhere

Action Streams

logo

Return to page top