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

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

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

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 this app as your new one download

Web Search

Contributor Send Message	長野県須坂市
Forked from (Parent App)	Sayoko Shimoyama 's 千葉県流山市議会議員のイエローページ
Run count	758
Website
License
Fork count	1
Created date	Dec 26, 2014
Last update date	Jan 5, 2015