templates/components/cook.html.twig line 1

Open in your IDE?
  1. <div class="v-cook-selector" ref="vCookSelector">
  2.   <transition name="fade">
  3.   <article class="js-cook-selector-pref" v-show="opened">
  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.         <h2 class="page_title02">料理を選ぶ</h2>
  15.         <ul class="cook_list">
  16.           <li v-for="cook in cooks">
  17.             <a href="#" @click.stop="selectCook(cook)">
  18.               <p>[[ cook.name ]]</p>
  19.               <img :src="image(cook)" :alt="cook.name">
  20.             </a>
  21.           </li>
  22.         </ul>
  23.       </main>
  24.     </div>
  25.   </article>
  28.   </transition>
  29. </div>
  31. <script>
  32.   $(function () {
  33.       var vCookSelector = new Vue({
  34.           el: '.v-cook-selector',
  35.           delimiters: ['[[', ']]'],
  36.           data: function () {
  37.               return {
  38.                   {# // trueならエリア選択画面を表示 #}
  39.                   opened: false,
  40.                   {# // 選択可能なcook、location #}
  41.                   cooks: [],
  42.                   {# // 選択したcook #}
  43.                   selectedCook: null,
  44.                   {# // location選択後に実行されるcallback #}
  45.                   callback: null,
  46.               };
  47.           },
  48.           created: function () {
  49.               this.refreshCook();
  50.           },
  51.           computed: {
  52.           },
  53.           methods: {
  54.               open: function (callback) {
  55.                   this.opened = true;
  56.                   this.callback = callback;
  57.               },
  58.               close: function () {
  59.                   this.opened = false;
  60.               },
  61.               refreshCook: function () {
  62.                   var self = this;
  63.                   $.ajax({
  64.                       url: '{{ path('api_categories_get_collection') }}',
  65.                       headers: {
  66.                           'Accept': 'application/json',
  67.                       },
  68.                   }).done(function (data) {
  69.                       self.cooks = data;
  70.                   }).fail(function () {
  71.                       alert('料理の取得に失敗しました。ページを再読み込みしてください。');
  72.                   });
  73.               },
  74.               selectCook: function (cook) {
  75.                   this.selectedCook = cook;
  76.                   if (typeof this.callback === 'object' || typeof this.callback === 'function') {
  77.                       this.callback(this.selectedCook);
  78.                   }
  79.                   this.close();
  80.               },
  81.               image: function (data) {
  82.                   if (typeof data.image === 'undefined') {
  83.                       return '/img/no-image.jpeg';
  84.                   } else if (! data.image) {
  85.                       return '/img/no-image.jpeg';
  86.                   } else {
  87.                       return data.image;
  88.                   }
  89.               }
  90.           },
  91.       });
  93.       $(document).on('click', '.js-cook-selector', function () {
  94.           var self = this;
  95.           {# // .js-cook-selectorをクリックするとエリア選択画面を表示 #}
  96.           vCookSelector.open(function (cook) {
  97.               {# // 呼び出し元の要素にはlocationの名称を日本語で入れる #}
  98.               $(self).val(cook.name);
  99.               {# // 選択したlocationのIDを入れる対象の要素をdata属性から取得したセレクタで取得 #}
  100.               var target = $(self).data('cook-selector-data-target');
  101.               var $target = $(target);
  102.               {# // 選択したlocationのIDを値として入れる #}
  103.               $target.val(cook.id);
  104.           });
  105.       });
  106.   });
  107. </script>