[プラグイン]jqCustominput

自作のスニペット・プラグイン・モジュールなどがあればご紹介ください
フォーラムルール
本家フォーラムなどで既に公開されてるものは、当該トピックまたは制作者サイトなどへのリンクを張っていただくだけでも結構です。
新規部品用にトピックを立てる場合は、ここのトピックを参考に必要な情報を入力するようにしてください。
ichi
メンバー
メンバー
記事: 4
登録日時: 2015年1月29日(木) 04:06

[プラグイン]jqCustominput

投稿記事by ichi » 2017年9月01日(金) 11:45

1つのテンプレート変数で複数の情報を管理できるプラグインを作りました。
データはJsonで管理していて、jQueryで出力してます。
そのままだとただの文字列なのでページへ出力する場合にはJsonExportというこれも自作のSnippetを使用します。

自分のコードを公開する事が初めてなので、不具合や至らない点がありましたらご指摘頂けるととても嬉しいです。
画像
画像

ダウンロード
https://github.com/ichi404/modx-evoluti ... master.zip
https://github.com/ichi404/modx-evoluti ... ustominput

インストール
解凍したフォルダごとassets/pluginsフォルダに入れてupdateを行うか、
手動の場合はpluginsフォルダに入れた後に、新規プラグイン作成を選び、
custominput.install_base.tplの中身をコピペして下さい。
eventは「OnDocFormPrerender」をチェックして下さい。

使い方
テンプレート変数の作成時に入力フォームから「Custom Form」を選び、以下をコピペして下さい。

コード: 全て選択

<textarea tvtype="textarea" id="tv[+field_id+]" name="tv[+field_id+]" class="customInput" title="$カスタムタイプ(normal,faq,imageList,custom)">[+field_value+]</textarea>

$カスタムタイプについてはgithub及びプラグイン本体に詳しい説明がありますのでそちらも見て頂ければと思います。
tomozoh
メンバー
メンバー
記事: 4
登録日時: 2018年7月25日(水) 22:41

[プラグイン]jqCustominput

投稿記事by tomozoh » 2019年1月08日(火) 13:08

素晴らしいプラグインの作成、ありがとうございます。まさにこんなプラグインを探していました。

不具合(?)報告になるのですが、カスタムタイプをtitle="custom"にした場合、imageのフォームオブジェクトが機能しないようです。
以下のようなカスタムインプットを作成するとリソース編集画面上に入力欄は表示されるのですが、画像の「挿入」ボタンを押しても反応がない状態です。

コード: 全て選択

<textarea tvtype="textarea" id="tv[+field_id+]" name="tv[+field_id+]" class="customInput" title="custom" data-inputs="date:日付:text,tit:見出し:text,img:画像:image">[+field_value+]</textarea>


カスタムタイプ title="imageList"では同様の事象は発生せず正常に使用できることから、title="custom"固有の問題かと推測しております。
使用しているのがEvolution CMSということもあり、サポート外になるのかもしれませんがご確認頂けますと幸いです。

環境:
Evolutionc CMS 1.4.6
PHP 7.2.12
MySQL 5.6.42

使用ブラウザ:Chrome 71 / Firefox 64双方で確認

また、参考ですが上記条件で「挿入」ボタンを押下時には以下のようなエラーがChrome のConsoleに出力されていました。

コード: 全て選択

Uncaught TypeError: $ is not a function    jquery.min.js:2
    at HTMLInputElement.<anonymous> (VM69 custominput.js:53)
    at Function.each (VM44 jquery.min.js:2)
    at r.fn.init.each (VM44 jquery.min.js:2)
    at $j.customInput._construct (VM69 custominput.js:52)
    at new $j.customInput (VM69 custominput.js:18)
    at HTMLTextAreaElement.<anonymous> (VM69 custominput.js:11)
    at Function.each (VM44 jquery.min.js:2)
    at r.fn.init.each (VM44 jquery.min.js:2)
    at r.fn.init.$j.fn.customInput (VM69 custominput.js:2)
    at HTMLDocument.<anonymous> (VM69 custominput.js:568)
   
  Uncaught ReferenceError: BrowseServer is not defined   ?a=27&r=1&id=2:1
    at HTMLInputElement.onclick (?a=27&r=1&id=2:1)
 

ichi さんが書きました:Source of the post そちらも見て頂ければと思います。
ページトップ
素晴らしいプラグインの作成、ありがとうございます。まさにこんなプラグインを探していました。

不具合(?)報告になるのですが、カスタムタイプをtitle="custom"にした場合、imageのフォームオブジェクトが機能しないようです。
以下のようなカスタムインプットを作成するとリソース編集画面上に入力欄は表示されるのですが、画像の「挿入」ボタンを押しても反応がない状態です。

ichi
メンバー
メンバー
記事: 4
登録日時: 2015年1月29日(木) 04:06

[プラグイン]jqCustominput

投稿記事by ichi » 2019年1月09日(水) 07:25

不具合のご連絡ありがとうございます。
取り急ぎですがcustominput.jsの52行目、

コード: 全て選択

self._previewImg($(this));

これのコンフリクト対策が抜けていたのが原因です。
以下のように$→$jへ変更して頂ければ動きます。

コード: 全て選択

self._previewImg($j(this));


こちらは後ほどgithubへも反映させていただきます。
自分が楽する為に作ったプラグインですが、使ってくれている人がいると公開して良かったなーと思います。
ありがとうございました!
tomozoh
メンバー
メンバー
記事: 4
登録日時: 2018年7月25日(水) 22:41

[プラグイン]jqCustominput

投稿記事by tomozoh » 2019年1月10日(木) 01:47

だいぶ前の記事にも関わらず、早速の修正をいただきどうもありがとうございます!無事動作させることができました。
1ページに大量に入力したい情報があり、サブリソースでの管理も煩雑だったので大変重宝しています。

一点ご提案なのですが、custominput.jsの404行目、

コード: 全て選択

val = 'http://'+ location.hostname + '/' +val;

の箇所がHTTP固定のためHTTPSサイトではプレビューが表示できないようです。(混載コンテンツをブロックするブラウザ側の仕様かと思います)
HTTP/Sの判定をするかURIスキームを省略するような修正は可能でしょうか?当方環境では試しに以下のように変更してプレビュー表示出来ることを確認しています。

コード: 全て選択

val = '//'+ location.hostname + '/' +val;