authors auto-complete
This commit is contained in:
parent
e99fef9404
commit
8f1d7b55ab
|
@ -16,3 +16,4 @@
|
|||
//= require orbitdesktop
|
||||
//= require jquery.gridster
|
||||
//= require desktop/books_pages
|
||||
//= require jquery.tokeninput
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,122 @@
|
|||
/* Example tokeninput style #2: Facebook style */
|
||||
ul.token-input-list-facebook {
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
width: 400px;
|
||||
border: 1px solid #8496ba;
|
||||
cursor: text;
|
||||
font-size: 12px;
|
||||
font-family: Verdana, sans-serif;
|
||||
min-height: 1px;
|
||||
z-index: 999;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
list-style-type: none;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
ul.token-input-list-facebook li input {
|
||||
border: 0;
|
||||
width: 100px;
|
||||
padding: 3px 8px;
|
||||
background-color: white;
|
||||
margin: 2px 0;
|
||||
-webkit-appearance: caret;
|
||||
}
|
||||
|
||||
li.token-input-token-facebook {
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
padding: 1px 3px;
|
||||
background-color: #eff2f7;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
border: 1px solid #ccd5e4;
|
||||
font-size: 11px;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li.token-input-token-facebook p {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.token-input-token-facebook span {
|
||||
color: #a6b3cf;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.token-input-selected-token-facebook {
|
||||
background-color: #5670a6;
|
||||
border: 1px solid #3b5998;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li.token-input-input-token-facebook {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: default;
|
||||
font-size: 11px;
|
||||
font-family: Verdana, sans-serif;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook p {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul li {
|
||||
background-color: #fff;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul li em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
|
||||
background-color: #3b5998;
|
||||
color: #fff;
|
||||
}
|
|
@ -0,0 +1,204 @@
|
|||
/* Example tokeninput style #2: Mac Style */
|
||||
fieldset.token-input-mac {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
background: #fff;
|
||||
width: 400px;
|
||||
border: 1px solid #A4BDEC;
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
fieldset.token-input-mac.token-input-dropdown-mac {
|
||||
border-radius: 10px 10px 0 0;
|
||||
-moz-border-radius: 10px 10px 0 0;
|
||||
-webkit-border-radius: 10px 10px 0 0;
|
||||
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
ul.token-input-list-mac {
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
cursor: text;
|
||||
font-size: 12px;
|
||||
font-family: Verdana, sans-serif;
|
||||
min-height: 1px;
|
||||
z-index: 999;
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
ul.token-input-list-mac.error {
|
||||
border: 1px solid #C52020;
|
||||
}
|
||||
|
||||
ul.token-input-list-mac li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li.token-input-token-mac p {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.token-input-token-mac span {
|
||||
color: #a6b3cf;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* TOKENS */
|
||||
|
||||
li.token-input-token-mac {
|
||||
font-family: "Lucida Grande", Arial, sans-serif;
|
||||
font-size: 9pt;
|
||||
line-height: 12pt;
|
||||
overflow: hidden;
|
||||
height: 16px;
|
||||
margin: 3px;
|
||||
padding: 0 10px;
|
||||
background: none;
|
||||
background-color: #dee7f8;
|
||||
color: #000;
|
||||
cursor: default;
|
||||
border: 1px solid #a4bdec;
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
li.token-input-highlighted-token-mac {
|
||||
background-color: #bbcef1;
|
||||
border: 1px solid #598bec;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
li.token-input-selected-token-mac {
|
||||
background-color: #598bec;
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
li.token-input-selected-token-mac span.token-input-delete-token-mac {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li.token-input-input-token-mac {
|
||||
border: none;
|
||||
background: transparent;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.token-input-input-token-mac input {
|
||||
border: 0;
|
||||
width: 100px;
|
||||
padding: 3px;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac {
|
||||
position: absolute;
|
||||
border: 1px solid #A4BDEC;
|
||||
border-top: none;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
font-size: 10pt;
|
||||
font-family: "Lucida Grande", Arial, sans-serif;
|
||||
padding: 5px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
-moz-border-radius: 0 0 10px 10px;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
-moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
|
||||
clip:rect(0px, 1000px, 1000px, -10px);
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac p {
|
||||
font-size: 8pt;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
|
||||
font-family: "Lucida Grande", Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li {
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
padding: 0 0 0 25px;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac.odd {
|
||||
background-color: #ECF4F9;
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
|
||||
float: right;
|
||||
font-size: 8pt;
|
||||
font-style: italic;
|
||||
padding: 0 10px 0 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li strong {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
font-style: none;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
|
||||
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
|
||||
background-color: #598bec;
|
||||
color: #fff;
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
}
|
||||
|
||||
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
|
||||
div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
|
||||
color: #fff;
|
||||
}
|
|
@ -0,0 +1,127 @@
|
|||
/* Example tokeninput style #1: Token vertical list*/
|
||||
ul.token-input-list {
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
width: 400px;
|
||||
border: 1px solid #999;
|
||||
cursor: text;
|
||||
font-size: 12px;
|
||||
font-family: Verdana, sans-serif;
|
||||
z-index: 999;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
list-style-type: none;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
ul.token-input-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
ul.token-input-list li input {
|
||||
border: 0;
|
||||
width: 350px;
|
||||
padding: 3px 8px;
|
||||
background-color: white;
|
||||
-webkit-appearance: caret;
|
||||
}
|
||||
|
||||
ul.token-input-disabled,
|
||||
ul.token-input-disabled li input {
|
||||
background-color: #E8E8E8;
|
||||
}
|
||||
|
||||
ul.token-input-disabled li.token-input-token {
|
||||
background-color: #D9E3CA;
|
||||
color: #7D7D7D
|
||||
}
|
||||
|
||||
ul.token-input-disabled li.token-input-token span {
|
||||
color: #CFCFCF;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
li.token-input-token {
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
margin: 3px;
|
||||
padding: 3px 5px;
|
||||
background-color: #d0efa0;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.token-input-token p {
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.token-input-token span {
|
||||
float: right;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.token-input-selected-token {
|
||||
background-color: #08844e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
li.token-input-selected-token span {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
div.token-input-dropdown {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
font-family: Verdana, sans-serif;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div.token-input-dropdown p {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul li {
|
||||
background-color: #fff;
|
||||
padding: 3px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul li.token-input-dropdown-item {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul li.token-input-dropdown-item2 {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul li em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
div.token-input-dropdown ul li.token-input-selected-dropdown-item {
|
||||
background-color: #d0efa0;
|
||||
}
|
|
@ -23,13 +23,21 @@ class Panel::PersonalConference::Desktop::ConferencePagesController < Applicatio
|
|||
@writing_conference = WritingConference.new
|
||||
@paper_types = ConferencePaperType.all
|
||||
@author_types = ConferenceAuthorType.all
|
||||
#@co_author_candidate =
|
||||
# CoAuthor.where(name_id: current_user.id).map{|c|c.co_author}
|
||||
#@conference_candidate =
|
||||
# WritingConference.where(create_user_id: current_user.id).map{|j|j.conference_title}.uniq
|
||||
|
||||
if (not params[:q].nil?) and (current_user.name.include?params[:q])
|
||||
@user = [{ :id => 0, :name => current_user.name}] # self account name
|
||||
else
|
||||
@user = []
|
||||
end
|
||||
|
||||
@co_authors = ConferenceCoAuthor.where(name_id: current_user.id, :co_author => /#{params[:q]}/)
|
||||
@co_authors = [{ :id => params[:q], :name => params[:q] }] + # search string
|
||||
@user + # self account name
|
||||
@co_authors.map{|m| { :id => m.id, :name => m.co_author } } # match pattern
|
||||
|
||||
respond_to do |format|
|
||||
format.html { render :layout => false}
|
||||
format.json { render :json => @co_authors.to_json }
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
@ -71,4 +71,16 @@ module Panel::PersonalConference::Desktop::ConferencePagesHelper
|
|||
file_type = ""
|
||||
end
|
||||
end
|
||||
|
||||
def generate_authors_name ids
|
||||
author_name = ids.map{|m|
|
||||
if m == "0"
|
||||
{:id => 0, :name => current_user.name}
|
||||
else
|
||||
{:id => m, :name => ConferenceCoAuthor.find(m).co_author}
|
||||
end
|
||||
}
|
||||
|
||||
author_name.to_json
|
||||
end
|
||||
end
|
||||
|
|
|
@ -3,11 +3,12 @@ class ConferenceCoAuthor
|
|||
|
||||
LANGUAGE_TYPES = [ "English", "Chinese" ]
|
||||
|
||||
field :name_id, type: BSON::ObjectId
|
||||
field :name_id, type: BSON::ObjectId # this is author
|
||||
field :co_author, localize: true
|
||||
field :email
|
||||
|
||||
belongs_to :conference_co_author_relations
|
||||
has_and_belongs_to_many :writing_conferences
|
||||
|
||||
VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/
|
||||
validates :email, format: { with: VALID_EMAIL_REGEX },
|
||||
|
|
|
@ -16,6 +16,7 @@ class WritingConference
|
|||
has_and_belongs_to_many :tags, :class_name => "PersonalConferenceTag"
|
||||
has_and_belongs_to_many :conference_author_types
|
||||
has_and_belongs_to_many :conference_paper_types
|
||||
has_and_belongs_to_many :conference_co_authors
|
||||
|
||||
field :year
|
||||
field :language
|
||||
|
@ -43,6 +44,25 @@ class WritingConference
|
|||
after_save :save_writing_conference_files
|
||||
validates :url, :format => /^(http|https):\/\/(([a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5})|((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))(:[0-9]{1,5})?(\/.*)?/i, :unless => Proc.new{self.url.blank?}
|
||||
|
||||
attr_reader :author_tokens
|
||||
|
||||
def author_tokens=(ids)
|
||||
authors_ids = ids.split(",").map{|id|
|
||||
begin
|
||||
ConferenceCoAuthor.find(m).id
|
||||
rescue
|
||||
if id != "0"
|
||||
new_co_author = ConferenceCoAuthor.new(:co_author => id, :name_id => create_user_id)
|
||||
new_co_author.save
|
||||
new_co_author.id
|
||||
else
|
||||
id
|
||||
end
|
||||
end
|
||||
}
|
||||
self.conference_co_author_ids = authors_ids
|
||||
end
|
||||
|
||||
def self.search( category_id = nil )
|
||||
if category_id.to_s.size > 0
|
||||
find(:all, :conditions => {writing_conference_category_id: category_id}).desc( :is_top, :title )
|
||||
|
|
|
@ -104,14 +104,20 @@
|
|||
<div class="s_grid_con s_form">
|
||||
<ul>
|
||||
<li class="s_grid_row">
|
||||
<%= f.fields_for :authors_translations do |f| %>
|
||||
<%= f.text_area locale,
|
||||
<%= f.label :author_tokens, t("personal_conference.authors") %><br />
|
||||
<%= f.text_area :author_tokens,
|
||||
class: "s_grid_6 s_grid",
|
||||
size: "20x2",
|
||||
placeholder: t("personal_conference.authors"),
|
||||
"data-pre" => generate_authors_name(@writing_conference.conference_co_author_ids) %>
|
||||
<%#= f.fields_for :authors_translations do |f| %>
|
||||
<%#= f.text_area locale,
|
||||
class: "s_grid_6 s_grid",
|
||||
size: "20x2",
|
||||
placeholder: t("personal_conference.authors"),
|
||||
# "autocomplete-list" => "coauthor_autocomplete_list",
|
||||
# "autocomplete-list" => "coauthor_autocomplete_list",
|
||||
value: (@writing_conference.authors_translations[locale.to_s] rescue nil) %>
|
||||
<% end %>
|
||||
<%# end %>
|
||||
<span class="icon-plus input_append"></span>
|
||||
</li>
|
||||
|
||||
|
@ -194,6 +200,23 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<%= stylesheet_link_tag "token-input-facebook" %>
|
||||
<%= javascript_include_tag :defaults, "jquery.tokeninput" %>
|
||||
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$("#writing_conference_author_tokens").tokenInput("/panel/personal_conference/desktop/conference_pages/new.json", {
|
||||
crossDomain: false,
|
||||
prePopulate: $("#writing_conference_author_tokens").data("pre"),
|
||||
theme: "facebook",
|
||||
hintText: "<%=t("hintText")%>",
|
||||
noResultsText: "<%=t("noResultsText")%>",
|
||||
searchingText: "<%=t("searchingText")%>"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
orbitDesktop.prototype.initializeJournalPapers.conference_title_autocomplete_list = <%= @conference_candidate.to_json.html_safe %>;
|
||||
orbitDesktop.prototype.initializeJournalPapers.coauthor_autocomplete_list = <%= @co_author_candidate.to_json.html_safe %>;
|
||||
|
|
|
@ -41,6 +41,9 @@ en:
|
|||
no_: "No"
|
||||
cancel : "Cancel"
|
||||
save: "save"
|
||||
hintText: "Type in a search term"
|
||||
noResultsText: "No results"
|
||||
searchingText: "Searching…"
|
||||
|
||||
error_msg:
|
||||
time_series_illegal: "must be before end time"
|
||||
|
|
|
@ -41,6 +41,9 @@ zh_tw:
|
|||
no_: "否"
|
||||
cancel : "取消"
|
||||
save: "儲存"
|
||||
hintText: "請輸入搜尋關鍵字"
|
||||
noResultsText: "沒有相關的比對結果"
|
||||
searchingText: "搜尋中…"
|
||||
|
||||
error_msg:
|
||||
time_series_illegal: "啟始時間必須早於結束時間"
|
||||
|
|
Reference in New Issue