Toggle details visibility.

rubensworks · Jun 24, 2016 · c0bc8c3d28d564cfa12fc6447e30ca7de9515968 · c0bc8c3
1 parent 8cbf82c
commit c0bc8c3d28d564cfa12fc6447e30ca7de9515968
Unified Split

Showing with 56 additions and 10 deletions.

+4 −0 images/memento.svg

+3 −2 index.html

+23 −1 ldf-client-jquery.js

+26 −7 ldf-client.css
diff --git a/images/memento.svg b/images/memento.svg
@@ -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>
diff --git a/index.html b/index.html
@@ -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>
 

diff --git a/ldf-client-jquery.js b/ldf-client-jquery.js
@@ -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

diff --git a/ldf-client.css b/ldf-client.css
@@ -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%;