skylinecms 3.0.8 → 3.1.0

data/public/skyline/javascripts/src/application.js

@@ -13,6 +13,8 @@ var Application = {};
 //= require "browser"
 //= require "sections"
 //= require "poller"
+//= require "user_preferences"
+
 
 Application.LayoutSettings = {
   focusElement : null // The element to focus on domReady
@@ -31,7 +33,7 @@ Application.Layout = (function(){
       
       this.layout = new Skyline.VerticalLayout("application");
       this.layout.addPanel("headerArea", {height: "content"});
-      this.messageArea = this.layout.addPanel("messageArea", { layout: "horizontal", height: "content"});    
+      this.messageArea = this.layout.addPanel("messageArea", { layout: "horizontal", height: "content"});
       this.contentArea = this.layout.addPanel("contentArea", { layout: "horizontal"});
       
       var initStack = $A([]);
@@ -58,9 +60,9 @@ Application.Layout = (function(){
           this[fn](this[name]);
         }
       }.bind(this));
-
-      this.layout.setup();
-
+    
+      this.layout.setup();          
+       
       this._attachEvents();
       this._initializeUiComponents();
     },
@@ -101,11 +103,11 @@ Application.Layout = (function(){
       // Add all DD elements as panels and hide them (except the first)
       // We add the dd.contentFooterPanel manually later.
       var hidden = false;
-      var tabPanels = [];
       panel.element.getChildren("dd").each(function(dd){
-        if(dd.get("id") == "contentFooterPanel"){ return; }
-        var p = this[dd.get("id")] = panel.addPanel(dd, {layout: "vertical", hidden: hidden});
-        tabPanels.push(p);
+        var id = dd.get("id");
+        if(id == "contentFooterPanel"){ return; }
+        var p = this[id] = panel.addPanel(dd, {layout: "vertical", hidden: hidden});
+        if(this.initializeContentPanelTab){ this.initializeContentPanelTab(p,id); }
         hidden = true;
       }.bind(this));
       
@@ -118,8 +120,12 @@ Application.Layout = (function(){
     },
     
     initializeMetaPanel : function(panel){
-      panel.addPanel("metaHeaderPanel", {height:"content"});
-      panel.addPanel("metaBodyPanel");      
+      if($('metaHeaderPanel')){
+        panel.addPanel("metaHeaderPanel", {height:"content"});
+      }
+      if($('metaBodyPanel')){
+        panel.addPanel("metaBodyPanel");      
+      }
     },
     
     _initializeUiComponents : function(){
@@ -127,7 +133,7 @@ Application.Layout = (function(){
       $$('dl.advanced').each(function(e){
         new Skyline.Toggle(e.getElement("dt a"),e,{"class": "closed"});
       });
-
+      
       // TODO: Currently hardcoded, should someday become something like $$('ul.sections')...
       if($('contentlist')){
         new Application.Sections("contentlist",{ scrollParent : "contentEditPanel" });
@@ -164,10 +170,6 @@ Application.Layout = (function(){
         this.contentPreviewPanel.addPanel("contentPreview");
       }
 
-      if($("contentlist")){
-        new Application.Sections("contentlist",{ scrollParent : "contentEditPanel" });
-      }
-
       // Editor / Preview tabs
       if(this.contentFooterPanel){
         var tabEl = this.contentFooterPanel.element.getElement("ul.bottomtabs");
@@ -186,128 +188,120 @@ Application.Layout = (function(){
     }
   });
   
-  // =========================
-  // = Layout for Media view =
-  // =========================
   Layout.Media = new Class({
-    Extends : Layout,
-
-    initialize : function(){
-      this.parent(arguments);
-      this.initializeDirTree("dirtree");
-      $('newDir').addEvent("click", this.createDir.bind(this));
-    },
+    Extends : Layout
+  });
+  
+  Layout.Media.initializeTree = function(id, url){
+    var element = $(id);
+    var tree;
+    if(tree = element.retrieve("skyline.tree")){
+      tree.reload();
+      //Fire select event to open the active node
+      tree.selectNode(null, tree.selectedNode);
+      return;
+    };
+
+    tree = new Skyline.Tree(id,{
+      offsetParent: $(id).getOffsetParent(),      
+      draggable: true,
+      orderable: false,
+      dragMarker: false,
+      fixedRootNodes: true
+    });
 
-    initializeDirTree : function(id){
-      if(this.tree){
-        this.tree.reload();
-        //Fire select event to open the active node
-        this.tree.selectNode(null, this.tree.selectedNode);
-        return;
-      };
-
-      var self = this;
-
-      this.tree = new Skyline.Tree(id,{
-  	    offsetParent: $(id).getOffsetParent(),      
-        draggable: true,
-        orderable: false,
-        dragMarker: false,
-        fixedRootNodes: true
-      });
+    tree.skylineMediaDirsPath = url;
 
-      this.tree.addEvent("select", function(event,link){
-        if(event){ event.stop(); }
+    tree.addEvent("select", function(event,link){
+      if(!event){ return; }
 
-        new Request({ 
-          evalScripts: true, 
-          url: link.getProperty("href")
-        }).get();
-        return false;
-      });
+      event.stop(); 
 
-      /*Add move listener to send ajax request when a node is dropped*/
-      this.tree.addEvent("move", function(branchEl,newParentEl,newPosition){
-        var newParentId = Application.getId(newParentEl.get('id'));
-        var id = Application.getId(branchEl.get('id'));
-        new Request({ 
-          evalScripts:true, 
-          url: self.skylineMediaDirsPath + "/"+ id,
-          data: 'authenticity_token='+encodeURIComponent(Application.formAuthenticityToken)+'&skyline_media_dir[parent_id]=' + newParentId,
-          method: 'put'
-        }).send();
-        return false;
-      });
+      new Request({ 
+        evalScripts: true, 
+        url: link.getProperty("href")
+      }).get();
+      return false;
+    });
 
-      //Fire select event to open the active node
-      this.tree.selectNode(null, this.tree.selectedNode);
-    },
+    /*Add move listener to send ajax request when a node is dropped*/
+    tree.addEvent("move", function(branchEl,newParentEl,newPosition){
+      var newParentId = Application.getId(newParentEl.get('id'));
+      var id = Application.getId(branchEl.get('id'));
+      new Request({ 
+        evalScripts:true, 
+        url: this.skylineMediaDirsPath + "/"+ id,
+        data: 'authenticity_token='+encodeURIComponent(Application.formAuthenticityToken)+'&skyline_media_dir[parent_id]=' + newParentId,
+        method: 'put'
+      }).send();
+      return false;
+    });
 
-    initializeUploadPanel : function(dirPath){
-   	  $('finishedbutton').setStyle('display','none');
-      var innerPanel = new Skyline.Toggle($("libraryuploader").getElement(".head"),$("libraryuploader"));
-     	innerPanel.addEvent("toggle",function(){ 
-        this.uploadPanel.parent.setup();
-      }.bind(this));
+    tree.addEvent("expand", function(event,target){
+      var node = target;
+      Application.UserPreferences.set('media.dirs.tree.nodes.open.'+Application.getId(node.id), true);return false;
+    });
+    
+    tree.addEvent("collapse", function(event,target){
+      var node = target;
+      Application.UserPreferences.remove('media.dirs.tree.nodes.open.'+Application.getId(node.id));return false;
+    });      
 
-       // Setup the uploadPanel.
-       this.uploadPanel.parent.setup();
-
-   		var upl = new Application.LibraryUploader("libraryuploaderform",I18n.LibraryUploader);
-
-   	  upl.addEvent("complete",function(){
-   	    $('uploadstatus').destroy();
-   	    $('cancelselect').destroy();
-   	    $('uploadbutton').destroy();
-   	    $('finishedbutton').setStyle('display','');
-   	    $('finishedbutton').addEvent("click",function() {
-   	      new Request({ 
-   	          evalScripts:true, 
-   	          url: dirPath,
-   	          method: 'get'
-   	   	  }).send();
-   	   	  return false;
-   	    });
-   	    new Request({ 
-   	       evalScripts:true, 
-   	       url: dirPath,
-   	       data: "listonly=true",
-   	       method: 'get'
-   	   	}).send();
-   	  });
-
-   	  $('cancelselect').addEvent('click', function() {
-    		upl.remove(); // remove all files
-    		innerPanel.toggle();
-    		return false;
-  		});
-   	},
-
-    createDir : function(){
-      target_id = Application.getId(this.tree.selectedNode.getParent("li").get("id"));
 
-      new Request({ 
-        evalScripts: true,
-        data: 'authenticity_token='+encodeURIComponent(Application.formAuthenticityToken)+'&parent_id='+target_id,
-        url: this.skylineMediaDirsPath,
-      	method: 'post'
-      }).send();
-    },
+  };  
+  
+  Layout.Media.initializeUploadPanel = function(dirPath){
+    var uPanel = $('contentInfoPanel')
+    var fB = $('finishedbutton');
+    fB.setStyle('display','none');
+
+    var upl = new Application.LibraryUploader("libraryuploaderform",I18n.LibraryUploader);
+
+    fB.addEvent("click",function(e) {
+      e.preventDefault();
+      upl.reset();
+      $('uploadstatus').setStyle("display","");
+      $('cancelselect').setStyle("display","");
+      $('uploadbutton').setStyle("display","");
+      $('finishedbutton').setStyle("display","none");
+
+      uPanel.retrieve("skyline.layout").hide();
+    });  
+
+    upl.addEvent("complete",function(){
+      $('uploadstatus').setStyle("display","none");
+      $('cancelselect').setStyle("display","none");
+      $('uploadbutton').setStyle("display","none");
+
+      $('finishedbutton').setStyle('display','');
+
+      uPanel.retrieve("skyline.layout").parent.setup();
+
+      // Get new File list.
+      new Request({
+         evalScripts: true, 
+         url: $('libraryuploaderform').getProperty("action"),
+         method: 'get'
+       }).send();
+    });
 
-    initializeContentPanel : function(panel){
-      this.parent(panel);
+    upl.addEvent("start",function(){
+      uPanel.retrieve("skyline.layout").parent.setup();
+    })
 
-      this.uploadPanel = this.contentBodyPanel.addPanel("uploadPanel", {height: "content"});
-      this.contentBodyPanel.addPanel("fileListPanel");    
-    }
-  });  
+    $('cancelselect').addEvent('click', function() {
+     upl.reset(); // remove all files
+     uPanel.retrieve("skyline.layout").hide();
+     return false;
+   })
+  };
+  
   
   Layout.current = null;
   
   return Layout;
 })();
 
-
 /*
   Class: Application.PanelTabs
   Class to create tabsets automatically based on the structure:

data/public/skyline/javascripts/src/browser.js

@@ -213,8 +213,11 @@ $extend(Application.Browser,{
 
 Application.ImageBrowser = new Class({
   Extends : Application.Browser,
-  url : "/skyline/browser/images",
+  url : "",
   initialize : function(params){
+    // We have to set the URL here, because the Application.urlPrefix is not available at
+    // load time.
+    this.url = "/" + Application.urlPrefix + "/browser/images";
     this.addEvent("select", function(values){
       if (values.url) {
         values.url = Application.sanitizeUrl(values.url);
@@ -226,8 +229,11 @@ Application.ImageBrowser = new Class({
 
 Application.LinkBrowser = new Class({
   Extends : Application.Browser,
-  url : "/skyline/browser/links",
+  url : "",
   initialize : function(params){
+    // We have to set the URL here, because the Application.urlPrefix is not available at
+    // load time.
+    this.url = "/" + Application.urlPrefix + "/browser/links";
     
     if(params.common && params["new"]){
       this.addEvent("addTab",function(tab){
@@ -258,10 +264,22 @@ Application.LinkBrowser = new Class({
 
 Application.PageBrowser = new Class({
   Extends : Application.Browser,
-  url : "/skyline/browser/pages"
+  url : "",
+  initialize : function(params){
+    // We have to set the URL here, because the Application.urlPrefix is not available at
+    // load time.
+    this.url = "/" + Application.urlPrefix + "/browser/pages";    
+    this.parent(params);
+  }
 });
 
 Application.FileBrowser = new Class({
   Extends : Application.Browser,
-  url : "/skyline/browser/files"
+  url : "",
+  initialize : function(params){
+    // We have to set the URL here, because the Application.urlPrefix is not available at
+    // load time.
+    this.url = "/" + Application.urlPrefix + "/browser/files";    
+    this.parent(params);
+  }
 });

data/public/skyline/javascripts/src/library_uploader.js

@@ -20,7 +20,7 @@ Application.LibraryUploader = new Class({
     var options = options || {};
     options.target = this.uploadBrowser.browseEl;
     options.url = this.formEl.action;
-    options.fileClass= Application.UploadFile;
+    options.fileClass = Application.UploadFile;
     
     this.addEvents({
       "load" : this.onInit,
@@ -35,8 +35,18 @@ Application.LibraryUploader = new Class({
     });    
     this.parent(options);
   },
+  
+  // Reset the uploader to beginstate.
+  reset : function(){
+    this.onInit();
+    this.remove();
+  },
+  
   // Events
   onInit : function(){
+    this.uploadBrowser.browseEl.setStyle("visibility","visible");
+    this.uploadBrowser.uploadEl.setStyle("visibility","visible");    
+    this.box.setStyle("visibility","visible");  
     this.uploadBrowser.show();
     this.uploadProgress.hide();
   },
@@ -51,8 +61,8 @@ Application.LibraryUploader = new Class({
   onCompleteUpload : function(){
     this.uploadBrowser.show();
     this.uploadProgress.hide();
-    this.uploadBrowser.browseEl.destroy();
-    this.box.destroy();
+    this.uploadBrowser.browseEl.setStyle("visibility","hidden");
+    this.box.setStyle("visibility","hidden");
   },
   onCompleteSuccess : function(){
     this.uploadBrowser.setMessage(this.options.allUploadedMessage);

data/public/skyline/javascripts/src/sections.js

@@ -20,31 +20,81 @@ Application.Sections = new Class({
     this._initSortable();
   },
   
+  activate : function(section){
+    if(this.currentActive){
+      this.currentActive.removeClass("active");
+    }
+    this.currentActive = section;
+    this.currentActive.addClass("active");
+  },
+  
+  getCurrentActiveId : function(){
+    if($type(this.currentActive)){
+      return this.currentActive.get("id");
+    } else {
+      return null;
+    }
+  },
+  
   addSection : function(section){
+    var section = $(section);
     this.sortable.addItem(section);
+    this._initSection(section);
+    
+    // New sections should always be active
+    this.activate(section);
   },
   
   // Privates methods
   _initSortable : function(){
+    this.element.getChildren("li").each(function(el){this._initSection(el); }.bind(this));
+    
     this.sortable = new Skyline.Sortable(this.element,{handle: "span.dragSection", clone: this._fakeSection, revert: true});
     this.contentScroller = new Scroller(this.options.scrollParent);
     this.sortable.addEvents({
       "start" : function(){ this.contentScroller.start(); }.bind(this),
       "stop" : function(){ this.contentScroller.stop(); this.contentScroller.detach(); }.bind(this),
       "beforeDrop" : function(el){
+        var ed;
         if(ed = el.retrieve("skyline.editor")){
-          ed.element.setStyles({height: ed.editor.skyline_editor_height - 1, visibility: "hidden"});
-          ed.clear();
+          var fn = function(ed){
+            ed.element.setStyles({height: ed.editor.skyline_editor_height - 1, visibility: "hidden"});
+            ed.clear();            
+          }
+          if($type(ed) == "array"){ 
+            $A(ed).each(fn);
+          } else {
+            fn(ed);
+          }
         }              
       },
       "afterDrop" : function(el){
+        var ed;
         if(ed = el.retrieve("skyline.editor")){
-          ed.element.setStyles({height: 5, visibility: "visible"});
-          ed.render();
+          var fn = function(ed){
+            ed.element.setStyles({height: 5, visibility: "visible"});
+            ed.render();            
+          }
+          if($type(ed) == "array"){ 
+            $A(ed).each(fn);
+          } else {
+            fn(ed);
+          }
         }                            
       }
     });    
   },
+  
+  _initSection : function(section){
+    var activate = (function(){this.activate(section)}).bind(this)
+    section.addEvent("click", activate);
+    section.getElements("input, select, textarea").addEvent("focus", activate);   
+    
+    if(section.retrieve("skyline.editor")){
+      section.retrieve("skyline.editor").addEvent("focus", activate);
+    } 
+  },
+  
   _fakeSection : function(event,element,parent){
     var section = element.getElement("div.section"), sectionSize, clone, tools;
     sectionSize = section.getSize();
@@ -52,9 +102,10 @@ Application.Sections = new Class({
     clone = new Element("li",{"class" : "clone"}).setStyles({
       margin: '0px',
       position: 'absolute',
-      visibility: 'hidden'
+      visibility: 'hidden',
+      opacity: 0.5
     });
-    var es = clone.adopt(new Element("div",{"class" : "section"}).setStyles({"width": sectionSize.x, "height": sectionSize.y, opacity: 0.5}));
+    var es = clone.adopt(new Element("div",{"class" : "section"}).setStyles({"width": sectionSize.x, "height": sectionSize.y}));
     
     if(tools = element.getElement("ul.sectiontools")){
       clone.adopt(tools.clone(true));

data/public/skyline/javascripts/src/skyline/src/dialog.js

@@ -1,3 +1,6 @@
+/*
+  Class: Skyline.Dialog
+*/
 Skyline.Dialog = new Class({
   Implements: [Options,Events],
   options : {
@@ -6,6 +9,9 @@ Skyline.Dialog = new Class({
     blocker : Skyline.Blocker,
     blockerOpacity : 0.5
   },
+  /*
+    Constructor: initialize
+  */
   initialize: function(options){
     this.setOptions({blocker : Skyline.Blocker}); // Doesn't work in the options above 'cause of load order
     this.setOptions(options);

data/public/skyline/javascripts/src/skyline/src/drag.js

@@ -1,3 +1,9 @@
+/*
+  Class: Skyline.Drag
+  
+  Extends: 
+  Drag.Move
+*/
 Skyline.Drag = new Class({
   Extends : Drag.Move,
 	actualDrag: function(event){

data/public/skyline/javascripts/src/skyline/src/events.js

@@ -0,0 +1,50 @@
+(function(){
+  /*
+    Class: Element
+  */
+  var EventDelegation = {
+    /*
+      Function: addComponentEvent
+      Allows setting of events on components when the component hasn't been created yet. This only
+      works with components that will be linked to a specific DOM node. The component
+      is responsible for collecting the events through collectComponentEvents. If the component
+      already exists, it will just add the event to the component.
+      
+      Parameters:
+      componentName - The name of the component ("skyline.layout" for instance).
+      eventName     - The name of the event.
+      callback      - The callback function for the event.
+    */
+    addComponentEvent : function(componentName,eventName, callback){
+      var c, d, e;
+      if(c = this.retrieve(componentName)){
+        c.addEvent(eventName,callback);
+      } else {
+        d = this.retrieve(componentName + ".events");
+        if(!d){ d = []; }
+        e = {};
+        e[eventName] = callback;
+        d.push(e);
+        this.store(componentName + ".events", d);
+      }
+    },
+    /*
+      Function: collectComponentEvents
+      Collect all events set for a component and move them to the passed component.
+      
+      Parameters:
+      componentName - Name of the component
+      component     - The component that will now receive the events
+    */
+    collectComponentEvents : function(componentName,component){
+      var d = this.retrieve(componentName + ".events");
+      if(d){
+        for(var i = 0; i < d.length; i++){
+          component.addEvents(d[i]);
+        }
+        this.eliminate(componentName + ".events");
+      }
+    }
+  };
+  Element.implement(EventDelegation);
+})();

data/public/skyline/javascripts/src/skyline/src/field_replicator.js

@@ -1,14 +1,15 @@
-// Replicates values of the source
-// field on the keyup and change event
-//
-// If the target is a form field it will only set it
-// if the target doesn't have an own value set (determined by the "keyup" event)
-//
-// == Options
-// events:: The events on the source that will trigger replication ["keyup","change"]
-// translator:: Function to send the value to before replicating [function(value){return value;}]
-// stopOnTargetChange:: Stop if the target is changed [true]
-//--
+/*
+  Class: Skyline.FieldReplicator
+  Replicates values of the source field on the keyup and change event
+  
+  If the target is a form field it will only set it
+  if the target doesn't have an own value set (determined by the "keyup" event)
+
+  Options:
+  events      - The events on the source that will trigger replication ["keyup","change"]
+  translator  - Function to send the value to before replicating [function(value){return value;}]
+  stopOnTargetChange - Stop if the target is changed [true]  
+*/
 Skyline.FieldReplicator = new Class({
   Implements : [Options],
   options : {