ステップ

UIkit Notificationを画像表示できように改造しました

xiyuan
UIkit Notificationを画像表示できように改造しました

■前説

仕事の都合でUIkitを使う機会がありました。UIkitはbootstrapより軽く、シンプルなので、個人的に好きです。
アプリケーションのエラーメッセージ表示はUIkit Notificationを使って実現しまして、各メッセージの前に【uk-icon=’icon: warning’】を追加して！マークが表示されるように対応していましたが、お客様から、いちいち！マークを表示するのは煩くて、まとめて一つの画像として表示してほしいというご要望がありました。
UIkit Notificationのドキュメント、UIkit Notificationの本家サンプルを調べたら、お客様のご要望は簡単に実現できないことが分かりました。
技術レベル低いくせに、フレームワークの改造が大好きですので、UIkit Notificationを直接に手を入れることを決断しました。

■考え方

UIkit Notificationの実際に生成したソースを調べたら、閉じる(X)リンクとメッセージはすべて動的に生成されましたため（当然のことですが。。。）、同じ方法で、img要素をメッセージの前に追加すれば、お客様のご要望を実現できるはずと考えました。
早速改造を着手します。

■実現

１．改修場所を特定

【uikit.min.js】ファイルの中から、【notification-message】というキーワードで検索したら、改修場所を一発で特定できました。ラッキー♪♪♪

２．imgオプションを追加

特定したところで、clsMsgオプションの後ろに、imgオプションを追加して、使う画像パスはこのオプションを通して設定します。ディフォルト値は空です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
defaults: {
  message: "",
  status: "",
  timeout: 5e3,
  group: null,
  pos: "top-center",
  clsClose: "uk-notification-close",
  clsMsg: "uk-notification-message",
  img:"" //今回追加したオプション
},
 
 

３．img要素を生成

閉じる(X)リンクとメッセージの間に、下記のようにimg（画像）要素を追加します。this.imgはNo.2で追加されたimgオプションのことです。

1
2
3
4
5
 
 
<img src="' + this.img + '" />
 
 

1
2
3
4
5
 
 
this.$mount(i(e, '<div class="' + this.clsMsg + (this.status ? " " + this.clsMsg + "-" + this.status : "") + '"> <a href="#" class="' + this.clsClose + '" data-uk-close></a> <div id="img" style="margin-right: 10px;" > <img src="' + this.img + '" /> </div> <div>' + this.message + "</div> </div>"))
 
 

４．レイアウトを調整

今回のお客様要望は、画像がメッセージの左側に表示したいということで、No.3までは、画像がメッセージの上に表示するため、レイアウトの調整が必要となります。
試した結果、UIkit Notificationの全体のdisplayをflexに指定すれば、上手く表示できたので、早速、UIkit Notificationのstyleを改造します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
ready: function () {
  var t = this,
e = h(o(this.$el, "marginBottom"));
  c.start(o(this.$el, {
opacity: 0,
marginTop: -1 * this.$el.offsetHeight,
marginBottom: 0,
display: "flex"  // 今回追加した部分
  }), {
opacity: 1,
marginTop: 0,
marginBottom: e,
display: "flex"  // 今回追加した部分
  }).then(function () {
t.timeout && (t.timer = setTimeout(t.close, t.timeout))
  })
},
 
 

methodsの中でも、追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
methods: {
  close: function (t) {
var e = this,
  i = function () {
u(e.$el, "close", [e]), l(e.$el), f[e.pos].children.length || o(f[e.pos], "display", "none")
  };
this.timer && clearTimeout(this.timer), t ? i() : c.start(this.$el, {
  opacity: 0,
  marginTop: -1 * this.$el.offsetHeight,
  marginBottom: 0,
  display: "flex" // 今回追加した部分
}).then(i)
  }
}
 
 

■テスト

UIkit Notificationの改造が完了しましたので、早速、動かしてみます。
javascriptで下記のようにimgオプションに画像のパスを設定し、問題なく動作できることを確認しました。

1
2
3
4
5
 
 
UIkit.notification({message: "改造後の動作確認",  timeout: 600000, img: base_url + "/img/alert.png"});
 
 

■ソース

改造後のソースです。
ダウンロード：UIkit Notificationを画像表示できように改造しました

■最後

皆さん、いかがでしょうか。意外と簡単に改造できました。それでは、以上。