mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-03 05:29:46 +08:00
Fix markup
This commit is contained in:
aignatov-bio
parent
008563a7f4
commit
6dc4422d82
2 changed files with 112 additions and 136 deletions
|
|
@ -1,26 +1,8 @@
|
||||||
|
/* global _ */
|
||||||
|
|
||||||
var SmartAnnotation = (function() {
|
var SmartAnnotation = (function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// utilities
|
|
||||||
var Util = (function() {
|
|
||||||
// helper method that binds show/hidden action
|
|
||||||
function showHideBinding() {
|
|
||||||
$.each(['show', 'hide'], function (i, ev) {
|
|
||||||
var el = $.fn[ev];
|
|
||||||
$.fn[ev] = function () {
|
|
||||||
this.trigger(ev);
|
|
||||||
return el.apply(this, arguments);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var publicApi = {
|
|
||||||
showHideBinding: showHideBinding
|
|
||||||
};
|
|
||||||
|
|
||||||
return publicApi;
|
|
||||||
})();
|
|
||||||
|
|
||||||
// stop the user annotation popover on click propagation
|
// stop the user annotation popover on click propagation
|
||||||
function atwhoStopPropagation(element) {
|
function atwhoStopPropagation(element) {
|
||||||
$(element).on('click', function(e) {
|
$(element).on('click', function(e) {
|
||||||
|
|
@ -29,53 +11,44 @@ var SmartAnnotation = (function() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAtWho(field) {
|
function SetAtWho(field) {
|
||||||
var FilterTypeEnum = Object.freeze({
|
var FilterTypeEnum = Object.freeze({
|
||||||
USER: {tag: "users",
|
USER: { tag: 'users', dataUrl: $(document.body).attr('data-atwho-users-url') },
|
||||||
dataUrl: $(document.body).attr('data-atwho-users-url')},
|
TASK: { tag: 'sa-tasks', dataUrl: $(document.body).attr('data-atwho-task-url') },
|
||||||
TASK: {tag: "sa-tasks",
|
PROJECT: { tag: 'sa-projects', dataUrl: $(document.body).attr('data-atwho-project-url') },
|
||||||
dataUrl: $(document.body).attr('data-atwho-task-url')},
|
EXPERIMENT: { tag: 'sa-experiments', dataUrl: $(document.body).attr('data-atwho-experiment-url') },
|
||||||
PROJECT: {tag: "sa-projects",
|
REPOSITORY: { tag: 'sa-repositories', dataUrl: $(document.body).attr('data-atwho-rep-items-url') },
|
||||||
dataUrl: $(document.body).attr('data-atwho-project-url')},
|
MENU: { tag: 'menu', dataUrl: $(document.body).attr('data-atwho-menu-items') }
|
||||||
EXPERIMENT: {tag: "sa-experiments",
|
|
||||||
dataUrl: $(document.body).attr('data-atwho-experiment-url')},
|
|
||||||
REPOSITORY: {tag: "sa-repositories",
|
|
||||||
dataUrl: $(document.body).attr('data-atwho-rep-items-url')},
|
|
||||||
MENU: {tag: "menu",
|
|
||||||
dataUrl: $(document.body).attr('data-atwho-menu-items')}
|
|
||||||
});
|
});
|
||||||
var prevAt,
|
var DEFAULT_SEARCH_FILTER = FilterTypeEnum.REPOSITORY;
|
||||||
// Default selected filter when using '#'
|
|
||||||
DEFAULT_SEARCH_FILTER = FilterTypeEnum.REPOSITORY,
|
|
||||||
atWhoUpdating = false;
|
|
||||||
|
|
||||||
function _matchHighlighter(html, query, filterType) {
|
function matchHighlighter(html, query) {
|
||||||
var $html = $(html);
|
var $html = $(html);
|
||||||
var $li_text = $html.find('.item-text');
|
var $liText = $html.find('.item-text');
|
||||||
|
if ($liText.length === 0 || !query) return html;
|
||||||
|
|
||||||
if ($li_text.length === 0 || !query) return html;
|
$.each($liText, function(i, item) {
|
||||||
|
$(item).html($(item).text().replace(new RegExp(query.split(' ').join('|'), 'gi'),
|
||||||
$.each($li_text, function(i, item) {
|
'<span class="atwho-highlight">$&</span>'));
|
||||||
$(item).html($(item).text().replace(new RegExp(query.split(' ').join("|"), 'gi'), '<span class="atwho-highlight">$&</span>'));
|
});
|
||||||
})
|
|
||||||
|
|
||||||
return $html;
|
return $html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function _generateInputTag(value, li) {
|
function generateInputTag(value, li) {
|
||||||
return `[#${li.attr('data-name')}~${li.attr('data-type')}~${li.attr('data-id')}]`;
|
return `[#${li.attr('data-name')}~${li.attr('data-type')}~${li.attr('data-id')}]`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generates suggestion dropdown filter
|
// Generates suggestion dropdown filter
|
||||||
function generateFilterMenu(active, res_data) {
|
function generateFilterMenu() {
|
||||||
var menu = '';
|
var menu = '';
|
||||||
$.ajax({
|
$.ajax({
|
||||||
async: false,
|
async: false,
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
url: $(document.body).attr('data-atwho-repositories-url'),
|
url: $(document.body).attr('data-atwho-repositories-url'),
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
menu = data.html
|
menu = data.html;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return menu;
|
return menu;
|
||||||
}
|
}
|
||||||
|
|
@ -88,121 +61,125 @@ var SmartAnnotation = (function() {
|
||||||
var $currentAtWho = $('.atwho-view[style]');
|
var $currentAtWho = $('.atwho-view[style]');
|
||||||
var filterType;
|
var filterType;
|
||||||
var params = { query: query };
|
var params = { query: query };
|
||||||
filterType = FilterTypeEnum[$currentAtWho.find('.tab-pane.active').data('object-type')]
|
filterType = FilterTypeEnum[$currentAtWho.find('.tab-pane.active').data('object-type')];
|
||||||
if (!filterType) {
|
if (!filterType) {
|
||||||
callback([{name: ''}]);
|
callback([{ name: '' }]);
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(filterType.tag === 'sa-repositories') {
|
if (filterType.tag === 'sa-repositories') {
|
||||||
let repositoryTab = $currentAtWho.find('[data-object-type="REPOSITORY"]')
|
let repositoryTab = $currentAtWho.find('[data-object-type="REPOSITORY"]');
|
||||||
let activeRepository = repositoryTab.find('.btn-primary');
|
let activeRepository = repositoryTab.find('.btn-primary');
|
||||||
if (activeRepository.length) {
|
if (activeRepository.length) {
|
||||||
params['repository_id'] = activeRepository.data('object-id')
|
params.repository_id = activeRepository.data('object-id');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
$.getJSON(filterType.dataUrl, params, function(data) {
|
$.getJSON(filterType.dataUrl, params, function(data) {
|
||||||
|
console.log(data.res)
|
||||||
callback(data.res);
|
callback(data.res);
|
||||||
|
|
||||||
if (data.repository) {
|
if (data.repository) {
|
||||||
$currentAtWho.find(`.repository-object[data-object-id="${data.repository}"]`)
|
$currentAtWho.find(`.repository-object[data-object-id="${data.repository}"]`)
|
||||||
.addClass('btn-primary').removeClass('btn-light')
|
.addClass('btn-primary').removeClass('btn-light');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
return true;
|
||||||
},
|
},
|
||||||
tplEval: function(_tpl, items) {
|
tplEval: function(_tpl, items) {
|
||||||
|
console.log(1)
|
||||||
return items.name;
|
return items.name;
|
||||||
},
|
},
|
||||||
highlighter: function(li, query) {
|
highlighter: function(li, query) {
|
||||||
return _matchHighlighter(li, query, true);
|
return matchHighlighter(li, query, true);
|
||||||
return li;
|
|
||||||
},
|
},
|
||||||
beforeInsert: function(value, li) {
|
beforeInsert: function(value, li) {
|
||||||
return _generateInputTag(value, li);
|
return generateInputTag(value, li);
|
||||||
},
|
},
|
||||||
matcher:function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
|
matcher: function(flag, subtext, shouldStartWithSpace) {
|
||||||
var _a, _y, match, regexp, space;
|
var a;
|
||||||
flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
var y;
|
||||||
if (should_startWithSpace) {
|
var match;
|
||||||
flag = '(?:^|\\s)' + flag;
|
var regexp;
|
||||||
|
var cleanedFlag = flag.replace(/[-[]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
|
||||||
|
if (shouldStartWithSpace) {
|
||||||
|
cleanedFlag = '(?:^|\\s)' + cleanedFlag;
|
||||||
}
|
}
|
||||||
_a = decodeURI("%C3%80");
|
a = decodeURI('%C3%80');
|
||||||
_y = decodeURI("%C3%BF");
|
y = decodeURI('%C3%BF');
|
||||||
regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_/:\\s\+\-\]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
|
regexp = new RegExp(cleanedFlag + `([A-Za-z${a}-${y}0-9_/:\\s+-]*)$|${cleanedFlag}([^\\x00-\\xff]*)$`, 'gi');
|
||||||
match = regexp.exec(subtext);
|
match = regexp.exec(subtext);
|
||||||
if (match) {
|
if (match) {
|
||||||
return match[2] || match[1];
|
return match[2] || match[1];
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
},
|
return null;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
headerTpl: generateFilterMenu(defaultFilterType),
|
headerTpl: generateFilterMenu(defaultFilterType),
|
||||||
startWithSpace: true,
|
startWithSpace: true,
|
||||||
acceptSpaceBar: true,
|
acceptSpaceBar: true,
|
||||||
displayTimeout: 120000
|
displayTimeout: 120000,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
$(field)
|
$(field)
|
||||||
.on("shown.atwho", function() {
|
.on('shown.atwho', function() {
|
||||||
var $currentAtWho = $('.atwho-view[style]');
|
var $currentAtWho = $('.atwho-view[style]');
|
||||||
$currentAtWho.find('.tab-button').off().on('shown.bs.tab', function() {
|
$currentAtWho.find('.tab-button').off().on('shown.bs.tab', function() {
|
||||||
$(field).click().focus();
|
$(field).click().focus();
|
||||||
$(this).closest('.nav-tabs').find('.tab-button').removeClass('active');
|
$(this).closest('.nav-tabs').find('.tab-button').removeClass('active');
|
||||||
$(this).addClass('active');
|
$(this).addClass('active');
|
||||||
})
|
});
|
||||||
$currentAtWho.find('.repository-object').off().on('click', function() {
|
$currentAtWho.find('.repository-object').off().on('click', function() {
|
||||||
$(this).parent().find('.repository-object').removeClass('btn-primary').addClass('btn-light');
|
$(this).parent().find('.repository-object').removeClass('btn-primary')
|
||||||
$(this).addClass('btn-primary').removeClass('btn-light');
|
.addClass('btn-light');
|
||||||
$(field).click().focus();
|
$(this).addClass('btn-primary').removeClass('btn-light');
|
||||||
})
|
$(field).click().focus();
|
||||||
|
});
|
||||||
|
|
||||||
if ($currentAtWho.find('.tab-pane.active').length == 0) {
|
if ($currentAtWho.find('.tab-pane.active').length === 0) {
|
||||||
let filterType = DEFAULT_SEARCH_FILTER;
|
let filterType = DEFAULT_SEARCH_FILTER;
|
||||||
$currentAtWho.find(`.${filterType.tag}`).click();
|
$currentAtWho.find(`.${filterType.tag}`).click();
|
||||||
}
|
|
||||||
})
|
|
||||||
.on("reposition.atwho", function(event, flag, query) {
|
|
||||||
let inputFieldLeft = query.$inputor.offset().left;
|
|
||||||
if (inputFieldLeft > $(window).width()) {
|
|
||||||
let leftPosition;
|
|
||||||
if (inputFieldLeft < flag.left + $(window).scrollLeft()) {
|
|
||||||
leftPosition = inputFieldLeft;
|
|
||||||
} else {
|
|
||||||
leftPosition = flag.left + $(window).scrollLeft();
|
|
||||||
}
|
}
|
||||||
query.$el.find('.atwho-view').css('left', leftPosition + 'px');
|
})
|
||||||
}
|
.on('reposition.atwho', function(event, flag, query) {
|
||||||
if ($('.repository-show').length) {
|
let inputFieldLeft = query.$inputor.offset().left;
|
||||||
query.$el.find('.atwho-view').css('top', flag.top + 'px');
|
if (inputFieldLeft > $(window).width()) {
|
||||||
}
|
let leftPosition;
|
||||||
})
|
if (inputFieldLeft < flag.left + $(window).scrollLeft()) {
|
||||||
.atwho({
|
leftPosition = inputFieldLeft;
|
||||||
at: '@',
|
} else {
|
||||||
callbacks: {
|
leftPosition = flag.left + $(window).scrollLeft();
|
||||||
remoteFilter: function(query, callback) {
|
}
|
||||||
$.getJSON(FilterTypeEnum.USER.dataUrl, {query: query}, function(data) {
|
query.$el.find('.atwho-view').css('left', leftPosition + 'px');
|
||||||
callback(data.users);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
tplEval: function(_tpl, map) {
|
|
||||||
return map.name
|
|
||||||
},
|
|
||||||
highlighter: function(li, query) {
|
|
||||||
return _matchHighlighter(li, query);
|
|
||||||
},
|
|
||||||
beforeInsert: function(value, li) {
|
|
||||||
return `[@${li.attr('data-full-name')}~${li.attr('data-id')}]`
|
|
||||||
}
|
}
|
||||||
},
|
if ($('.repository-show').length) {
|
||||||
startsWithSpace: true,
|
query.$el.find('.atwho-view').css('top', flag.top + 'px');
|
||||||
acceptSpaceBar: true,
|
}
|
||||||
displayTimeout: 120000
|
})
|
||||||
})
|
.atwho({
|
||||||
.atwho(atWhoSettings('#', DEFAULT_SEARCH_FILTER))
|
at: '@',
|
||||||
|
callbacks: {
|
||||||
|
remoteFilter: function(query, callback) {
|
||||||
|
$.getJSON(FilterTypeEnum.USER.dataUrl, { query: query }, function(data) {
|
||||||
|
callback(data.users);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tplEval: function(_tpl, map) {
|
||||||
|
return map.name;
|
||||||
|
},
|
||||||
|
highlighter: function(li, query) {
|
||||||
|
return matchHighlighter(li, query);
|
||||||
|
},
|
||||||
|
beforeInsert: function(value, li) {
|
||||||
|
return `[@${li.attr('data-full-name')}~${li.attr('data-id')}]`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
startsWithSpace: true,
|
||||||
|
acceptSpaceBar: true,
|
||||||
|
displayTimeout: 120000
|
||||||
|
})
|
||||||
|
.atwho(atWhoSettings('#', DEFAULT_SEARCH_FILTER));
|
||||||
// .atwho(atWhoSettings('task#', FilterTypeEnum.TASK)) Waiting for better times
|
// .atwho(atWhoSettings('task#', FilterTypeEnum.TASK)) Waiting for better times
|
||||||
// .atwho(atWhoSettings('project#', FilterTypeEnum.PROJECT))
|
// .atwho(atWhoSettings('project#', FilterTypeEnum.PROJECT))
|
||||||
// .atwho(atWhoSettings('experiment#', FilterTypeEnum.EXPERIMENT))
|
// .atwho(atWhoSettings('experiment#', FilterTypeEnum.EXPERIMENT))
|
||||||
|
|
@ -220,26 +197,23 @@ var SmartAnnotation = (function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function initialize(field) {
|
function initialize(field) {
|
||||||
var atWho = new setAtWho(field);
|
var atWho = new SetAtWho(field);
|
||||||
atWho.init();
|
atWho.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
var publicApi = Object.freeze({
|
return Object.freeze({
|
||||||
init: initialize,
|
init: initialize,
|
||||||
preventPropagation: atwhoStopPropagation,
|
preventPropagation: atwhoStopPropagation,
|
||||||
closePopup: closePopup
|
closePopup: closePopup
|
||||||
});
|
});
|
||||||
|
}());
|
||||||
return publicApi;
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
|
|
||||||
// initialize the smart annotations
|
// initialize the smart annotations
|
||||||
(function initSmartAnnotation() {
|
(function() {
|
||||||
$(document).on('focus', '[data-atwho-edit]', function() {
|
$(document).on('focus', '[data-atwho-edit]', function() {
|
||||||
if(_.isUndefined($(this).data('atwho'))) {
|
if (_.isUndefined($(this).data('atwho'))) {
|
||||||
SmartAnnotation.init(this);
|
SmartAnnotation.init(this);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
}());
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
<div class="atwho-no-results" data-no-results="1">
|
<div class="atwho-no-results">
|
||||||
<span><%= t("atwho.no_results") %></span>
|
<span><%= t("atwho.no_results") %></span>
|
||||||
|
<!-- "No results" hack for at.js -->
|
||||||
|
<span style="display: none"><%= @query %></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue