Skip to content
Permalink
Browse files

Toggle details visibility.

  • Loading branch information
RubenVerborgh committed Jun 24, 2016
1 parent 8cbf82c commit c0bc8c3d28d564cfa12fc6447e30ca7de9515968
Showing with 56 additions and 10 deletions.
  1. +4 −0 images/memento.svg
  2. +3 −2 index.html
  3. +23 −1 ldf-client-jquery.js
  4. +26 −7 ldf-client.css
@@ -0,0 +1,4 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<style> * { fill: #777777 } :target { fill: #BE1622 } </style>
<path id="active" d="M783,511.4H498V227.9c0-19.4-13.2-35.2-32.6-35.2c-19.4,0-32.6,15.7-32.6,35.2v315.6c0,16.7,9.1,28.2,24.8,31.7c3.1,0.9,6.4,1.4,9.8,1.4H783c19.4,0,35.2-13.2,35.2-32.6C818.2,524.5,802.4,511.4,783,511.4L783,511.4L783,511.4z M500,10c270.6,0,490,219.4,490,490c0,270.6-219.4,490-490,490C229.4,990,10,770.6,10,500C10,229.4,229.4,10,500,10 M500,64.9c-58.8,0-115.7,11.5-169.4,34.2c-51.8,21.9-98.3,53.3-138.3,93.3c-40,40-71.4,86.5-93.3,138.3C76.4,384.3,64.9,441.2,64.9,500c0,58.8,11.5,115.7,34.2,169.3c21.9,51.8,53.3,98.3,93.3,138.3c40,40,86.5,71.4,138.3,93.3c53.6,22.7,110.6,34.2,169.3,34.2c58.8,0,115.7-11.5,169.3-34.2c51.8-21.9,98.3-53.3,138.3-93.3c40-40,71.4-86.5,93.3-138.3c22.7-53.6,34.2-110.6,34.2-169.3c0-58.8-11.5-115.8-34.2-169.3c-21.9-51.8-53.3-98.3-93.3-138.3c-40-40-86.5-71.4-138.3-93.3C615.7,76.4,558.8,64.9,500,64.9L500,64.9L500,64.9z"/>
</svg>
@@ -37,10 +37,11 @@ <h1><a href="#">Linked Data Fragments client</a></h1>
<li>
<label>Choose datasources</label>
<select class="datasources" multiple></select>
<span class="details-toggle" title="Show date option"></span>
</li>

<li>
<label>Pick a date <em>(optional)</em></label>
<li class="details">
<label>Pick a date</label>
<input class="datetime" type="date">
</li>

@@ -63,7 +63,9 @@
$queries = this.$queries = $('.query', $element),
$results = this.$results = $('.results', $element),
$datasources = this.$datasources = $('.datasources', $element),
$datetime = this.$datetime = $('.datetime', $element);
$datetime = this.$datetime = $('.datetime', $element),
$details = this.$details = $('.details', $element),
$showDetails = this.$showDetails = $('.details-toggle', $element);

// Replace non-existing elements by an empty text box
if (!$datasources.length) $datasources = this.$datasources = $('<select>');
@@ -92,6 +94,11 @@
$start.click(this._execute.bind(this));
$stop.click(this._stopExecution.bind(this));

// Set up details toggling
$showDetails.click(function () {
$details.is(':visible') ? self._hideDetails() : self._showDetails();
});

// Add log lines to the log element
var logger = this._logger = new ldf.Logger();
ldf.Logger.setLevel('info');
@@ -149,6 +156,8 @@
this._loadQueries(options.selectedDatasources);
break;
case 'datetime':
if (value)
this._showDetails();
this.$datetime.val(value).change();
break;
// Set the list of selectable queries
@@ -264,6 +273,19 @@
ldf.HttpClient.abortAll && ldf.HttpClient.abortAll();
error && error.message && this.$results.text(error.message);
},

// Shows the details panel
_showDetails: function () {
this.$details.slideDown(150);
this.$showDetails.addClass('enabled');
},

// Hides the details panel
_hideDetails: function () {
this._setOption('datetime', '');
this.$details.slideUp(150);
this.$showDetails.removeClass('enabled');
},
});

// Appends text to the given element
@@ -104,6 +104,27 @@ input.datetime {
border-radius: 3px;
}

.details {
display: none;
}
.details-toggle {
display: block;
width: 24px;
height: 24px;
margin: 0 -35px;
float: right;
cursor: pointer;
background: url(images/memento.svg) no-repeat center center / contain;
opacity: .8;
}
.details-toggle:hover, .details-toggle.enabled {
opacity: 1;
}
.details-toggle.enabled {
background-image: url(images/memento.svg#active);
width: 25px; /* for Chrome */
}

textarea {
width: 100%;
min-height: 11em;
@@ -151,13 +172,6 @@ footer {
header p {
margin: 0 0 .5em;
}
.ui-combobox {
float: none;
display: block !important;
min-width: 0;
width: 260px;
margin: .2em 0;
}

select {
min-width: 260px;
@@ -166,6 +180,11 @@ footer {
float: none;
margin-bottom: 0;
}
.details-toggle {
float: none;
display: inline-block;
margin: 0 -10px -8px 10px;
}

pre {
max-width: 90%;

0 comments on commit c0bc8c3

Please sign in to comment.