templates/components/area.html.twig line 1

Open in your IDE?
  1. <div class="v-area-selector" ref="vAreaSelector">
  2.   <transition name="fade">
  3.   <article class="js-area-selector-pref" v-show="opened && !selectedArea">
  4.     <div class="responsive-container">
  5.       <header>
  6.         <div class="header_wr">
  7.           <div class="title_wr">
  8.             <a href="#" class="back" @click.stop="close"></a>
  9.             <h1 class="header_title">都道府県を選択する</h1>
  10.           </div>
  11.         </div>
  12.       </header>
  13.       <main>
  14.         <ul class="area_list">
  15. {#          <li class="location"><a href="#"><span class="icon">現在の位置から探す</span></a></li>#}
  16.           <li v-for="area in areas"><a href="#" @click.stop="selectArea(area)">[[ area.name ]]</a></li>
  17.         </ul>
  18.       </main>
  19.     </div>
  20.   </article>
  21.   </transition>
  24.   {#  --------------- 市区町村 --------------- #}
  25.   <article class="js-area-selector-city" v-show="opened && selectedArea">
  26.     <div class="responsive-container">
  27.       <header>
  28.         <div class="header_wr">
  29.           <div class="title_wr">
  30.             <a href="#" class="back" @click="backToArea"></a>
  31.             <h1 class="header_title">市区町村を選択する</h1>
  32.           </div>
  33.         </div>
  34.       </header>
  35.       <main>
  36.         <ul class="area_list" v-if="selectedArea">
  37.           <li v-for="location in selectedArea.locations"><a href="#" @click.stop="selectLocation(location)">[[ location.name ]]</a></li>
  38.         </ul>
  39.       </main>
  40.     </div>
  41.   </article>
  42. </div>
  43. <script>
  44.   $(function () {
  45.       var vAreaSelector = new Vue({
  46.           el: '.v-area-selector',
  47.           delimiters: ['[[', ']]'],
  48.           data: function () {
  49.               return {
  50.                   {# // trueならエリア選択画面を表示 #}
  51.                   opened: false,
  52.                   {# // 選択可能なarea、location #}
  53.                   areas: [],
  54.                   {# // 選択したarea #}
  55.                   selectedArea: null,
  56.                   {# // 選択したlocation #}
  57.                   selectedLocation: null,
  58.                   {# // location選択後に実行されるcallback #}
  59.                   callback: null,
  60.               };
  61.           },
  62.           created: function () {
  63.               this.refreshArea();
  64.           },
  65.           computed: {
  66.               {# // 選択エリア内のlocationを返す #}
  67.               selectedAreaLocations: function () {
  68.                   if (this.selectedArea) {
  69.                       return this.selectedArea.locations;
  70.                   }
  71.                   return [];
  72.               },
  73.           },
  74.           methods: {
  75.               open: function (callback) {
  76.                   this.opened = true;
  77.                   this.callback = callback;
  78.               },
  79.               close: function () {
  80.                   this.opened = false;
  81.               },
  82.               refreshArea: function () {
  83.                   var self = this;
  84.                   $.ajax({
  85.                       url: '{{ path('api_areas_get_collection') }}',
  86.                       headers: {
  87.                           'Accept': 'application/json',
  88.                       },
  89.                   }).done(function (data) {
  90.                       self.areas = data;
  91.                   }).fail(function () {
  92.                       alert('エリアの取得に失敗しました。ページを再読み込みしてください。');
  93.                   });
  94.               },
  95.               selectArea: function (area) {
  96.                   this.selectedArea = area;
  97.               },
  98.               selectLocation: function (location) {
  99.                   this.selectedLocation = location;
  100.                   if (typeof this.callback === 'object' || typeof this.callback === 'function') {
  101.                       this.callback(this.selectedLocation);
  102.                   }
  103.                   this.close();
  104.               },
  105.               backToArea: function () {
  106.                   this.selectedArea = null;
  107.               },
  108.           },
  109.       });
  111.       $(document).on('click', '.js-area-selector', function () {
  112.           var self = this;
  113.           {# // .js-area-selectorをクリックするとエリア選択画面を表示 #}
  114.           vAreaSelector.open(function (location) {
  115.               {# // 呼び出し元の要素にはlocationの名称を日本語で入れる #}
  116.               $(self).val(location.name);
  117.               {# // 選択したlocationのIDを入れる対象の要素をdata属性から取得したセレクタで取得 #}
  118.               var target = $(self).data('area-selector-data-target');
  119.               var $target = $(target);
  120.               {# // 選択したlocationのIDを値として入れる #}
  121.               $target.val(location.id);
  122.           });
  123.       });
  124.   });
  125. </script>