Adds ability to store name/value pairs for remote content

RELEASE-NOTES.md

@@ -23,7 +23,7 @@
 
 **Major Changes**
 - **API** - API can now be used with mocked responses, and custom XHR backends. `mockResponse` can be used to resolve request with a local function that receives the same settings as the server. `mockResponseAsync` allows you to specify to  server response from a custom async callback.
-- **API** - API provides a client-side caching option to avoid server roundtrips for identical urls `cache: true`
+- **API** - API now provides a client-side caching setting to avoid server roundtrips for identical urls `cache: 'local'`, this is useful for caching results for things like autocomplete, which does not need to requery server on identical searches.
 - **Card** - Cards now support multiple `content` blocks, and varied orders, for example content above or below an image or both
 - **Colors** - Global colors defaults have been adjusted to improve contrast with white text
 - **Dropdown** - Nested scrolling menus can now use keyboard selection and filter with inline search. Nested menu scroll position will automatically adjust with keyboard selection.

src/definitions/modules/dropdown.js

@@ -87,8 +87,11 @@ $.fn.dropdown = function(parameters) {
             module.save.defaults();
 
             if(settings.apiSettings) {
-              if( module.is.multiple() ) {
-                module.restore.labels();
+              if(settings.saveRemoteData) {
+                module.restore.remoteValues();
+              }
+              else {
+                module.clearValue();
               }
             }
             else {
@@ -1398,6 +1401,28 @@ $.fn.dropdown = function(parameters) {
               : value
             ;
           },
+          remoteValues: function() {
+            var
+              values = module.get.values(),
+              remoteValues = false
+            ;
+            if(values) {
+              if(typeof values == 'string') {
+                values = [values];
+              }
+              remoteValues = {};
+              $.each(values, function(index, value) {
+                var
+                  name = module.read.remoteData(value)
+                ;
+                remoteValues[value] = (name)
+                  ? name
+                  : value
+                ;
+              });
+            }
+            return remoteValues;
+          },
           choiceText: function($choice, preserveHTML) {
             preserveHTML = (preserveHTML !== undefined)
               ? preserveHTML
@@ -1607,16 +1632,43 @@ $.fn.dropdown = function(parameters) {
               }
             }
           },
-          labels: function() {
+          remoteValues: function() {
             var
-              values = module.get.values()
+              values = module.get.remoteValues()
             ;
+            module.debug('Recreating selected from session data', values);
             if(values) {
-              $.each(values, function(index, value) {
-                module.add.label(value, value);
-              });
+              if( module.is.single() ) {
+                console.log('single text', values, name);
+                $.each(values, function(value, name) {
+                  module.set.text(name);
+                });
+              }
+              else {
+                $.each(values, function(value, name) {
+                  console.log(value, name);
+                  module.add.label(value, name);
+                });
+              }
+            }
+          }
+        },
+
+        read: {
+          remoteData: function(value) {
+            var
+              name
+            ;
+            if(window.Storage === undefined) {
+              module.error(error.noStorage);
+              return;
             }
-            module.debug('Recreating all labels');
+            name = sessionStorage.getItem(value);
+            console.log('reading', value, name);
+            return (name !== undefined)
+              ? name
+              : false
+            ;
           }
         },
 
@@ -1636,6 +1688,14 @@ $.fn.dropdown = function(parameters) {
             if($text.hasClass(className.placeholder)) {
               $module.data(metadata.placeholderText, $text.text());
             }
+          },
+          remoteData: function(name, value) {
+            if(window.Storage === undefined) {
+              module.error(error.noStorage);
+              return;
+            }
+            console.log('saving', value, name);
+            sessionStorage.setItem(value, name);
           }
         },
 
@@ -1947,6 +2007,9 @@ $.fn.dropdown = function(parameters) {
                 ;
                 if(isMultiple) {
                   if(!isActive || isUserValue) {
+                    if(settings.apiSettings && settings.saveRemoteData) {
+                      module.save.remoteData(selectedText, selectedValue);
+                    }
                     if(settings.useLabels) {
                       module.add.label(selectedValue, selectedText, shouldAnimate);
                       module.set.value(selectedValue, selectedText, $selected);
@@ -2755,6 +2818,7 @@ $.fn.dropdown.settings = {
   action                 : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){})
 
   apiSettings            : false,
+  saveRemoteData         : false,       // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh
 
   keepOnScreen           : true,       // Whether dropdown should check whether it is on screen before showing
 
@@ -2822,6 +2886,7 @@ $.fn.dropdown.settings = {
     labels       : 'Allowing user additions currently requires the use of labels.',
     method       : 'The method you called is not defined.',
     noAPI        : 'The API module is required to load resources remotely',
+    noStorage    : 'Saving remote data requires local storage',
     noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
   },