まいにち@ぐだぐだ

明日と言わず、今日から…ぐだぐだ(^_^;

jotをサポートで使おう!?jot_ex.js

jotをサポートで使おう!?jot_ex.js

MEGUさんのサイトの掲示板が発端で作りました。

jotのタイトルに re[返信元のコメント番号]:返信元のタイトル と、自動で入力したり、コメント分を引用したり。
コメントでプレビューを追加したり、スニペットコードなどをコピペでそのまま貼れるようにしてみました。

実装方法は二通りあります。

SEO Strict URLsを利用している場合はコンテンツに起こして、テンプレートで呼び出します。
単独のテキストファイルにして物理的に呼び出すのも可能です。
コンテンツに起こしてSEO Strict URLsを利用していない場合は、拡張子が.js出来ないので機能しません。

その場合はもう一つの方法、テンプレートに直接埋め込むか、チャンクで展開させます。

※ここにあったjot_ex.jsのソースは削除しました。添付のファイルをダウンロードして確認してください。(2009/07/17追記) 

これがスクリプト本体になります。
ファイル名は jot_ex.js である必要はありません。

チャンクを新規で作ってこのまま貼り付けてテンプレートから{{jot_ex}}などとして、呼び出すのもありかもしれません。
この方法や、テンプレートに直接記述する場合は
<script language="javascript" type="text/javascript"><!--
ここにスクリプト本体を記述またはチャンクを呼び出すコード
//--></script>
という風に、HTMLのスクリプトタグで囲む必要があります。

次はJotのテンプレートへの細工です。
ファイルは2つです。

1つは chunk.form.inc.html 。
場所は75行目の前後にです。


    <div id="preview-subject[+jot.id+]"></div>
    <div id="preview[+jot.id+]" style="background-color: #EFEFEF;margin: 5px;padding: 5px;"></div>

    <div style="float:right;width: 100px;"></div>
    <input type="hidden" id="tmpStr[+jot.id+]">
    <input tabindex="[+jot.seed:math=`?+5`+]" id="submit[+jot.id+]" name="submit" type="submit" value="[+form.edit:is=`1`:then=`Save Comment`:else=`Post Comment`+]" />
    <input type="button" name="preview" value="preview" onclick="jotpreview('[+jot.id+]')">
    <input type="button" name="escost" value="escape submit" onclick="escapecomm('[+jot.id+]')">

 


赤文字の部分が追加された文字列です。style=や、ボタンの文字列(inputタグのvalue=)はお好みで変更しても問題ありません。

2つめはchunk.comment.inc.html 。
しかしながら、前回のカスタマイズと変わっていませんが…まあ、一応。
35行目から38行目にかけてです。


             <span class="jot-subject" id="jot-subject[+comment.postnumber+]">[+comment.title:limit:esc+]</span><form><input type="button" value="re[No]:" onclick="retitleno('[+comment.postnumber+]')"><input type="button" value="coments>" onclick="recontents('[+comment.postnumber+]')"></form><br />
             <span class="jot-poster"><b>Reply #[+comment.postnumber+] on :</b> [+comment.createdon:date=`%a %B %d, %Y, %H:%M:%S`+]</span>
             <hr />
             <div class="jot-message" id="jot-message[+comment.postnumber+]">[+comment.content:esc:nl2br+]</div>


赤文字の部分が追加された部分になります。

そして、最後に。
jot_ex.jsを使うコンテンツのテンプレート(デザインの)の<body>タグに onload="decodecomm()" を追加してください。
ページが表示されてからjot_ex.jsによる書き換えが発生しますので、端末の環境によっては表示が書き換えられるまでに時間がかかったり、エラーになる場合があります。

jotのテンプレートを既にカスタマイズされている場合には行数などが記述したソースとは違っている場合があります。オリジナルをカスタマイズする場合を例に挙げたモノですので、それぞれのカスタマイズファイルに合わせて読み替えてください。

jot_ex.jsでは書き換えの対象に追加しているid属性で囲まれているコンテンツを対象にしています。idを付加しているタグの内側にさらにタグが存在する場合はなどは考慮していません。

このカスタマイズは自己責任で適用してください。
どんな被害が出ても、おいらは一切の責任を負いません。

 


2009/07/15 コメント文を引用したときに<br>コードが除去されずに転記されていたのを改修しました。元々おまけ機能だったのであまり深く考慮せずに実装したのがそもそもの間違い…と言うことで<(_ _)> 添付されているファイルは差し替えてあります。ダウンロードしてそのまま入れ替えていただければおけーです。

 


javascript部分 jot_ex.js …HTMLタグを特殊文字に置き換えないバージョン
javascript部分 jot_ex2.js …HTMLタグを特殊文字に置き換えるバージョン(2009/07/17追記)
テンプレート chunk.form.inc.html
テンプレート chunk.comment.inc.html

javascript部分はHTMLタグの<>を特殊文字に置き換えているバージョンと何も手を加えていないバージョンがあります。ともに、ファイル名はjot_ex.jsである必要性はありません。(2009/07/17追記)
テンプレート2点は、最後の拡張子が txt になっています。 html に変更してから使ってください。
テンプレートはMODxに同梱のオリジナルに変更を行っています。
jotの文字化け対策のwordwrapパラメータを削除したテンプレートにてカスタマイズを行っています。

MODxのライセンスによりGPLライセンスにて公開します。


Write a comment

  • Required fields are marked with *.

First | Previous | Showing comments 11 to 20 of 23 | Next | Last
hirahira
Posts: 11
Comment
re[12]:Re: jotをサポートで使おう!?jot_ex.js

Reply #13 on : Fri July 17, 2009, 02:24:25
>ありがとうございます!
タグの表示もできるようになりました。
とても便利に利用させて頂いております~。

ありがとうございます。
いろいろと、テストとかしてもらってありがとうございます。

使っていただけているだけで作った甲斐があるというモノです。

で、ここでも、余談ですが、HTMLタグが書き込めるようになったのは良いのですが、プレビューでは反映していませんよね。やっぱりプレビューの際にも反映した方が良いのでしょうね…。そこまで考えていませんでしたねw
後で、手を入れておきます<(_ _)>

追記:
今更ながら、コメントを引用したときに、[ <---->[のような状態で転記されてしまうんですよね(^_^;
ちょっと、引用機能を練り込みたいと思います。
Last Edit: July 17, 2009, 02:51:21 by hirahira  
MEGU
Posts: 12
Comment
Re: jotをサポートで使おう!?jot_ex.js

Reply #12 on : Thu July 16, 2009, 21:32:33
ありがとうございます!
タグの表示もできるようになりました。
とても便利に利用させて頂いております~。
hirahira
Posts: 11
Comment
Re: jotをサポートで使おう!?jot_ex.js

Reply #11 on : Thu July 16, 2009, 04:33:26
<a href="http://rain.ebiplan.com">test</a>

どうかね?
MEGU
Posts: 12
Comment
re[9]:Re: jotをサポートで使おう!?jot_ex.js

Reply #10 on : Wed July 15, 2009, 09:55:55
>それとは別件ですが、本文引用を行うと、<br>タグがそのまま入ってしまいますorz
これから改修作業を始めます。

行末の<br>除去されました。確認しました~^^~
どうもありがとうございます。
hirahira
Posts: 11
Comment
re[8]:Re: jotをサポートで使おう!?jot_ex.js

Reply #9 on : Wed July 15, 2009, 00:27:35
MEGUさん(?)、こんばんわ。

ご指摘ありがとうございました。
一応念には念を入れたつもりだったのですが…取りこぼしがあった模様です…。
本文用のエスケープ処理ツールでも必要な気がしてきましたw

それとは別件ですが、本文引用を行うと、<br>タグがそのまま入ってしまいますorz
これから改修作業を始めます。
ご迷惑をかけて申し訳ありません。
Anonymous
Posts: 12
Comment
Re: jotをサポートで使おう!?jot_ex.js

Reply #8 on : Tue July 14, 2009, 19:22:50
わかりました~っ。
上記の、
<input type="button" name="preview" value="preview" onclick="jotpreview('')">

jotpreview('')> は、
jotpreview('[<!---->+jot.id+<!---->]')>
MEGU
Posts: 12
Comment
re[6]:Re: jotをサポートで使おう!?jot_ex.js

Reply #7 on : Tue July 14, 2009, 11:01:30
発見しました。こちらのchunk.form.inc.html、chunk.comment.inc.html から、[<!---->+jot.id+<!---->]他が抜け落ちているようです。
MEGU
Posts: 12
Comment
re[5]:Re: jotをサポートで使おう!?jot_ex.js

Reply #6 on : Tue July 14, 2009, 10:55:10
試しに、こちらのぺーじから、chunk.form.inc.html、chunk.comment.inc.html をダウンロードさせて頂いて、それぞれのテンプレートに貼り付けたところ、変な表示になってしまいました。で、ちらっと見た感じ、うちのオリジナルと、やっぱり、違う箇所がありますね。なぜ。。。
Anonymous
Posts: 12
Comment
re[3]:Re: jotをサポートで使おう!?jot_ex.js

Reply #5 on : Tue July 14, 2009, 10:37:11
こんにちは。自分の掲示板の方にレスを書いてしまいました。。

以下にテストページを作りました。
http://modx.liolion.net/476.html
jotは、1.1.4、modxは、0.9.6.3です。
Reply #2 と同じことをしています。
よろしくお願いします。。
hirahira
Posts: 11
Comment
re[1]:Re: jotをサポートで使おう!?jot_ex.js

Reply #4 on : Tue July 14, 2009, 04:28:13
>こんにちは~。おおお~。プレビュー機能が!<br>
なかなか、試す時間が取れなくてすみません。。<br>
<br>
escape submitが、[<!---->+~+<!---->]などをかけるようにするコマンドですね。

実際には、エスケープコード(コメントタグ)を差し込んで、送信ボタンもクリックしてしまうようになっています。

あれ?
改行タグが…うーん(^_^;
Last Edit: July 14, 2009, 04:30:33 by hirahira  
First | Previous | Showing comments 11 to 20 of 23 | Next | Last