Polymer : core-dropdown-menu のスタイルを設定する

core-dropdown-menu の中で使う core-dropdown は paper-dialog と同じく overlay の一種なので
「paper-dialog （paper-action-dialog）のスタイルを設定する」同様にカスタムエレメント内でスタイルを設定するには工夫が必要でした。

普通に <polymer-element> 内の <style> で /deep/ を使ってスタイルを定義しても上手く行きません。

とりあえずメモのみ。

JavaScript : input type=date の初期値の設定（Polymer の Data Binding を使用）

• タグの中で属性 value に代入する場合、"YYYY-MM-DD" 形式（ISO準拠）の文字列である必要がある。
• JavaScript のコード内で代入する場合は、valueAsDate = date型オブジェクト という形式が使える。

HTML部分（date に Data Binding）

<input type="date" required id="input_date" name="date" value="{{ date }}">

Polymer 初期化部分。date を ISO 準拠文字列にしておくパターン。

Polymer({
    date: new Date().toISOString().substr(0, 10),
    ...
    

Polymer 初期化部分。valueAsDate を使うパターン。

Polymer({
    date: new Date(),
    ready: function() {
        this.$.input_date.valueAsDate = this.date;
    }

Polymer : core-ajax post 用テンプレート（+ Django）

POST のパラメータの上手い渡し方がよくわからないので、しばらくはこれでいこうというメモ。

template 部分（入力部分とかは適当に。core-ajax は実際は djang-ajax を使う。）

 
<paper-input-decorator label="" error="入力必須" isInvalid="{{!$.input_name.validity.valid}}">
    <input is="core-input" id="input_name" required type="text" value="{{ name }}">
</paper-input-decorator>
<paper-button on-click="{{ post_data }}"></paper-button>
<core-ajax
    id="post"
    url="/someurl"
    method="post"
    handleAs="json"
    on-core-response="{{ response }}"
    on-core-error="{{ error }}">
</core-ajax>

script 部分

post_data: function() {
    if(!this.$.input_name.validity.valid){
        alert("名前を入力してください");
    } else {
        var data = {
            'name': this.name,
        };
        this.$.post.body = "data=" + JSON.stringify(data);
        this.$.post.go();
    }
},
response: function (event, response) {
    
},
error: function(event, response) {
    
}

受け取り側（Python Django）

class ActivityInfoListApi(View):
    def post(self, request, *args, **kwargs):
        data = request.POST.get("data", None)
        if data is None or len(data) == 0:
            return HttpResponseBadRequest()
        obj = json.loads(data)
        try:
            name = obj["name"]
            # 型チェック
            if (not isinstance(name, str) and not isinstance(name, unicode)):
                return HttpResponseBadRequest()
            # 受け取った値で何か処理…
            return HttpResponse("json形式文字列…")
        except KeyError:
            logging.error("Missing Parameter")
            return HttpResponseBadRequest()

Polymer : paper-dialog 関係のメモ

よく使いそうな設定のメモです。

Polymer : paper-dialog （paper-action-dialog）のスタイルを設定する

• ダイアログ外をクリックされても閉じないようにする
• autoCloseDisabled="true" にする
• ボタンを押しても閉じないようにする
• closeSelector を設定する。affirmative を押しても閉じないようにする場合は closeSelector="[dismissive]"

Polymer : paper-dialog （paper-action-dialog）のスタイルを設定する

paper-dialog 公式ドキュメント に従って /deep/ を使っても width や height が上手く設定できずに悩んでいたのですが、原因は以下のサイトの内容でした。

参考：Issue with upgrade to Polymer 0.5.1 and styling paper-dialog

ルート以外の要素で paper-dialog を使う場合、一工夫いるようです。

原因の要約

• paper-dialog （paper-action-dialog など含む）がデフォルトで layered プロパティが true に設定されている
• ダイアログを常に画面前面に表示するため
• layered が true の要素は、 core-overlay-layer というグローバルな要素に親が変更される
• Developer Console を開いて Element のタブを開くとそのことがわかります
• paper-dialog を使用している要素のスコープから外れてしまうので、そこで定義した css の style が適用されない

対策

リンク先では以下の3通りが紹介されています。 ひとまず、汎用的に思える core-style を使うことにしました。

• layered を false にする
• core-style を使う
• paper-dialog を継承したカスタムエレメントを作成する

---

サンプル

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="/bower_components/core-style/core-style.html">

<core-style id="my-dialog-style">
    html /deep/ {
    width: 16px;
    height: 16px;
    }
    html /deep/ paper-action-dialog::shadow #scroller {
        width: 360px;
        height: 360px;
    }
</core-style>
<core-style ref="my-dialog-style"></core-style>
<polymer-element name="my-paper-action-dialog" attributes="toggle">
        <template>
        <style>
            :host {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>

        <paper-action-dialog id="dialog">
            <div>
                ...
            </div>
            <paper-button dismissive>CANCEL</paper-button>
            <paper-button affirmative>OK</paper-button>
        </paper-action-dialog>
    </template>

    <script>
        Polymer({
            toggle: function () {
                this.$.dialog.toggle();
            }
        });
    </script>
</polymer-element>

Django + Polymer : Ajax 時の CRFS 対策 （403 エラーへの対応）

ここ に書いたように url に View を登録するときに csrf_exempt を使うことで CSRF 対策を切って　403 エラーを回避していましたが、Polymer 使用時には Django-enabled Polymer core-ajax variant を使うことで簡単に対応できる事がわかりました。

1. リンク先の django-ajax を django-ajax.html という名前で保存する
2. Polymer 内で core-ajax を使っていた部分を django-ajax に置き換える
1. インポートを忘れずに
3. {% csrf_token %} を html に含めてレンダリングする

django-ajax は core-ajax を継承していて、ajax 時のヘッダに csrf トークンを追加してくれる、という寸法のようです。

先人の知恵というのはありがたいものですね。リンク先に感謝です。