fu (1c648bb2) · Commits · github_fork / Clip

src/fnordmetric/webui/fnordmetric-webui-cockpit.css

+3 −0

Original line number	Diff line number	Diff line
		body, html {
		height: 100%;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 22px;
		}

		fnordmetric-app,

src/libfnord/fnord-webcomponents/components/fn-calendar-demo.html

+55 −5

Original line number	Diff line number	Diff line
		@@ -9,13 +9,63 @@
		<http://www.gnu.org/licenses/>.
		-->
		<template id="fn-calendar-demo-base-tpl">
		<section>
		<h1><i>Example 1 »</i> Basic</h1>
		<fn-calendar></fn-calendar>
		<style type='text/css'>
		.left {
		float:left;
		}

		.left.margin {
		margin-left: 10px;
		}

		section.floating {
		min-height: 300px;
		}

		section.floating.big {
		min-height: 314px;
		}
		</style>

		<section class="floating">
		<h1><i>Example 1 »</i> Preselected Dates</h1>

		<!-- Default Selection -->
		<fn-calendar class="left" data-style='small' data-preselected></fn-calendar>

		<!-- Specified Selection -->
		<fn-calendar class="left margin" data-style='small' data-preselected=1423958400></fn-calendar>
		</section>

		<section>
		<h1><i>Example 2 »</i> Small Calendar</h1>
		<fn-calendar data-style='small'></fn-calendar>
		<h1><i>Example 2 »</i> Specified Month/Year</h1>
		<fn-calendar data-style='small' data-timestamp=1123113600></fn-calendar>
		</section>

		<section id="dynamic_calendar">
		<h1><i>Example 3 »</i> Dynamically Created with Click Event</h1>
		</section>

		<script type='text/javascript'>
		var calendar = document.createElement("fn-calendar");
		calendar.setAttribute('data-preselected', 1423008000);
		calendar.setAttribute('data-style', 'small');
		document.body.querySelector("#dynamic_calendar").appendChild(calendar);

		calendar.addEventListener('fn-calendar-select', function(e) {
		var date = new Date(e.detail.timestamp);
		alert("Yeah, you just selected " + date);
		}, false);
		</script>

		<section class="floating big">
		<h1><i>Example 4 »</i> Sizes and Themes</h1>
		<!-- Basic Default Size -->
		<fn-calendar class="left"></fn-calendar>

		<!-- Blue Small -->
		<fn-calendar class="left margin" data-style='small blue'></fn-calendar>


		</section>
		</template>

src/libfnord/fnord-webcomponents/components/fn-calendar.html

+39 −15

Original line number	Diff line number	Diff line
		@@ -8,6 +8,11 @@
		copy of the GNU General Public License along with this program. If not, see
		<http://www.gnu.org/licenses/>.
		-->
		<style type='text/css'>
		fn-calendar {
		display: block;
		}
		</style>
		<template id="fn-calendar-base-tpl">
		<style type='text/css'>
		table {
		@@ -105,18 +110,21 @@
		this.attributeChangedCallback = function(attr, old_val, new_val) {
		switch (attr) {
		case 'data-timestamp':
		this.render(this.getTimeStamp());
		this.render(this.getTimeStamp(attr));
		break;
		case 'data-style':
		this.setStyle(new_val);
		break;
		case 'data-preselected':
		this.render(this.getTimeStamp('data-timestamp'));
		break;
		default:
		break;
		}
		};

		this.init = function() {
		this.render(this.getTimeStamp());
		this.render(this.getTimeStamp('data-timestamp'));

		var style = this.getAttribute('data-style');
		if (style) {
		@@ -138,9 +146,9 @@
		}


		this.getTimeStamp = function() {
		this.getTimeStamp = function(attr) {
		//TODO add timezone
		var timestamp = parseInt(this.getAttribute('data-timestamp'));
		var timestamp = parseInt(this.getAttribute(attr));
		//1st January 2100
		var thresholdSeconds = 4102444800;

		@@ -193,9 +201,14 @@
		return 0;
		};

		this.setStyle = function(style) {
		this.shadowRoot.querySelector("table").classList.add(style);
		}
		this.setStyle = function(styleStr) {
		var table = this.shadowRoot.querySelector("table");
		var styles = styleStr.split(" ");

		styles.forEach(function(style) {
		table.classList.add(style);
		});
		};

		//updates the date object
		this.render = function(timestamp) {
		@@ -302,7 +315,6 @@
		};

		this.tdClassName = function(date) {
		var selected = this.getDateObject(this.getTimeStamp());
		var now = this.getDateObject(Date.now());
		var name = "selectable ";

		@@ -311,12 +323,15 @@
		name += " highlight_border";
		}
		/* date is selected date */
		if (this.hasAttribute('data-preselected')) {
		var selected = this.getDateObject(this.getTimeStamp('data-preselected'));
		if (date == selected.date &&
		this.date.month == selected.month &&
		this.date.year == selected.year) {
		name += " highlight";
		}
		console.log(name);
		}

		return name;
		};

		@@ -331,8 +346,17 @@
		};

		this.fireDateSelectEvent = function(date, month, year) {
		console.log("selected date", date, month, year);
		var timestamp = new Date(year, month, date).getTime();
		var dateEvent = new CustomEvent(
		'fn-calendar-select', {
		'detail': {'timestamp': timestamp},
		bubbles: true,
		cancealable: true
		}
		);

		this.dispatchEvent(dateEvent);
		};


		};

Admin message