Merge pull request #245 from jasuarez/colorbox-csp

Improve CSP compatibility with colorbox theme

sigal/themes/colorbox/static/js/app-with-media-page.js

@@ -0,0 +1,39 @@
+$(".gallery").colorbox({
+  rel:"gallery",
+  transition:"none",
+  maxWidth: "90%",
+  maxHeight: "90%",
+  scalePhotos: true,
+  current: "{current} / {total}",
+  title: function () {
+    title = this.title;
+    if(this.hasAttribute("data-big")) {
+      title += " (full size)".link(this.getAttribute("data-big"));
+    }
+    if(this.hasAttribute("data-date")) {
+      title += this.getAttribute("data-date");
+    }
+    return title;
+  },
+  href: function () {
+    return this.getAttribute("data-href");
+  },
+  inline: function() {
+    return this.hasAttribute("inline");
+  }
+});
+
+$(document).bind('cbox_open', function(){
+  $("#cboxOverlay, #colorbox").swipe({
+    swipeLeft:function(event, direction, distance, duration, fingerCount) {
+      $.colorbox.next();
+    },
+    swipeRight:function(event, direction, distance, duration, fingerCount) {
+      $.colorbox.prev();
+    },
+    tap:function(event, target){
+      $.colorbox.close()
+    },
+    excludedElements: $.fn.swipe.defaults.excludedElements + ", #colorbox"
+  }).unbind("click");
+});

sigal/themes/colorbox/static/js/app.js

@@ -0,0 +1,36 @@
+$(".gallery").colorbox({
+  rel:"gallery",
+  transition:"none",
+  maxWidth: "90%",
+  maxHeight: "90%",
+  scalePhotos: true,
+  current: "{current} / {total}",
+  title: function () {
+    title = this.title;
+    if(this.hasAttribute("data-big")) {
+      title += " (full size)".link(this.getAttribute("data-big"));
+    }
+    if(this.hasAttribute("data-date")) {
+      title += this.getAttribute("data-date");
+    }
+    return title;
+  },
+  inline: function() {
+    return this.hasAttribute("inline");
+  }
+});
+
+$(document).bind('cbox_open', function(){
+  $("#cboxOverlay, #colorbox").swipe({
+    swipeLeft:function(event, direction, distance, duration, fingerCount) {
+      $.colorbox.next();
+    },
+    swipeRight:function(event, direction, distance, duration, fingerCount) {
+      $.colorbox.prev();
+    },
+    tap:function(event, target){
+      $.colorbox.close()
+    },
+    excludedElements: $.fn.swipe.defaults.excludedElements + ", #colorbox"
+  }).unbind("click");
+});

sigal/themes/colorbox/templates/index.html

@@ -111,53 +111,16 @@
   {% if album.medias %}
   {% if settings.use_assets_cdn %}
   <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
+  {% else %}
+  <script src="{{ theme.url }}/js/jquery-2.2.1.min.js"></script>
   {% endif %}
-  <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-2.2.1.min.js"%3E%3C/script%3E'))</script>
   <script src="{{ theme.url }}/js/jquery.colorbox.min.js"></script>
   <script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>
 
-  <script>
-    $(".gallery").colorbox({
-      rel:"gallery",
-      transition:"none",
-      maxWidth: "90%",
-      maxHeight: "90%",
-      scalePhotos: true,
-      current: "{current} / {total}",
-      title: function () {
-        title = this.title;
-        if(this.hasAttribute("data-big")) {
-          title += " (full size)".link(this.getAttribute("data-big"));
-        }
-        if(this.hasAttribute("data-date")) {
-          title += this.getAttribute("data-date");
-        }
-        return title;
-      },
-      {% if 'sigal.plugins.media_page' in settings.plugins %}
-      href: function () {
-        return this.getAttribute("data-href");
-      },
-      {% endif %}
-      inline: function() {
-        return this.hasAttribute("inline");
-      }
-    });
-
-    $(document).bind('cbox_open', function(){
-      $("#cboxOverlay, #colorbox").swipe({
-        swipeLeft:function(event, direction, distance, duration, fingerCount) {
-          $.colorbox.next();
-        },
-        swipeRight:function(event, direction, distance, duration, fingerCount) {
-          $.colorbox.prev();
-        },
-        tap:function(event, target){
-          $.colorbox.close()
-        },
-        excludedElements: $.fn.swipe.defaults.excludedElements + ", #colorbox"
-      }).unbind("click");
-    });
-  </script>
+  {% if 'sigal.plugins.media_page' in settings.plugins %}
+  <script src="{{ theme.url }}/js/app-with-media-page.js"></script>
+  {% else %}
+  <script src="{{ theme.url }}/js/app.js"></script>
+  {% endif %}
   {% endif %}
 {% endblock %}