pushed up new image insert script

7 files changed, 56 insertions, 13 deletions

diff --git a/app/jrnl/models.py b/app/jrnl/models.py
index 20d753f..254662d 100644
--- a/app/jrnl/models.py
+++ b/app/jrnl/models.py
@@ -20,7 +20,7 @@ from bs4 import BeautifulSoup
 from photos.models import PhotoGallery, LuxImage
 from locations.models import Location
 
-from utils.widgets import parse_image
+from utils.widgets import parse_image, parse_video
 from utils.widgets import markdown_to_html
 
 
@@ -82,6 +82,7 @@ class Entry(models.Model):
     )
     template_name = models.IntegerField(choices=TEMPLATES, default=0)
     featured_image = models.ForeignKey(LuxImage, null=True, blank=True)
+    #has_video = models.BooleanField(blank=True, default=False)
 
     class Meta:
         ordering = ('-pub_date',)
@@ -164,6 +165,7 @@ class Entry(models.Model):
         else:
             md = image_url_replace(self.body_markdown)
             self.body_html = markdown.markdown(md, extensions=['extra'], safe_mode=False)
+            self.has_video = parse_video(self.body_html)
         self.dek = markdown_to_html(self.dek)
         try:
             self.location = Location.objects.filter(geometry__contains=self.point).get()
diff --git a/app/photos/models.py b/app/photos/models.py
index 4207ad4..ac85a50 100644
--- a/app/photos/models.py
+++ b/app/photos/models.py
@@ -87,6 +87,11 @@ class LuxImage(models.Model):
                 print("Size name" +size.name)
                 return self.get_image_by_size(size.name)
 
+    def get_video_base_url(self):
+        if self.is_video:
+            return self.image.url[:-4]
+
+
     def get_largest_image(self):
         t = []
         for size in self.sizes.all():
diff --git a/app/utils/widgets.py b/app/utils/widgets.py
index d588b08..4f96e38 100644
--- a/app/utils/widgets.py
+++ b/app/utils/widgets.py
@@ -162,3 +162,9 @@ def parse_image(s):
         return render_to_string("lib/img_%s.html" % css_class, c)
 
 
+def parse_video(s):
+    soup = BeautifulSoup(s.group(), "lxml")
+    for vid in soup.find_all('video'):
+        return True
+    return False
+
diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index 875267e..9697ddf 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -360,7 +360,7 @@ figure.picwide img.picwide {
         }
     }
 }
-.image-cluster {
+.image-cluster, .cluster {
     .row-2, .row-3, .row-4, .stack-2, .stack-3 {
         display: block;
     }
@@ -486,11 +486,9 @@ figure.picwide img.picwide {
 
 .embed-wrapper {
     @include constrain_wide;
-    margin-bottom: 1em;
     @include breakpoint(gamma) {
         margin-left: auto;
         margin-right: auto;
-        border: 5px solid $brown;
     }
 }
 .embed-container { 
diff --git a/design/templates/admin/insert_images.html b/design/templates/admin/insert_images.html
index 70e1965..f9a2fa6 100644
--- a/design/templates/admin/insert_images.html
+++ b/design/templates/admin/insert_images.html
@@ -31,8 +31,18 @@ figure {
 </style>
 <script src="/static/jquery.tools.min.js"></script>
 <script>
-// execute your scripts when the DOM is ready. this is a good habit
-
+function buildVideo(video_url, id, c) {
+    html = '<div class="embed-container">\n\t<video poster="" loop="true" preload="auto" id="'+id+'" class="vidauto';
+    if (c) {
+        html += c+'"';
+    } else {
+        html += '"';
+    }
+    html += '>\n\t\t<source src="'+video_url+'.webm" type="video/webm">\n';
+    html += '\t\t<source src="'+video_url+'.mp4" type="video/mp4">\n';
+    html += '\t\tYour browser does not support video playback via HTML5.\n\t</video>\n</div>';
+    return html;
+}
 function buildImage(image_url, id, c, caption) {
     html = '<img src="'+image_url+'" id="image-'+id+'" class="';
     if (c) {
@@ -59,7 +69,11 @@ $(function(){
     });
     
     $('.insert').click(function(){
-        var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption'));
+        if ($(this).attr('data-is-video')) {
+            var code = buildVideo($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'));
+        } else {
+            var code = buildImage($(this).attr('data-src'), $(this).attr('data-id'), $(this).attr('data-class'), $(this).attr('data-caption'));
+        }
         var el = parent.document.getElementById('{{textarea_id}}');
         var start = el.selectionStart
         var end = el.selectionEnd
@@ -94,13 +108,14 @@ $(function(){
             <img src="{% get_image_by_size image 'tn' %}" />
             <figcaption>{{image.id}} - {{image.title}} {% if image.caption %}&ndash; {{image.caption}}{%endif%}</figcaption>
         </figure>
-        <ul class="actions">
+        <ul class="actions">{%if image.is_video %}
+            <li><a data-is-video="true" data-src="{{image.get_video_base_url}}" data-id="{{image.id}}" data-class="vid" class="insert" href="">Insert video</a>{%else%}
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" class="insert" href="">full width</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" class="insert" href="">column width</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picwide" data-caption="true" class="insert" href="">full width cap</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="picfull" data-caption="true" class="insert" href="">column width cap</a></li>
             <li><a data-src="{% get_image_by_size image 'admin_insert' %}" data-id="{{image.id}}" data-class="cluster pic" class="insert" href="">cluster</a></li>
-            <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>
+            <li><a href="/admin/photos/luximage/{{image.pk}}/change/">Edit Image</a></li>{%endif%}
         </ul>
         </div>
 {% endfor %}
diff --git a/design/templates/base.html b/design/templates/base.html
index c0a5ca8..0646c9b 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -29,7 +29,7 @@
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
-    <div class="wrapper">
+    <div class="wrapper" id="wrapper">
     <div class="header-wrapper">
         <header role="banner">
             <h1><a id="logo" href="/" title="home">Luxagraf</a></h1>
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index 3762b48..d5038f2 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -17,8 +17,7 @@
     <meta property="og:description" content="{{object.meta_description}}" />
     <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" />
     <meta property="article:author" content="Luxagraf" />
-    <meta property="og:site_name" content="Luxagraf" />
-    <meta property="og:image" content="{{object.get_image_url}}" />{% for image in object.get_images %}
+    <meta property="og:site_name" content="Luxagraf" />{% for image in object.get_images %}
     <meta property="og:image" content="{{image}}" />{% endfor %}
     <meta property="og:locale" content="en_US" />
     <meta name="twitter:card" content="summary_large_image"/>
@@ -36,7 +35,7 @@ class="{%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t ==
 								
 				
 {% block primary %}		
-    <main role="main">
+    <main role="main" id="main">
     <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article">
             <header id="header" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
                 <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
@@ -127,7 +126,25 @@ window.onload = function() {
     createMap();
     var open = false;
     {%endif%}{%endwith%}
+{% if object.has_video %}
+var tester = document.getElementsByClassName("vidauto");
+var wrapper = document.getElementById('wrapper');
+var dist = 100;
+
+window.onscroll = function() {
+    for (var i=0; i<tester.length; i++) {
+        checkVisible(tester[i]) ? tester[i].play() : tester[i].pause();
+    }
+};
+
+function checkVisible(elm) {
+  var rect = elm.getBoundingClientRect();
+  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
 }
+{%endif%}
+}
+
 </script>
 {% with object.template_name as t %}{%if t == 1 or t == 3 %}
 <script src="/media/js/hyphenate.min.js" type="text/javascript"></script>