須坂の歴史年表～すざかのできごと～

長野県須坂市で起きた出来事を掲載しています。
検索ボックスにキーワードを入力すると、出来事を西暦、和暦、月日、内容で検索することができます。
このアプリは千葉県流山市様のアプリを参考にさせていただきました。【2015.1.6更新】レイアウトを調整しました。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

if (!HIS) {
	var HIS = {};
}

HIS.main = function() {
	this._init.apply(this, arguments);
};

HIS.main.prototype = {
	
	_infoList : null,
	_property : null,
	_subjectList : null,
	
	_cons : {
		MAX_ITEM_COUNT			: 300,
		INFO_SELECTOR			: ".info",
		KEY_WORD_SELECTOR		: "#keyword",
		INFO_LIST_SELECTOR		: "#infoList",
		TAG_SELECTOR			: ".tag",
		SEARCH_IMAGE_SELECTOR	: ".searchImage",
		PAGE_TITLE_SELECTOR		: ".pageTitle",
		
	},
	
	_init : function() {
		this._infoList = [];
		this._property = new HIS.property();
		this._initInfoList();
		this._initView();
		this._initListener();
	},
	
	_initInfoList : function() {
		var self = this, workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var subjectList = LinkData.getSubjects(workId, fileName);
		for (var i = 0; i < subjectList.length; i++) {
			var subject = subjectList[i];
			var info = new HIS.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setAd(LinkData.getObjects(workId, fileName, subject, self._property.getAdProperty())[0]);
			info.setJc(LinkData.getObjects(workId, fileName, subject, self._property.getJcProperty())[0]);
			info.setDate(LinkData.getObjects(workId, fileName, subject, self._property.getDateProperty())[0]);
			info.setEvent(LinkData.getObjects(workId, fileName, subject, self._property.getEventProperty())[0]);
			self._infoList.push(info);
		}
	},
	
	_initView : function() {
	
	},
	
	_initListener : function() {
		this._initPageTitleListener();
		this._initAutoCompleter();
		this._initKeywordListener();
		this._initSearchImageListener();
	},
	
	_initPageTitleListener : function() {
		var self = this;
		$(self._cons.PAGE_TITLE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).val("");
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT);
			self._addHtml(infoList);
		});
	},
	
	
	
	_initAutoCompleter : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).autocomplete({
			minLength: 1,
			source: function(req, res) {
				var keyword = req.term;
				res(self._getMatchWordListByKeyword(keyword));
			},
			select : function(event, ui) {
				var keyword = ui.item.value;
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		})
	},
	
	_initKeywordListener : function() {
		var self = this;
		$(self._cons.KEY_WORD_SELECTOR).keydown(function(evt) {
			if (evt.which == 13) {
				$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
				var keyword = $(this).val();
				var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
				self._addHtml(infoList, keyword);
			}
		});
	},
	
	_initSearchImageListener : function() {
		var self = this;
		$(self._cons.SEARCH_IMAGE_SELECTOR).click(function() {
			$(self._cons.KEY_WORD_SELECTOR).autocomplete("close");
			var keyword = $(self._cons.KEY_WORD_SELECTOR).val();
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	_initTagListener : function() {
		var self = this;
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).unbind("click");
		$(self._cons.INFO_LIST_SELECTOR + " " + self._cons.TAG_SELECTOR).click(function() {
			var keyword = $(this).text().trim();
			$(self._cons.KEY_WORD_SELECTOR).val(keyword);
			var infoList = self._getInfoListByIndex(1, self._cons.MAX_ITEM_COUNT, keyword);
			self._addHtml(infoList, keyword);
		});
	},
	
	
	_addHtml : function(infoList, keyword) {
		var self = this;
		if (infoList.length != 0) {
			var html = self._getContentHtml(infoList, keyword);
			$(self._cons.INFO_LIST_SELECTOR).html(html);
			self._initTagListener();
		} else {
			var html = self._getNotFoundHtml();
			$(self._cons.INFO_LIST_SELECTOR).html(html);
		}
	},
	
	_appendHtml : function(infoList, keyword) {
		var self = this;
		var html = self._getContentHtml(infoList, keyword);
		$(self._cons.INFO_LIST_SELECTOR).append(html);
		self._initTagListener();
	},
	
	
	_getInfoList : function(start, itemCount) {
		var self = this, list = [];
		var workId = self._property.getWorkId(), fileName = self._property.getFileName();
		var sList = self._getSubjectList(start, itemCount);
		for (var i = 0; i < sList.length; i++) {
			var subject = sList[i];
			var info = new HIS.info();
			info.setName(LinkData.getObjects(workId, fileName, subject, self._property.getNameProperty())[0]);
			info.setAd(LinkData.getObjects(workId, fileName, subject, self._property.getAdProperty())[0]);
			info.setJc(LinkData.getObjects(workId, fileName, subject, self._property.getJcProperty())[0]);
			info.setDate(LinkData.getObjects(workId, fileName, subject, self._property.getDateProperty())[0]);
   	        info.setEvent(LinkData.getObjects(workId, fileName, subject, self._property.getEventProperty())[0]);
			list.push(info);
		}
		return list;
	},
	
	_getMatchWordListByKeyword : function(keyword) {
		
		var self = this, list = [];
		var infoList = self._getInfoListByIndex(2, self._cons.MAX_ITEM_COUNT, keyword);
		$.each(infoList, function(key, info) {
			if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getName(), list)) {
				list.push(info.getName());
			} 
			if (info.getAd().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getAd(), list)) {
				list.push(info.getAd());
			} 
			if (info.getEvent().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getEvent(), list)) {
				list.push(info.getEvent());
			}
			if (info.getJc().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getJc(), list)) {
				list.push(info.getJc());
			}
            if (info.getDate().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getDate(), list)) {
				list.push(info.getDate());
			}
		});
		return list;
	},
	
	_getInfoListByIndex : function(page, itemCount, keyword) {
		var self = this, list = [], count = 0;
		var end = (page * itemCount) - 1;
		var start = end - itemCount + 1;
		for (var i = 0; i < self._infoList.length; i++) {
			var info = self._infoList[i];
			if ((!keyword || keyword.trim().length == 0) || self._isHitInfo(info, keyword)) {
				if (count >= start && count <= end) {
					list.push(info);
				}
				count++;
			}
			if (list.length == itemCount) {
				return list;
			}
		}
		return list;
	},
	
	_isHitInfo : function(info, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return false;
		}
		if (info.getName().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getAd().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getEvent().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getJc().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		} else if (info.getDate().toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
			return true;
		}
		return false;
	},
	
	_getContentHtml : function(infoList, keyword) {/* 情報ウィンドの表示設定 */
		var self = this, sb = [];
		for (var i = 0; i < infoList.length; i++) {
			var info = infoList[i];
			sb[sb.length] = "<div class='info cf'>";
			sb[sb.length] = "<div class='profileInfoArea left'>";
			sb[sb.length] = ""+"<div class='name'>" + self._getHighLightKeywordHtml(info.getAd(), keyword) + "年（" + self._getHighLightKeywordHtml(info.getJc(), keyword)  +"年）　" + self._getHighLightKeywordHtml(info.getDate(), keyword);
			if (info.getEvent().trim().length != 0) {
				sb[sb.length] = "<br><span class='nextTo'>" + self._getHighLightKeywordHtml(info.getEvent(), keyword) + "</span>";
			}

sb[sb.length] = "</div>";
			sb[sb.length] = "<div class='cf'>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
			sb[sb.length] = "</div>";
		}
		return sb.join("");
	},
	
	_getHighLightKeywordHtml : function(text, keyword) {
		if (!keyword || keyword.trim().length == 0) {
			return text;
		}
		var regex = new RegExp('(' + keyword + ')', 'gi');
		return text.replace(regex, "<span class='highlight'>$1</span>");
	},
	
	_getNotFoundHtml : function() {
		var sb = [];
		sb[sb.length] = "<div class='info error'>出来事は見つかりませんでした</div>";
		return sb.join("");
	},
	
	_getTagListHtml : function(tagList, keyword) {
		var self = this, sb = [];
		for (var i = 0; i < tagList.length; i++) {
			var tag = tagList[i];
			sb[sb.length] = "<span class='tag left'>" + self._getHighLightKeywordHtml(tag.trim(), keyword) + "</span>";
		}
		return sb.join("");
	}
};

HIS.property = function() {
	this._init.apply(this, arguments);
};

HIS.property.prototype = {
	
	_workId : null,
	_fileName : null,
	_nameProperty : null,
	_adProperty : null,
	_jcProperty : null,
	_dateProperty : null,
	_eventProperty : null,

_cons : {
		NAME			: "label",
		AD				: "ad",
		DATE			: "date",
		JC				: "jc",
		EVENT			: "event"

},
	
	_init : function() {
		this._initProperty();
	},
	
	_initProperty : function() {
		var self = this;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				self._workId = workId;
				self._fileName = fileName;
				$.each(LinkData.getProperties(workId, fileName), function(propKey, propValue) {
					if (propValue.indexOf(self._cons.NAME) > -1) {
						self._nameProperty = propValue;
					} else if (propValue.indexOf(self._cons.AD) > -1) {
						self._adProperty = propValue;
					} else if (propValue.indexOf(self._cons.JC) > -1) {
						self._jcProperty = propValue;
					} else if (propValue.indexOf(self._cons.DATE) > -1) {
						self._dateProperty = propValue;
					} else if (propValue.indexOf(self._cons.EVENT) > -1) {
						self._eventProperty = propValue;
					}
				});
				return false;
			});
			return false;
		});
	},
	
	getWorkId : function() {
		return this._workId;
	},
	
	getFileName : function() {
		return this._fileName;
	},
	
	getNameProperty : function() {
		return this._nameProperty;
	},
	
	getAdProperty : function() {
		return this._adProperty;
	},
	
	getJcProperty : function() {
		return this._jcProperty;
	},
	
	getDateProperty : function() {
		return this._dateProperty;
	},
	
	getEventProperty : function() {
		return this._eventProperty;

}
};

HIS.info = function() {
	this._init.apply(this, arguments);
};

HIS.info.prototype = {
	
	_name : null,
	_ad : null,
	_jc : null,
	_date : null,
	_event : null,

_init : function() {},
	
	getName : function() {
		if (!this._name) {
			this._name = "";
		}
		return this._name;
	},
	
	setName : function(name) {
		this._name = name;
	},
	
	getAd : function() {
		if (!this._ad) {
			this._ad = "";
		}
		return this._ad;
	},
	
	setAd : function(ad) {
		this._ad = ad;
	},
	
	getJc : function() {
		if (!this._jc) {
			this._jc = "";
		}
		return this._jc;
	},
	
	setJc : function(jc) {
		this._jc = jc;
	},
	
	getDate : function() {
		if (!this._date) {
			this._date = "";
		}
		return this._date;
	},
	
	setDate : function(date) {
		this._date = date;
	},
	
	getEvent : function() {
		if (!this._event) {
			this._event = "";
		}
		return this._event;
	},
	
	setEvent : function(event) {
		this._event = event;
	}

};

$(document).ready(function() {
	new HIS.main();
});

body, input {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
	
}

.left {
	float: left;
}

.right {
	float: right;
}

.cf:after {
	display: block;
	content: "";
	clear: both;
}

.hide {
	display: none;
}

.nextTo {
	padding-right: 2em;
}

.icon {
	height: 7px;
	width: 7px;
	display: inline-block;
	margin-right: 3px;
	vertical-align: middle;
	background-repeat: no-repeat;
}

.icon-about,
.icon-contact {
	
	margin-right: 0px;
}

.icon-list,
.icon-user,
.icon-comment,
.icon-briefcase,
.icon-envelope,

}

.icon-about {
	background-position: -96px -96px;
}

.icon-contact {
	background-position: -72px 0;
}

.icon-briefcase {
	background-position: -432px -144px;
}

.icon-envelope {
	background-position: -72px 0;
}

.icon-comment {
	background-position: -240px -120px;
}

.icon-user {
	background-position: -168px 0;
}

.icon-list {
	background-position: -264px -24px;
	margin-top: 3px;
}

.icon-home {
	background-position: 0 -24px;
}

.icon-hand-right {
	background-position: -144px -144px;
}

#pageContainer {
	background-color: #f5deb3;
	min-width: 200px;
	width: 100%;
	min-height: 500px;
}

#pageContainer .body {
	height: auto;
	text-align: center;
}

#pageContainer .header {
	background: #ff7f50; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff7f50 0%, #ff7f50 11%, #ff7f50 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f50), color-stop(11%,#888888), color-stop(100%,#ff7f50)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f50', endColorstr='#ff7f50',GradientType=0 ); /* IE6-9 */
	-moz-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.4);
}

#pageContainer .footer {
	background: #ff7f50; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff7f50 0%, #ff7f50 11%, #ff7f50 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f50), color-stop(11%,#ff7f50), color-stop(100%,#ff7f50)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff7f50 0%,#ff7f50 11%,#ff7f50 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f50', endColorstr='#ff7f50',GradientType=0 ); /* IE6-9 */
}

#pageContainer .footer a {
	color: #FFF;
}

#pageContainer .body .bodyContainer {
	width: 100%;
}

#pageContainer .header .headerContent {
	width: 100%;
}

#pageContainer .header,
#pageContainer .footer {
	background-color: #ff7f50;
	height: 50px;
	color: #FFFFFF;
	text-align: center;
}

#pageContainer .header .headerContent {
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about,
#pageContainer .header .headerContent .pageTitle {
	font-size: 14px;
	font-weight: bold;
	text-shadow: 0 2px 3px #555555;
	padding: 5px;
}

#pageContainer .header .headerContent .pageTitle{
	cursor: pointer;
	margin: 0;
}

#pageContainer .header .headerContent .contact,
#pageContainer .header .headerContent .about{
	cursor: pointer;
	margin: 7px 0 0 20px;
}

#pageContainer .header .headerContent .contact a,
#pageContainer .header .headerContent .about a {
	text-decoration: none;
	color: #FFFFFF;
}

#pageContainer .body .bodyContainer {
	height: auto;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#pageContainer .body .bodyContainer .searchBox {/* 検索窓自体の設定 */
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	background: #FFF;
	width: 90%;
	margin: 5px auto;
	border-radius: 10px;
	padding: 5px 10px;
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.4) inset;
}

#pageContainer .body .bodyContainer .searchBox #keyword { /* 検索窓内の設定 */
	width: 80%;
	font-size: 1.4em;
	line-height: 100%;
	float: left;
	border: none;
}

#pageContainer .body .bodyContainer .searchBox input:focus {
	border: none;
	outline:none;
}

#pageContainer .body .bodyContainer .searchBox .searchImage {
	vertical-align: middle;
	cursor: pointer;
	padding: 0px 0;
    width: auto;
}

#pageContainer #infoBox {
	margin: 0 5px;
}

#pageContainer #infoList .info { /* 情報ウィンド内の設定 */
	margin: 7px 7px;
	padding: 2px 5px;
	text-align: left;
	background-color: #FFFFFF;
}

#pageContainer #infoList .error {
	text-align: center;
}

#pageContainer #infoList .info .tagList {
	width: 100%;
}

#pageContainer #infoList .info .highlight {
	color: #0084F7;
}

#pageContainer .bodyContainer .moreInfo,
#pageContainer #infoList .info {
	border: 1px solid #666666;
	border-radius: 3px;
}

#pageContainer #infoList .info .profileImageArea {
	margin-right: 1px;
	min-width: 100px;
	position: relative;
}

#pageContainer #infoList .info .profileInfoArea {
	width: 100%;
}

#pageContainer #infoList .info .profileInfoArea .name {
	font-size: 1.0em;
	position: relative;
}

#pageContainer #infoList .info .profileInfoArea .orgName {
	margin-right: 3px;
}

#pageContainer #infoList .info .profileInfoArea .tag {
	background-color: #FFFCE2;
	border: 1px solid #E6CB00;
	color: #E6CB00;
	margin: 3px 3px 3px 0;
	padding: 0 3px;
	border-radius: 5px;
	cursor: pointer;
}

#pageContainer #infoList .info .profileInfoArea .mainPaper {
	max-width: 90%;
	margin: 0 0 3px;
}

#pageContainer .bodyContainer .moreInfo {
	margin: 3px 0 3px;
	padding: 5px;
	background-color: #ff7f50;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}

このアプリをForkして新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	長野県須坂市
Fork元のアプリ	Sayoko Shimoyama 's 千葉県流山市議会議員のイエローページ
実行回数	741
ウェブサイト
ライセンス
Fork count	1
作成日	2014年12月26日
最終更新日	2015年1月5日