Meta data improvements

* Add buttons to show/hide results from Douban & Google
* Trigger search with "Enter" key
* Use Underscore.js template instead of build HTML strings in JavaScript
* Keep click event handler in JavaScript instead of using HTML's `onclick`
* Normalize Douban & Google results
* Update cover image & add cover URL to the form input
This commit is contained in:
Jonathan Rehm
2017-08-15 22:11:01 -07:00
parent a1538e12e8
commit 866f7944eb
4 changed files with 153 additions and 89 deletions
+46 -8
View File
@@ -154,22 +154,35 @@
{% endif %}
<div class="modal fade" id="metaModal" tabindex="-1" role="dialog" aria-labelledby="metaModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="metaModalLabel">{{_('Get metadata')}}</h4>
<form class="form-inline">
<div class="form-group">
<form class="padded-bottom" id="meta-search">
<div class="input-group">
<label class="sr-only" for="keyword">{{_('Keyword')}}</label>
<input type="text" class="form-control" id="keyword" placeholder="{{_(" Search keyword ")}}">
<input type="text" class="form-control" id="keyword" name="keyword" placeholder="{{_(" Search keyword ")}}">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" id="do-search">{{_("Go!")}}</button>
</span>
</div>
<button type="button" class="btn btn-default" id="do-search">{{_("Go!")}}</button>
<span>{{_('Click the cover to load metadata to the form')}}</span>
</form>
<div>{{_('Click the cover to load metadata to the form')}}</div>
</div>
<div class="modal-body" id="meta-info">
{{_("Loading...")}}
<div class="modal-body">
<div class="text-center padded-bottom">
<input type="checkbox" id="show-douban" class="pill" data-control="douban" checked>
<label for="show-douban">Douban <span class="glyphicon glyphicon-ok"></span></label>
<input type="checkbox" id="show-google" class="pill" data-control="google" checked>
<label for="show-google">Google <span class="glyphicon glyphicon-ok"></span></label>
</div>
<div id="meta-info">
{{_("Loading...")}}
</div>
<ul id="book-list" class="media-list"></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{_('Close')}}</button>
@@ -180,6 +193,31 @@
{% endblock %}
{% block js %}
<script type="text/template" id="template-book-result">
<li class="media" data-related="<%= source.id %>">
<img class="pull-left img-responsive"
data-toggle="modal"
data-target="#metaModal"
src="<%= cover %>"
alt="Cover"
>
<div class="media-body">
<h4 class="media-heading">
<a href="<%= url %>" target="_blank" rel="noopener"><%= title %></a>
</h4>
<p>{{_('Author')}}:<%= authors.join(" & ") %></p>
<% if (publisher) { %>
<p>{{_('Publisher')}}:<%= publisher %></p>
<% } %>
<% if (description) { %>
<p>{{_('Description')}}: <%= description %></p>
<% } %>
<p>{{_('Source')}}:
<a href="<%= source.url %>" target="_blank" rel="noopener"><%= source.description %></a>
</p>
</div>
</li>
</script>
<script>
var i18nMsg = {
'loading': {{_('Loading...')|safe|tojson}},