Migrate Jade to Pug template engine
Jade templates engine has been renamed to Pug. We are using Pug already on the Blender Cloud repository, following is Flamenco and Attract
This commit is contained in:
288
src/templates/nodes/search.pug
Normal file
288
src/templates/nodes/search.pug
Normal file
@@ -0,0 +1,288 @@
|
||||
| {% extends 'layout.html' %}
|
||||
| {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %}
|
||||
|
||||
| {% block og %}
|
||||
meta(property="og:type", content="website")
|
||||
| {% if og_picture %}
|
||||
meta(property="og:image", content="{{ og_picture.thumbnail('l', api=api) }}")
|
||||
meta(property="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}")
|
||||
| {% endif %}
|
||||
| {% if project %}
|
||||
meta(property="og:title", content="{{project.name}} - Blender Cloud")
|
||||
meta(name="twitter:title", content="{{project.name}} on Blender Cloud")
|
||||
meta(property="og:url", content="{{url_for('projects.view', project_url=project.url, _external=True)}}")
|
||||
meta(property="og:description", content="{{project.summary}}")
|
||||
meta(name="twitter:description", content="{{project.summary}}")
|
||||
| {% endif %}
|
||||
| {% endblock %}
|
||||
|
||||
| {% block body %}
|
||||
|
||||
#search-container
|
||||
|
||||
| {% if project %}
|
||||
#project_sidebar
|
||||
ul.project-tabs
|
||||
li.tabs-thumbnail(
|
||||
title="About",
|
||||
data-toggle="tooltip",
|
||||
data-placement="left",
|
||||
class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
|
||||
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
|
||||
#project-loading
|
||||
i.pi-spin
|
||||
| {% if project.picture_square %}
|
||||
img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
|
||||
| {% else %}
|
||||
i.pi-home
|
||||
| {% endif %}
|
||||
li.tabs-browse(
|
||||
title="Browse",
|
||||
data-toggle="tooltip",
|
||||
data-placement="left")
|
||||
a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
|
||||
i.pi-folder
|
||||
li.tabs-search.active(
|
||||
title="Search",
|
||||
data-toggle="tooltip",
|
||||
data-placement="left")
|
||||
a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
|
||||
i.pi-search
|
||||
| {% endif %}
|
||||
|
||||
#search-sidebar
|
||||
input.search-field(
|
||||
type="text",
|
||||
name="q",
|
||||
id="q",
|
||||
autocomplete="off",
|
||||
spellcheck="false",
|
||||
autocorrect="false",
|
||||
placeholder="Search by Title, Type...")
|
||||
|
||||
.search-list-filters
|
||||
.filter-list
|
||||
| View as:
|
||||
ul.filter-list
|
||||
li.filter-list-type.grid(
|
||||
title="Browse as grid",
|
||||
data-list-type="grid")
|
||||
i.pi-layout
|
||||
li.filter-list-type.list(
|
||||
title="Browse as list",
|
||||
data-list-type="list")
|
||||
i.pi-list
|
||||
|
||||
#accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
|
||||
#facets
|
||||
|
||||
#pagination
|
||||
|
||||
.search-list-stats
|
||||
#stats
|
||||
|
||||
#search-list
|
||||
#hits
|
||||
|
||||
#search-details
|
||||
#search-error
|
||||
#search-hit-container
|
||||
|
||||
|
||||
| {% raw %}
|
||||
// Facet template
|
||||
script(type="text/template", id="facet-template")
|
||||
.panel.panel-default
|
||||
a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}')
|
||||
.panel-heading(role='tab')
|
||||
.panel-title {{ title }}
|
||||
.panel-collapse.collapse.in(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne')
|
||||
.panel-body
|
||||
| {{#values}}
|
||||
a.facet_link.toggleRefine(
|
||||
class='{{#refined}}refined{{/refined}}',
|
||||
data-facet='{{ facet }}',
|
||||
data-value='{{ value }}',
|
||||
href='#')
|
||||
span
|
||||
| {{ label }}
|
||||
small.facet_count.pull-right {{ count }}
|
||||
| {{/values}}
|
||||
|
||||
|
||||
// Hit template
|
||||
script(type="text/template", id="hit-template")
|
||||
.search-hit(data-hit-id='{{ objectID }}')
|
||||
#search-loading.search-loading
|
||||
.spinner
|
||||
span.spin ·
|
||||
.search-hit-thumbnail
|
||||
| {{#picture}}
|
||||
img(src="{{{ picture }}}")
|
||||
| {{/picture}}
|
||||
| {{^picture}}
|
||||
.search-hit-thumbnail-icon
|
||||
| {{#media}}
|
||||
i(class="pi-{{{ media }}}")
|
||||
| {{/media}}
|
||||
| {{^media}}
|
||||
i.dark(class="pi-{{{ node_type }}}")
|
||||
| {{/media}}
|
||||
| {{/picture}}
|
||||
| {{#is_free}}
|
||||
.search-hit-ribbon
|
||||
span free
|
||||
| {{/is_free}}
|
||||
.search-hit-name
|
||||
| {{ name }}
|
||||
.search-hit-meta
|
||||
span.project {{ project.name }}
|
||||
span.node_type {{{ node_type }}}
|
||||
| {{#media}}
|
||||
span.media · {{{ media }}}
|
||||
| {{/media}}
|
||||
span.when {{{ created }}}
|
||||
span.context
|
||||
a(href="/nodes/{{ objectID }}/redir") view in context
|
||||
|
||||
|
||||
// Pagination template
|
||||
script(type="text/template", id="pagination-template")
|
||||
ul.search-pagination.
|
||||
<li {{^prev_page}}class="disabled"{{/prev_page}}><a href="#" {{#prev_page}} class="gotoPage" data-page="{{ prev_page }}" {{/prev_page}}><i class="pi-angle-left"></i></a></li>
|
||||
{{#pages}}
|
||||
<li class="{{#current}}active{{/current}}{{#disabled}}disabled{{/disabled}}"><a href="#" {{^disabled}} class="gotoPage" data-page="{{ number }}" {{/disabled}}>{{ number }}</a></li>
|
||||
{{/pages}}
|
||||
<li {{^next_page}}class="disabled"{{/next_page}}><a href="#" {{#next_page}} class="gotoPage" data-page="{{ next_page }}" {{/next_page}}><i class="pi-angle-right"></i></a></li>
|
||||
|
||||
// Stats template
|
||||
script(type="text/template", id="stats-template")
|
||||
span {{ nbHits }} result{{#nbHits_plural}}s{{/nbHits_plural}}
|
||||
small ({{ processingTimeMS }}ms)
|
||||
| {% endraw %}
|
||||
|
||||
| {% endblock %}
|
||||
|
||||
| {% block footer_scripts %}
|
||||
script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js", async)
|
||||
script().
|
||||
var APPLICATION_ID = '{{config.ALGOLIA_USER}}';
|
||||
var SEARCH_ONLY_API_KEY = '{{config.ALGOLIA_PUBLIC_KEY}}';
|
||||
var INDEX_NAME = '{{config.ALGOLIA_INDEX_NODES}}';
|
||||
var sortByCountDesc = null;
|
||||
var FACET_CONFIG = [
|
||||
{ name: 'node_type', title: 'Type', disjunctive: false, sortFunction: sortByCountDesc },
|
||||
{ name: 'media', title: 'Media', disjunctive: false, sortFunction: sortByCountDesc },
|
||||
{ name: 'tags', title: 'Tags', disjunctive: false, sortFunction: sortByCountDesc },
|
||||
{ name: 'is_free', title: 'Free Access', disjunctive: false, sortFunction: sortByCountDesc },
|
||||
];
|
||||
{% if project %}
|
||||
FACET_CONFIG.push({ name: 'project._id', title: 'Project', disjunctive: false, hidden: true, value: '{{project._id}}' })
|
||||
{% endif %}
|
||||
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/algoliasearch.helper.min.js') }}")
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}")
|
||||
script(src="{{ url_for('static_pillar', filename='assets/js/algolia_search.min.js') }}")
|
||||
|
||||
script(type="text/javascript").
|
||||
|
||||
function displayUser(userId) {
|
||||
var url = '/nodes/' + userId + '/view';
|
||||
|
||||
$.get(url, function(dataHtml){
|
||||
$('#search-hit-container').html(dataHtml);
|
||||
})
|
||||
.done(function(){
|
||||
$('.search-loading').removeClass('active');
|
||||
$('#search-error').hide();
|
||||
$('#search-hit-container').show();
|
||||
})
|
||||
.fail(function(data){
|
||||
$('.search-loading').removeClass('active');
|
||||
$('#search-hit-container').hide();
|
||||
$('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText);
|
||||
});
|
||||
}
|
||||
|
||||
$('body').on('click', '.search-hit', function(){
|
||||
if ($('.search-loading').hasClass('active')){
|
||||
$(this).removeClass('active');
|
||||
}
|
||||
$(this).find('#search-loading').addClass('active');
|
||||
|
||||
displayUser($(this).data('hit-id'));
|
||||
$('.search-hit').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
|
||||
// Remove focus from search input so that the click event bound to .search-hit
|
||||
// can be fired on the first click.
|
||||
$(searchList).hover(function(){
|
||||
$('#q').blur();
|
||||
});
|
||||
$('#search-sidebar').hover(function(){
|
||||
$('#q').focus();
|
||||
});
|
||||
|
||||
/* UI Stuff */
|
||||
|
||||
/* List types, grid or list (default)*/
|
||||
var uiListType = Cookies.getJSON('bcloud_ui');
|
||||
var searchList = document.getElementById('search-list');
|
||||
|
||||
function uiSetListType(type){
|
||||
$('.filter-list-type').removeClass('active');
|
||||
|
||||
if (type == 'grid'){
|
||||
$(searchList).addClass('view-grid');
|
||||
$('.filter-list-type.grid').addClass('active');
|
||||
} else {
|
||||
$(searchList).removeClass('view-grid');
|
||||
$('.filter-list-type.list').addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
if (uiListType && uiListType.search_browse_type == 'grid'){
|
||||
uiSetListType('grid');
|
||||
} else {
|
||||
uiSetListType('list');
|
||||
}
|
||||
|
||||
$('.filter-list-type').on('click', function(){
|
||||
if ($(this).attr('data-list-type') == 'grid'){
|
||||
uiSetListType('grid');
|
||||
setJSONCookie('bcloud_ui', 'search_browse_type', 'grid');
|
||||
} else {
|
||||
uiSetListType('list');
|
||||
setJSONCookie('bcloud_ui', 'search_browse_type', 'list');
|
||||
}
|
||||
});
|
||||
|
||||
/* Hide site-wide search, kinda confusing */
|
||||
$('.search-input').hide();
|
||||
|
||||
/* Resize container so we can have custom scrollbars */
|
||||
container_offset = $('#search-container').offset();
|
||||
|
||||
function containerResizeY(window_height){
|
||||
|
||||
var container_height = window_height - container_offset.top;
|
||||
|
||||
if (container_height > parseInt($('#search-container').css("min-height"))) {
|
||||
$('#search-container').css(
|
||||
{'max-height': container_height + 'px', 'height': container_height + 'px'}
|
||||
);
|
||||
$('#search-list, #search-hit-container').css(
|
||||
{'max-height': container_height + 'px', 'height': container_height + 'px'}
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
$(window).on("load resize",function(){
|
||||
containerResizeY($(window).height());
|
||||
});
|
||||
|
||||
| {% endblock %}
|
||||
|
||||
| {% block footer_navigation %}{% endblock %}
|
||||
| {% block footer %}{% endblock %}
|
||||
Reference in New Issue
Block a user