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

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

評価指数

アプリケーション

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.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して新しいアプリを作るダウンロード

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

作者メッセージ送信	長野県須坂市
Fork元のアプリ	長野県須坂市 's 須坂の歴史年表～すざかのできごと～
実行回数	638
ウェブサイト
ライセンス
Fork count	0
作成日	2015年1月15日
最終更新日	2015年1月15日