skylinecms 3.0.7

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

@@ -0,0 +1,267 @@
+Application.Browser = new Class({
+  Extends: Skyline.RemoteDialog,
+  initialize : function(params){
+    if(params.common){
+      this.setOptions({width: 800, height: 500});
+    } else {
+      this.setOptions({width: 800, height: 400});
+    }
+    this.params = params;
+    this.parent(arguments[1]);
+    this.addEvent("close",this._onClose.bind(this));
+    this.addEvent("loaded",this.setupLayout.bind(this));
+  },
+  select : function(){
+    var values = this.serialize();
+    this.close();
+    this.fireEvent("select",[values]);
+    this.destroy();    
+  },
+  
+  cancel : function(){    
+    this.close();
+    this.fireEvent("cancel");
+    this.destroy();
+  },
+  
+  _onClose : function(){
+    this.fireEvent("cancel");
+    this.destroy();    
+  },  
+  
+  serialize : function(){
+    if(this.commonPanel) {
+      return $merge(this._serializeContainer(this.commonPanel.element), this._serializeContainer(this.tabs.activeTab.windowEl));
+    } else {
+      return this._serializeContainer(this.tabs.activeTab.windowEl);
+    }
+  },
+  
+  setupLayout : function(){
+    var d = this.contentEl.getElement(".dialog"), tp, tw;
+    this.layout = new Skyline.VerticalLayout(d);
+
+    tp = this.layout.addPanel(d.getElement(".tabPanel"), {height:"content"});
+    
+    this.tabs = new Skyline.Tabs();
+    
+    var tabElements = tp.element.getElements("li");
+    var tabWindows = d.getElements("div.window");
+    var commonPanel = d.getElement(".commonPanel");
+    var tabOptions = {height: 300, layout: "horizontal", hidden:true};
+    if(!commonPanel){
+      tabOptions = {height: null, layout: "horizontal", hidden:true};
+    }
+    
+    tabElements.each(function(el,i){
+      var t = this.tabs.addTab(el,tabWindows[i]);
+      this.fireEvent("addTab",[t]);
+      this.layout.addPanel(tabWindows[i],tabOptions);
+    }.bind(this));
+    
+    if(commonPanel){
+      this.commonPanel = this.layout.addPanel(commonPanel);
+    }
+    this.layout.addPanel(d.getElement(".footerPanel"), {height:"content"});      
+    
+    this.tabs.addEvent("activateTab",function(control,tab){
+      if(control.previouslyActiveTab){ 
+        control.previouslyActiveTab.windowEl.retrieve("skyline.layout").hide();
+      }
+      var l = tab.windowEl.retrieve("skyline.layout");
+      l.show();
+    }.bind(this));
+      
+    this.layout.setup();
+    this.tabs.setup();    
+  },
+
+  _serializeContainer  : function(element){
+    if(!element){ return {}; }
+    var values = {}, t = this;
+    element.getElements('input, select, textarea', true).each(function(el){
+      if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file'){ return; }
+      var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
+        return opt.value;
+      }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
+      $splat(value).each(function(val){
+        if (typeof val != 'undefined') {
+          values[t._extract_name(el.name)] = val;
+        }
+      });
+    });
+    return values;    
+  },
+  
+  _extract_name : function(name){
+    return name.replace(/browser\[(.+)\]/,"$1");
+  }
+
+});
+
+
+$extend(Application.Browser,{
+  browseLinkFor : function(section){
+    this.browseFor(section,Application.LinkBrowser,arguments[1]);    
+  },
+  browseImageFor : function(section){
+    this.browseFor(section,Application.ImageBrowser,arguments[1]);
+  },
+  browseFileFor : function(section){
+    this.browseFor(section,Application.FileBrowser,arguments[1]);
+  },
+  browsePageFor : function(section){
+    this.browseFor(section,Application.PageBrowser,arguments[1]);
+  },
+  
+  /*
+    Function: unlink
+    Unlink the element. Clears input.referable_type
+  */
+  unlink : function(element){
+    var element = $(element);
+    var relatesTo;
+    
+    element.set("class","")
+    
+    element.getElement("input.referable_type").set("value","");
+    element.getElement("input.referable_id").set("value","");
+    element.getElement("span.referable_title").set("html","");
+    
+    var rDelete = element.getElement("input.referable_delete") || element.getElement("input.delete");
+    rDelete.set("value","1");
+    
+    if(relatesTo = element.getElement("div.relatesTo")){
+      relatesTo.removeClass('linked');
+    }
+    
+  },
+  
+  /*
+    Function: browseFor
+    Simple browse method, works by getting elements by class name.
+    The container must contain at least:
+     - input.referable_type
+     - input.referable_id
+    
+    Parameters:
+    
+    element - The container element
+    browser - The browser Class to use (default = Application.LinkBrowser)
+  
+  */
+  browseFor : function(element,browser){
+    if(!browser){ var browser = Application.LinkBrowser; }
+    var options = arguments[2] || {};
+    
+    var liClass, element = $(element);
+    var relatesTo = element.getElement("div.relatesTo");
+    var rTEl = element.getElement("input.referable_type");
+    var rIEl = element.getElement("input.referable_id");
+    var rTitleEl = element.getElement("span.referable_title");
+    var ltEl = element.getElement("input.link_title");
+    var lcuEl = element.getElement("input.link_custom_url");
+    var rDelete = element.getElement("input.referable_delete") || element.getElement("input.delete");
+    
+    var dialogParams = {
+      "referable_type" : rTEl.get("value"), 
+      "referable_id" : rIEl.get("value")
+    };
+    
+    if(lcuEl){
+      dialogParams.url = lcuEl.get("value");
+    }
+    
+    var dialog = new browser(dialogParams);
+      
+    dialog.addEvent("select",function(values){
+      if (values.referable_type && values.referable_type !== "Skyline::ReferableUri") {
+        rTEl.set("value",values.referable_type);
+        rIEl.set("value",values.referable_id);
+        if(rTitleEl){ rTitleEl.set("html",values.referable_title); }
+        if(lcuEl){ lcuEl.set("value",""); }
+        
+        // Setting class
+        liClass = Application.rubyClassToCssClass(values.referable_type);
+        if(values.file_type){ liClass += " " + values.file_type; }
+        element.set("class",liClass);
+      } else {
+        rTEl.set("value","Skyline::ReferableUri");
+        rIEl.set("value","");
+        if(lcuEl){ lcuEl.set("value",values.url); }
+        if(rTitleEl){ rTitleEl.set("html",values.url);}
+        element.set("class","external");
+      }
+      
+      if(ltEl && ltEl.get("value").trim() === ""){
+        ltEl.set("value",values.referable_title || values.url);
+      }
+      
+      if(relatesTo){
+        relatesTo.addClass("linked");
+      }
+      
+      if(rDelete){
+        rDelete.set("value",0);
+      }
+      
+    });
+    dialog.open();    
+  }
+})
+
+
+Application.ImageBrowser = new Class({
+  Extends : Application.Browser,
+  url : "/skyline/browser/images",
+  initialize : function(params){
+    this.addEvent("select", function(values){
+      if (values.url) {
+        values.url = Application.sanitizeUrl(values.url);
+      }
+    });
+    this.parent(params);
+  }
+});
+
+Application.LinkBrowser = new Class({
+  Extends : Application.Browser,
+  url : "/skyline/browser/links",
+  initialize : function(params){
+    
+    if(params.common && params["new"]){
+      this.addEvent("addTab",function(tab){
+        var id = tab.windowEl.get("id");
+        if(id == "browserExternalLink" || id == "browserMediaLibrary"){
+          var bTargetEl = this.contentEl.getElement(".browser_target");
+          var bTargetOptions =  bTargetEl.getElements("option").map(function(el){return el.get("value");});
+          tab.addEvent("activate",function(tab){
+            tab.origTargetIdx = bTargetEl.selectedIndex;
+            bTargetEl.selectedIndex = bTargetOptions.indexOf("_blank");
+          });
+          tab.addEvent("deactivate",function(tab){
+            if(tab.origTargetIdx){
+              bTargetEl.selectedIndex = tab.origTargetIdx;
+            }
+          });        
+        }
+      }.bind(this));
+    }
+    this.addEvent("select", function(values){
+      if (values.url) {
+        values.url = Application.sanitizeUrl(values.url);
+      }
+    });
+    this.parent(params);
+  }
+});
+
+Application.PageBrowser = new Class({
+  Extends : Application.Browser,
+  url : "/skyline/browser/pages"
+});
+
+Application.FileBrowser = new Class({
+  Extends : Application.Browser,
+  url : "/skyline/browser/files"
+});

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

@@ -0,0 +1,102 @@
+/*
+  Class: Skyline.DraggableFileList
+  Implements a basic draggable list that triggers events to do AJAX or other actions
+  
+  Parameters:
+    draggableSelector - css query rule for draggables
+    droppableSelector - css query rule for droppables.
+    
+  Events:
+    dropped - triggered when a dragged element is dropped into a droppable container with 2 
+              parameters. the draggable element and the droppable element.
+    
+*/
+Application.DraggableFileList = new Class({
+	Implements: [Events, Options],
+  options : {
+    draggableOpacity: 0.5
+  },
+  initialize : function(draggableSelector, droppableSelector,options){
+    this.setOptions(options);
+    this.draggableSelector = draggableSelector;
+    this.droppableSelector = droppableSelector;
+    
+    
+    this.draggables = $$(this.draggableSelector);
+    this.droppables = $$(this.droppableSelector);
+    
+    this.draggables.each(function(item){
+      item.addEvent('mousedown', this.startDrag.bindWithEvent(this,item));
+      item.addEvent('click',function(ev){ this.fireEvent("selected",[ev,item]); }.bindWithEvent(this));
+    }.bind(this));
+  },
+  startDrag : function(ev,item){
+    var event = new Event(ev);
+    
+    // Clone item to be dragged to keep the list intact also clones content and id of the 
+    // element.
+    var clone = item.clone(true,true).inject(document.body);
+    clone.addClass("draggableFile");
+    var dimen = item.getCoordinates();
+    clone.setStyles({
+      visibility : "hidden",
+      "float": "none", 
+      left: dimen.left, 
+      top: dimen.top, 
+      position: "absolute"});
+    
+    //Set up drag events
+    var fileDrag = new Drag.Move(clone, {
+      snap: 5,
+      droppables: this.droppables
+    });
+    fileDrag.dragEl = item;
+
+    fileDrag.fileList = this;
+    fileDrag.origOpacity = fileDrag.dragEl.get('opacity');
+    
+    fileDrag.addEvent("snap", function(){
+      event.stop();
+    });
+    
+    fileDrag.addEvents({
+      "snap": this._onSnap,
+      "drop": this._onDrop,
+      "enter": this._onEnterDroppable,
+      "leave": this._onLeaveDroppable,
+      "complete": this._onComplete,
+      "cancel": this._onComplete
+    });
+    
+    // Start the drag manually
+    fileDrag.start(ev);    
+  },
+  _onSnap : function(){
+    this.element.setStyle('visibility', 'visible');
+    this.dragEl.set("opacity",this.options.draggableOpacity);    
+  },
+  _onDrop : function(clone, droppable,event){
+    if (droppable) {
+      var event = new Event(event);      
+      event.stop();
+      this.fileList.fireEvent("dropped",[this.dragEl, droppable]);
+    } 
+  },
+  _onEnterDroppable : function(clone,droppable){
+    this.currentDrop = droppable;
+    this.currentDrop.addClass("droppable");
+    this.currentDrop.addClass("inside");    
+  },
+  _onLeaveDroppable : function(clone,droppable){
+    this.currentDrop.removeClass("droppable");
+    this.currentDrop.removeClass("inside");
+  },
+  _onComplete : function(clone){
+    clone.destroy();    
+    this.detach();
+    if(this.currentDrop){
+      this.currentDrop.removeClass("droppable");
+    }
+    this.dragEl.set("opacity",this.origOpacity);    
+  }
+});

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

@@ -0,0 +1,226 @@
+//= require <uploader>
+
+/*
+  Class: Application.LibraryUploader
+  Implements the specific upload widget for Skyline.
+*/
+Application.LibraryUploader = new Class({
+  Extends: Skyline.Uploader,
+  options: {
+    path: "/skyline/javascripts/src/skyline/vendor/fancyupload/Swiff.Uploader.swf"
+  },
+  initialize : function(formId,options){
+    this.formEl = $(formId);
+    var fEl = this.formEl.getElement(".upload-files");
+    var pEl = this.formEl.getElement(".upload-progress");
+    
+    this.uploadBrowser = new Application.UploadBrowser(this,fEl);
+    this.uploadProgress = new Application.UploadProgress(this,pEl);  
+    
+    var options = options || {};
+    options.target = this.uploadBrowser.browseEl;
+    options.url = this.formEl.action;
+    options.fileClass= Application.UploadFile;
+    
+    this.addEvents({
+      "load" : this.onInit,
+      "updateStatus" : this.onUpdateStatus,
+      "start" : this.onStartUpload,
+      "completeSuccess" : this.onCompleteSuccess,
+      "completeFailure" : this.onCompleteFailure,      
+      "complete" : this.onCompleteUpload,
+      "fileStart" : this.onUpdateProgress,
+      "fileComplete" : this.onUpdateProgress,
+      "fileProgress" : this.onUpdateProgress
+    });    
+    this.parent(options);
+  },
+  // Events
+  onInit : function(){
+    this.uploadBrowser.show();
+    this.uploadProgress.hide();
+  },
+  onUpdateStatus : function(){
+    this.uploadBrowser.update();
+  },
+  onStartUpload : function(){
+    this.uploadBrowser.hide();
+    this.uploadProgress.show();  
+    this.uploadProgress.start();
+  },
+  onCompleteUpload : function(){
+    this.uploadBrowser.show();
+    this.uploadProgress.hide();
+    this.uploadBrowser.browseEl.destroy();
+    this.box.destroy();
+  },
+  onCompleteSuccess : function(){
+    this.uploadBrowser.setMessage(this.options.allUploadedMessage);
+  },
+  onCompleteFailure : function(){
+    this.uploadBrowser.setMessage(this.options.someUploadedMessage);          
+  },
+  onUpdateProgress : function(file){
+    this.uploadProgress.update(file);
+  }
+});
+
+Application.UploadBrowser = new Class({
+  initialize : function(base,containerEl){
+    var fEl = this.containerEl = $(containerEl);
+    this.base = base;
+    
+    this.listEl = fEl.getElement("ul.files");  // The file list
+    this.browseEl = fEl.getElement(".browse"); // The browse button
+    this.uploadEl = fEl.getElement(".upload"); // The upload button (starts upload)
+    
+    this.blankListEl = fEl.getElement(".blank"); // The blank slate element (OPTIONAL)
+    this.totalFilesEl = fEl.getElement(".total-files"); // The total files to upload indicator (OPTIONAL)
+    this.totalSizeEl = fEl.getElement(".total-size"); // The total size in kB to upload indicator (OPTIONAL)
+    this.messagesEl = fEl.getElement(".messages"); // The messages panel (OPTIONAL)
+    
+    this.uploadEl.addEvent("click",function(){
+      base.start();
+      return false;
+    });    
+  },
+  setMessage : function(msg){
+    if(this.messagesEl){
+      this.messagesEl.set("html",msg);
+    }
+  },
+  update : function(){
+    // Blank slate cleanup
+	  if(this.blankListEl){ 
+      if(this.base.size === 0){
+        this.blankListEl.removeClass("hide");
+      } else {
+        this.blankListEl.addClass("hide");
+      };	      	    
+	  }
+    
+    if(this.totalFilesEl){
+      this.totalFilesEl.set("html",this.base.fileList.length);
+    }
+    if(this.totalSizeEl){
+      this.totalSizeEl.set("html",Swiff.Uploader.formatUnit(this.base.size,"b"));
+    }    
+  },
+  hide : function(){
+    this.containerEl.addClass("hide");
+  },
+  show : function(){
+    this.containerEl.removeClass("hide");    
+  }
+});
+
+Application.UploadProgress = new Class({
+  initialize : function(base,containerEl){
+    var fEl = this.containerEl = $(containerEl);
+    this.base = base;
+    
+    this.setters.each(function(fun,fName){
+      var el = fEl.getElement(fun[0]);
+      
+      if(el){
+        this[fName] = fun[1].pass(el,this);
+      } else {
+        this[fName] = $empty;
+      }
+    },this);
+    
+    this.cancelEl = fEl.getElement(".cancel");
+    if(this.cancelEl){
+      this.cancelEl.addEvent("click",function(){
+        base.stop();
+      });
+    }
+    
+  },
+  start : function(){
+    this.updateTotalFiles();
+    this.updateTotalSize();    
+  },
+  update : function(file){
+    this.currentFile = file;
+    this.updateCurrentFile();
+    this.updateCurrentPercentage();
+    this.updateCurrentSize();
+    this.updateProgressBar();   
+  },
+  hide : function(){
+    this.containerEl.addClass("hide");
+  },
+  show : function(){
+    this.containerEl.removeClass("hide");    
+  },
+  
+  setters : $H({
+    updateTotalFiles  : [".total-files", function(el){ el.set("html",this.base.fileList.length); }],
+    updateTotalSize   : [".total-size" , function(el){ el.set("html",Swiff.Uploader.formatUnit(this.base.size,"b")); }],
+    updateCurrentFile : [".current-file", function(el){ el.set("html", this.base.fileList.indexOf(this.currentFile) + 1 );}],
+    updateCurrentPercentage : [".current-percentage", function(el){ el.set("html",this.base.percentLoaded + "%"); }],
+    updateCurrentSize : [".current-size", function(el){ el.set("html", Swiff.Uploader.formatUnit(this.base.bytesLoaded, 'b')); }],
+    updateProgressBar : [".progressbar .bar", function(el){ el.setStyle("width",this.base.percentLoaded + "%"); }]
+  })
+});
+
+Application.UploadFile = new Class({
+  Extends: Skyline.Uploader.File,
+  render : function(){
+		if (this.invalid) {
+			this.remove();
+			return;
+		}
+    
+		this.addEvents({
+      'success' : this.onSuccess,
+      'failure' : this.onFailure,
+      'stop' : this.onStop,
+      'remove': this.onRemoveFile // Don't call this onRemove (it conflicts with internal onRemove)
+		});    
+    
+    this.infoEl = new Element('span', {'class': 'info'});
+    this.removeEl =  new Element('a', {
+			'class': 'remove',
+			href: '#',
+			html: "X",
+			title: "X",
+			events: {
+				click: function() {
+					this.remove();
+					return false;
+				}.bind(this)
+			}
+		});
+		
+		this.element = new Element('li').adopt(
+		    new Element("span",{"class": "name", "html" : this.name}),
+  			new Element('span', {'class': 'size', 'html': " (" + Swiff.Uploader.formatUnit(this.size, 'b') + ") "}),
+  			this.removeEl,
+  			this.infoEl
+		).inject(this.base.uploadBrowser.listEl);
+  },
+  // Events
+  onFailure : function(){
+    this.element.removeClass("success");        
+    this.element.addClass("failed");
+    if(this.response.code == 422){
+      if(this.response.json && this.response.json.errors){
+        this.infoEl.set("html", this.response.json.errors["file"]);
+      }
+    } 
+    this.removeEl.destroy();          
+  },
+  onSuccess : function(){
+    this.element.removeClass("failed");
+    this.element.addClass("success");
+    this.removeEl.destroy();    
+  },
+  onStop : function(){
+    this.remove();
+  },
+	onRemoveFile: function() {
+	  this.element.destroy();
+	}  
+});