diff --git a/component.json b/component.json index d5c697ed50..454964057a 100644 --- a/component.json +++ b/component.json @@ -24,6 +24,6 @@ "js-fixtures": "https://github.com/badunk/js-fixtures/archive/master.zip", "bootstrap-multiselect": "https://github.com/davidstutz/bootstrap-multiselect.git", "zxcvbn" : "https://github.com/lowe/zxcvbn.git", - "geonames-server-jquery-plugin" : "~0.1.0" + "geonames-server-jquery-plugin" : "~0.2.0" } } diff --git a/lib/conf.d/minifyGroupsConfig.php b/lib/conf.d/minifyGroupsConfig.php index f6cb18f845..9734b6f1cb 100644 --- a/lib/conf.d/minifyGroupsConfig.php +++ b/lib/conf.d/minifyGroupsConfig.php @@ -13,6 +13,7 @@ $groups = array( '//assets/normalize-css/normalize.css', '//skins/build/login.css', '//assets/font-awesome/css/font-awesome.css', + '//assets/jquery.ui/themes/base/jquery.ui.autocomplete.css' ), 'authentication' => array( '//assets/modernizr/modernizr.js', diff --git a/templates/web/account/access.html.twig b/templates/web/account/access.html.twig index 588f2497c3..7743972a5e 100644 --- a/templates/web/account/access.html.twig +++ b/templates/web/account/access.html.twig @@ -6,7 +6,7 @@ {% set selected = "access" %} -{% block content %} +{% block content_account %}
diff --git a/templates/web/account/account.html.twig b/templates/web/account/account.html.twig index d61437c31b..41757644ed 100644 --- a/templates/web/account/account.html.twig +++ b/templates/web/account/account.html.twig @@ -4,12 +4,47 @@ {% set selected = "informations" %} -{% block head %} +{% block stylesheet %} + {{ parent() }} - +{% endblock %} +{% block javascript %} + {{ parent() }} + {% endblock %} @@ -17,7 +52,7 @@ {% trans "login:: Mon compte" %} {% endblock %} -{% block content %} +{% block content_account %}
{{ auth_macro.flashes() }} @@ -94,7 +129,7 @@
- +

diff --git a/templates/web/account/authorized_apps.html.twig b/templates/web/account/authorized_apps.html.twig index 5d7a65ccea..18ed38a71b 100644 --- a/templates/web/account/authorized_apps.html.twig +++ b/templates/web/account/authorized_apps.html.twig @@ -6,7 +6,7 @@ {% set selected = "applications" %} -{% block content %} +{% block content_account %}
diff --git a/templates/web/account/base.html.twig b/templates/web/account/base.html.twig index 046d702317..14341c611c 100644 --- a/templates/web/account/base.html.twig +++ b/templates/web/account/base.html.twig @@ -1,13 +1,17 @@ - - - {{ app["phraseanet.registry"].get("GV_homeTitle") }} {% block title %}{% endblock %} - - - {% block head %}{% endblock %} - +{% set jquery_theme = 'dark-hive' %} - -
+{% extends "common/index_bootstrap.html.twig" %} + +{% block stylesheet %} + +{% endblock %} + +{% block javascript %} + +{% endblock %} + +{% block content %} +
{% block menu %} @@ -29,7 +33,7 @@
- {% block content %}{% endblock %} + {% block content_account %}{% endblock %}
@@ -42,5 +46,4 @@
{% block scripts %}{% endblock %} - - +{% endblock %} diff --git a/templates/web/account/reset-email.html.twig b/templates/web/account/reset-email.html.twig index 689f66761e..d8e40e01ed 100644 --- a/templates/web/account/reset-email.html.twig +++ b/templates/web/account/reset-email.html.twig @@ -12,7 +12,7 @@ {% set selected = "" %} -{% block content %} +{% block content_account %}
{{ auth_macro.flashes() }} diff --git a/templates/web/account/sessions.html.twig b/templates/web/account/sessions.html.twig index f203ed4051..8cd9392c75 100644 --- a/templates/web/account/sessions.html.twig +++ b/templates/web/account/sessions.html.twig @@ -6,7 +6,7 @@ {% set selected = "sessions" %} -{% block content %} +{% block content_account %}
diff --git a/templates/web/admin/editusers.html.twig b/templates/web/admin/editusers.html.twig index 7efae926b5..96fc7a5ae3 100644 --- a/templates/web/admin/editusers.html.twig +++ b/templates/web/admin/editusers.html.twig @@ -1,5 +1,4 @@ {% macro format_checkbox(admin, right, name, users, type) %} - {% set id = right['base_id'] %} {% set class = 'base_id' %} {% if type == 'sbas' %} @@ -30,7 +29,7 @@
{% else %} -
+
{% endif %} @@ -42,7 +41,7 @@
{% else %} -
+
{% endif %} @@ -91,14 +90,8 @@ z-index:1500; } - -
+
  • @@ -570,50 +563,80 @@
- + diff --git a/templates/web/common/dialog_export.html.twig b/templates/web/common/dialog_export.html.twig index 059169e2eb..3573749362 100644 --- a/templates/web/common/dialog_export.html.twig +++ b/templates/web/common/dialog_export.html.twig @@ -613,7 +613,28 @@ dialog.Close(); }); - initialize_geoname_field($('#command_geoname_field')); + var geocompleter = $('#command_geoname_field').geocompleter({ + "server": "{{ app['phraseanet.registry'].get('GV_i18n_service') }}", + "limit": 40 + }); + + geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) { + $(this).addClass('input-loading'); + $(this).removeClass('input-error'); + }); + + geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) { + $(this).removeClass('input-loading'); + }); + + geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) { + $(this).removeClass('input-loading'); + }); + + geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) { + $(this).removeClass('input-loading'); + $(this).addClass('input-error'); + }); $('#download .download_button').bind('click',function(){ if(!check_subdefs($('#download'))) diff --git a/templates/web/developers/application.html.twig b/templates/web/developers/application.html.twig index 69be12dc5c..c8e8735399 100644 --- a/templates/web/developers/application.html.twig +++ b/templates/web/developers/application.html.twig @@ -6,7 +6,7 @@ {% set selected = "" %} -{% block content %} +{% block content_account %}

{% trans "Application" %}

diff --git a/templates/web/developers/application_form.html.twig b/templates/web/developers/application_form.html.twig index e435fda982..4f3b6a4523 100644 --- a/templates/web/developers/application_form.html.twig +++ b/templates/web/developers/application_form.html.twig @@ -44,7 +44,7 @@ {% endif %} {% endmacro %} -{% block content %} +{% block content_account %} {% if form is none %} {% set name, description, website, callback = "", "", "", ""%} diff --git a/templates/web/developers/applications.html.twig b/templates/web/developers/applications.html.twig index 740cd30e11..20ef14bcb8 100644 --- a/templates/web/developers/applications.html.twig +++ b/templates/web/developers/applications.html.twig @@ -6,7 +6,7 @@ {% set selected = "developer" %} -{% block content %} +{% block content_account %}
diff --git a/templates/web/login/register-classic.html.twig b/templates/web/login/register-classic.html.twig index dd53d8bef7..b3c811343e 100644 --- a/templates/web/login/register-classic.html.twig +++ b/templates/web/login/register-classic.html.twig @@ -30,6 +30,7 @@ name="registerForm" method="POST" action="{{ path("login_register_classic") }}" + data-geonames-server-adress="{{ app['phraseanet.registry'].get('GV_i18n_service') }}" > {% if form.vars.errors|length > 0 %}
diff --git a/templates/web/prod/User/Add.html.twig b/templates/web/prod/User/Add.html.twig index ad1909cfc1..5b303b8a3d 100644 --- a/templates/web/prod/User/Add.html.twig +++ b/templates/web/prod/User/Add.html.twig @@ -1,103 +1,129 @@ {# designed to be printed in a small box #}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - -
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+a + + diff --git a/www/scripts/apps/login/home/config.js b/www/scripts/apps/login/home/config.js index 29cc2c52c7..34687b0bfb 100644 --- a/www/scripts/apps/login/home/config.js +++ b/www/scripts/apps/login/home/config.js @@ -17,13 +17,18 @@ require.config({ backbone: "../assets/backbone-amd/backbone", i18n: "../assets/i18next/release/i18next.amd-1.6.2.min", bootstrap: "../skins/build/bootstrap/js/bootstrap.min", - multiselect: "../assets/bootstrap-multiselect/js/bootstrap-multiselect" + multiselect: "../assets/bootstrap-multiselect/js/bootstrap-multiselect", + "jquery.geocompleter": "../assets/geonames-server-jquery-plugin/jquery.geonames" }, shim: { bootstrap : ["jquery"], jqueryui: { deps: ["jquery"] }, + "jquery.geocompleter" : { + deps: ['jquery'], + exports: 'jQuery.fn.geocompleter' + }, multiselect: { deps: ["jquery", "bootstrap"] } diff --git a/www/scripts/apps/login/home/register.js b/www/scripts/apps/login/home/register.js index 1ed2f3ab08..413b0ec240 100644 --- a/www/scripts/apps/login/home/register.js +++ b/www/scripts/apps/login/home/register.js @@ -12,7 +12,9 @@ require([ "jquery", "i18n", "apps/login/home/common", - "common/forms/views/formType/passwordSetter" + "common/forms/views/formType/passwordSetter", + "jqueryui", + "jquery.geocompleter" ], function($, i18n, Common, RegisterForm) { var fieldsConfiguration = []; @@ -80,10 +82,57 @@ require([ } }); + var $form = $("form[name=registerForm]"); + new RegisterForm({ - el : $("form[name=registerForm]"), + el : $form, rules: rules }); + + var geocompleter = $("#geonameid").geocompleter({ + "server": $form.data("geonames-server-adress"), + "limit": 40 + }); + + // Positioning menu below input + geocompleter.geocompleter("autocompleter", "option", "position", { + "of": geocompleter.closest(".input-table"), + "my": "left top", + "at": "left bottom" + }); + + // On focus add select-state + geocompleter.geocompleter("autocompleter", "on", "autocompletefocus", function(event, ui) { + $("li", $(event.originalEvent.target)).closest("li").removeClass("selected"); + $("a.ui-state-active, a.ui-state-hover, a.ui-state-focus", $(event.originalEvent.target)).closest("li").addClass("selected"); + }); + + // On search request add loading-state + geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) { + $(this).addClass('input-loading'); + $(this).removeClass('input-error'); + }); + + // On open menu calculate max-width + geocompleter.geocompleter("autocompleter", "on", "autocompleteopen", function(event, ui) { + $(this).autocomplete("widget").css("min-width", geocompleter.closest(".input-table").outerWidth()); + }); + + // On response remove loading-state + geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) { + $(this).removeClass('input-loading'); + }); + + // On close menu remove loading-state + geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) { + $(this).removeClass('input-loading'); + }); + + // On request error add error-state + geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) { + $(this).removeClass('input-loading'); + $(this).addClass('input-error'); + }); }); }); }); diff --git a/www/skins/admin/editusers.js b/www/skins/admin/editusers.js index 403f7febd6..6c82d25cd5 100644 --- a/www/skins/admin/editusers.js +++ b/www/skins/admin/editusers.js @@ -1,7 +1,4 @@ function ini_edit_usrs(){ - - initialize_geoname_field($('#user_infos_tab input.geoname_field')); - $('.users_col.options').bind('click', function(event){ $('#users_check_uncheck').remove(); event.stopPropagation(); diff --git a/www/skins/geonames/geonames.css b/www/skins/geonames/geonames.css index 3d9d04816e..4ae8f402f0 100644 --- a/www/skins/geonames/geonames.css +++ b/www/skins/geonames/geonames.css @@ -1,21 +1,52 @@ -.geoname_city_finder div.box{ - cursor:pointer; - text-align:left; - padding:3px ; - color:white; +.geocompleter-menu { + max-height: 180px; + overflow: auto; + background: #666; + box-shadow: 0 0 15px rgba(0, 0, 0, 1); + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 1); + -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 1); + list-style-type: none; } -.geoname_city_finder div.boxI{ - background-color:#666666; - border:1px solid #666666; +.geocompleter-menu li.ui-menu-item.selected { + border: 2px solid #46a546; } -.geoname_city_finder div.boxP{ - background-color:#444444; - border:1px solid #444444; +.geocompleter-menu .ui-menu-item a { + color: #fff; } -.geoname_city_finder div.box.selected{ - border:1px solid red; +.geocompleter-menu .ui-menu-item a.ui-state-focus, +.geocompleter-menu .ui-menu-item a.ui-state-hover, +.geocompleter-menu .ui-menu-item a.ui-state-active { + text-decoration: none; + background: none; + border:none; } + +.geocompleter-menu .ui-menu-item { + padding: 5px 10px; +} + +.geocompleter-menu .ui-menu-item:nth-child(odd) { + background: #444444; +} + +.geocompleter-menu .region { + font-size: 11px; + font-style: italic; + display: block; +} + +.geocompleter-menu .highlight { + background: #46a546; +} + +.geocompleter-input.input-loading { + background: url('/skins/icons/loaderFFF.gif') center right no-repeat; +} + +.geocompleter-input.input-error { + color: red !important; +} \ No newline at end of file diff --git a/www/skins/geonames/geonames.js b/www/skins/geonames/geonames.js deleted file mode 100644 index b099d685f9..0000000000 --- a/www/skins/geonames/geonames.js +++ /dev/null @@ -1,193 +0,0 @@ - -var ajaxGeoRunning = false; -var ajaxGeo = false; - -function initialize_geoname_field(box) -{ - $(box).bind('keyup', function(event) { - checkCity(event, $(this)); - return false; - }).bind('keydown', function(event) { - goCity(event, $(this)); - }).bind('focus', function(event) { - checkCity(event, $(this)); - return false; - }) .bind('blur', function() { - var city_finder = $(this).parent().find('.geoname_city_finder'); - if ($('div.box.selected', city_finder).length > 0) - { - selectCity($(this)); - } - else - { - if ($('div.box', city_finder).length > 0) - { - $(this).val(''); - } - $(this).parent().find('.geoname_city_finder').empty(); - } - - if (ajaxGeoRunning) { - ajaxGeo.abort(); - } - - ajaxGeoRunning = false; - - return false; - }); - - $(box).attr('autocomplete', 'off').addClass('geoname_initialized'); - - var form_name = $(box).attr('name'); - - $(box).attr('name', form_name + '_geoname_name'); - - $('
').insertAfter($(box)); - $('').insertAfter($(box)); - - var city_finder = $(box).parent().find('.geoname_city_finder'); -} - -function checkCity(event, keybox) -{ - var geoname_id = $(keybox).next().val(); - - var city_finder = $(keybox).parent().find('.geoname_city_finder'); - - var badCodes = [9, 16, 17, 18, 20, 27, 33, 34, 35, 36, 37, 39, 45, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123]; - - if ($.inArray(event.keyCode, badCodes) >= 0) - return false; - - if (event.keyCode == 40) - { - var el = $('div.box.selected', city_finder); - - el.removeClass('selected'); - - if (el.next(':not(.unselectable)').length == 0) - el = $('div.box:not(.unselectable):first', city_finder); - else - - el = el.next(':not(.unselectable)'); - el.addClass('selected'); - - city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2)); - - return false; - } - else - { - - if (event.keyCode == 38) - { - el = $('div.box.selected', city_finder); - el.removeClass('selected'); - if (el.prev(':not(.unselectable)').length == 0) - el = $('div.box:not(.unselectable):last', city_finder); - else - el = el.prev(':not(.unselectable)'); - el.addClass('selected'); - city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2)); - return false; - } - else - { - if (event.keyCode == 13) - { - event.preventDefault(); - return false; - } - else - { - $('div.box.selected', city_finder).removeClass('selected'); - } - } - } - - if ($.trim($(keybox).val()) == '') - { - $(keybox).next().val(''); - return; - } - - ajaxGeo = $.ajax({ - type: "POST", - url: "/include/geonames.feedback.php", - dataType: 'html', - data: { - action: "FIND", - city: $(keybox).val() - }, - beforeSend: function() { - if (ajaxGeoRunning) - ajaxGeo.abort(); - ajaxGeoRunning = true; - city_finder.css({ - top: ($(keybox).position().top + $(keybox).outerHeight()), - left: $(keybox).position().left - }) - city_finder.empty().append('
Running
'); - }, - success: function(data) { - ajaxGeoRunning = false; - city_finder.empty().append(data); - if (geoname_id != '') - $('div:not(.unselectable):first', city_finder).addClass('selected'); - else - { - var geo_el = $('#geo_' + geoname_id); - if (geo_el.length > 0) - { - geo_el.addClass('selected'); - city_finder.scrollTop(city_finder.scrollTop() + geo_el.position().top - ((city_finder.height() - geo_el.outerHeight()) / 2)); - } - } - $('div.box:not(.unselectable)', city_finder).bind('mouseover', function() { - $('div.selected', city_finder).removeClass('selected'); - $(this).addClass('selected'); - }).bind('click', function() { - selectCity(keybox); - }); - return false; - } - , error: function() { - return; - } - , timeout: function() { - return; - } - - }); - return false; -} - -function goCity(event, keybox) -{ - if (event.keyCode == 13) - { - event.preventDefault(); - selectCity(keybox); - return false; - } -} -function selectCity(keybox) -{ - var city_finder = $(keybox).parent().find('.geoname_city_finder') - var val = '', - id = '', - el = $('div.selected div:first', city_finder); - if (el.length == 0) - el = false; - else - { - val = el.text(); - id = $('div.selected', city_finder).attr('id').substr(4); - } - $(keybox).val(val); - $(keybox).next().val(id); - city_finder.empty(); -// $(keybox).trigger('blur'); - - $(keybox).parent().find('.geoname_city_finder').empty(); -} \ No newline at end of file diff --git a/www/skins/login/less/skin.less b/www/skins/login/less/skin.less index 0beb044be1..455e5f0289 100644 --- a/www/skins/login/less/skin.less +++ b/www/skins/login/less/skin.less @@ -797,6 +797,50 @@ form[name=registerForm] .multiselect-group { left: 0; } +.geocompleter-menu { + max-height: 180px; + overflow: auto; + background: @backgroundSideBar; + .glow(@sideBarGlow); + list-style-type: none; +} + +.geocompleter-menu .ui-menu-item.selected { + border: 2px solid @green; +} + +.geocompleter-menu .ui-menu-item a.ui-state-focus, +.geocompleter-menu .ui-menu-item a.ui-state-hover, +.geocompleter-menu .ui-menu-item a.ui-state-active { + text-decoration: none; +} + +.geocompleter-menu .ui-menu-item { + padding: 5px 10px; +} + +.geocompleter-menu .ui-menu-item:nth-child(odd) { + background: lighten(@backgroundSideBar, 25%); +} + +.geocompleter-menu .region { + font-size: @fontSizeMini; + font-style: italic; + display: block; +} + +.geocompleter-menu .highlight { + background: @green; +} + +.geocompleter-input.input-loading { + background: url('/skins/icons/loader-black.gif') @black center right no-repeat; +} + +.geocompleter-input.input-error { + color: red !important; +} + /** IE Fixes */ .lt-ie8 authentication-sidebar-language .caret {