須坂の歴史年表～できごとけんさく～

須坂市・長野県・全国で起きた出来事を掲載しています。長野県と全国の出来事は須坂市に関係がある出来事を中心に掲載しています。
検索ボックスにキーワードを入力すると、出来事を西暦、和暦、月日、内容で検索することができます。
このアプリは千葉県流山市様のアプリを参考にさせていただきました。

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.setArea(LinkData.getObjects(workId, fileName, subject, self._property.getAreaProperty())[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.setArea(LinkData.getObjects(workId, fileName, subject, self._property.getAreaProperty())[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.getArea().toLowerCase().indexOf(keyword.toLowerCase()) > -1 && $.inArray(info.getArea(), list)) {
				list.push(info.getArea());
			} 
			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.getArea().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.getArea(), keyword) + "の出来事▼<br>" + 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,
	_areaProperty : null,
	_adProperty : null,
	_jcProperty : null,
	_dateProperty : null,
	_eventProperty : null,

_cons : {
		NAME			: "label",
		AREA			: "area",
		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.AREA) > -1) {
						self._areaProperty = 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;
	},
	
	getAreaProperty : function() {
		return this._areaProperty;
	},
	
	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,
	_area : 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;
	},
	
	getArea : function() {
		if (!this._area) {
			this._area = "";
		}
		return this._area;
	},
	
	setArea : function(area) {
		this._area = area;
	},
	
	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)	長野県須坂市 's 須坂の歴史年表～すざかのできごと～
Run count	637
Website
License
Fork count	0
Created date	Jan 15, 2015
Last update date	Jan 15, 2015