webcomponents update (cf79e996) · Commits · github_fork / Clip

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

+13 −3

Original line number	Diff line number	Diff line
		@@ -25,18 +25,24 @@
		fn-controls[type='primary-small'] /deep/ .controls_inner {
		margin-top: 5px;
		height: 76px;
		overflow: visible;
		background: #fff;
		}

		fn-controls[type='primary'][data-style="blue"] /deep/ .controls_inner {
		border-top: 2px solid rgb(226, 232, 237);
		border-bottom: 2px solid rgb(226, 232, 237);
		background-color: #f6f8fa;
		color: #60707f;
		overflow: visible;
		}

		fn-controls[type='primary-small'] /deep/ .controls_inner {
		height: 22px;
		padding: 10px 0;
		height: 65px;
		padding: 0;
		margin-top: 0;
		}


		fn-controls[type='primary'] /deep/ .group,
		fn-controls[type='primary-small'] /deep/ .group {
		float: left;
		@@ -44,6 +50,10 @@
		overflow: visible;
		}

		fn-controls[type='primary-small'] /deep/ .group {
		padding: 7px 8px;
		}

		fn-controls[type='primary'] /deep/ .group b {
		font-weight: normal;
		font-size: 80%;

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

+4 −0

Original line number	Diff line number	Diff line
		@@ -41,6 +41,10 @@
		Both future and past dates are selectable if no data-selectable attribute is set
		</div>
		</section>
		<section>
		<h1><i>Example 5 »</i> Small</h1>
		<fn-datepicker data-size="small"></fn-datepicker>
		</section>

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

+18 −7

Original line number	Diff line number	Diff line
		@@ -13,9 +13,6 @@
		display: block;
		}

		fn-datepicker:hover {
		cursor: pointer;
		}
		</style>
		<template id='fn-datepicker-base-tpl'>
		<style type='text/css'>
		@@ -24,7 +21,7 @@
		display:block;
		}

		fn-input:hover {
		fn-input /deep/ input {
		cursor: pointer;
		}

		@@ -35,7 +32,7 @@
		width: 216px;
		outline: 0;
		font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
		font-size: 14px;
		font-size: 1rem;
		color: rgba(0,0,0,.8);
		z-index: 100;
		cursor: pointer;
		@@ -48,6 +45,10 @@
		will-change: transform,opacity;
		}

		#datepicker_widget.small {
		font-size: 0.875rem;
		}

		fn-input-time {
		margin: 7px auto;
		display:block;
		@@ -59,12 +60,13 @@
		border: 1px solid rgb(226, 232, 237);
		border-radius: 3px;
		border-collapse: collapse;
		font-size: 1rem;
		font-size: 1em;
		}


		table th {
		width: 25px;
		height: 20px;
		height: 28px;
		line-height: 20px;
		text-align: center;
		font-weight: normal;
		@@ -125,6 +127,10 @@

		if (this.hasAttribute('data-timestamp')) {this.setTimeValues();}

		if (this.hasAttribute('data-size')) {
		widget.className += " " + this.getAttribute('data-size');
		}

		this.attributeChangedCallback();

		input.addEventListener('click', function() {
		@@ -183,6 +189,10 @@
		var time_input = document.createElement("fn-input-time");
		var selected_date = this.getSelectedDate();

		if (this.hasAttribute('data-size')) {
		time_input.setAttribute('data-size', this.getAttribute('data-size'));
		}

		time_input.setAttribute('data-hours-value', selected_date.getHours());
		time_input.setAttribute('data-minutes-value', selected_date.getMinutes());
		widget.appendChild(time_input);
		@@ -248,6 +258,7 @@
		var header_elem = document.createElement("tr");
		var cell_elem = document.createElement("td");
		cell_elem.colSpan = "7";
		cell_elem.style.height = "25px";

		var month_title = document.createElement("b");
		month_title.className = "datepicker_title";

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

+22 −3

Original line number	Diff line number	Diff line
		@@ -17,13 +17,32 @@

		<section>
		<h1>Daterangepicker with restricted date selection</h1>
		<h3><i>Example 1 »</i> Past</h3>
		<h3><i>Example 2 »</i> Past</h3>
		<fn-daterangepicker data-selectable='past'></fn-daterangepicker>
		<h3><i>Example 2 »</i> Future</h3>
		<h3><i>Example 3 »</i> Future</h3>
		<fn-daterangepicker data-selectable='future'></fn-daterangepicker>

		</section>
		<section>
		<h1><i>Example 4 »</i> Sizes</h1>
		<fn-daterangepicker data-size="small"></fn-daterangepicker>
		</section>
		<section>
		<h3><i>Example 5 »</i> Combined with fn-tooltip</h3>
		<fn-daterangepicker id="picker_with_tooltip" data-selectable="past"></fn-daterangepicker>
		<fn-tooltip id="tooltip_for_picker">
		Please select a date in the past
		</fn-tooltip>
		</section>


		<script type='text/javascript'>
		var picker = document.getElementById("picker_with_tooltip");
		var chevron_right = picker.shadowRoot.getElementById("right");
		var tooltip = document.getElementById("tooltip_for_picker");

		tooltip.initShowIf(chevron_right, function() {
		return (!(picker.nextIsSelectable()));
		});
		</script>

		</template>

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

+99 −55

Original line number	Diff line number	Diff line
		@@ -20,14 +20,22 @@
		<style type='text/css'>
		.wrapper {
		font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
		font-size: 14px;
		font-size: 1rem;
		height: 100%;
		}

		.wrapper.tiny {
		font-size: 0.8125rem;
		}

		.wrapper.small {
		font-size: 0.875rem;
		}

		.fa {
		color: rgb(84, 87, 88);
		font: normal normal normal 14px/1 FontAwesome;
		font-size: inherit;
		font-family: FontAwesome;
		font-size: 0.9em;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		@@ -35,25 +43,36 @@

		.fa-chevron-left {
		border-right: 1px solid #ececec;
		margin-right: 5px;
		padding-right: 15px;
		padding-right: 12px;
		}

		.fa-chevron-right {
		border-left: 1px solid #ececec;
		margin-left: 5px;
		padding-left: 15px;
		padding-left: 12px;
		}

		.wrapper.small .fa-chevron-right {
		padding-left: 6px;
		}

		.fa:hover {
		.wrapper.small .fa-chevron-left {
		padding-right: 6px;
		}

		.wrapper.small span {
		padding: 0 3px;
		}


		.fa:not(.off):hover {
		color: #009fe9;
		cursor: pointer;
		}

		span {
		font-size: inherit;
		font-size: 1em;
		color: rgba(0,0,0,.8);
		padding: 0 10px;
		padding: 0 7px;
		font-weight: 500;
		line-height: 24px;
		display: inline-block;
		@@ -63,9 +82,9 @@

		</style>
		<div class="wrapper">
		<i class='fa fa-chevron-left'></i>
		<i class='fa fa-chevron-left' id="left"></i>
		<span></span>
		<i class='fa fa-chevron-right'></i>
		<i class='fa fa-chevron-right' id="right"></i>
		</div>
		</template>

		@@ -80,19 +99,33 @@

		this.init();

		this.shadowRoot.querySelector(".fa-chevron-left").addEventListener(
		'click',
		function() {
		if (this.hasAttribute('data-size')) {
		this.shadowRoot.querySelector(".wrapper").className +=
		" " + this.getAttribute('data-size');
		}

		var chevron_left = this.shadowRoot.querySelector(".fa-chevron-left");
		var chevron_right = this.shadowRoot.querySelector(".fa-chevron-right");

		chevron_left.addEventListener('click', function() {
		if (!(this.classList.contains("off"))) {
		base.selectPreviousDateRange();
		},
		false);
		}
		}, false);

		chevron_left.addEventListener('mouseover', function() {
		base.hoverChevronLeft(this);
		}, false);

		this.shadowRoot.querySelector(".fa-chevron-right").addEventListener(
		'click',
		function() {
		chevron_right.addEventListener('click', function() {
		if (!(this.classList.contains("off"))) {
		base.selectNextDateRange();
		},
		false);
		}
		}, false);

		chevron_right.addEventListener('mouseover', function() {
		base.hoverChevronRight(this);
		}, false);

		};

		@@ -146,7 +179,6 @@
		this.updateDateTitle = function() {
		var timestamp = parseInt(this.getAttribute('data-endtime'), 10);
		var date_range = parseInt(this.getAttribute('data-daterange'), 10);
		console.log(timestamp, date_range);
		var start_timestamp = timestamp - date_range;

		var title = this.shadowRoot.querySelector("span");
		@@ -156,52 +188,64 @@
		this.getDateTimeString(timestamp);
		};

		this.selectPreviousDateRange = function() {
		this.previousIsSelectable = function() {
		var date_range = parseInt(this.getAttribute('data-daterange'), 10);
		var end_time = parseInt(this.getAttribute('data-endtime'), 10);
		end_time = end_time - date_range;

		var fireEvent = false;
		var selectable = this.getAttribute('data-selectable');
		if (selectable == "past") {
		if (end_time <= Date.now()) {
		fireEvent = true;
		}
		} else if (selectable == "future") {
		if (end_time >= Date.now()) {
		fireEvent = true;
		}
		} else {
		fireEvent = true;
		}

		if (fireEvent) {
		this.setAttribute('data-endtime', end_time);
		this.fireSelectPreviousDateRangeEvent();

		return (
		(selectable == null) \|\|
		(selectable == "past" && end_time <= Date.now()) \|\|
		(selectable == "future" && end_time >= Date.now()));
		}
		};

		this.selectNextDateRange = function() {
		this.nextIsSelectable = function() {
		var date_range = parseInt(this.getAttribute('data-daterange'), 10);
		var end_time = parseInt(this.getAttribute('data-endtime'), 10);
		end_time = end_time + date_range;

		var fireEvent = false;
		var selectable = this.getAttribute('data-selectable');
		if (selectable == "past") {
		if (end_time <= Date.now()) {
		fireEvent = true;

		return (
		(selectable == null) \|\|
		(selectable == "past" && end_time <= Date.now()) \|\|
		(selectable == "future" && end_time >= Date.now()));
		}
		} else if (selectable == "future") {
		if (end_time >= Date.now()) {
		fireEvent = true;

		this.hoverChevronLeft = function(elem) {
		if (this.previousIsSelectable()) {
		elem.classList.remove("off");
		} else {
		elem.classList.add("off");
		}
		};

		this.hoverChevronRight = function(elem) {
		if (this.nextIsSelectable()) {
		elem.classList.remove("off");
		} else {
		fireEvent = true;
		elem.classList.add("off");
		}
		};

		if (fireEvent) {
		this.setAttribute('data-endtime', end_time);
		this.selectPreviousDateRange = function() {
		if (this.previousIsSelectable()) {
		this.setAttribute(
		'data-endtime',
		parseInt(this.getAttribute('data-endtime'), 10) -
		parseInt(this.getAttribute('data-daterange'), 10));
		this.fireSelectPreviousDateRangeEvent();
		}
		};

		this.selectNextDateRange = function() {
		if (this.nextIsSelectable()) {
		this.setAttribute(
		'data-endtime',
		parseInt(this.getAttribute('data-endtime'), 10) +
		parseInt(this.getAttribute('data-daterange'), 10));
		this.fireSelectNextDateRangeEvent();
		}
		};

Admin message