Merge pull request #90 from raphaeleidus/saved-filters

Saved Filters

README.md

@@ -23,6 +23,7 @@ If you want to contribute, please, read our [Contributing](CONTRIBUTING.md) guid
 - search & filtering functionality
 - highlighting
 - filtering with [jq](https://stedolan.github.io/jq/), no installation needed
+- saving commonly used filters for easy access later
 - editor customization
 - full coverage of [jq](https://stedolan.github.io/jq/) functionality
 - create a shell command with your filter and curl

src/css/skeleton.css

@@ -332,6 +332,24 @@ input[type='button'].button-primary:focus {
   border-color: #1eaedb;
 }
 
+.button-group {
+  display: inline-block;
+}
+
+.button-group button, .button-group .button{
+  border-radius: 0;
+  border-left-width: 0;
+}
+
+.button-group button:first-child, .button-group .button:first-child {
+  border-left-width: 1px;
+  border-radius: 4px 0 0 4px;
+}
+
+.button-group button:last-child, .button-group .button:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
 /* Forms
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 input[type='email'],
@@ -629,6 +647,15 @@ button:active {
 
 #logoDiv {
   text-align: right;
+  margin-left: 4%;
+}
+
+.flex-row {
+  display: flex;
+}
+
+.flex-column {
+  flex-grow: 1;
 }
 
 #upperDiv {
@@ -658,3 +685,57 @@ button:active {
   height: 5%;
   text-align: right;
 }
+
+.modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.65);
+  z-index: 1000;
+}
+
+.modal-inner {
+  padding: 20px;
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: white;
+  max-width: 85%;
+  max-height: 85%;
+  padding: 1em 1.5em;
+  position: relative;
+  margin: 2em;
+  min-width: 100px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
+  overflow-y: auto;
+}
+
+.saved-filter-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.saved-filter {
+  display: inline-block;
+  margin: 1rem 0 2.5rem 0;
+  cursor: pointer;
+  white-space: pre-wrap;
+}
+
+.saved-filter:hover {
+  background-color: lightgray;
+}
+
+.remove-filter {
+  display: inline-block;
+  margin: 1rem 0 2.5rem 1.5rem;
+}
+

src/ts/storage.ts

@@ -1,4 +1,48 @@
+const domain = new URL(location.href).hostname;
+
+type SavedFilter = {
+    domain: string,
+    filter: string,
+}
+
 export function saveStorage(value) {
     chrome.storage.sync.set({options: value}, function () {
     });
 }
+
+export function addFilter(filter: string, done?:()=>void) {
+    chrome.storage.sync.get(['storedFilters'], (result) => {
+        const storedFilters = result.storedFilters as string[] || [];
+        const filterObj = {
+            filter,
+            domain
+        }
+        let filterSet = new Set(storedFilters);
+        filterSet.add(JSON.stringify(filterObj));
+        chrome.storage.sync.set({storedFilters: Array.from(filterSet)}, done)
+    });
+}
+
+export function removeFilter(filter: string, done?:()=>void) {
+    chrome.storage.sync.get(['storedFilters'], (result) => {
+        const storedFilters = result.storedFilters as string[] || [];
+        let filterSet = new Set(storedFilters);
+        const filterObj = {
+            filter,
+            domain
+        }
+        filterSet.delete(JSON.stringify(filterObj));
+        chrome.storage.sync.set({storedFilters: Array.from(filterSet)}, done);
+    });
+}
+
+export function getFilters(callback:(filterlist: string[]) => void) {
+    chrome.storage.sync.get(['storedFilters'], (result) => {
+        const filtersForDomain = (result.storedFilters as string[] || [])
+            .map(s => JSON.parse(s) as SavedFilter)
+            // .filter(f => f.domain === domain)
+            // In the future this will make filters linked to the domain they were created in.
+        const filterStrings = filtersForDomain.map(({ filter }) => filter )
+        callback(filterStrings);
+    });
+}

src/ts/ui.ts

@@ -1,5 +1,6 @@
 let ace;
 import {Clipboard} from 'ts-clipboard';
+import {addFilter, removeFilter, getFilters} from './storage'
 import * as $ from 'jquery';
 
 export function loadEditorDep() {
@@ -99,29 +100,102 @@ export function renderOutputEditor(output) {
     });
 }
 
+function createButtonWithAction(clickEvent:()=>void, options:object = {}) {
+    const buttonElement = document.createElement('button');
+    if(options['id']) {
+        buttonElement.id = options['id'];
+    }
+    if(options['className']) {
+        buttonElement.className = options['className'];
+    }
+    if(options['text']) {
+        buttonElement.innerText = options['text'];
+    }
+    buttonElement.onclick = clickEvent;
+    return buttonElement;
+}
+
 export function copyButton(div) {
-    let copyButton = document.createElement('button');
-    copyButton.id = 'copy-' + div;
-    copyButton.innerHTML = 'Copy';
-    copyButton.onclick = function () {
+    return createButtonWithAction(()=> {
         const editor = ace.edit(div);
         Clipboard.copy(editor.getValue());
-    };
-    return copyButton;
+    }, {
+        id: 'copy-' + div,
+        text: 'Copy',
+    });
+}
+
+function openModal(content) {
+    $('body').append('<div class="modal"></div>');
+    $('.modal').append(content);
+    $('.modal').on('click', (event) => {
+        if($(event.target).is('.modal, .modal-inner')) {
+            $('.modal').remove();
+        }
+    })
 }
 
+function openSavedFilters(filters: string[]) {
+    if(filters.length === 0) {
+        return alert('You don\'t have any saved filters yet.');
+    }
+    const html = `
+    <div class='modal-inner'>
+        <div class='modal-content'>
+            ${filters.map(filter => 
+                `<div class='saved-filter-wrapper'>
+                    <pre class='saved-filter'>${filter}</pre>
+                    <a href='#' class='remove-filter' alt='delete'>X</a>
+                </div>`
+            ).join('')}
+        </div>
+    </div>`
+    openModal(html);
+    $('.saved-filter').on('click', function (){
+        const filter = $(this).text();
+        $('#filter').val(filter).change();
+        $('.modal').remove();
+    });
+    $('.remove-filter').on('click', function(){
+        const filter = $(this).siblings('.saved-filter').text();
+        removeFilter(filter, () => {
+            $('.modal').remove();
+            getFilters(openSavedFilters);
+        });
+    })
+}
+
+function saveAndLoadButtons() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'button-group'
+    const saveButton = createButtonWithAction(()=>{
+        const value = $('#filter').val() as string;
+        addFilter(value);
+    }, {
+        text: 'Save Filter'
+    });
+    const loadButton = createButtonWithAction(()=>{
+        getFilters(openSavedFilters);
+    }, {
+        text: 'Load Filter'
+    });
+    wrapper.appendChild(saveButton);
+    wrapper.appendChild(loadButton);
+    return wrapper;
+};
+
 export function renderUi() {
     if ($('#broqContent').length === 0) {
         let broqContent = document.createElement('div');
         broqContent.id = 'broqContent';
 
         let upperDiv = document.createElement('div');
         upperDiv.id = 'upperDiv';
-        upperDiv.className = 'row';
+        upperDiv.className = 'flex-row';
 
         let leftSideDiv = document.createElement('div');
         leftSideDiv.id = 'leftSideDiv';
-        leftSideDiv.className = 'one-half column';
+        leftSideDiv.className = 'flex-column';
 
         let filterDiv = document.createElement('div');
         filterDiv.id = 'filterDiv';
@@ -152,11 +226,7 @@ export function renderUi() {
         questionmark.id = 'questionmark';
         questionmark.src = questionmarkURL;
 
-        let curlButton = document.createElement('button');
-        curlButton.id = 'curlButton';
-        curlButton.innerHTML = 'copy for shell';
-        curlButton.onclick = function () {
-            //declare vars
+        const copyAsCurl = () => {
             const url = window.location.href.split('#')[0];
             const filter = $('#filter')
                 .val()
@@ -167,11 +237,15 @@ export function renderUi() {
 
             //copy to Clipboard
             Clipboard.copy(curl_string);
-        };
+        }
+
+        let curlButton = createButtonWithAction(copyAsCurl, {
+            id: 'curlButton',
+            text: 'copy for shell'
+        });
 
         let logoDiv = document.createElement('div');
         logoDiv.id = 'logoDiv';
-        logoDiv.className = 'one-half column';
 
         const logoURL = chrome.extension.getURL('/pages/assets/icon128.png');
         let logo = document.createElement('img');
@@ -183,6 +257,7 @@ export function renderUi() {
         filterTitleDiv.appendChild(filterLabel);
         filterTitleDiv.appendChild(linkToInfo);
         filterTitleDiv.appendChild(curlButton);
+        filterTitleDiv.appendChild(saveAndLoadButtons());
 
         filterDiv.appendChild(filterTitleDiv);
         filterDiv.appendChild(filter);