From 9303c3b794de3c5e00c202e4c72e69823703d5aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Wed, 30 Nov 2016 23:00:11 +0100 Subject: [PATCH 1/9] Separation of HTML and JAVASCRIPT --- DependencyInjection/Compiler/FormPass.php | 28 ++++ .../OhGoogleMapFormTypeExtension.php | 1 + Form/Type/GoogleMapType.php | 25 +-- OhGoogleMapFormTypeBundle.php | 14 +- README.md | 158 +++++++++++------- Resources/config/config.yml | 0 Resources/config/services.xml | 2 + Resources/config/twig.xml | 14 ++ Resources/views/Form/div_layout.html.twig | 20 +++ Resources/views/Form/fields.html.twig | 1 - Resources/views/Form/google_maps.html.twig | 56 ------- Resources/views/Form/jquery_layout.html.twig | 54 ++++++ Twig/Extension/FormExtension.php | 61 +++++++ 13 files changed, 303 insertions(+), 131 deletions(-) create mode 100644 DependencyInjection/Compiler/FormPass.php delete mode 100755 Resources/config/config.yml create mode 100644 Resources/config/twig.xml create mode 100644 Resources/views/Form/div_layout.html.twig delete mode 100755 Resources/views/Form/fields.html.twig delete mode 100755 Resources/views/Form/google_maps.html.twig create mode 100644 Resources/views/Form/jquery_layout.html.twig create mode 100644 Twig/Extension/FormExtension.php diff --git a/DependencyInjection/Compiler/FormPass.php b/DependencyInjection/Compiler/FormPass.php new file mode 100644 index 0000000..b8ab9fc --- /dev/null +++ b/DependencyInjection/Compiler/FormPass.php @@ -0,0 +1,28 @@ + + */ +class FormPass implements CompilerPassInterface +{ + /** + * {@inheritdoc} + */ + public function process(ContainerBuilder $container) + { + $resources = $container->getParameter('twig.form.resources'); + + foreach (array('div', 'jquery') as $template) { + $resources[] = 'OhGoogleMapFormTypeBundle:Form:' . $template . '_layout.html.twig'; + } + + $container->setParameter('twig.form.resources', $resources); + } +} diff --git a/DependencyInjection/OhGoogleMapFormTypeExtension.php b/DependencyInjection/OhGoogleMapFormTypeExtension.php index 25282f4..9104cc3 100644 --- a/DependencyInjection/OhGoogleMapFormTypeExtension.php +++ b/DependencyInjection/OhGoogleMapFormTypeExtension.php @@ -23,6 +23,7 @@ public function load(array $configs, ContainerBuilder $container) $config = $this->processConfiguration($configuration, $configs); $loader = new Loader\XmlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config')); + $loader->load('twig.xml'); $loader->load('services.xml'); } } diff --git a/Form/Type/GoogleMapType.php b/Form/Type/GoogleMapType.php index 25cbe22..8cdd72d 100755 --- a/Form/Type/GoogleMapType.php +++ b/Form/Type/GoogleMapType.php @@ -30,19 +30,20 @@ public function buildForm(FormBuilderInterface $builder, array $options) public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( - 'type' => 'text', // the types to render the lat and lng fields as - 'options' => array(), // the options for both the fields - 'lat_options' => array(), // the options for just the lat field - 'lng_options' => array(), // the options for just the lng field - 'lat_name' => 'lat', // the name of the lat field - 'lng_name' => 'lng', // the name of the lng field + 'type' => 'text', // the types to render the lat and lng fields as + 'options' => array(), // the options for both the fields + 'lat_options' => array(), // the options for just the lat field + 'lng_options' => array(), // the options for just the lng field + 'lat_name' => 'lat', // the name of the lat field + 'lng_name' => 'lng', // the name of the lng field 'error_bubbling' => false, - 'map_width' => 300, // the width of the map - 'map_height' => 300, // the height of the map - 'default_lat' => 51.5, // the starting position on the map - 'default_lng' => -0.1245, // the starting position on the map - 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) - 'include_gmaps_js'=>true // is this the best place to include the google maps javascript? + 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) + 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) + 'default_lat' => 51.5, // the starting position on the map + 'default_lng' => -0.1245, // the starting position on the map + 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) + 'include_gmaps_js'=>true, // is this the best place to include the google maps javascript? + 'js_inside_html' => false // if you don't have the possibility to include form_javascript(), for example, in Sonata Admin Class, set true this option )); } diff --git a/OhGoogleMapFormTypeBundle.php b/OhGoogleMapFormTypeBundle.php index ff4f2bb..d18d89a 100755 --- a/OhGoogleMapFormTypeBundle.php +++ b/OhGoogleMapFormTypeBundle.php @@ -3,7 +3,17 @@ namespace Oh\GoogleMapFormTypeBundle; use Symfony\Component\HttpKernel\Bundle\Bundle; +use Symfony\Component\DependencyInjection\ContainerBuilder; +use Oh\GoogleMapFormTypeBundle\DependencyInjection\Compiler\FormPass; + +class OhGoogleMapFormTypeBundle extends Bundle { + + /** + * {@inheritdoc} + */ + public function build(ContainerBuilder $container) { + parent::build($container); + $container->addCompilerPass(new FormPass()); + } -class OhGoogleMapFormTypeBundle extends Bundle -{ } diff --git a/README.md b/README.md index 28c09ac..26e60b7 100755 --- a/README.md +++ b/README.md @@ -10,6 +10,10 @@ This bundle is compatible with Symfony 2.1. Add the following to your `composer. "oh/google-map-form-type-bundle": "dev-master" +or execute: + + php composer.phar require oh/google-map-form-type-bundle + Register the bundle in your `app/AppKernel.php`: ```php @@ -30,85 +34,124 @@ Add OhGoogleMapFormTypeBundle to assetic assetic: bundles: [ 'OhGoogleMapFormTypeBundle' ] ``` +After this, you have to install assets: + + php app/console assets:install --symlink Usage ------------- +------- This bundle contains a new FormType called GoogleMapType which can be used in your forms like so: $builder->add('latlng', 'oh_google_maps'); On your model you will have to process the latitude and longitude array +``` php +// Your model eg, src/My/Location/Entity/MyLocation.php +use Symfony\Component\Validator\Constraints as Assert; +use Oh\GoogleMapFormTypeBundle\Validator\Constraints as OhAssert; - // Your model eg, src/My/Location/Entity/MyLocation.php - use Symfony\Component\Validator\Constraints as Assert; - use Oh\GoogleMapFormTypeBundle\Validator\Constraints as OhAssert; +class MyLocation +{ + // ... include your lat and lng fields here - class MyLocation + public function setLatLng($latlng) { - // ... include your lat and lng fields here - - public function setLatLng($latlng) - { - $this->setLat($latlng['lat']); - $this->setLng($latlng['lng']); - return $this; - } - - /** - * @Assert\NotBlank() - * @OhAssert\LatLng() - */ - public function getLatLng() - { - return array('lat'=>$this->getLat(),'lng'=>$this->getLng()); - } + $this->setLat($latlng['lat']); + $this->setLng($latlng['lng']); + return $this; + } + /** + * @Assert\NotBlank() + * @OhAssert\LatLng() + */ + public function getLatLng() + { + return array('lat'=>$this->getLat(),'lng'=>$this->getLng()); } -Include the twig template for the layout. It's generally a good idea to overwrite the form template in your own twig template +} +``` - # your config.yml - twig: - form: - resources: - # This uses the default - you can put your own one here - - 'OhGoogleMapFormTypeBundle:Form:fields.html.twig' +**Add form_javascript** this principle is to separate the javascript and html. This allows better integration of web pages. Inspired by its use [DatetimepickerBundle](https://github.com/stephanecollot/DatetimepickerBundle) -If you are intending to override some of the elements in the template then you can do so by extending the default `google_maps.html.twig`. This example adds a callback to the javascript when a new map position is selected. +### Example: - {# your template which is inluded in the config.yml (above) - eg src/My/Location/Resources/views/Form/fields.html.twig #} - {% extends "OhGoogleMapFormTypeBundle:Form:google_maps.html.twig" %} - {% block oh_google_maps_callback %} - - {% endblock %} +``` twig +{% block javascripts %} + + + {{ form_javascript(form) }} +{% endblock %} +{% block body %} +
+ {{ form_widget(form) }} + + +
+{% endblock %} +``` Options ------- There are a number of options, mostly self-explanatory - array( - 'type' => 'text', // the types to render the lat and lng fields as - 'options' => array(), // the options for both the fields - 'lat_options' => array(), // the options for just the lat field - 'lng_options' => array(), // the options for just the lng field - 'lat_name' => 'lat', // the name of the lat field - 'lng_name' => 'lng', // the name of the lng field - 'map_width' => 300, // the width of the map - 'map_height' => 300, // the height of the map - 'default_lat' => 51.5, // the starting position on the map - 'default_lng' => -0.1245, // the starting position on the map - 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) - 'include_gmaps_js'=>true // is this the best place to include the google maps javascript? - ) +``` php +array( + 'type' => 'text', // the types to render the lat and lng fields as + 'options' => array(), // the options for both the fields + 'lat_options' => array(), // the options for just the lat field + 'lng_options' => array(), // the options for just the lng field + 'lat_name' => 'lat', // the name of the lat field + 'lng_name' => 'lng', // the name of the lng field + 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) + 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) + 'default_lat' => 51.5, // the starting position on the map + 'default_lng' => -0.1245, // the starting position on the map + 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) + 'include_gmaps_js'=>true, // is this the best place to include the google maps javascript? + 'js_inside_html' => false // if you don't have the possibility to include form_javascript(), ie, in Sonata Admin Class, set true this option +) +``` + +### Twig customization: +You have 2 twig templates for the layout, for HTML and for JQUERY (js). It's generally a good idea to overwrite the form templates, especially HTML, in your own twig template. Place them on folder: `app/Resources/OhGoogleMapFormTypeBundle/views/Form/` + + - HTML: `vendor/oh/google-map-form-type-bundle/Oh/GoogleMapFormTypeBundle/Resources/views/Form/div_layout.html.twig` + - JQUERY (js): `vendor/oh/google-map-form-type-bundle/Oh/GoogleMapFormTypeBundle/Resources/views/Form/jquery_layout.html.twig` + +If you are intending to override some of the elements in the template JQUERY (js), then you can do so by extending the default `jquery_layout.html.twig`. This example adds a callback to the javascript when a new map position is selected. + +``` twig +{# your template which is inluded in app/Resources/OhGoogleMapFormTypeBundle/views/Form/ folder (above) #} +{% extends "OhGoogleMapFormTypeBundle:Form:jquery_layout.html.twig" %} +{% block oh_google_maps_callback %} + +{% endblock %} +``` + +If you have several forms with `oh_google_maps` types, you can override the templates in each one of them with `{% form_theme form 'AppBundle:Forms:your-twig.html.twig' %}` like this: + +``` twig +{% extends 'form_div_layout.html.twig' %} + +{% block oh_google_maps_html %} +
+
MY CUSTOM TEXT FOR CURRENT LOCATION +
+
+
+{% endblock %} +``` + Screenshots ------- @@ -118,11 +161,6 @@ Screenshots [Search locations](https://www.dropbox.com/s/qdft149ggyfil0p/location-form-search.png) [LatLng validation](https://www.dropbox.com/s/k0xqku5q2gv2nlo/location-form-validation.png) -Known problems -------- - -Because the form type template includes javascript, there's not yet a way to bunch it all together at the very bottom of the page, so it is included at the bottom of the field. This means that jquery and the javascript plugin in Resources/public/js needs to be included before the field. I'm not sure of a way around this, but I think it's going to be addressed in a later version of the form framework. - Credits ------- diff --git a/Resources/config/config.yml b/Resources/config/config.yml deleted file mode 100755 index e69de29..0000000 diff --git a/Resources/config/services.xml b/Resources/config/services.xml index 6cac9f7..8d15e3c 100644 --- a/Resources/config/services.xml +++ b/Resources/config/services.xml @@ -6,12 +6,14 @@ Oh\GoogleMapFormTypeBundle\Form\Type\GoogleMapType + + %type.oh_google_maps.form.options% \ No newline at end of file diff --git a/Resources/config/twig.xml b/Resources/config/twig.xml new file mode 100644 index 0000000..ca917c5 --- /dev/null +++ b/Resources/config/twig.xml @@ -0,0 +1,14 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/Resources/views/Form/div_layout.html.twig b/Resources/views/Form/div_layout.html.twig new file mode 100644 index 0000000..40c04f1 --- /dev/null +++ b/Resources/views/Form/div_layout.html.twig @@ -0,0 +1,20 @@ +{% block oh_google_maps_widget %} +
+ {% block oh_google_maps_html %} +
+
Current location +
+
+
+ {% endblock %} + {% block oh_google_maps_fields %} + {% for child in form %} + {{ form_row(child) }} + {% endfor %} + {% endblock %} +
+ + {% if js_inside_html %} + {% include "OhGoogleMapFormTypeBundle:Form:jquery_layout.html.twig" %} + {% endif %} +{% endblock %} \ No newline at end of file diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig deleted file mode 100755 index 76523b8..0000000 --- a/Resources/views/Form/fields.html.twig +++ /dev/null @@ -1 +0,0 @@ -{% extends "OhGoogleMapFormTypeBundle:Form:google_maps.html.twig" %} \ No newline at end of file diff --git a/Resources/views/Form/google_maps.html.twig b/Resources/views/Form/google_maps.html.twig deleted file mode 100755 index b4df551..0000000 --- a/Resources/views/Form/google_maps.html.twig +++ /dev/null @@ -1,56 +0,0 @@ -{% block oh_google_maps_widget %} -
- {% block oh_google_maps_html %} -
-
Current location -
-
-
- {% endblock %} - {% block oh_google_maps_fields %} - {% for child in form %} - {{ form_row(child) }} - {% endfor %} - {% endblock %} - {% block oh_google_maps_javascripts %} - {% if include_jquery %} - - {% endif %} - {% if include_gmaps_js %} - - {% endif %} - {% javascripts - '@OhGoogleMapFormTypeBundle/Resources/public/js/jquery.ohgooglemaps.js' - %} - - {% endjavascripts %} - {% endblock %} - {% block oh_google_maps_javascript %} - {% block oh_google_maps_callback %} - - {% endblock %} - - {% endblock %} -
-{% endblock %} diff --git a/Resources/views/Form/jquery_layout.html.twig b/Resources/views/Form/jquery_layout.html.twig new file mode 100644 index 0000000..54190e4 --- /dev/null +++ b/Resources/views/Form/jquery_layout.html.twig @@ -0,0 +1,54 @@ +{% block form_javascript %} + {% spaceless %} + {% for child in form %} + {{ form_javascript(child) }} + {% endfor %} + {% endspaceless %} +{% endblock form_javascript %} + +{% block field_javascript "" %} + +{% block button_javascript "" %} + +{% block oh_google_maps_javascript %} + + {% block oh_google_maps_javascripts %} + {% if include_jquery %} + + {% endif %} + {% if include_gmaps_js %} + + {% endif %} + {% javascripts + '@OhGoogleMapFormTypeBundle/Resources/public/js/jquery.ohgooglemaps.js' + %} + + {% endjavascripts %} + {% endblock %} + + + {% block oh_google_maps_callback %} + + {% endblock %} +{% endblock %} \ No newline at end of file diff --git a/Twig/Extension/FormExtension.php b/Twig/Extension/FormExtension.php new file mode 100644 index 0000000..8bbd38a --- /dev/null +++ b/Twig/Extension/FormExtension.php @@ -0,0 +1,61 @@ + + */ +class FormExtension extends \Twig_Extension +{ + /** + * This property is public so that it can be accessed directly from compiled + * templates without having to call a getter, which slightly decreases performance. + * + * @var \Symfony\Component\Form\FormRendererInterface + */ + public $renderer; + + public function __construct(TwigRendererInterface $renderer) + { + $this->renderer = $renderer; + } + + /** + * {@inheritdoc} + */ + public function getFunctions() + { + return array( + new \Twig_SimpleFunction('form_javascript', array($this, 'renderJavascript'), array('is_safe' => array('html'))) + ); + } + + /** + * Render Function Form Javascript + * + * @param FormView $view + * @param bool $prototype + * + * @return string + */ + public function renderJavascript(FormView $view, $prototype = false) + { + $block = $prototype ? 'javascript_prototype' : 'javascript'; + + return $this->renderer->searchAndRenderBlock($view, $block); + } + + /** + * {@inheritdoc} + */ + public function getName() + { + return 'oh.twig.extension.form'; + } +} + From ae48d22bebb55b3f0250d12a18ec4b092496c4e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Wed, 30 Nov 2016 23:02:34 +0100 Subject: [PATCH 2/9] fixed typo on README.md info --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 26e60b7..259e01a 100755 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ class MyLocation } ``` -**Add form_javascript** this principle is to separate the javascript and html. This allows better integration of web pages. Inspired by its use [DatetimepickerBundle](https://github.com/stephanecollot/DatetimepickerBundle) +**Add form_javascript** this principle is to separate the javascript and html. This allows better integration of web pages. Inspired by its use in [DatetimepickerBundle](https://github.com/stephanecollot/DatetimepickerBundle) ### Example: @@ -107,8 +107,8 @@ array( 'lng_options' => array(), // the options for just the lng field 'lat_name' => 'lat', // the name of the lat field 'lng_name' => 'lng', // the name of the lng field - 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) - 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) + 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) + 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) 'default_lat' => 51.5, // the starting position on the map 'default_lng' => -0.1245, // the starting position on the map 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) From e8f7dc22d9448beb69851ff14e2daffb6bfa54bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Wed, 30 Nov 2016 23:03:56 +0100 Subject: [PATCH 3/9] fixed typo on README.md info --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 259e01a..7fe35f3 100755 --- a/README.md +++ b/README.md @@ -101,19 +101,19 @@ There are a number of options, mostly self-explanatory ``` php array( - 'type' => 'text', // the types to render the lat and lng fields as - 'options' => array(), // the options for both the fields - 'lat_options' => array(), // the options for just the lat field - 'lng_options' => array(), // the options for just the lng field - 'lat_name' => 'lat', // the name of the lat field - 'lng_name' => 'lng', // the name of the lng field - 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) - 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) - 'default_lat' => 51.5, // the starting position on the map - 'default_lng' => -0.1245, // the starting position on the map - 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) - 'include_gmaps_js'=>true, // is this the best place to include the google maps javascript? - 'js_inside_html' => false // if you don't have the possibility to include form_javascript(), ie, in Sonata Admin Class, set true this option + 'type' => 'text', // the types to render the lat and lng fields as + 'options' => array(), // the options for both the fields + 'lat_options' => array(), // the options for just the lat field + 'lng_options' => array(), // the options for just the lng field + 'lat_name' => 'lat', // the name of the lat field + 'lng_name' => 'lng', // the name of the lng field + 'map_width' => '100%', // the width of the map, you must include units (ie, px or %) + 'map_height' => '300px', // the height of the map, you must include units (ie, px or %) + 'default_lat' => 51.5, // the starting position on the map + 'default_lng' => -0.1245, // the starting position on the map + 'include_jquery' => false, // jquery needs to be included above the field (ie not at the bottom of the page) + 'include_gmaps_js' => true, // is this the best place to include the google maps javascript? + 'js_inside_html' => false // if you don't have the possibility to include form_javascript(), ie, in Sonata Admin Class, set true this option ) ``` From e9ecb1ef3fe3365b3880b379ab9f34b0b7c89e72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Thu, 1 Dec 2016 01:15:59 +0100 Subject: [PATCH 4/9] prevent send form on Enter keypress in Search input. Now, on Enter in Search input force click on Search button --- Resources/views/Form/jquery_layout.html.twig | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Resources/views/Form/jquery_layout.html.twig b/Resources/views/Form/jquery_layout.html.twig index 54190e4..d023f11 100644 --- a/Resources/views/Form/jquery_layout.html.twig +++ b/Resources/views/Form/jquery_layout.html.twig @@ -40,6 +40,13 @@ 'lng_field': $('#{{ attribute(form, lng_name).vars.id }}'), 'callback': oh_google_maps_callback }); + + $('#{{ id }}_input').keypress(function (e) { + if (e.which === 13){ + $('#{{ id }}_search_button').trigger('click'); + e.preventDefault(); + } + }); }); From 714b8a45e300932249911ce2b6a441c4454fd833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Sat, 3 Dec 2016 00:05:31 +0100 Subject: [PATCH 5/9] FIX new var 'js_inside_html' --- Form/Type/GoogleMapType.php | 1 + 1 file changed, 1 insertion(+) diff --git a/Form/Type/GoogleMapType.php b/Form/Type/GoogleMapType.php index 8cdd72d..dd16c96 100755 --- a/Form/Type/GoogleMapType.php +++ b/Form/Type/GoogleMapType.php @@ -60,6 +60,7 @@ public function buildView(FormView $view, FormInterface $form, array $options) $view->vars['default_lng'] = $options['default_lng']; $view->vars['include_jquery'] = $options['include_jquery']; $view->vars['include_gmaps_js'] = $options['include_gmaps_js']; + $view->vars['js_inside_html'] = $options['js_inside_html']; } public function getParent() From 10825855ab9d63026ea14ad5972a9d88b4031fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Sat, 3 Dec 2016 01:43:05 +0100 Subject: [PATCH 6/9] bundle config to include Google Maps Api Key --- DependencyInjection/Configuration.php | 9 +++-- .../OhGoogleMapFormTypeExtension.php | 4 ++- README.md | 8 +++++ Resources/config/services.xml | 7 ++++ Resources/views/Form/jquery_layout.html.twig | 2 +- Twig/Extension/GlobalsExtension.php | 35 +++++++++++++++++++ 6 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 Twig/Extension/GlobalsExtension.php diff --git a/DependencyInjection/Configuration.php b/DependencyInjection/Configuration.php index 9a273b6..d85ad06 100644 --- a/DependencyInjection/Configuration.php +++ b/DependencyInjection/Configuration.php @@ -22,9 +22,12 @@ public function getConfigTreeBuilder() $rootNode = $treeBuilder->root('oh_google_map_form_type'); - // Here you should define the parameters that are allowed to - // configure your bundle. See the documentation linked above for - // more information on that topic. + $rootNode + ->children() + ->scalarNode('api_key') + ->isRequired() + ->end() + ->end(); return $treeBuilder; } diff --git a/DependencyInjection/OhGoogleMapFormTypeExtension.php b/DependencyInjection/OhGoogleMapFormTypeExtension.php index 9104cc3..b973d31 100644 --- a/DependencyInjection/OhGoogleMapFormTypeExtension.php +++ b/DependencyInjection/OhGoogleMapFormTypeExtension.php @@ -24,6 +24,8 @@ public function load(array $configs, ContainerBuilder $container) $loader = new Loader\XmlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config')); $loader->load('twig.xml'); - $loader->load('services.xml'); + $loader->load('services.xml'); + + $container->setParameter('api_key', $config['api_key']); } } diff --git a/README.md b/README.md index 7fe35f3..08680c9 100755 --- a/README.md +++ b/README.md @@ -34,6 +34,14 @@ Add OhGoogleMapFormTypeBundle to assetic assetic: bundles: [ 'OhGoogleMapFormTypeBundle' ] ``` +You might config your Google Maps Api Key. + +```yaml +# app/config/config.yml +oh_google_map_form_type: + api_key: "my-key" +``` + After this, you have to install assets: php app/console assets:install --symlink diff --git a/Resources/config/services.xml b/Resources/config/services.xml index 8d15e3c..aa6547a 100644 --- a/Resources/config/services.xml +++ b/Resources/config/services.xml @@ -6,6 +6,7 @@ Oh\GoogleMapFormTypeBundle\Form\Type\GoogleMapType + Oh\GoogleMapFormTypeBundle\Twig\Extension\GlobalsExtension @@ -15,5 +16,11 @@ %type.oh_google_maps.form.options% + + + + + %api_key% + \ No newline at end of file diff --git a/Resources/views/Form/jquery_layout.html.twig b/Resources/views/Form/jquery_layout.html.twig index d023f11..4bed754 100644 --- a/Resources/views/Form/jquery_layout.html.twig +++ b/Resources/views/Form/jquery_layout.html.twig @@ -17,7 +17,7 @@ {% endif %} {% if include_gmaps_js %} - + {% endif %} {% javascripts '@OhGoogleMapFormTypeBundle/Resources/public/js/jquery.ohgooglemaps.js' diff --git a/Twig/Extension/GlobalsExtension.php b/Twig/Extension/GlobalsExtension.php new file mode 100644 index 0000000..3dc2e08 --- /dev/null +++ b/Twig/Extension/GlobalsExtension.php @@ -0,0 +1,35 @@ + + */ + +class GlobalsExtension extends \Twig_Extension { + + /** + * + * @param string $apiKey + */ + public function __construct($apiKey) { + $this->apiKey = $apiKey; + } + + public function getGlobals() { + + return array( + 'apiKey' => $this->apiKey + ); + } + + public function getName() { + return 'oh.twig.extension.globals'; + } + +} From 7ec0205246f3d4ba64902ffd8d42ba6f9e2e2ff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=2EJ=2E=20Garc=C3=ADa?= Date: Sat, 3 Dec 2016 02:13:06 +0100 Subject: [PATCH 7/9] update README.md link to Google Maps Api Key --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 08680c9..ad4a440 100755 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Add OhGoogleMapFormTypeBundle to assetic assetic: bundles: [ 'OhGoogleMapFormTypeBundle' ] ``` -You might config your Google Maps Api Key. +You might config your [Google Maps Api Key](https://developers.google.com/maps/documentation/javascript/get-api-key). ```yaml # app/config/config.yml From 1f30b520372631499283db5b8ea4dec43dee2d1c Mon Sep 17 00:00:00 2001 From: enekochan Date: Mon, 9 Jan 2017 19:15:03 +0100 Subject: [PATCH 8/9] Add 'key' parameter name when loading Google Maps API JavaScript Google Maps API key get parameter must use 'key' name as seen in https://developers.google.com/maps/documentation/javascript/get-api-key or it won't work Use JavaScript URL from docs --- Resources/views/Form/jquery_layout.html.twig | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Resources/views/Form/jquery_layout.html.twig b/Resources/views/Form/jquery_layout.html.twig index 4bed754..204327f 100644 --- a/Resources/views/Form/jquery_layout.html.twig +++ b/Resources/views/Form/jquery_layout.html.twig @@ -11,23 +11,23 @@ {% block button_javascript "" %} {% block oh_google_maps_javascript %} - + {% block oh_google_maps_javascripts %} {% if include_jquery %} {% endif %} {% if include_gmaps_js %} - + {% endif %} {% javascripts - '@OhGoogleMapFormTypeBundle/Resources/public/js/jquery.ohgooglemaps.js' + '@OhGoogleMapFormTypeBundle/Resources/public/js/jquery.ohgooglemaps.js' %} {% endjavascripts %} {% endblock %} - + {% block oh_google_maps_callback %} {% endblock %} -{% endblock %} \ No newline at end of file +{% endblock %} From a1f8456f26d79ecc5bd26ba38a58bb0752a021f2 Mon Sep 17 00:00:00 2001 From: enekochan Date: Sun, 15 Jan 2017 21:25:19 +0100 Subject: [PATCH 9/9] Remove deprecation message by implementing Twig_Extension_GlobalsInterface --- Twig/Extension/GlobalsExtension.php | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/Twig/Extension/GlobalsExtension.php b/Twig/Extension/GlobalsExtension.php index 3dc2e08..8621eed 100644 --- a/Twig/Extension/GlobalsExtension.php +++ b/Twig/Extension/GlobalsExtension.php @@ -3,33 +3,31 @@ namespace Oh\GoogleMapFormTypeBundle\Twig\Extension; /** - * Description of GlobalsExtension. - * - * aqui defino todas las variables globales para poder recoger en cualquier - * plantilla twig del bundle + * Expose GoogleMaps Api Key globally so it can be accessed anywhere in Twig. * * @author Juanjo García */ - -class GlobalsExtension extends \Twig_Extension { +class GlobalsExtension extends \Twig_Extension implements \Twig_Extension_GlobalsInterface +{ + private $apiKey; /** - * * @param string $apiKey */ - public function __construct($apiKey) { + public function __construct($apiKey) + { $this->apiKey = $apiKey; } - public function getGlobals() { - + public function getGlobals() + { return array( - 'apiKey' => $this->apiKey + 'apiKey' => $this->apiKey, ); } - public function getName() { + public function getName() + { return 'oh.twig.extension.globals'; } - }