Drupal7 Viewsの出力を変更してHTML構造をカスタマイズする

必要な各フィールドを設定。

Exclude displayにチェックを入れ、各フィールド設定でリンクが出力されないようにしておく。

Global : Custom textを追加し、

Rewrite resultsにてカスタマイズしたHtmlとフィールド名を[]で囲んで入力。

コンテンツのリンクを出力する場合は、

Content : Pathのフィールドを追加し、

Rewrite resultsでOutput this field as a linkにチェックを入れ、

Link pathに[path]を入れる。

jQuery .find()と.children() の違い

children()はfirst decendant 、直下の階層のDOMツリーのみ検索、そのさらに下までは検索しない。

find()その下の全階層を含めて検索。

僅かな差であるだろうが、HTML構造が定まっていて直下の階層の要素のみ取得したく階層が深い場合はchildren()を使った方がパフォーマンスが上がると思われる。

 

jQuery $(this) と JavaScript this の違い

これもよく忘れるのでメモ

jQueryの$(this)はjQueryオブジェクトとしてその時選ばれている要素が格納される。

オブジェクトなのでconsoleで見ると様々なプロパティが格納されている。

jQueryにおける$(this)[0]がJavascriptのthisと同じ。

jQueryオブジェクト第一変数にはvanila Javascriptで言うdocument.getElementBy~の値が格納されている。

http://stackoverflow.com/questions/1051782/jquery-this-vs-this

CSS3 transitionを使用してhoverで色の変更をfade in/fade out させる

CSS3のtransitionやanimateをいつも使う度に忘れるのでメモ。

変化前の(大元の)方のクラスにtransitionの初期値を、

hover後のクラスに変化後のパラメーターを入れる。

 

.element {

  transition: all .2s ease-in;

  background: #f1f1f1;

}

.element:hover {

  background: #eee;

}

 

またtransitionは変化前後の数値を比較して計算するため、基本的に数値で指定するパラメーターのみしか受け付けない。(バイナリは使用不可)

例:visibilityは使えないがopacityは使える

http://www.w3schools.com/css/css3_transitions.asp

Drupal7 Views UI 7.x-3.xとjQuery 1.8以降の互換性

Drupal Views UIがjQuery 1.8以降ではうまく動作しないらしい。

Masonry Viewsを使っていたからMasonry側の問題かと思っていたが、

Masonry使ってなくてもViews UIの設定が保存後消えていたため調べた。

jQuery Updateのモジュールを外してjQueryのバージョンをデフォルトの1.4に戻した後、

再度Viewsの設定を行うと正常に動作。

しかしMasonry APIを使うためにはjQueryの1.6以降のバージョンが必要だから、

勝手に最新バージョンを読み込むjQuery Updateを使わずに手動で1.6から1.7のバージョンをインストールする必要がありそう。

しかしデフォルトのjQueryのバージョンが古過ぎる。

セキュリティ的にも難ありだな。

Masonry API:https://www.drupal.org/project/masonry

Views UIとjQuery1.8について:https://www.drupal.org/node/1376686

JavaScript Patterns

Object-Oriented

Only five primitive types are not objects: number, string, boolean, null, and undefined
Functions are objects, too. They can have properties and methods.
Variable automatically becomes a property of an internal obejct known as an Activation Object
This variable is actually also object-like because it has its own properties.
An object is just a collection of named properties, a list of key-value pairs. (almost identical to an associative array in other languages)
Some of the properties could be functions, in which case we call them methods.
There are two types of objects.
Native : Described in the ECMAScript standard
Host : Defined by the host environment (Ex: browser environment)

No Class in JavaScript

There are no classes in JavaScript.
You don’t need to have a class to create an object.
You create a blank object when you need one and then start adding interesting members to it.
You compose objects by adding primitivese, functions, or other objects to them as their properties.
JavaScript odes have inheritance

Maintainable code

is readable
is consistent
is predictable
looks as if it was written by the same person
is documented

Drupal7 preprocess functions kpr($hook)

WordPressのようにレンダー前にフックをかける時にはtemplate.phpにpreprocessファンクションを作成する。

function themename_preprocess($variables, $hook) {
kpr($hook);
}

でどのようなフックが使われているか確認できる。