Colorbox

README

@@ -22,4 +22,14 @@ If you want to use the python code in utils.py (or the example_project, which
 depends on it), you'll need to install the python requirements by doing 
 pip install -r requirements.txt and have the following binaries in your PATH:
 - convert (from imagemagick)
-- gs (from ghostscript)
+- gs (from ghostscript)
+
+We are now using Colorbox as a popup manager, you can change its default 
+behavior by doing something like this:
+
+var colorbox_defaults = {
+    close: '',
+    [insert any setting here]
+};
+
+$.extend($.colorbox.settings, colorbox_defaults);

digitalpaper/static/digitalpaper/css/reader.css

@@ -343,3 +343,35 @@ p {
     left: 260px;
     display: none;
 }
+
+/****************** minimal out of the box Colorbox styles ***************/
+#colorbox {
+    background-color: white;
+    z-index: 5;
+    overflow:hidden;
+}
+#colorbox div {
+    margin:0;
+    padding:0;
+}
+#colorbox iframe {
+    margin-bottom:-5px;
+}
+#cboxOverlay {
+    z-index: 4;
+    background-color: #000;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+}
+#cboxContent {
+    position: relative;
+}
+#cboxClose {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}

digitalpaper/static/digitalpaper/js/config.js

@@ -32,11 +32,21 @@ var libeConfigFunc = function (data) {
 
     var restrictedAccess = function() {
         jQuery(document).trigger('show-restricted-access');
-        jQuery.openDOMWindow({
-            windowSourceID: '#restrictedAccess',
+        jQuery.colorbox({
+            iframe:false,
+            inline:true,
+            href:'#restrictedAccess',
             width: 760,
             height: 480,
-            windowPadding: 0
+            close: '',
+            onOpen:function() {
+                jQuery('body').css({'overflow': 'auto'});
+                jQuery('div#restrictedAccess').show();
+            },
+            onClosed:function() {
+                jQuery('body').css({'overflow': 'hidden'});
+                jQuery('div#restrictedAccess').hide();
+            }
         });
         return false;
     };

digitalpaper/static/digitalpaper/js/page.js

@@ -66,6 +66,7 @@ var libePage = function(pageNumber, pageId, pageChannel, pageMaps) {
             return false;
         }
         var data = jQuery(this).data('area');
+
         if (data.object_class == "article") {
             var url = libeConfig.webservices.contentmodel;
             var replaces = {
@@ -87,28 +88,13 @@ var libePage = function(pageNumber, pageId, pageChannel, pageMaps) {
             if (libeConfig.modelmapping[k] == 'iframe' ||
                 libeConfig.modelmapping[k] == 'ajax'   ||
                 libeConfig.modelmapping[k] == 'inline') {
-                var dw = jQuery(this).openDOMWindow({
-                    windowSourceURL: url,
-                    windowSourceID: '#contentmodelContent',
+
+                var dw = jQuery.colorbox({
+                    href: url,
+                    iframe: true,
                     width: parseInt(document.documentElement.clientWidth * 90 / 100, 10),
-                    height: parseInt(document.documentElement.clientHeight * 90 / 100, 10),
-                    fixedWindowY: 0,
-                    windowSource: libeConfig.modelmapping[k],
-                    loader: 1,
-                    functionCallOnClose: function() {
-                        jQuery('body').css({'overflow': 'auto'});
-                    },
-                    functionCallOnOpen: function() {
-                        jQuery('body').css({'overflow': 'hidden'});
-                    }
+                    height: parseInt(document.documentElement.clientHeight * 90 / 100, 10)
                 });
-                if (libeConfig.modelmapping[k] == 'inline') {
-                    // inline is interesting to add custom content, but
-                    // it doesn't load the URL, so we have to do it manually
-                    // Note: have a .inner element inside your #contentmodelContent
-                    // when you want to use this!
-                    jQuery('#DOMWindow .inner').load(url);
-                }
             } else {
                 window.open(url);
             }

digitalpaper/static/digitalpaper/js/reader.js

@@ -169,6 +169,7 @@ var libeReader = function() {
         jQuery(document.body).css({'overflow': 'visible', 'height': 'auto' });
         _isZoomed = false;
         jQuery('#zoomButton').removeClass('unzoom');
+
         return false;
     }
 
@@ -179,7 +180,7 @@ var libeReader = function() {
     }
 
     function keyboardCallback(e) {
-        if (jQuery('#DOMWindow').length <= 0) {
+        if (jQuery('#colorbox').css('display') != 'block') {
             if (_isZoomed) {
                 return zoomedKeyboardCallback(e);
             } else {

digitalpaper/templates/digitalpaper/_jquery.html

@@ -1,7 +1,8 @@
-<script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery-1.4.2.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}libe/js/history.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery-1.5.2.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery.jdpicker.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery.mousewheel.js"></script>
-<script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery.DOMWindow.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}digitalpaper/js/jquery.colorbox-min.js"></script>
 <script type="text/javascript">
 $.noConflict();
 </script>