LIL-638 Добавить кнопки на пробный урок в другие места на сайте

api/v1/serializers/school.py

@@ -55,6 +55,7 @@ class SchoolScheduleSerializer(serializers.ModelSerializer):
             'start_at',
             'schoolschedule_images',
             'cover',
+            'trial_lesson',
         )
 
         read_only_fields = (
@@ -114,6 +115,7 @@ class SchoolScheduleSerializerImg(serializers.ModelSerializer):
             'start_at',
             'schoolschedule_images',
             'cover',
+            'trial_lesson',
         )
 
         read_only_fields = (

api/v1/serializers/user.py

@@ -42,6 +42,7 @@ class UserSerializer(serializers.ModelSerializer):
             'photo',
             'balance',
             'show_in_mainpage',
+            'trial_lesson',
         )
 
         read_only_fields = (

apps/school/migrations/0021_schoolschedule_trial_lesson.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.0.6 on 2018-08-27 21:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('school', '0020_auto_20180824_2132'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='schoolschedule',
+            name='trial_lesson',
+            field=models.URLField(blank=True, default=''),
+        ),
+    ]

apps/school/models.py

@@ -46,6 +46,7 @@ class SchoolSchedule(models.Model):
         null=True,
         blank=True,
     )
+    trial_lesson = models.URLField(default='', blank=True)
 
     class Meta:
         ordering = ('weekday',)

apps/school/templates/blocks/schedule_item.html

@@ -17,6 +17,9 @@
         {% else %}
           {% include './day_pay_btn.html' %}
         {% endif %}
+        {% if school_schedule.trial_lesson %}
+        <a class="timing__trial-lesson js-video-modal" href="#" data-video-url="{{ school_schedule.trial_lesson }}">Пробный урок</a>
+        {% endif %}
       </div>
     </div>
     {% comment %}

project/templates/blocks/popup_buy.html

@@ -37,6 +37,11 @@
                   {% comment %} dont delete {% endcomment %}
                   <span class="switch__cell"></span>
                   <span class="switch__cell">{{ school_schedule.title }}</span>
+                  <span class="buy__trial-lesson switch__cell">
+                    {% if school_schedule.trial_lesson %}
+                    <a href="{{ school_schedule.trial_lesson }}">Пробный урок</a>
+                    {% endif %}
+                  </span>
                   <span class="switch__cell">{{school_schedule.month_price}}р в мес.</span>
                 </span>
               </label>
@@ -58,6 +63,11 @@
                   {% comment %} dont delete {% endcomment %}
                   <span class="switch__cell"></span>
                   <span class="switch__cell">{{ school_schedule.title }}</span>
+                  <span class="buy__trial-lesson switch__cell">
+                    {% if school_schedule.trial_lesson %}
+                    <a href="{{ school_schedule.trial_lesson }}">Пробный урок</a>
+                    {% endif %}
+                  </span>
                   <span class="switch__cell">{{school_schedule.month_price}}р в мес.</span>
                 </span>
               </label>

project/templates/blocks/teachers.html

@@ -25,7 +25,7 @@
               {% endif %}
             </div>
             {% if teacher.trial_lesson %}
-            <a target="_blank" href="{{ teacher.trial_lesson }}" class="btn btn_light">ПРОБНЫЙ УРОК</a>
+            <a data-video-url="{{ teacher.trial_lesson }}" href="#" class="btn btn_light js-video-modal">ПРОБНЫЙ УРОК</a>
             {% endif %}
           </div>
           <div class="teachers__social">

web/package.json

@@ -46,6 +46,7 @@
     "inputmask": "^3.3.11",
     "jquery": "^3.3.1",
     "lodash.debounce": "^4.0.8",
+    "modal-video": "^2.4.2",
     "moment": "^2.20.1",
     "owl.carousel": "^2.2.0",
     "slugify": "^1.2.9",

web/src/js/app.js

@@ -3,6 +3,8 @@
  */
 import 'ilyabirman-likely/release/likely.js';
 import 'ilyabirman-likely/release/likely.css';
+import "modal-video/js/jquery-modal-video.min.js";
+import "modal-video/css/modal-video.min.css";
 import "./modules/common";
 import "./modules/header";
 import "./modules/search";

web/src/js/modules/popup.js

@@ -2,6 +2,30 @@ import $ from 'jquery';
 
 var selectedWeekdays = {};
 $(document).ready(function () {
+    $(".js-video-modal").each(function(){
+        const $this = $(this);
+        const url = $this.data('video-url');
+        let data;
+        let videoId;
+        let channel;
+        if(url.indexOf('youtu.be') > -1){
+            videoId = url.split('youtu.be/')[1];
+            channel = 'youtube';
+        }
+        if(url.indexOf('youtube.com') > -1 && url.indexOf('watch') > -1){
+            const m = /[?&]v=([a-zA-Z]+)(&.)?/.exec(url);
+            channel = 'youtube';
+            videoId = m && m[1];
+        }
+        if(url.indexOf('vimeo.com') > -1){
+            const split = url.split('/');
+            channel = 'vimeo';
+            videoId = split[split.length - 1];
+        }
+        $this.data('videoId', videoId);
+        $this.modalVideo({ channel });
+    });
+
     let body = $('body'),
         popup;
 
@@ -152,4 +176,4 @@ $(document).ready(function () {
     }
 
     updateCart();
-});
+});

web/src/sass/_common.sass

@@ -1850,7 +1850,7 @@ a.grey-link
     &:nth-child(2)
       flex: 0 0 60px
     &:nth-child(3)
-      flex: 0 0 calc(100% - 290px)
+      flex: 1
       +t
         padding: 0
         flex: 0 0 calc(100% - 120px)
@@ -2959,6 +2959,12 @@ a.grey-link
     width: 275px
     +m
       width: 100%
+  &__trial-lesson
+    +m
+      position: absolute;
+      right: 0;
+      padding: 0;
+      top: 9px;
 
 .order
   padding: 2px
@@ -3862,6 +3868,12 @@ a.grey-link
     +m
       flex: 1 0 0
       text-align: right
+  &__trial-lesson
+    display: inline-block
+    margin-top: 10px
+    +m
+      display: block
+      margin-bottom: -31px
   &__time
     margin: 15px 0
     opacity: .5
@@ -4167,3 +4179,7 @@ a
   border-left: 3px solid transparent
   border-radius: 50%
   animation: loading .6s infinite linear
+
+.modal-video-close-btn
+  +m
+    right: 0