add search
This commit is contained in:
		@@ -12,6 +12,33 @@
 | 
				
			|||||||
  display: inline;
 | 
					  display: inline;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#searchBox {
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					  right: 10px;
 | 
				
			||||||
 | 
					  top: 7px;
 | 
				
			||||||
 | 
					  text-align: right;
 | 
				
			||||||
 | 
					  width: 400px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#searchBox input {
 | 
				
			||||||
 | 
					  width: 300px;
 | 
				
			||||||
 | 
					  font-size: 16px;
 | 
				
			||||||
 | 
					  background: #f9f8ed;
 | 
				
			||||||
 | 
					  padding: 2px 5px;
 | 
				
			||||||
 | 
					  border: none;
 | 
				
			||||||
 | 
					  border-bottom: 2px solid #d8d0a0;
 | 
				
			||||||
 | 
					  font-family: 'Libre Baskerville', sans-serif;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#searchBox input:focus {
 | 
				
			||||||
 | 
					  outline: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					#searchBox input::placeholder {
 | 
				
			||||||
 | 
					  font-family: 'Libre Baskerville', sans-serif;
 | 
				
			||||||
 | 
					  color: #d8d0a0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#current {
 | 
					#current {
 | 
				
			||||||
  background-color: #f7f3dc;
 | 
					  background-color: #f7f3dc;
 | 
				
			||||||
  width: calc(40vw - 40px);
 | 
					  width: calc(40vw - 40px);
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										44
									
								
								index.html
									
									
									
									
									
								
							
							
						
						
									
										44
									
								
								index.html
									
									
									
									
									
								
							@@ -13,28 +13,41 @@
 | 
				
			|||||||
  <script type='text/javascript'>    
 | 
					  <script type='text/javascript'>    
 | 
				
			||||||
    var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
 | 
					    var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function init() {
 | 
					    function showInfo(data, tabletop) {
 | 
				
			||||||
      $("#reloadLink").unbind('click');
 | 
					      $("#reloadLink").unbind('click');
 | 
				
			||||||
      $("#reloadLink").on("click", function() { init(); });
 | 
					      $("#reloadLink").on("click", function() { init(); });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      Tabletop.init({
 | 
					      $("#search").unbind('input');
 | 
				
			||||||
        key: publicSpreadsheetUrl,
 | 
					      $("#search").on("input", function(e) { search(data, e.target.value); });
 | 
				
			||||||
        callback: showInfo,
 | 
					
 | 
				
			||||||
        simpleSheet: true
 | 
					      renderTable(data, 'authorLast'); //default sorting on load is author's last name
 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function showInfo(data, tabletop) {
 | 
					    function search(data, searchString) {
 | 
				
			||||||
      renderTable(data, 'authorLast'); //default sorting on load is author's last name
 | 
					      searchBy = searchString.toLowerCase();
 | 
				
			||||||
 | 
					      relevantFields = ['title', 'author', 'genre', 'publisher', 'series', 'year'];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      if (!searchString) {
 | 
				
			||||||
 | 
					        renderTable(data, 'authorLast');
 | 
				
			||||||
 | 
					        return false;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      renderTable(_.filter(data, function(book) {
 | 
				
			||||||
 | 
					        return _.find(_.pick(book, relevantFields), function(field) {
 | 
				
			||||||
 | 
					          return field.toLowerCase().indexOf(searchBy) !== -1;
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					      }));
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    function renderTable(data, sortField) {
 | 
					    function renderTable(data, sortField) {
 | 
				
			||||||
      data = _.sortBy(data, 'title');
 | 
					      data = _.sortBy(data, 'title');
 | 
				
			||||||
      data = _.sortBy(data, sortField);
 | 
					      if (sortField) { data = _.sortBy(data, sortField); }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      $.each(data, function(key, value) {
 | 
					      $.each(data, function(key, value) {
 | 
				
			||||||
        value.rowNumber = key; // re-key for new sort
 | 
					        value.rowNumber = key; // re-key for new sort
 | 
				
			||||||
        value.sortTitle = titleCleaner(value.title);
 | 
					        if (!value.sortTitle) {
 | 
				
			||||||
 | 
					          value.sortTitle = titleCleaner(value.title);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
      });
 | 
					      });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      var template = $('#Table').html();
 | 
					      var template = $('#Table').html();
 | 
				
			||||||
@@ -61,7 +74,13 @@
 | 
				
			|||||||
        .replace(/^(An?|The)\s/i, '');
 | 
					        .replace(/^(An?|The)\s/i, '');
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    window.addEventListener('DOMContentLoaded', init);
 | 
					    window.addEventListener('DOMContentLoaded', function() {
 | 
				
			||||||
 | 
					      Tabletop.init({
 | 
				
			||||||
 | 
					        key: publicSpreadsheetUrl,
 | 
				
			||||||
 | 
					        callback: showInfo,
 | 
				
			||||||
 | 
					        simpleSheet: true
 | 
				
			||||||
 | 
					      });
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
  </script>
 | 
					  </script>
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
<body>
 | 
					<body>
 | 
				
			||||||
@@ -71,6 +90,9 @@
 | 
				
			|||||||
      <a target="_blank" href="https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/edit">spreadsheet</a>
 | 
					      <a target="_blank" href="https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/edit">spreadsheet</a>
 | 
				
			||||||
      <a target="_blank" href="https://github.com/deltamualpha/my-library">github</a>
 | 
					      <a target="_blank" href="https://github.com/deltamualpha/my-library">github</a>
 | 
				
			||||||
      <a id="reloadLink" href="#">reload</a>
 | 
					      <a id="reloadLink" href="#">reload</a>
 | 
				
			||||||
 | 
					      <div id="searchBox">
 | 
				
			||||||
 | 
					        <input id="search" type="text" name="search" placeholder="Search..."/>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div id="current">No Book Selected</div>
 | 
					    <div id="current">No Book Selected</div>
 | 
				
			||||||
    <div id="books"></div> <!-- Table goes here -->
 | 
					    <div id="books"></div> <!-- Table goes here -->
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user