burp_cms 1.3.0

data/app/assets/packages/burp/editing/js/content-decorator.js

@@ -0,0 +1,321 @@
+/*global
+  marked MD5
+*/
+(function($) {
+  
+  var javascript_warning_has_been_shown = false;
+  
+  marked.setOptions({
+    gfm: true,
+    pedantic: false,
+    sanitize: false
+  });
+  
+  function unescapeJavascript(script) {
+    return script.replace(/&quot;/g,'"').replace(/&#39;/g,"'").replace(/&lt;/g,"<").replace(/&gt;/g,"<");
+  }
+  
+  function ContentDecorator(element, options) {
+    this.element = $(element);
+    this.parking = $('<div style="display: none;"></div>');
+
+    if (typeof(options) === 'object') {
+      this.onUpdate = options['update'];
+    }
+    
+    this.init();
+  }
+  
+  window.ContentDecorator = ContentDecorator;
+  
+  function clearDropBoxes() {
+    $('body > .dropbox').remove();
+  }
+
+  function initializeMovable(contentEditor, elements, createCallback) {
+    if (!$(elements).hasClass('movable')) {
+      
+      $(elements).addClass('movable');
+      
+      $(elements).draggable({
+        cursor: 'move',
+        revert: true,
+        revertDuration: 0,
+        opacity: 0.6,
+        distance: 5,
+        zIndex: 900,
+        appendTo: "body",
+        helper: 'clone',
+        refreshPositions: true,
+        drag: function(event, ui) {
+          ui.position.left = event.clientX;
+          ui.position.top = event.clientY;
+          ui.position.left -= (ui.helper.width()/2.0);
+          ui.position.top -= (ui.helper.height()/2.0);
+        },
+        start: function(event, ui) {
+          
+          var wrappers = [];
+          
+          var bodyOffset =  $('body').offset();
+          var bodyPosition = $('body').css('position');
+          
+          contentEditor.element.find('> h1,> h2,> h3,> h4,> h5,> p,> img,> blockquote,> ul,> ol').each(function() {
+      
+            var position = $(this).offset();
+            var size = {width:$(this).outerWidth(),height:$(this).outerHeight()};
+            if(bodyPosition !== 'static') {
+              position.left -= bodyOffset.left;      
+              position.top -= bodyOffset.top;
+            }
+            
+            var element = $('<div class="dropbox"></div>');
+            wrappers.push(element[0]);
+      
+            element.data("target-element",this);
+      
+            element.css(size);
+            element.css(position);
+            element.css({'position':'absolute'});
+            element.appendTo('body');
+          });
+          
+          // Add bottom dropbox
+          if(wrappers.length > 0) {
+            var lastElement = $(wrappers[wrappers.length-1]);
+            var element = lastElement.clone();
+            var newTop = 20 + parseInt(element.css("top").replace("px",''),10) + parseInt(element.css("height").replace("px",''),10);
+            
+            element.addClass("bottom-dropbox");
+            
+            element.css("top",newTop);
+            element.css("height",50);
+            wrappers.push(element[0]);
+            element.appendTo('body');
+          }
+          
+          // Add empty area dropbox
+          if(wrappers.length === 0) {
+            var position = $(contentEditor.element).offset();
+            var size = {width:$(contentEditor.element).outerWidth(),height:$(contentEditor.element).outerHeight()};
+            if(navigator.userAgent.match(/Firefox|Safari/)) {
+              position.left = $(contentEditor.element)[0].offsetLeft;
+            } else {
+              position.left -= $(contentEditor.element).offsetParent().offset().left;
+            }
+            
+            if(size.height < 20) {
+              size.height = 50;
+            }
+            
+            if(size.width < 10) {
+              size.width = 100;
+            }
+            
+            var element2 = $('<div class="dropbox"></div>');
+            wrappers.push(element2[0]);
+      
+            element2.addClass("bottom-dropbox");
+      
+            element2.css(size);
+            element2.css(position);
+            element2.css({'position':'absolute'});
+            element2.appendTo('body');
+          }
+          
+          wrappers = $(wrappers);
+          wrappers.append('<div class="dropzone left" /><div class="dropzone center" /><div class="dropzone right" />');
+
+          wrappers.find('.dropzone').droppable({
+            hoverClass: 'active',
+            tolerance: "pointer",
+            over: function() { 
+              $(this).parent().addClass('active'); 
+              $(this).parent().data('active-child', this);
+            },
+            out: function() { 
+              if ($(this).parent().data('active-child') === this) {
+                $(this).parent().removeClass('active'); 
+              }
+            },
+            drop: function(event, ui) {              
+              
+              if(!ui.draggable.data("removed")) {
+                var className = $(this).removeClass('dropzone')[0].className;
+                var img = createCallback(ui.draggable[0], className);
+
+                initializeMovable(contentEditor, img, function(element, positionClass) { 
+                  $(element).removeClass('left center right');
+                  $(element).addClass(positionClass);
+                  return element;
+                });
+
+                var markdown = $(this).parent().data("target-element");
+                
+                var src = $(img).attr('src');
+                if(src.match(/\/files\/small\//)) {
+                  $(img).attr('src',src.replace(/\/files\/small\//,'/files/large/'));
+                }
+                
+                if($(this).parent().is(".bottom-dropbox")) {
+                  $(contentEditor.element).append(img);
+                } else if(img !== markdown) {
+                  $(img).insertBefore(markdown);
+                }
+                clearDropBoxes();
+              }
+              
+              $("#gallery").removeClass('delete-active');
+            }
+          });
+          
+          // Show remove zone
+          if($(this).parents("#gallery").length === 0) {
+            $("#gallery").addClass('delete-active');
+          }
+        },
+        
+        stop: function(event, ui) {
+          clearDropBoxes();
+          
+          $("#gallery").removeClass('delete-active');
+        }
+      });
+    }
+  }
+  
+  function removeDraggable( element ) {
+    element.find( ".movable" ).draggable( "destroy" );
+  }
+  
+  function removeRemoveZone() {
+    $('.remove-zone').removeClass('remove-zone').droppable( "destroy" );
+  }
+  
+  $.extend(ContentDecorator.prototype, {
+    
+    init: function() {
+      var contentEditor = this;
+      $(this.element).find("> .movable").each(function() {
+        $(this).removeClass('movable');
+        initializeMovable(contentEditor, this, function(element, positionClass) { 
+          $(element).removeClass('left center right');
+          $(element).addClass(positionClass);
+          return element;
+        });
+      });
+    },
+    
+    
+    cleanup: function() {
+      removeDraggable(this.element);
+      removeRemoveZone();
+    },
+    
+    getHtml: function() {
+      
+      var html = this.element.clone();
+      html.find('script[type="text/dont-run-javascript"]').each(function() {
+        $(this).attr("type",'text/javascript');
+      });
+      
+      return html.find('.movable').removeClass('ui-draggable ui-droppable').end().html();
+    },
+    
+    getMarkdown: function() {
+      return this.markdown;
+    },
+    
+    setMarkdown: function(markdown) {
+      if (this.markdown !== markdown) {
+        this.markdown = markdown;
+        this.updateContent();
+
+        if (this.onUpdate) {
+          this.onUpdate();
+        }
+      }
+    },
+    
+    updateContent: function() {
+      var html = marked(this.markdown).replace(/\s+/g,' ');
+      if(this.lastHtml === html) {
+        return;
+      }
+      this.lastHtml = html;
+      
+      var children = $(html);
+      
+      // Fix script escaping of text in script elements
+      children.each(function() {
+        if($(this).is("script")) {
+          $(this).text(unescapeJavascript($(this).text()));
+          $(this).attr('type','text/dont-run-javascript');
+        } else {
+          $(this).find('script').each(function() {
+            $(this).text(unescapeJavascript($(this).text()));
+            $(this).attr('type','text/dont-run-javascript');
+          });
+        }
+      });
+      
+      var tempElement = $('<div></div>');
+      tempElement.append(children);
+      
+      if(tempElement.find("script").length > 0 && !javascript_warning_has_been_shown) {
+        $.gritter.add({
+          title: 'WARNING!',
+          text: ' Javascript found! The javascript will not be previewed but it will be saved.<br><br>Save and reload to test the javascript.',
+          time: 20000
+        });
+        
+        javascript_warning_has_been_shown = true;
+      }
+      
+      // Fixes so that we don't reload images on each update
+      var _this = this;
+      tempElement.find('img').each(function() {
+        var element = _this.element.find('img[src="'+$(this).attr('src')+'"]');
+        if(element.length === 1) {
+          if(element[0].outerHTML === this.outerHTML) {
+            $(this).replaceWith(element);
+          }
+        }
+      });
+      
+      $(this.element).park('.movable');
+      this.element.html("");
+      this.element.append(tempElement.children());
+      $(this.element).unpark();
+    },
+    
+    makeDroppable: function(elements, createCallback) {
+      initializeMovable(this, elements, createCallback);
+    },
+    
+    removeDroppable: function(elements) {
+      $(elements).draggable( 'destroy' );
+    },
+    
+    addRemoveZone: function(element) {
+      $(element).addClass('remove-zone');
+      $(element).droppable({
+        hoverClass: 'remove-hover',
+        tolerance: "pointer",
+        drop: function(event, ui) {
+          if(ui.draggable.parents("#gallery").length === 0) {
+            setTimeout(function() {
+              // jquery-ui breaks if we remove the element during the callback
+              ui.draggable.remove();
+            },0);
+            ui.draggable.data("removed",true);
+          }
+          $("#gallery").removeClass('delete-active');
+          clearDropBoxes();
+        }
+      });
+    }
+  });
+
+}(jQuery));
+

data/app/assets/packages/burp/editing/js/main.js

@@ -0,0 +1,331 @@
+/*global
+    snippets CodeMirror ContentDecorator qq
+*/
+
+$(function() {
+  
+  var elements = $('<div style="display: none;"><div id="gallery" style="display: none;"><ul class="images"></ul><i class="prev icon-large enabled icon-caret-left"></i><i class="next icon-large enabled icon-caret-right"></i></div><div id="myContentEditor" style="display: none;"><textarea id="code" style="width: 100%; height: 300px;"></textarea></div></div>');
+  var lastValue;
+  var snippetName;
+  var originalHtml;
+  var originalValue;
+  var contentDecorator;
+  var editor;
+  
+  function wrapContent() {
+    $.each(snippets().snippets,function(name,snippet) {
+      console.debug(name,snippet);
+      
+      // Fix so that we dont run javascript again
+      $(snippet.elements()).each(function() {
+        if($(this).is("script")) {
+          $(this).attr("type",'text/dont-run-javascript');
+        } else {
+          $(this).find("script").each(function() {
+            $(this).attr("type",'text/dont-run-javascript');
+          });
+        }
+      });
+      
+      snippet.update($('<div data-snippet-name="'+name+'" class="snippet-wrapper snippet-'+name+'"></div>').append($(snippet.elements())));
+    });
+    
+    // Remove unwanted stuff
+    $('.burp-remove').remove();
+    $('.burp-unwrap').each(function() {$(this).replaceWith(this.children);});
+  }
+  
+  function cleanup(container) {
+    container.find("p > img").each(function(index,img) {
+      if($(img).parent().children().length === 1) {
+        $(img).unwrap();
+      }
+    });
+  }
+  
+  function update(value) {
+    if(value !== lastValue) {
+      lastValue = value;
+      contentDecorator.setMarkdown(value);
+      cleanup($('.snippet-'+snippetName));
+    }
+  }
+  
+  function loadSnippet() {
+     var path = window.burp_path || window.location.pathname;
+     if(path === "/") {
+       path = "/$root";
+     }
+
+     $.ajax("/burp/pages/"+path,{
+       cache:false,
+       dataType:'json',
+       success:function(data) {
+         if(data === null) {
+           // No page yet so our code needs a bit help
+           data = {};
+         }
+
+         // We default to the html
+         var value = originalHtml;
+         if(data.misc && data.misc.markdown && data.misc.markdown[snippetName]) {
+           value = data.misc.markdown[snippetName];
+         } else if(data.snippets[snippetName]) {
+           value = data.snippets[snippetName];
+         }
+
+         originalValue = value;
+         editor.setValue(value);
+         editor.clearHistory();
+
+         update(editor.getValue());
+       }
+     });
+   }
+  
+  function loadFiles() {
+    
+    $.getJSON('/burp/files/',function(data) {
+      
+      $('#gallery .images li').remove();
+      
+      $.each(data.paths,function(index,path) {
+        var pathParts = path.split("/");
+        var fileName = pathParts[pathParts.length-1];
+        if(fileName.match(/\.(png|jpeg|jpg|gif)$/i)) {
+          $('#gallery .images').append('<li title="'+fileName+'"><img src="'+path.replace(/(\/files\/)/,'/files/small/')+'"><span  class="position-helper"><label>'+fileName+'</label><span></li>');
+        } else {
+          $('#gallery .images').append('<li title="'+fileName+'"><span path="'+path+'" class="click-area">Double click to add file</span><span class="position-helper"><label>'+fileName+'</label><span></li>');
+        }
+      });
+
+      contentDecorator.makeDroppable('#gallery img', function(element, positionClass) {
+        return $("<img src='" + $(element).attr('src') + "' class='" + positionClass + "' />");
+      });
+      
+      $('#gallery').trigger('reset');
+    });
+  }
+  
+  function showJSONErrors(responseJSON) {
+    var errorMessage = "";
+    $.each(responseJSON.errors,function(index,error) {
+      $.each(error,function(key,value) {
+        errorMessage += value;
+      });
+    });
+    alert(errorMessage);
+  }
+  
+  function selectSnippet(_snippetName) {
+    
+    if(contentDecorator) {
+      contentDecorator.cleanup();
+      contentDecorator.removeDroppable($('#gallery img'));
+    }
+    
+    snippetName = _snippetName;
+    originalHtml = $('.snippet-'+snippetName).html();
+    contentDecorator = new ContentDecorator('.snippet-'+snippetName);
+    contentDecorator.addRemoveZone('#gallery');
+    $('#code').val(originalHtml);
+    
+  }
+    
+  function addEditor() {
+    
+    elements.appendTo('body');
+    $('#code').val(originalHtml);
+  
+    editor = CodeMirror.fromTextArea($('#code')[0], {
+      mode: 'markdown',
+      lineNumbers: true,
+      matchBrackets: true,
+      lineWrapping: true,
+      theme: "default",
+      onChange:function(editor,changes) {
+        update(editor.getValue());
+      }
+    });
+    
+    $(document).on('dblclick.burp','#gallery li img, #gallery li .click-area',function(event) {
+      event.preventDefault();
+      
+      var url = $(this).attr('src') || $(this).attr('path');
+      $('.admin-dock .icon-edit').click();
+      editor.focus();
+      var textToLink = editor.getRange(editor.getCursor(true),editor.getCursor(false));
+      if(textToLink === "") {
+        textToLink = url;
+      }
+      
+      // Use link to large image
+      if(url.match(/(png|jpeg|gif|jpg)/i)) {
+        url = url.replace(/\/files\/small\//,'/files/large/');
+      }
+      
+      var content = url.match(/\.(png|jpeg|jpg|gif)$/i) ? '<img src="'+url+'">' : '<a href="'+url+'">'+textToLink+'</a>';
+      editor.replaceRange(content,editor.getCursor(true),editor.getCursor(false));
+    });
+
+    contentDecorator.addRemoveZone('#gallery');
+    
+    // update(editor.getValue());
+    loadFiles();
+  
+    $.adminDock.title('');
+    $.adminDock.footer.addButton({ icon: 'picture', text: "Pictures", showModule: $('#gallery') });
+    $.adminDock.footer.addButton({ icon: 'edit', text: "Edit text", showModule: $('#myContentEditor'), show: function() {
+      editor.refresh();
+    } });
+
+    var snippet_names = [];
+    $.each(snippets().snippets,function(name,snippet) {
+      snippet_names.push(name);
+    });
+    
+    snippet_names.sort(function(a, b) { return a.toLowerCase() > b.toLowerCase(); });
+    
+    
+    // Why show snippet selection when there is only one
+    if(snippet_names.length > 1) {
+      $.adminDock.footer.addSelector({
+        options: snippet_names,
+        'default': snippet_names[0],
+        change: function(option) {
+        
+        
+          selectSnippet(option);
+          loadSnippet();
+        
+          $('#gallery img').removeClass('movable');
+          contentDecorator.makeDroppable('#gallery img', function(element, positionClass) {
+            return $("<img src='" + $(element).attr('src') + "' class='" + positionClass + "' />");
+          });
+        
+          console.debug("Switching to " + option);
+        }
+      });
+    }
+    
+
+    $('<div id="file-uploader" style="overflow: hidden; width: 0px; height: 0px; position: absolute;"></div>').appendTo('body');
+
+
+    var uploader = new qq.FileUploader({
+        element: document.getElementById('file-uploader'),
+        params: {authenticity_token : $('meta[name=csrf-token]').attr('content')},
+        action: '/burp/files',
+        onComplete: function(id, fileName, responseJSON){
+          if(responseJSON.success) {
+            loadFiles();
+          } else {
+            showJSONErrors(responseJSON);
+          }
+        }
+    });
+  
+    $.adminDock.footer.addButton({ icon: 'upload', text: 'Upload', secondary: true, click:function() {
+      $('#file-uploader input').click();
+    }});
+    
+    $.adminDock.footer.addButton({ icon: 'signin', text: 'Go to Burp', click:function() {
+      window.location = "/burp/pages/";
+    }});
+    
+    $.adminDock.footer.addButton({ icon: 'undo', text: 'Discard', secondary: true, click:function() {
+      // We set this as it holds all the images as when we started
+      $('.snippet-'+snippetName).html(originalHtml);
+      contentDecorator.init();
+      editor.setValue(originalValue);
+    }});
+    
+    $.adminDock.footer.addButton({ icon: 'save', text: 'Save', secondary: true, click:function() {
+      
+      var path = window.burp_path || window.location.pathname;
+      if(path === "/") {
+        path = "/$root";
+      }
+      
+      $.ajax("/burp/pages/"+path,{
+        cache:false,
+        dataType:'json',
+        success:function(data) {
+          
+          data = data || {snippets:{}};
+          
+          data.snippets[snippetName] = contentDecorator.getHtml();
+          data.misc = data.misc || {markdown:{}};
+          data.misc.markdown[snippetName] = contentDecorator.getMarkdown();
+
+          $.ajax("/burp/pages/"+path,{
+            type:"post",
+            data:{page:data,'_method':"put"},
+            dataType:'json',
+            success:function() {
+              
+              originalValue = contentDecorator.getMarkdown();
+              originalHtml = contentDecorator.getHtml();
+              
+              alert("The page was saved!");
+            }
+          });
+        }
+      });
+      
+      
+    }});
+  
+    $.adminDock.show('#gallery', false);
+  }
+  
+  var initDone = false;
+  
+  function init() {
+    if(!initDone) {
+      initDone = true;
+      
+      wrapContent();
+      selectSnippet(snippets().names[0]);
+      addEditor();
+      loadSnippet();
+      
+      $('#gallery').trigger('refresh');
+      setTimeout(function() { $('#gallery').trigger('refresh'); },300);
+      setTimeout(function() { $('#gallery').trigger('refresh'); },600);
+      setTimeout(function() { $('#gallery').trigger('refresh'); },1200);
+      setTimeout(function() { $('#gallery').trigger('refresh'); },5000);
+    }
+  }
+  
+  function trigger_http_basic_auth(callback) {
+    if(initDone) {
+      callback();
+    } else {
+      $.get("/burp/",callback);
+    }
+  }
+  
+  var start_time;
+  
+  $(window).keydown(function(event) {
+    if (
+      ((event.altKey === true || event.ctrlKey === true ) && event.keyCode === 27) ||
+      (event.altKey === true && event.ctrlKey === true && event.keyCode === 32)
+      ) {
+        
+      if(!start_time || start_time.getTime() + 1000 < new Date().getTime()) {
+        trigger_http_basic_auth(function() {
+          init();
+          $.adminDock.toggle();
+          start_time = null;
+        });
+      }
+    }
+  });
+  
+  $(window).resize(function() {
+    $('#gallery').trigger('refresh');
+  });
+  
+});