diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/application.js | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/plugins/jquery.tokeninput.js | 860 | ||||
| -rw-r--r-- | app/assets/stylesheets/main/routes.css.scss | 19 | ||||
| -rw-r--r-- | app/assets/stylesheets/vendor/token-input.css | 20 | ||||
| -rw-r--r-- | app/inputs/search_stop_area_input.rb | 8 | ||||
| -rw-r--r-- | app/views/routes/_form.html.erb | 37 | ||||
| -rw-r--r-- | app/views/routes/_stop_point_fields.html.erb | 16 |
7 files changed, 37 insertions, 924 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 01142c849..07fc8694c 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,6 +13,7 @@ //= require morris //= require bootstrap-sass-official //= require typeahead.js +//= require jquery-tokeninput //= require moment //= require moment/locale/fr //= require eonasdan-bootstrap-datetimepicker diff --git a/app/assets/javascripts/plugins/jquery.tokeninput.js b/app/assets/javascripts/plugins/jquery.tokeninput.js deleted file mode 100644 index 87641a57a..000000000 --- a/app/assets/javascripts/plugins/jquery.tokeninput.js +++ /dev/null @@ -1,860 +0,0 @@ -/* - * jQuery Plugin: Tokenizing Autocomplete Text Entry - * Version 1.6.0 - * - * Copyright (c) 2009 James Smith (http://loopj.com) - * Licensed jointly under the GPL and MIT licenses, - * choose which one suits your project best! - * - */ - -(function ($) { -// Default settings -var DEFAULT_SETTINGS = { - // Search settings - method: "GET", - contentType: "json", - queryParam: "q", - searchDelay: 300, - minChars: 1, - propertyToSearch: "name", - jsonContainer: null, - - // Display settings - hintText: "Type in a search term", - noResultsText: "No results", - searchingText: "Searching...", - deleteText: "×", - animateDropdown: true, - - // Tokenization settings - tokenLimit: null, - tokenDelimiter: ",", - preventDuplicates: false, - - // Output settings - tokenValue: "id", - - // Prepopulation settings - prePopulate: null, - processPrePopulate: false, - - // Manipulation settings - idPrefix: "token-input-", - - // Formatters - resultsFormatter: function(item){ return "<li>" + item[this.propertyToSearch]+ "</li>" }, - tokenFormatter: function(item) { return "<li><p>" + item[this.propertyToSearch] + "</p></li>" }, - - // Callbacks - onResult: null, - onAdd: null, - onDelete: null, - onReady: null -}; - -// Default classes to use when theming -var DEFAULT_CLASSES = { - tokenList: "token-input-list", - token: "token-input-token", - tokenDelete: "token-input-delete-token", - selectedToken: "token-input-selected-token", - highlightedToken: "token-input-highlighted-token", - dropdown: "token-input-dropdown", - dropdownItem: "token-input-dropdown-item", - dropdownItem2: "token-input-dropdown-item2", - selectedDropdownItem: "token-input-selected-dropdown-item", - inputToken: "token-input-input-token" -}; - -// Input box position "enum" -var POSITION = { - BEFORE: 0, - AFTER: 1, - END: 2 -}; - -// Keys "enum" -var KEY = { - BACKSPACE: 8, - TAB: 9, - ENTER: 13, - ESCAPE: 27, - SPACE: 32, - PAGE_UP: 33, - PAGE_DOWN: 34, - END: 35, - HOME: 36, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - NUMPAD_ENTER: 108, - COMMA: 188 -}; - -// Additional public (exposed) methods -var methods = { - init: function(url_or_data_or_function, options) { - var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); - - return this.each(function () { - $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings)); - }); - }, - clear: function() { - this.data("tokenInputObject").clear(); - return this; - }, - add: function(item) { - this.data("tokenInputObject").add(item); - return this; - }, - remove: function(item) { - this.data("tokenInputObject").remove(item); - return this; - }, - get: function() { - return this.data("tokenInputObject").getTokens(); - } -} - -// Expose the .tokenInput function to jQuery as a plugin -$.fn.tokenInput = function (method) { - // Method calling and initialization logic - if(methods[method]) { - return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); - } else { - return methods.init.apply(this, arguments); - } -}; - -// TokenList class for each input -$.TokenList = function (input, url_or_data, settings) { - // - // Initialization - // - - // Configure the data source - if($.type(url_or_data) === "string" || $.type(url_or_data) === "function") { - // Set the url to query against - settings.url = url_or_data; - - // If the URL is a function, evaluate it here to do our initalization work - var url = computeURL(); - - // Make a smart guess about cross-domain if it wasn't explicitly specified - if(settings.crossDomain === undefined) { - if(url.indexOf("://") === -1) { - settings.crossDomain = false; - } else { - settings.crossDomain = (location.href.split(/\/+/g)[1] !== url.split(/\/+/g)[1]); - } - } - } else if(typeof(url_or_data) === "object") { - // Set the local data to search through - settings.local_data = url_or_data; - } - - // Build class names - if(settings.classes) { - // Use custom class names - settings.classes = $.extend({}, DEFAULT_CLASSES, settings.classes); - } else if(settings.theme) { - // Use theme-suffixed default class names - settings.classes = {}; - $.each(DEFAULT_CLASSES, function(key, value) { - settings.classes[key] = value + "-" + settings.theme; - }); - } else { - settings.classes = DEFAULT_CLASSES; - } - - - // Save the tokens - var saved_tokens = []; - - // Keep track of the number of tokens in the list - var token_count = 0; - - // Basic cache to save on db hits - var cache = new $.TokenList.Cache(); - - // Keep track of the timeout, old vals - var timeout; - var input_val; - - // Create a new text input an attach keyup events - var input_box = $("<input type=\"text\" autocomplete=\"off\">") - .css({ - outline: "none" - }) - .attr("id", settings.idPrefix + input.id) - .focus(function () { - if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { - show_dropdown_hint(); - } - }) - .blur(function () { - hide_dropdown(); - $(this).val(""); - }) - .bind("keyup keydown blur update", resize_input) - .keydown(function (event) { - var previous_token; - var next_token; - - switch(event.keyCode) { - case KEY.LEFT: - case KEY.RIGHT: - case KEY.UP: - case KEY.DOWN: - if(!$(this).val()) { - previous_token = input_token.prev(); - next_token = input_token.next(); - - if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) { - // Check if there is a previous/next token and it is selected - if(event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) { - deselect_token($(selected_token), POSITION.BEFORE); - } else { - deselect_token($(selected_token), POSITION.AFTER); - } - } else if((event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) && previous_token.length) { - // We are moving left, select the previous token if it exists - select_token($(previous_token.get(0))); - } else if((event.keyCode === KEY.RIGHT || event.keyCode === KEY.DOWN) && next_token.length) { - // We are moving right, select the next token if it exists - select_token($(next_token.get(0))); - } - } else { - var dropdown_item = null; - - if(event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) { - dropdown_item = $(selected_dropdown_item).next(); - } else { - dropdown_item = $(selected_dropdown_item).prev(); - } - - if(dropdown_item.length) { - select_dropdown_item(dropdown_item); - } - return false; - } - break; - - case KEY.BACKSPACE: - previous_token = input_token.prev(); - - if(!$(this).val().length) { - if(selected_token) { - delete_token($(selected_token)); - hidden_input.change(); - } else if(previous_token.length) { - select_token($(previous_token.get(0))); - } - - return false; - } else if($(this).val().length === 1) { - hide_dropdown(); - } else { - // set a timeout just long enough to let this function finish. - setTimeout(function(){do_search();}, 5); - } - break; - - case KEY.TAB: - case KEY.ENTER: - case KEY.NUMPAD_ENTER: - case KEY.COMMA: - if(selected_dropdown_item) { - add_token($(selected_dropdown_item).data("tokeninput")); - hidden_input.change(); - return false; - } - break; - - case KEY.ESCAPE: - hide_dropdown(); - return true; - - default: - if(String.fromCharCode(event.which)) { - // set a timeout just long enough to let this function finish. - setTimeout(function(){do_search();}, 5); - } - break; - } - }); - - // Keep a reference to the original input box - var hidden_input = $(input) - .hide() - .val("") - .focus(function () { - input_box.focus(); - }) - .blur(function () { - input_box.blur(); - }); - - // Keep a reference to the selected token and dropdown item - var selected_token = null; - var selected_token_index = 0; - var selected_dropdown_item = null; - - // The list to store the token items in - var token_list = $("<ul />") - .addClass(settings.classes.tokenList) - .click(function (event) { - var li = $(event.target).closest("li"); - if(li && li.get(0) && $.data(li.get(0), "tokeninput")) { - toggle_select_token(li); - } else { - // Deselect selected token - if(selected_token) { - deselect_token($(selected_token), POSITION.END); - } - - // Focus input box - input_box.focus(); - } - }) - .mouseover(function (event) { - var li = $(event.target).closest("li"); - if(li && selected_token !== this) { - li.addClass(settings.classes.highlightedToken); - } - }) - .mouseout(function (event) { - var li = $(event.target).closest("li"); - if(li && selected_token !== this) { - li.removeClass(settings.classes.highlightedToken); - } - }) - .insertBefore(hidden_input); - - // The token holding the input box - var input_token = $("<li />") - .addClass(settings.classes.inputToken) - .appendTo(token_list) - .append(input_box); - - // The list to store the dropdown items in - var dropdown = $("<div>") - .addClass(settings.classes.dropdown) - .appendTo("body") - .hide(); - - // Magic element to help us resize the text input - var input_resizer = $("<tester/>") - .insertAfter(input_box) - .css({ - position: "absolute", - top: -9999, - left: -9999, - width: "auto", - fontSize: input_box.css("fontSize"), - fontFamily: input_box.css("fontFamily"), - fontWeight: input_box.css("fontWeight"), - letterSpacing: input_box.css("letterSpacing"), - whiteSpace: "nowrap" - }); - - // Pre-populate list if items exist - hidden_input.val(""); - var li_data = settings.prePopulate || hidden_input.data("pre"); - if(settings.processPrePopulate && $.isFunction(settings.onResult)) { - li_data = settings.onResult.call(hidden_input, li_data); - } - if(li_data && li_data.length) { - $.each(li_data, function (index, value) { - insert_token(value); - checkTokenLimit(); - }); - } - - // Initialization is done - if($.isFunction(settings.onReady)) { - settings.onReady.call(); - } - - // - // Public functions - // - - this.clear = function() { - token_list.children("li").each(function() { - if ($(this).children("input").length === 0) { - delete_token($(this)); - } - }); - } - - this.add = function(item) { - add_token(item); - } - - this.remove = function(item) { - token_list.children("li").each(function() { - if ($(this).children("input").length === 0) { - var currToken = $(this).data("tokeninput"); - var match = true; - for (var prop in item) { - if (item[prop] !== currToken[prop]) { - match = false; - break; - } - } - if (match) { - delete_token($(this)); - } - } - }); - } - - this.getTokens = function() { - return saved_tokens; - } - - // - // Private functions - // - - function checkTokenLimit() { - if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) { - input_box.hide(); - hide_dropdown(); - return; - } - } - - function resize_input() { - if(input_val === (input_val = input_box.val())) {return;} - - // Enter new content into resizer and resize input accordingly - var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); - input_resizer.html(escaped); - input_box.width(input_resizer.width() + 30); - } - - function is_printable_character(keycode) { - return ((keycode >= 48 && keycode <= 90) || // 0-1a-z - (keycode >= 96 && keycode <= 111) || // numpad 0-9 + - / * . - (keycode >= 186 && keycode <= 192) || // ; = , - . / ^ - (keycode >= 219 && keycode <= 222)); // ( \ ) ' - } - - // Inner function to a token to the list - function insert_token(item) { - var this_token = settings.tokenFormatter(item); - this_token = $(this_token) - .addClass(settings.classes.token) - .insertBefore(input_token); - - // The 'delete token' button - $("<span>" + settings.deleteText + "</span>") - .addClass(settings.classes.tokenDelete) - .appendTo(this_token) - .click(function () { - delete_token($(this).parent()); - hidden_input.change(); - return false; - }); - - // Store data on the token - var token_data = {"id": item.id}; - token_data[settings.propertyToSearch] = item[settings.propertyToSearch]; - $.data(this_token.get(0), "tokeninput", item); - - // Save this token for duplicate checking - saved_tokens = saved_tokens.slice(0,selected_token_index).concat([token_data]).concat(saved_tokens.slice(selected_token_index)); - selected_token_index++; - - // Update the hidden input - update_hidden_input(saved_tokens, hidden_input); - - token_count += 1; - - // Check the token limit - if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) { - input_box.hide(); - hide_dropdown(); - } - - return this_token; - } - - // Add a token to the token list based on user input - function add_token (item) { - var callback = settings.onAdd; - - // See if the token already exists and select it if we don't want duplicates - if(token_count > 0 && settings.preventDuplicates) { - var found_existing_token = null; - token_list.children().each(function () { - var existing_token = $(this); - var existing_data = $.data(existing_token.get(0), "tokeninput"); - if(existing_data && existing_data.id === item.id) { - found_existing_token = existing_token; - return false; - } - }); - - if(found_existing_token) { - select_token(found_existing_token); - input_token.insertAfter(found_existing_token); - input_box.focus(); - return; - } - } - - // Insert the new tokens - if(settings.tokenLimit == null || token_count < settings.tokenLimit) { - insert_token(item); - checkTokenLimit(); - } - - // Clear input box - input_box.val(""); - - // Don't show the help dropdown, they've got the idea - hide_dropdown(); - - // Execute the onAdd callback if defined - if($.isFunction(callback)) { - callback.call(hidden_input,item); - } - } - - // Select a token in the token list - function select_token (token) { - token.addClass(settings.classes.selectedToken); - selected_token = token.get(0); - - // Hide input box - input_box.val(""); - - // Hide dropdown if it is visible (eg if we clicked to select token) - hide_dropdown(); - } - - // Deselect a token in the token list - function deselect_token (token, position) { - token.removeClass(settings.classes.selectedToken); - selected_token = null; - - if(position === POSITION.BEFORE) { - input_token.insertBefore(token); - selected_token_index--; - } else if(position === POSITION.AFTER) { - input_token.insertAfter(token); - selected_token_index++; - } else { - input_token.appendTo(token_list); - selected_token_index = token_count; - } - - // Show the input box and give it focus again - input_box.focus(); - } - - // Toggle selection of a token in the token list - function toggle_select_token(token) { - var previous_selected_token = selected_token; - - if(selected_token) { - deselect_token($(selected_token), POSITION.END); - } - - if(previous_selected_token === token.get(0)) { - deselect_token(token, POSITION.END); - } else { - select_token(token); - } - } - - // Delete a token from the token list - function delete_token (token) { - // Remove the id from the saved list - var token_data = $.data(token.get(0), "tokeninput"); - var callback = settings.onDelete; - - var index = token.prevAll().length; - if(index > selected_token_index) index--; - - // Delete the token - token.remove(); - selected_token = null; - - // Show the input box and give it focus again - input_box.focus(); - - // Remove this token from the saved list - saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1)); - if(index < selected_token_index) selected_token_index--; - - // Update the hidden input - update_hidden_input(saved_tokens, hidden_input); - - token_count -= 1; - - if(settings.tokenLimit !== null) { - input_box - .show() - .val("") - .focus(); - } - - // Execute the onDelete callback if defined - if($.isFunction(callback)) { - callback.call(hidden_input,token_data); - } - } - - // Update the hidden input box value - function update_hidden_input(saved_tokens, hidden_input) { - var token_values = $.map(saved_tokens, function (el) { - return el[settings.tokenValue]; - }); - hidden_input.val(token_values.join(settings.tokenDelimiter)); - - } - - // Hide and clear the results dropdown - function hide_dropdown () { - dropdown.hide().empty(); - selected_dropdown_item = null; - } - - function show_dropdown() { - dropdown - .css({ - position: "absolute", - top: $(token_list).offset().top + $(token_list).outerHeight(), - left: $(token_list).offset().left, - zindex: 999 - }) - .show(); - } - - function show_dropdown_searching () { - if(settings.searchingText) { - dropdown.html("<p>"+settings.searchingText+"</p>"); - show_dropdown(); - } - } - - function show_dropdown_hint () { - if(settings.hintText) { - dropdown.html("<p>"+settings.hintText+"</p>"); - show_dropdown(); - } - } - - // Highlight the query part of the search term - function highlight_term(value, term) { - return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>"); - } - - function find_value_and_highlight_term(template, value, term) { - return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + value + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term)); - } - - // Populate the results dropdown with some results - function populate_dropdown (query, results) { - if(results && results.length) { - dropdown.empty(); - var dropdown_ul = $("<ul>") - .appendTo(dropdown) - .mouseover(function (event) { - select_dropdown_item($(event.target).closest("li")); - }) - .mousedown(function (event) { - add_token($(event.target).closest("li").data("tokeninput")); - hidden_input.change(); - return false; - }) - .hide(); - - $.each(results, function(index, value) { - var this_li = settings.resultsFormatter(value); - - this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query); - - this_li = $(this_li).appendTo(dropdown_ul); - - if(index % 2) { - this_li.addClass(settings.classes.dropdownItem); - } else { - this_li.addClass(settings.classes.dropdownItem2); - } - - if(index === 0) { - select_dropdown_item(this_li); - } - - $.data(this_li.get(0), "tokeninput", value); - }); - - show_dropdown(); - - if(settings.animateDropdown) { - dropdown_ul.slideDown("fast"); - } else { - dropdown_ul.show(); - } - } else { - if(settings.noResultsText) { - dropdown.html("<p>"+settings.noResultsText+"</p>"); - show_dropdown(); - } - } - } - - // Highlight an item in the results dropdown - function select_dropdown_item (item) { - if(item) { - if(selected_dropdown_item) { - deselect_dropdown_item($(selected_dropdown_item)); - } - - item.addClass(settings.classes.selectedDropdownItem); - selected_dropdown_item = item.get(0); - } - } - - // Remove highlighting from an item in the results dropdown - function deselect_dropdown_item (item) { - item.removeClass(settings.classes.selectedDropdownItem); - selected_dropdown_item = null; - } - - // Do a search and show the "searching" dropdown if the input is longer - // than settings.minChars - function do_search() { - var query = input_box.val().toLowerCase(); - - if(query && query.length) { - if(selected_token) { - deselect_token($(selected_token), POSITION.AFTER); - } - - if(query.length >= settings.minChars) { - show_dropdown_searching(); - clearTimeout(timeout); - - timeout = setTimeout(function(){ - run_search(query); - }, settings.searchDelay); - } else { - hide_dropdown(); - } - } - } - - // Do the actual search - function run_search(query) { - var cache_key = query + computeURL(); - var cached_results = cache.get(cache_key); - if(cached_results) { - populate_dropdown(query, cached_results); - } else { - // Are we doing an ajax search or local data search? - if(settings.url) { - var url = computeURL(); - // Extract exisiting get params - var ajax_params = {}; - ajax_params.data = {}; - if(url.indexOf("?") > -1) { - var parts = url.split("?"); - ajax_params.url = parts[0]; - - var param_array = parts[1].split("&"); - $.each(param_array, function (index, value) { - var kv = value.split("="); - ajax_params.data[kv[0]] = kv[1]; - }); - } else { - ajax_params.url = url; - } - - // Prepare the request - ajax_params.data[settings.queryParam] = query; - ajax_params.type = settings.method; - ajax_params.dataType = settings.contentType; - if(settings.crossDomain) { - ajax_params.dataType = "jsonp"; - } - - // Attach the success callback - ajax_params.success = function(results) { - if($.isFunction(settings.onResult)) { - results = settings.onResult.call(hidden_input, results); - } - cache.add(cache_key, settings.jsonContainer ? results[settings.jsonContainer] : results); - - // only populate the dropdown if the results are associated with the active search query - if(input_box.val().toLowerCase() === query) { - populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results); - } - }; - - // Make the request - $.ajax(ajax_params); - } else if(settings.local_data) { - // Do the search through local data - var results = $.grep(settings.local_data, function (row) { - return row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) > -1; - }); - - if($.isFunction(settings.onResult)) { - results = settings.onResult.call(hidden_input, results); - } - cache.add(cache_key, results); - populate_dropdown(query, results); - } - } - } - - // compute the dynamic URL - function computeURL() { - var url = settings.url; - if(typeof settings.url == 'function') { - url = settings.url.call(); - } - return url; - } -}; - -// Really basic cache for the results -$.TokenList.Cache = function (options) { - var settings = $.extend({ - max_size: 500 - }, options); - - var data = {}; - var size = 0; - - var flush = function () { - data = {}; - size = 0; - }; - - this.add = function (query, results) { - if(size > settings.max_size) { - flush(); - } - - if(!data[query]) { - size += 1; - } - - data[query] = results; - }; - - this.get = function (query) { - return data[query]; - }; -}; -}(jQuery)); diff --git a/app/assets/stylesheets/main/routes.css.scss b/app/assets/stylesheets/main/routes.css.scss index 2d2d53a7b..aec3b2cee 100644 --- a/app/assets/stylesheets/main/routes.css.scss +++ b/app/assets/stylesheets/main/routes.css.scss @@ -15,19 +15,18 @@ #stop_points .nested-fields { ol { margin-left: 25%; - i.fa { margin-right: 10px;} + i.fa { margin-right: 5px;} - li { - display: inline; + .search_stop_area { + margin-bottom: 0px !important; + } - .token-input-list { - overflow: visible; - .token-input-token { - p { margin: 0px 0px !important; } - } - } + div.resize{ + height: 40px; + line-height: 40px; + font-size: 16px; } - } + } } #stop_points .links { diff --git a/app/assets/stylesheets/vendor/token-input.css b/app/assets/stylesheets/vendor/token-input.css index 5fccc6a38..64b1493e1 100644 --- a/app/assets/stylesheets/vendor/token-input.css +++ b/app/assets/stylesheets/vendor/token-input.css @@ -30,17 +30,20 @@ ul.token-input-list li input { ul.token-input-disabled, ul.token-input-disabled li input { - background-color: #E8E8E8; + background-color: #E8E8E8; } ul.token-input-disabled li.token-input-token { - background-color: #D9E3CA; - color: #7D7D7D + background-color: #D9E3CA; } ul.token-input-disabled li.token-input-token span { - color: #CFCFCF; - cursor: default; + color: $gray; + cursor: default; +} + +ul.token-input-disabled li.token-input-token span.token-input-delete-token{ + display: none; } li.token-input-token { @@ -64,17 +67,16 @@ li.token-input-token p { li.token-input-token span.token-input-delete-token { float: right; - color: #777; cursor: pointer; } li.token-input-selected-token { - background-color: #08844e; - color: #fff; + background-color: $brand-primary; + //color: $gray; } li.token-input-selected-token span { - color: #bbb; + //color: #bbb; } div.token-input-dropdown { diff --git a/app/inputs/search_stop_area_input.rb b/app/inputs/search_stop_area_input.rb index 2365947d0..aa5568541 100644 --- a/app/inputs/search_stop_area_input.rb +++ b/app/inputs/search_stop_area_input.rb @@ -38,6 +38,7 @@ class SearchStopAreaInput < Formtastic::Inputs::SearchInput }; $('##{dom_id}').tokenInput('#{options[:json]}', { + disabled: #{options[:disabled] || false}, crossDomain: false, tokenLimit: #{tokenLimit}, minChars: 2, @@ -46,7 +47,7 @@ class SearchStopAreaInput < Formtastic::Inputs::SearchInput noResultsText: '#{options[:no_result_text]}', searchingText: '#{options[:searching_text]}', resultsFormatter: item_format, - tokenFormatter: item_format + tokenFormatter: item_format, }); });").html_safe) end @@ -60,11 +61,12 @@ class SearchStopAreaInput < Formtastic::Inputs::SearchInput end end - def input_html_options + def input_html_options + css_class = super[:class] super.merge({ :required => nil, :autofocus => nil, - :class => 'token-input', + :class => "#{css_class} token-input", 'data-model-name' => object.class.model_name.human }) end diff --git a/app/views/routes/_form.html.erb b/app/views/routes/_form.html.erb index 63ee8cbe2..b6c4a8c24 100644 --- a/app/views/routes/_form.html.erb +++ b/app/views/routes/_form.html.erb @@ -14,7 +14,7 @@ <%= render "stop_point_fields", :f => p, :test1 => "oiuoiu" %> <% end %> <div class="links"> - <%= link_to_add_association t("routes.actions.add_stop_point"), form, :stop_points, :class => 'add_stop_point' %> + <%= link_to_add_association t("routes.actions.add_stop_point"), form, :stop_points, :class => 'add_stop_point add' %> <br/> <%= link_to t('routes.actions.new_stop_point'), new_referential_stop_area_path(@referential), {:class => "add", :target => "_blank"} %> </div> @@ -59,39 +59,6 @@ $(document).ready( function() { // console.log( "before-remove"); // console.log( stop_point_ids); }; - var stop_area_selection_token_input = function( element ) { - var item_name = function( item){ - var result = item.name; - if ( item.registration_number !=null && item.registration_number.length > 0) { - result += ' (' + item.registration_number + ')'; - } - return result; - }; - var item_format = function( item ){ - var info = ''; - if ( item.zip_code != null ) { - info += item.zip_code + ' '; - } - if ( item.city_name != null ) { - info += item.city_name; - } - return '<li><div class=\"name\">' + item_name( item) + '</div><div class=\"info\">' + item.area_type + '</div><div class=\"info\">' + info + '</div></li>' - }; - element.tokenInput('<%= referential_autocomplete_stop_areas_path(@referential, :format => :json)+"?filter=physical" %>', - { crossDomain: false, - tokenLimit: 1, - minChars: 3, - hintText: '<%= t('search_hint') %>', - noResultsText: '<%= t('no_result_text') %>', - searchingText: '<%= t('searching_term') %>', - resultsFormatter: item_format , - tokenFormatter: item_format - }); - }; - - $( ".new_stop_point" ).each( function(index, element){ - stop_area_selection_token_input( $(element)) - }); $('#stop_points').sortable({ axis: 'y', @@ -109,8 +76,8 @@ $(document).ready( function() { order_position(); } }); + $('#stop_points').bind("cocoon:after-insert", function(event, insertedItem) { - stop_area_selection_token_input( insertedItem.find( ".new_stop_point" )); var new_stop_count = $('div.nested-fields.stop_point').size(); var cocoonId = insertedItem.find("input.new_stop_point").attr("id").match( /route_stop_points_attributes_(\d+)_stop_area_id/)[1]; diff --git a/app/views/routes/_stop_point_fields.html.erb b/app/views/routes/_stop_point_fields.html.erb index e8b18fa87..d90444b03 100644 --- a/app/views/routes/_stop_point_fields.html.erb +++ b/app/views/routes/_stop_point_fields.html.erb @@ -1,17 +1,19 @@ -<div class="nested-fields stop_point"> +<div class="nested-fields stop_point row"> <%= f.inputs do %> + <div class="col-md-1 resize"> <%= link_to_remove_association "<i class='fa fa-trash-o'></i>".html_safe, f %> <span class="handle" alt="<%= t('stop_points.index.move') %>" title="<%= t('stop_points.index.move') %>" ><i class='fa fa-arrows'></i></span> + </div> + <div class="col-md-11"> <% if f.object.stop_area.nil? || f.object.new_record? %> <%= f.input :id, :as => :hidden, :input_html => { :class => "stop_point_id added_stop_point", :value => "" } %> <%= f.input :position, :as => :hidden, :input_html => { :class => "position" } %> - <% data_pre = (f.object.stop_area.nil?) ? [] : [ :id => f.object.stop_area.id, :name => "#{f.object.stop_area.name}" ] %> - <%= f.input :stop_area_id, :label => false, :input_html => { :class => "new_stop_point stop_area_id", :"data-pre" => data_pre.to_json } %> + <%= f.input :stop_area_id, :label => false, :as => :search_stop_area, :json => referential_autocomplete_stop_areas_path(@referential, :format => :json)+"?filter=physical", :hint_text => t('search_hint'), :no_result_text => t('no_result_text'),:searching_text => t('searching_term'), :tokenLimit => 1, :input_html => { :class => "new_stop_point stop_area_id", :"data-pre" => Rabl::Renderer.new('autocomplete_stop_areas/index', [f.object.stop_area].compact, :view_path => 'app/views', :format => :json, :scope => self ).render } %> <% else %> <%= f.input :id, :as => :hidden, :input_html => { :class => "stop_point_id" } %> <%= f.input :position, :as => :hidden, :input_html => { :class => "position" } %> - <%= f.input :stop_area_id, :as => :hidden, :input_html => { :class => "stop_area_id"} %> - <%= f.object.stop_area.name %> + <%= f.input :stop_area_id, :label => false, :as => :search_stop_area, :json => referential_autocomplete_stop_areas_path(@referential, :format => :json)+"?filter=physical", :hint_text => t('search_hint'), :no_result_text => t('no_result_text'),:searching_text => t('searching_term'), :tokenLimit => 1, :disabled => true, :input_html => { :class => "stop_area_id", :"data-pre" => Rabl::Renderer.new('autocomplete_stop_areas/index', [f.object.stop_area].compact, :view_path => 'app/views', :format => :json, :scope => self ).render } %> <% end %> - <% end %> - </div> + </div> + <% end %> +</div> |