authors auto-complete

app/assets/javascripts/desktop.js

@@ -16,3 +16,4 @@
 //= require orbitdesktop
 //= require jquery.gridster
 //= require desktop/books_pages
+//= require jquery.tokeninput

app/assets/stylesheets/token-input-facebook.css

@@ -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;
+}

app/assets/stylesheets/token-input-mac.css

@@ -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;
+}

app/assets/stylesheets/token-input.css

@@ -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;
+}

vendor/built_in_modules/personal_conference/app/controllers/panel/personal_conference/desktop/conference_pages_controller.rb

@@ -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}
+    if (not params[:q].nil?) and (current_user.name.include?params[:q])
-    #@conference_candidate =
+      @user = [{ :id => 0, :name => current_user.name}]       # self account name
-    #  WritingConference.where(create_user_id: current_user.id).map{|j|j.conference_title}.uniq
+    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
 

vendor/built_in_modules/personal_conference/app/helpers/panel/personal_conference/desktop/conference_pages_helper.rb

@@ -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

vendor/built_in_modules/personal_conference/app/models/conference_co_author.rb

@@ -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 },

vendor/built_in_modules/personal_conference/app/models/writing_conference.rb

@@ -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 )

vendor/built_in_modules/personal_conference/app/views/panel/personal_conference/desktop/conference_pages/_form.html.erb

@@ -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.label :author_tokens, t("personal_conference.authors") %><br />
-              <%= f.text_area locale,
+            <%= 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",
                 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  %>;

vendor/built_in_modules/personal_conference/config/locales/en.yml

@@ -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"

vendor/built_in_modules/personal_conference/config/locales/zh_tw.yml

@@ -41,6 +41,9 @@ zh_tw:
   no_: "否"
   cancel : "取消"
   save: "儲存"
+  hintText: "請輸入搜尋關鍵字"
+  noResultsText: "沒有相關的比對結果"
+  searchingText: "搜尋中…"
 
   error_msg:
     time_series_illegal: "啟始時間必須早於結束時間"