st-rich 1.5.1

data/app/assets/javascripts/rich/browser/uploader.js

@@ -0,0 +1,68 @@
+// Implementation of the QQ FileUploader class for use in Rich
+
+var rich = rich || {};
+
+rich.Uploader = function(){
+	
+	this._options = {
+		uploadButtonId: 'upload',
+		insertionPoint: 'uploadBlock',
+		uploadType: $.QueryString["type"],
+		scoped: $.QueryString["scoped"],
+		scope_type: $.QueryString["scope_type"],
+		scope_id: $.QueryString["scope_id"]
+	};
+	
+	// create the qq uploader
+	var self = this;
+	var uploader = new qq.FileUploaderBasic({
+	  button: document.getElementById(self._options.uploadButtonId),
+		multiple: true,
+		maxConnections: 3,
+		action: $("#new_rich_file").attr("action"),
+		params: { authenticity_token: $("input[name='authenticity_token']").attr("value"),
+		 	      simplified_type: this._options.uploadType,
+				  scoped: this._options.scoped,
+				  scope_type: this._options.scope_type,
+				  scope_id: this._options.scope_id
+		},
+		debug: true,
+		onComplete: function(id, fileName, responseJSON) { self.uploadComplete(id, fileName, responseJSON); },
+		onSubmit: function(id, fileName) { self.uploadSubmit(id, fileName); },
+		onProgress: function(id, fileName, loaded, total) { self.uploadProgress(id, fileName, Math.round(loaded/total*100)); }
+	});
+};
+
+rich.Uploader.prototype = {
+
+	uploadComplete: function(id, fileName, response){
+		if (response.success){
+			$('#up'+id+' .progress-bar').first().width("100%");
+			$('#up'+id+' .spinner').first().addClass("spinning");
+			//get the created image object's id from the response and use it to request the thumbnail
+			$.get("/rich/files/"+response.rich_id, function(data) {
+				$('#up'+id).replaceWith(data).addClass("test");
+				$('#image'+response.rich_id).addClass("new");
+			});
+    } else {
+				$('#up'+id+' .spinner').first().addClass("error");
+				$('#up'+id+' .spinner').first().removeClass("spinning");
+                $('#up'+id+' .progress-bar').first().remove();
+    }
+  },
+
+	uploadSubmit: function(id, fileName) {
+		// insert a new image placeholder after the upload button
+		$('#'+this._options.insertionPoint).after('<li id="up'+id+'"><div class="placeholder progress"><div class="progress-bar" style="width: 0%;"></div><div class="spinner"></div></div><p>'+fileName+'</p></li>');
+	},
+	
+	uploadProgress: function(id, fileName, progress) {
+		$('#up'+id+' .progress-bar').first().width(progress+"%");
+		
+		if(progress > 90) {
+			// start spinning
+			$('#up'+id+' .spinner').first().addClass("spinning");
+		}
+	},
+
+};

data/app/assets/javascripts/rich/editor/ckeditor_path.js.erb

@@ -0,0 +1 @@
+var CKEDITOR_BASEPATH = '/assets/ckeditor/';

data/app/assets/javascripts/rich/editor/rich_editor.js.erb

@@ -0,0 +1,14 @@
+// CKEditor plugin configuration
+
+function addQueryString( url, params ) {
+	var queryString = [];
+	if (!params) return url;
+	else {
+		for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
+	}
+	return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
+}
+
+// Don't remove empty <i> tags so FontAwesome and similar icon fonts
+// can be used in the editor without magically being stripped out
+delete CKEDITOR.dtd.$removeEmpty['i'];

data/app/assets/javascripts/rich/editor/rich_picker.js

@@ -0,0 +1,45 @@
+// Direct asset picker
+
+var rich = rich || {};
+rich.AssetPicker = function(){
+	
+};
+
+rich.AssetPicker.prototype = {
+	
+	showFinder: function(dom_id, options){
+		// open a popup
+		var params = {};
+		params.CKEditor = 'picker'; // this is not CKEditor
+		params.default_style = options.default_style;
+		params.allowed_styles = options.allowed_styles;
+		params.insert_many = options.insert_many;
+		params.type = options.type || "image";
+		params.viewMode = options.view_mode || "grid";
+		params.scoped = options.scoped || false;
+		if(params.scoped == true) {
+			params.scope_type = options.scope_type
+			params.scope_id = options.scope_id;
+		}
+		params.dom_id = dom_id;
+		var url = addQueryString(options.richBrowserUrl, params );
+		window.open(url, 'filebrowser', "width=860,height=500")
+  },
+
+	setAsset: function(dom_id, asset, id, type){
+		var split_field_name = $(dom_id).attr('id').split('_')
+		if (split_field_name[split_field_name.length - 1] == "id") {
+			$(dom_id).val(id);
+		} else {
+			$(dom_id).val(asset);
+		}
+
+    if(type=='image') {
+		  $(dom_id).siblings('img.rich-image-preview').first().attr({src: asset});
+    }
+  }
+
+};
+
+// Rich Asset input
+var assetPicker = new rich.AssetPicker();

data/app/assets/stylesheets/rich/application.css.scss

@@ -0,0 +1,365 @@
+//= depend_on_asset "rich/loading.png"
+//= depend_on_asset "rich/insert-many.png"
+//= depend_on_asset "rich/insert-one.png"
+//= depend_on_asset "rich/view-grid.png"
+//= depend_on_asset "rich/view-list.png"
+//= depend_on_asset "rich/plus.png"
+//= depend_on_asset "rich/plus-red.png"
+//= depend_on_asset "rich/x-red.png"
+//= depend_on_asset "rich/menu-dash.png"
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require_tree ./mixins
+*/
+
+
+// main vars
+$activeText: #3bbfce;
+$normalText: #3bbfce;
+$dimmedText: #3bbfce;
+
+$subtle: #f3f3f3;
+$light: #888888;
+$dark: #686868;
+
+
+$imageSize: 100px;
+$margin: 20px;
+$headerHeight: 46px;
+$verticalCenterOffset: 5px;
+
+$fontSizeSmall: 10px;
+$fontSizeNormal: 12px;
+$fontSizeLarge: 16px;
+
+
+// Mixins
+@mixin rounded($radius: 4px) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin inset-box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue) {
+	box-shadow: inset $x $y $blur $color;
+	-moz-box-shadow: inset $x $y $blur $color;
+	-webkit-box-shadow: inset $x $y $blur $color;
+}
+
+@mixin box-shadow($x: 2px, $y: 2px, $blur: 4px, $color: blue) {
+	box-shadow: $x $y $blur $color;
+	-moz-box-shadow: set $x $y $blur $color;
+	-webkit-box-shadow: $x $y $blur $color;
+}
+
+@-webkit-keyframes spinner {
+  from {-webkit-transform:rotate(0deg);}
+  to {-webkit-transform:rotate(360deg);}
+}
+
+// the meat
+*, html, body {
+	font-family: helvetica, arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+
+#legacy-form {
+	display: none;
+}
+
+header {
+	position: fixed;
+	z-index: 999;
+	height: $headerHeight;
+	width: 100%;
+
+	background: $subtle;
+	border-bottom: 1px solid white;
+
+	@include box-shadow(0, 0, 4px, rgba(0,0,0,0.5))
+}
+
+#loading {
+	background: image-url('rich/loading.png') no-repeat center;
+	width: 16px;
+	height: $headerHeight;
+	position: absolute;
+	margin-left: 20px;
+}
+
+#insert-toggle, #view-toggle {
+  float: right;
+  height: $headerHeight;
+  overflow: hidden;
+  margin: 0 $margin/2 0 0;
+}
+
+#view-toggle {
+  margin: 0 $margin 0 0;
+}
+
+#insert-many, #insert-one, #view-list, #view-grid {
+  display: block;
+  width: 16px;
+  height: $headerHeight;
+  text-indent: -9999em;
+  background: no-repeat center;
+}
+
+#insert-many {
+  background-image: image-url('rich/insert-many.png');
+}
+
+#insert-one {
+  background-image: image-url('rich/insert-one.png');
+}
+
+#view-grid {
+  background-image: image-url('rich/view-grid.png');
+}
+
+#view-list {
+  background-image: image-url('rich/view-list.png');
+}
+
+// Default thumbnail view
+#items {
+	list-style: none;
+	margin: 0 0 0 $margin;
+	padding: 0;
+	padding-top: $headerHeight + $margin + 1;
+
+	li {
+		width: $imageSize;
+		height: $imageSize + $margin;
+		margin-right: $margin;
+		float: left;
+
+		* {
+				transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-moz-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-ms-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+				-webkit-transition: opacity 85ms ease-in, box-shadow 85ms ease-in, color 85ms ease-in;
+		}
+
+		.placeholder {
+			height: $imageSize - 2;
+			width: $imageSize - 2;
+			border: 1px dotted $light;
+			@include rounded;
+			line-height: $imageSize - $verticalCenterOffset;
+			text-align: center;
+
+			font-size: $fontSizeLarge;
+			font-weight: bold;
+			color: $light;
+		}
+
+		img {
+			@include rounded;
+			@include box-shadow(0, 0, 4px, lighten($dark, 40%));
+		}
+
+		img:hover {
+			@include box-shadow(0, 0, 4px, $light);
+		}
+
+		img:active {
+			@include box-shadow(0, 0, 4px, black);
+		}
+
+		.new {
+			@include box-shadow(0, 0, 4px, rgb(58,194,207))
+		}
+
+		.spinner {
+			opacity: 0.3;
+			margin-left: ($imageSize - 2)/2 - 32/2;
+			margin-top: 31px;
+			width: 32px;
+			height: 32px;
+			background: image-url('rich/plus.png') no-repeat top center;
+		}
+
+		#upload .spinner {
+			opacity: 1;
+		}
+
+		.progress .progress-bar {
+			background: $subtle;
+			height: $imageSize - 2;
+			float: left;
+		}
+
+		.progress .spinning {
+		  -webkit-animation-name: spinner;
+		  -webkit-animation-duration:0.75s;
+		  -webkit-animation-iteration-count:infinite;
+		  -webkit-animation-timing-function:linear;
+		}
+
+		.progress .spinner.error {
+			opacity: 1;
+			background-image: image-url('rich/plus-red.png');
+			-webkit-transform: rotate(45deg);
+		}
+
+		p {
+			font-size: 10px;
+			margin: 0;
+			line-height: $margin - 3;
+			height: $margin;
+			overflow:hidden;
+			text-overflow: ellipsis;
+			color: $subtle;
+			width: 80px;
+		}
+
+		&:hover p {
+			color: $light;
+		}
+
+		.delete {
+			position: absolute;
+			text-indent: -9999px;
+			margin-left: 80px;
+			margin-top: -$margin;
+			width:$margin;
+			height: $margin;
+			background: image-url('rich/x-red.png') no-repeat right ($margin / 2 - 5);
+			opacity: 0.1;
+		}
+
+		&:hover .delete {
+			opacity: 0.5;
+		}
+
+		&:hover .delete:hover {
+			opacity: 1;
+		}
+
+	}
+
+	#uploadBlock:hover .placeholder .spinner {
+		background-position: 0 -32px;
+	}
+
+}
+
+// Condensed list view
+#items.list {
+
+  li {
+    width: auto;
+    height: 32px;
+    float: none;
+    margin-bottom: 16px;
+
+    img, .placeholder {
+      height: 32px;
+      width: 32px;
+      float: left;
+      margin-right: 16px;
+      line-height: 32px;
+      border: none;
+    }
+
+    .spinner {
+      margin: 0;
+    }
+
+    .progress .progress-bar {
+      background: $light;
+      height: 4px;
+      float: left;
+      @include rounded;
+      margin-top: 28px;
+    }
+
+
+    p {
+      color: $dark;
+      font-size: 14px;
+      width: auto;
+      height: 32px;
+      line-height: 32px;
+      float: left;
+      cursor: default;
+    }
+
+    .delete {
+        position: relative;
+        float: left;
+        text-indent: -9999px;
+        margin: 8px 0 0 0;
+        width:$margin;
+        height: $margin;
+        background: image-url('rich/x-red.png') no-repeat right ($margin / 2 - 5);
+        opacity: 0.1;
+    }
+
+    #uploadBlock:hover .placeholder .spinner {
+      background-position: 0 0px;
+    }
+
+  }
+
+}
+
+.clickable:hover {
+	cursor: pointer;
+}
+
+// scope selector
+ul.scopes {
+
+	list-style: none;
+	margin: 0 15px 0 ($margin/4*3);
+	padding: 0 10px 0 0;
+  background: image-url('rich/menu-dash.png') no-repeat right 23px;
+	float: right;
+
+	li {
+		float: left;
+		height: $margin;
+		line-height: $margin;
+		margin-right: $margin/4;
+		margin-top: ($headerHeight - $margin) / 2 + 1;
+		font-weight: bold;
+		font-size: 12px;
+	}
+
+	li.label {
+		color: $light;
+		padding-right: $margin/4;
+	}
+
+	li.scope {
+		color: $dark;
+		@include rounded;
+		padding: 0 $margin / 2;
+	}
+
+	li.scope:hover {
+		cursor: pointer;
+		background: darken($subtle, 10%);
+		text-shadow: 0px 1px 0 white;
+	}
+
+	li.scope.selected {
+		@include inset-box-shadow(0, 1px, 1px, $dark);
+		text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.25);
+		color: $subtle;
+		background: $light;
+	}
+
+}