scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-01 02:05:41 +08:00
Code Issues Projects Releases Packages Wiki Activity

style dropdown

Browse source
This commit is contained in:
zmagod 2017-01-10 17:05:32 +01:00
parent fc76a4ae6d
commit a903772de8
7 changed files with 261 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

238
app/assets/javascripts/sitewide/atwho_res.js → app/assets/javascripts/sitewide/atwho_res.js.erb
View file

@ -22,6 +22,19 @@ var SmartAnnotation = (function() {
})();
function setAtWho(field) {
var dataUserUrl,
dataTaskUrl,
dataProjectUrl,
dataExperimentUrl,
dataSampleUrl,
dataMenuItemsUrl;
dataUserUrl = $(document.body).attr('data-atwho-users-url');
dataTaskUrl = $(document.body).attr('data-atwho-task-url');
dataProjectUrl = $(document.body).attr('data-atwho-project-url');
dataExperimentUrl = $(document.body).attr('data-atwho-experiment-url');
dataSampleUrl = $(document.body).attr('data-atwho-sample-url');
dataMenuItemsUrl = $(document.body).attr('data-atwho-menu-items').freeze;
// helper methods for AtWho callback
function _templateEval(_tpl, map) {
@ -84,11 +97,11 @@ var SmartAnnotation = (function() {
break;
}
$.getJSON(
'/organizations/1/atwho_menu_items',
dataMenuItemsUrl,
{query: query},
function(data){
if(data) {
_.each($('.atwho-header .btn'), function(el) {
_.each($('.atwho-header-res .title .btn'), function(el) {
$element = $(el);
if(data[$element.data('filter')].length === 0) {
$element.prop('disabled', true);
@ -130,45 +143,42 @@ var SmartAnnotation = (function() {
// Initialize filter buttons
function initButtons(query, search_filter) {
$('.atwho-header button').off();
$('.atwho-header-res query_obj button').off();
$('.atwho-header-res .dismiss').off('click');
$('.atwho-header-res .dismiss').on('click', function() {
$(field).atwho('destroy');
init();
});
resourcesChecker(query, search_filter);
$('.atwho-header button').on('click', function(e) {
$('.atwho-header-res .title button').on('click', function(e) {
var $button, $prevButton;
e.stopPropagation();
$('.atwho-header button').off();
$button = $(this);
$prevButton = $button.closest('.atwho-header').children('.btn-primary');
$prevButton = $button.closest('.title').children('.btn-primary');
switch ($button.attr('data-filter')) {
case 'prj':
setTimeout(function() {
generateNewQuery('/organizations/1/atwho_projects.json',
generateNewQuery(dataProjectUrl,
$prevButton,
$button);
}, 300);
break;
case 'exp':
setTimeout(function() {
generateNewQuery('/organizations/1/atwho_experiments.json',
generateNewQuery(dataExperimentUrl,
$prevButton,
$button);
}, 300);
break;
case 'tsk':
setTimeout(function() {
generateNewQuery('/organizations/1/atwho_my_modules.json',
generateNewQuery(dataTaskUrl,
$prevButton,
$button);
}, 300);
break;
case 'sam':
setTimeout(function() {
generateNewQuery('/organizations/1/atwho_samples.json',
generateNewQuery(dataSampleUrl,
$prevButton,
$button);
}, 300);
break;
}
});
@ -190,50 +200,49 @@ var SmartAnnotation = (function() {
if(field_selected) {
query_obj = regexp.exec($(field_selected).val());
new_query = query_obj.input.replace(query_obj[1], '');
} else {
query_obj = [''];
new_query = '';
if(query_obj) {
$.getJSON(
link,
{query: query_obj[2]},
function(data) {
if(data.res.length > 0 && field_selected) {
$(field_selected)
.atwho('load', query_obj[0], data.res)
.atwho('run');
prevBtn
.removeClass('btn-primary')
.addClass('btn-default');
selectedBtn
.removeClass('btn-default')
.addClass('btn-primary');
reinitializeOnListHide();
initButtons(query_obj[2],
selectedBtn.html());
} else {
$(field).atwho('destroy');
init();
}
});
}
}
$.getJSON(
link,
{query: new_query},
function(data) {
if(data.res.length > 0 && field_selected) {
$(field_selected)
.atwho('load', query_obj[0], data.res)
.atwho('run');
prevBtn
.removeClass('btn-primary')
.addClass('btn-default');
selectedBtn
.removeClass('btn-default')
.addClass('btn-primary');
reinitializeOnListHide();
initButtons(new_query,
selectedBtn.html());
} else {
$(field).atwho('destroy');
init();
}
});
}
// Generates suggestion dropdown filter
function generateFilterMenu(active, res_data) {
var header = '<div class="atwho-header">' +
'<button data-filter="prj" class="btn btn-sm ' +
var header = '<div class="atwho-header-res">' +
'<div class="title">' +
'<button data-filter="prj" class="btn btn-xs ' +
(active === 'prj' ? 'btn-primary' : 'btn-default') + '">project#</button>' +
'<button data-filter="exp" class="btn btn-sm ' +
'<button data-filter="exp" class="btn btn-xs ' +
(active === 'exp' ? 'btn-primary' : 'btn-default') + '">experiment#</button>' +
'<button data-filter="tsk" class="btn btn-sm ' +
'<button data-filter="tsk" class="btn btn-xs ' +
(active === 'tsk' ? 'btn-primary' : 'btn-default') + '">task#</button>' +
'<button data-filter="sam" class="btn btn-sm ' +
'<button data-filter="sam" class="btn btn-xs ' +
(active === 'sam' ? 'btn-primary' : 'btn-default') + '">sample#</button>' +
'</div>' +
'<div class="help">' +
'<div>' +
'<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
@ -277,25 +286,27 @@ var SmartAnnotation = (function() {
}
res += '&nbsp;';
res += '<span data-val="name">';
res += '<span data-val="name" class="res-name">';
res += map.name;
res += '</span>';
if(map.archived) {
res += '<span>(archived)</span>';
res += '(archived)</span>';
} else {
res += '</span>';
}
res += '&nbsp;';
switch (map.type) {
case 'tsk':
res += '<span>&lt; ' + map.experimentName +
res += '<span class="res-description">&lt; ' + map.experimentName +
' &lt; ' + map.projectName + '</span>';
break;
case 'exp':
res += '<span>&lt; ' + map.projectName + '</span>';
res += '<span class="res-description">&lt; ' + map.projectName + '</span>';
break;
case 'sam':
res += '<span>' + map.description + '</span>';
res += '<span class="res-description">' + map.description + '</span>';
break;
default:
break;
@ -307,12 +318,103 @@ var SmartAnnotation = (function() {
function init() {
$(field)
.atwho({
at: '@',
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
dataUserUrl,
{query: query},
function(data) {
callback(data.users);
}
);
},
sorter: function(query, items, _searchKey) {
// Sorting is already done on server-side
return items;
},
tplEval: function(_tpl, map) {
var res;
try {
res = '';
res += '<li class="atwho-li atwho-li-user" ';
res += 'data-id="' + map.id + '" ';
res += 'data-full-name="' + map.full_name + '">';
res += '<img src="' + map.img_url + '" class="avatar" />';
res += '<span data-val="full-name">';
res += map.full_name;
res += '</span>';
res += '<small>';
res += '&nbsp;';
res += '&#183;';
res += '&nbsp;';
res += '<span data-val="email">';
res += map.email;
res += '</span>';
res += '</small>';
res += '</li>';
} catch (_error) {
res = '';
}
return res;
},
highlighter: function(li, query) {
function highlight(el, sel, re) {
var prevVal = el.find(sel).html();
var newVal = prevVal.replace(re, '<strong>$&</strong>');
el.find(sel).html(newVal);
}
if (!query) {
return li;
}
var $li = $(li);
var re = new RegExp(query, 'gi');
highlight($li, '[data-val=full-name]', re);
highlight($li, '[data-val=email]', re);
return $li[0].outerHTML;
},
beforeInsert: function(value, li) {
var res = '';
res += '[@' + li.attr('data-full-name');
res += '~' + li.attr('data-id') + ']';
return res;
}
},
headerTpl:
'<div class="atwho-header-res">' +
'<div class="title"><%= I18n.t("atwho.users.title") %></div>' +
'<div class="help">' +
'<div>' +
'<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
'<%= I18n.t("atwho.users.navigate_2") %>' +
'</div>' +
'<div>' +
'<strong><%= I18n.t("atwho.users.confirm_1") %></strong> ' +
'<%= I18n.t("atwho.users.confirm_2") %>' +
'</div>' +
'<div>' +
'<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
'<%= I18n.t("atwho.users.dismiss_2") %>' +
'</div>' +
'<div class="dismiss">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'</div>' +
'</div>' +
'</div>',
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startsWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000
})
.atwho({
at: '#',
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
'/organizations/1/atwho_samples.json',
dataSampleUrl,
{query: query},
function(data) {
callback(data.res);
@ -331,7 +433,7 @@ var SmartAnnotation = (function() {
}
},
headerTpl: generateFilterMenu('sam'),
limit: 5,
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000
@ -341,7 +443,7 @@ var SmartAnnotation = (function() {
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
'/organizations/1/atwho_my_modules.json',
dataTaskUrl,
{query: query},
function(data) {
callback(data.res);
@ -360,7 +462,7 @@ var SmartAnnotation = (function() {
}
},
headerTpl: generateFilterMenu('tsk'),
limit: 5,
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000
@ -370,7 +472,7 @@ var SmartAnnotation = (function() {
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
'/organizations/1/atwho_projects.json',
dataProjectUrl,
{query: query},
function(data) {
callback(data.res);
@ -389,7 +491,7 @@ var SmartAnnotation = (function() {
}
},
headerTpl: generateFilterMenu('prj'),
limit: 5,
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000
@ -399,7 +501,7 @@ var SmartAnnotation = (function() {
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
'/organizations/1/atwho_experiments.json',
dataExperimentUrl,
{query: query},
function(data) {
callback(data.res);
@ -418,7 +520,7 @@ var SmartAnnotation = (function() {
}
},
headerTpl: generateFilterMenu('exp'),
limit: 5,
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000
@ -428,7 +530,7 @@ var SmartAnnotation = (function() {
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
'/organizations/1/atwho_samples.json',
dataSampleUrl,
{query: query},
function(data) {
callback(data.res);
@ -447,7 +549,7 @@ var SmartAnnotation = (function() {
}
},
headerTpl: generateFilterMenu('sam'),
limit: 5,
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startWithSpace: true,
acceptSpaceBar: true,
displayTimeout: 120000

110
app/assets/javascripts/sitewide/atwho_users.js.erb
View file

@ -1,110 +0,0 @@
(function() {
'use strict';
$(document).on(
'focus',
'[data-atwho-users-edit]',
function() {
// Only initialize if URL is present and
// atwho is not initialized yet
if (
$(document.body).is('[data-atwho-users-url]') &&
_.isUndefined($(this).data('atwho'))
) {
var dataUrl = $(document.body).attr('data-atwho-users-url');
$(this)
.atwho({
at: '@',
callbacks: {
remoteFilter: function(query, callback) {
$.getJSON(
dataUrl,
{query: query},
function(data) {
callback(data.users);
}
);
},
sorter: function(query, items, _searchKey) {
// Sorting is already done on server-side
return items;
},
tplEval: function(_tpl, map) {
var res;
try {
res = '';
res += '<li class="atwho-li atwho-li-user" ';
res += 'data-id="' + map.id + '" ';
res += 'data-full-name="' + map.full_name + '">';
res += '<img src="' + map.img_url + '" class="avatar" />';
res += '<span data-val="full-name">';
res += map.full_name;
res += '</span>';
res += '<small>';
res += '&nbsp;';
res += '&#183;';
res += '&nbsp;';
res += '<span data-val="email">';
res += map.email;
res += '</span>';
res += '</small>';
res += '</li>';
} catch (_error) {
res = '';
}
return res;
},
highlighter: function(li, query) {
function highlight(el, sel, re) {
var prevVal = el.find(sel).html();
var newVal = prevVal.replace(re, '<strong>$&</strong>');
el.find(sel).html(newVal);
}
if (!query) {
return li;
}
var $li = $(li);
var re = new RegExp(query, 'gi');
highlight($li, '[data-val=full-name]', re);
highlight($li, '[data-val=email]', re);
return $li[0].outerHTML;
},
beforeInsert: function(value, li) {
var res = '';
res += '[@' + li.attr('data-full-name');
res += '~' + li.attr('data-id') + ']';
return res;
}
},
headerTpl:
'<div class="atwho-header-user">' +
'<div class="title"><%= I18n.t("atwho.users.title") %></div>' +
'<div class="help">' +
'<div>' +
'<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
'<%= I18n.t("atwho.users.navigate_2") %>' +
'</div>' +
'<div>' +
'<strong><%= I18n.t("atwho.users.confirm_1") %></strong> ' +
'<%= I18n.t("atwho.users.confirm_2") %>' +
'</div>' +
'<div>' +
'<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
'<%= I18n.t("atwho.users.dismiss_2") %>' +
'</div>' +
'<div class="dismiss">' +
'<span class="glyphicon glyphicon-remove"></span>' +
'</div>' +
'</div>' +
'</div>',
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
startsWithSpace: true,
acceptSpaceBar: true
});
}
}
);
})();

49
app/assets/stylesheets/themes/scinote.scss
View file

@ -1763,8 +1763,8 @@ th.custom-field .modal-tooltiptext {
}
// <End of overrides>
.atwho-header-user {
padding-top: 7px;
.atwho-header-res {
padding-top: 3px;
padding-bottom: 7px;
height: 34px;
background-color: $color-gallery;
@ -1778,10 +1778,25 @@ th.custom-field .modal-tooltiptext {
.title {
float: left;
margin-left: 15px;
.btn {
border-radius: 4px;
margin-right: 5px;
padding: 3px;
}
.btn:last-child {
margin-right: 20px;
}
.btn-default {
background-color: transparent;
}
}
.help {
float: right;
padding-top: 4px;
div {
display: inline;
@ -1813,4 +1828,32 @@ th.custom-field .modal-tooltiptext {
height: 20px;
width: 20px;
}
}
}
.atwho-li-res {
.glyphicon-tint {
margin-left: 5px;
margin-right: 5px;
}
.res-type {
border: 1px solid $color-black;
border-radius: 4px;
font-weight: 600;
margin-left: 5px;
margin-right: 5px;
padding: 0 2px;
text-transform: capitalize;
}
.res-name {
font-weight: 600;
margin-right: 5px;
}
.res-description {
color: $color-emperor;
font-size: 10px;
}
}

47
app/helpers/application_helper.rb
View file

@ -54,30 +54,35 @@ module ApplicationHelper
end
def smart_annotation_parser(text)
sa_reg = /\[(#|@)(.*?)~(prj|exp|tsk|sam)~([0-9]+)\]/
text.gsub(sa_reg) do |el|
sa_reg = /\[\#(.*?)~(prj|exp|tsk|sam)~([0-9]+)\]/
new_text = text.gsub(sa_reg) do |el|
match = el.match(sa_reg)
if match[1] == '#'
case match[3]
when 'prj'
link_to match[2], project_path(match[4].to_i)
when 'exp'
link_to match[2], canvas_experiment_path(match[4].to_i)
when 'tsk'
link_to match[2], protocols_my_module_path(match[4].to_i)
when 'sam'
sample = Sample.find_by_id(match[4])
if sample
link_to match[2],
samples_project_path(sample
.organization
.projects
.first)
end
case match[2]
when 'prj'
link_to match[1], project_path(match[3].to_i)
when 'exp'
link_to match[1], canvas_experiment_path(match[3].to_i)
when 'tsk'
link_to match[1], protocols_my_module_path(match[3].to_i)
when 'sam'
sample = Sample.find_by_id(match[3])
if sample
link_to match[1],
samples_project_path(sample
.organization
.projects
.first)
end
else
# TODO
end
end
sa_user = /\[\@(.*?)~([0-9]+)\]/
new_text = new_text.gsub(sa_user) do |el|
match = el.match(sa_user)
user = User.find_by_id(match[2].to_i)
"<span>#{image_tag avatar_path(user, :icon_small)} " \
"#{user.full_name}</span>" if user
end
new_text
end
end

5
app/views/layouts/application.html.erb
View file

@ -18,6 +18,11 @@
class="<%= yield :body_class %>"
<% if user_signed_in? && current_organization.present? %>
data-atwho-users-url="<%= atwho_users_organization_path(current_organization) %>"
data-atwho-task-url="<%= atwho_my_modules_organization_path(current_organization) %>"
data-atwho-project-url="<%= atwho_projects_organization_path(current_organization) %>"
data-atwho-experiment-url="<%= atwho_experiments_organization_path(current_organization) %>"
data-atwho-sample-url="<%= atwho_samples_organization_path(current_organization) %>"
data-atwho-menu-items="<%= atwho_menu_items_organization_path(current_organization) %>"
<% end %>
>

10
app/views/project_comments/_comment.html.erb
View file

@ -39,7 +39,11 @@
</div>
<strong><%= comment.user.full_name %>:</strong>
<div data-role="comment-message-container">
<p data-role="comment-message"><%= auto_link(simple_format(comment.message),
link: :urls,
html: { target: '_blank' }) %></p>
<p data-role="comment-message"><%= auto_link(
simple_format(
smart_annotation_parser(comment.message)
),
link: :urls,
html: { target: '_blank' }
) %></p>
</div>

10
app/views/step_comments/_comment.html.erb
View file

@ -40,7 +40,11 @@
<% end %>
</div>
<div data-role="comment-message-container">
<p data-role="comment-message"><%= auto_link(simple_format(comment.message),
link: :urls,
html: { target: '_blank' }) %></p>
<p data-role="comment-message"><%= auto_link(
simple_format(
smart_annotation_parser(comment.message)
),
link: :urls,
html: { target: '_blank' }
) %></p>
</div>