https://www.city.tokushima.tokushima.jp/js/jquery.webalert-embed.js

1/**
2 * 災害情報配信システム連携のjQueryプラグイン。
3 * ・HTMLに災害情報を埋め込む
4 * 
5 * @version 01-00
6 * @since 01-00
7 *
8 */
9(function($) {
10
11	/** 
12	 * PCページ用の災害情報を埋め込む
13	 */
14	$.fn.webalertEmbedPc = function(options, parentObj) {
15		var defaults = {
16			// データの表示領域のID
17			dataEmbedId : 'webalert_info_list',
18			// データのURL
19			jsonDataUrl : '/webalert/data.json',
20			// デーが0件の場合、領域を表示するかどうか
21			isDisplayNoData : true,
22			// データ読み込み時に失敗したときに、表示するかどうか。
23			isDisplayFailLoadData : false,
24			// データの表示件数
25			maxCount : 5,
26			// データが0件のときのメッセージ
27			noDataMessage : '現在緊急情報はありません。',
28			// 一覧ページのリンクのID
29			listLinkId : 'webalert_list_link',
30			// 一覧ページのURL
31			listLinkUrl : '/webalert/list_pc.html'
32		}
33		
34		var config = $.extend(defaults, options);
35		
36		var myObj = this;
37		if(parentObj != undefined && parentObj != null) {
38			// スマートフォンの場合は、PC用を呼び出しているので、オブジェクトがことなる。
39			myObj = parentObj;
40		}
41		
42		$.ajax({
43			type : 'GET',
44			url : config.jsonDataUrl,
45			dataType : "json",
46			cache : false,
47			success : function(data) {
48				// 埋め込み先のDOMのIDで設定する。
49				var divObj_embed = $(myObj).find("#" + config.dataEmbedId);
50				if(divObj_embed == undefined || divObj_embed == null) {
51					console.log('not found data embeded DOM id = ' + config.dataEmbedId);
52					return;
53				}
54				
55				// 一覧ページへのリンク設定
56				var listLinkObj = $(myObj).find('#' + config.listLinkId);
57				if(listLinkObj != undefined && listLinkObj != null) {
58					$(listLinkObj).attr('href', config.listLinkUrl);
59				}
60				
61				// 災害情報データのデータの件数
62				var dataLength = data.length;
63				
64				// 災害情報が0件の場合
65				if (dataLength == 0) {
66					if (config.isDisplayNoData) {
67						//0件の場合のメッセージを埋め込む
68						var errorObj = $('<p>').addClass('webalert_warn').text(config.noDataMessage);
69						$(divObj_embed).append(errorObj);
70						
71					} else {
72						//表示領域全体のDOM自体を非表示にする。
73						$(myObj).hide();
74					}
75					return;
76				}
77				
78				// 表示する件数の決定
79				var count = (dataLength < config.maxCount) ? dataLength : config.maxCount;
80				if(config.maxCount <= 0) {
81					count = dataLength;
82				}
83				
84				//災害情報を一件ずつで埋め込む
85				for (var i = 0; i < count; i++) {
86					var itemInfo = $('<p>').addClass('webalert_info_item').html(data[i].html_content);
87					$(divObj_embed).append(itemInfo);
88					
89				}
90				
91			},
92			
93			error : function(xhr, status, error) {
94				// xhr.status : 404
95				// xhr.statusText : Not Found
96				// status = error
97				// error.message : ...
98				
99				if(!config.isDisplayFailLoadData) {
100					// データ読み込み時に表示しない場合
101					$(myObj).hide();
102					return;
103				}
104				
105				//埋め込み先のDOMのIDで設定する。
106				var divObj_embed = $("#" + config.dataEmbedId);
107				var errorObj = $('<p>').addClass('webalert_error');
108				
109				if(xhr.status == 404) {
110					$(errorObj).text('災害情報データファイルが見つかりません。');
111				} else {
112					$(errorObj).text('災害情報データファイルの読み込みに失敗しました。');					
113				}
114				$(divObj_embed).append(errorObj);
115				
116				// 一覧ページへのリンク設定
117				var listLinkObj = $(myObj).find('#' + config.listLinkId);
118				if(listLinkObj != null) {
119					$(listLinkObj).attr('href', config.listLinkUrl);
120
121				}
122				
123				return;
124			}
125		});
126	}
127	
128	/**
129	 * スマートフォン用に災害情報を埋め込む。
130	 */
131	$.fn.webalertEmbedSmph = function(options) {
132		
133		var defaults = {
134			// 一覧ページのURL
135			listLinkUrl : '/webalert/list_smph.html'
136		}
137		var config = $.extend(defaults, options);
138		return $.fn.webalertEmbedPc(config, this);
139		
140	}
141}(jQuery));