th_simple_content_management 0.2.1 → 0.2.2

data/app/assets/javascripts/simple_content_management/simple_pages.js

@@ -1,23 +1,3 @@
 //= require bootstrap-tagmanager
 //= require redactor-rails
-
-$(function() {
-	if(!$("#simple_content_management_simple_pages_new, #simple_content_management_simple_pages_edit").length)
-		return;
-	$tagsmanager = $("[data-simple-routes-list]");
-	$tagsmanager.tagsManager({
-		prefilled: $tagsmanager.val().split(/,/g),
-		preventSubmitOnEnter: true,
-		typeahead: false,
-		hiddenTagListName: $tagsmanager.prop("name"),
-		validator: function(pathname) { return !pathname.match(/(?:^\/|\s|\/$)/); }
-	}).prop("name", "").val("");
-
-	var $hiddenTagsField = $(":input[name='simple_content_management_simple_page[simple_routes_list]']");
-
-	$tagsmanager.blur(function() {
-		if($(this).val().length) {
-			$(this).trigger(jQuery.Event("keypress", { which: 44 }));
-		}
-	});
-})
+//= require_tree ./simple_pages

data/app/assets/javascripts/simple_content_management/simple_pages/form.js

@@ -0,0 +1,32 @@
+//= require th-page-editor
+
+$(function() {
+	var $simplePageForm = $(".simple-page-form");
+	if(!$simplePageForm.length)
+		return;
+
+	(function() {
+		var $tagsmanager = $simplePageForm.find("[data-simple-routes-list]");
+		$tagsmanager.tagsManager({
+			prefilled: $tagsmanager.val().split(/,/g),
+			preventSubmitOnEnter: true,
+			typeahead: false,
+			hiddenTagListName: $tagsmanager.prop("name"),
+			validator: function(pathname) { return !pathname.match(/(?:^\/|\s|\/$)/); }
+		}).prop("name", "").val("").blur(function() {
+			if($(this).val().length) {
+				$(this).trigger(jQuery.Event("keypress", { which: 44 }));
+			}
+		});
+	})();
+
+	var $htmlContainer = $simplePageForm.find(".content-html-container");
+	$htmlContainer.pageeditor({
+		iframeStylePath: $("[data-iframe-style-path]").data("iframe-style-path")
+	});
+
+	$simplePageForm.submit(function() {
+		$htmlContainer.pageeditor("destroy");
+		$simplePageForm.find("#simple_content_management_simple_page_content_html").val($htmlContainer.html().replace(/^\s+|\s+$/g, ""));
+	});
+});

data/app/assets/javascripts/th-page-editor/column.js

@@ -0,0 +1,136 @@
+//= require jquery.ui.widget
+//= require jquery.ui.resizable
+
+$.widget("th.pageeditorcolumn", {
+	options: {
+		row: null
+	},
+
+	_create: function() {
+		if(this.options.span) this.span(this.options.span);
+		if(this.options.offset) this.offset(this.options.offset);
+		if(!this.isPlaceholder()) {
+			if(this.element.find(".row").length) {
+				this.convertToEditor();
+			} else {
+				this.enableResize();
+			}
+		}
+	},
+
+	span: function(newSpan) {
+		if(newSpan) {
+			newSpan = Math.min(this.spanwidth(), Math.max(1, parseInt(newSpan)));
+			this.element.prop("className", this.element.prop("className").replace(/span\d+/, ""));
+			this.element.addClass("span"+newSpan);
+		} else {
+			var match = this.element.prop("className").match(/span(\d+)/);
+			return match ? parseInt(match[1]) : 0;
+		}
+	},
+
+	offset: function(newOffset) {
+		if(newOffset != null) {
+			newOffset = Math.min(this.spanwidth()-1, Math.max(0, parseInt(newOffset)));
+			this.element.prop("className", this.element.prop("className").replace(/offset\d+/, ""));
+			if(newOffset > 0) this.element.addClass("offset"+newOffset);
+		} else {
+			var match = this.element.prop("className").match(/offset(\d+)/);
+			return match ? parseInt(match[1]) : 0;
+		}
+	},
+
+	spanwidth: function() {
+		return this.options.row.spanwidth();
+	},
+
+	row: function() {
+		return this.options.row.element;
+	},
+
+	isPlaceholder: function() {
+		return this.element.is(".column-add-placeholder");
+	},
+
+	cleanval: function() {
+		var $fonts = this.element.find("font");
+		for(var i = $fonts.length-1; i>=0; i--) {
+			$($fonts[i]).replaceWith($($fonts[i]).html());
+		}
+	},
+
+	val: function(newValue) {
+		if(newValue !== undefined) {
+			var $content = $("<div></div>");
+			$content.html(newValue);
+			var $column = $("<div></div>").html(newValue).pageeditorcolumn({
+				span: this.span(),
+				offset: this.offset(),
+				row: this.options.row
+			});
+			this.destroy();
+			this.element.replaceWith($column);
+		} else {
+			var $content = this.element.clone();
+			$content.find(".ui-resizable-handle, .hovertool").remove();
+			return ""+$content.html();
+		}
+	},
+
+	enableResize: function() {
+		var self = this;
+		this.element.resizable({
+			grid: [100],
+			handles: "e, w",
+			start: function(_, ui) {
+				self.row().pageeditorrow("disableColumnPlaceholders");
+				ui.originalPosition.left = ui.position.left = self.offset()*100;
+				ui.element.css("left", self.offset()*100);
+				ui.element.css("margin-right", ui.position.left + (ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width));
+				self.offset(0);
+			},
+			resize: function(_, ui) {
+				ui.element.css("margin-right", ui.position.left + (ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width));
+			},
+			stop: function(_, ui) {
+				var offset = Math.round(ui.position.left/100);
+				if(offset < 0) {
+					ui.size.width += offset*100;
+					offset = 0;
+				}
+				self.offset(offset);
+				self.span(Math.round(ui.size.width/100));
+
+				var $next = self.element.next();
+				if(!$next.pageeditorcolumn("isPlaceholder")) {
+					$next.pageeditorcolumn("offset", $next.pageeditorcolumn("offset") + Math.round(((ui.originalPosition.left - ui.position.left) + (ui.originalSize.width - ui.size.width))/100));
+				}
+
+				$(this).removeAttr("style");
+				self.row().pageeditorrow("enableColumnPlaceholders");
+			}
+		});
+	},
+
+	convertToEditor: function() {
+		if(!this.element.find(".row").length) {
+			this.element.html("<div class=row><div class=span"+this.span()+">"+this.element.html()+"</div></div>");
+		}
+		if(this.element.data("uiResizable")) {
+			this.element.resizable("destroy");
+		}
+		this.element.addClass("nested-editor").find(".hovertool").remove();
+		this.asEditor = this.element.pageeditor($.extend(this.options.row.options.editor.options, { spanwidth: this.span() }));
+	},
+
+	destroy: function() {
+		this.element.find(".hovertool").remove();
+		if(this.element.data("uiResizable")) {
+			this.element.resizable("destroy");
+		}
+		if(this.asEditor) {
+			this.element.removeClass("nested-editor");
+			this.asEditor.pageeditor("destroy");
+		}
+	}
+});

data/app/assets/javascripts/th-page-editor/index.js

@@ -0,0 +1,104 @@
+//= require jquery.ui.widget
+//= require th-page-editor/row
+//= require bootstrap-modal
+//= require bootstrap-tab
+
+(function($) {
+	var BASIC_SPANS_SELECTOR = ".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12".replace(/\.span\d+/g, function(classname) {
+		return classname + ":not(.nested-editor)";
+	});
+	var NO_PLACEHOLDER_SELECTOR = BASIC_SPANS_SELECTOR.replace(/\.span\d+/g, function(classname) {
+		return classname + ":not(.column-add-placeholder)";
+	});
+
+	$.widget("th.pageeditor", {
+		options: {
+			spanwidth: 12,
+			iframeStylePath: null,
+			editorModal: "#content-editor",
+			editorArea: "#content-editor textarea"
+		},
+
+		_create: function() {
+			this.addEmptyRow();
+			var self = this;
+			this.subeditors = [];
+			this.rows().each(function() {
+				$(this).pageeditorrow({ editor: self });
+			});
+
+			this.element.on("mouseenter", NO_PLACEHOLDER_SELECTOR, function() {
+				var $this = $(this);
+				$("<span class=\"hovertool btn btn-mini\"><i class=icon-trash></i></span>").prependTo(this).css({ marginTop: -11, marginLeft: -11 }).click(function() {
+					var $row = $this.pageeditorcolumn("row");
+					$this.remove();
+					$row.pageeditorrow("refreshColumnPlaceholders");
+					if(!$row.pageeditorrow("hasContentColumns")) {
+						$row.pageeditorrow("destroy");
+					}
+					self.checkEmptyRowRequired();
+					return false;
+				});
+			});
+
+			this.element.on("mouseleave", NO_PLACEHOLDER_SELECTOR, function() {
+				$(this).children(".hovertool").remove();
+			});
+
+			var $editorModal = $(this.options.editorModal);
+			var $editorArea = $(this.options.editorArea);
+			this.element.on("click", BASIC_SPANS_SELECTOR, function() {
+				var $column = $(this);
+				var saveCallback = function() {
+
+					switch($editorModal.find(".tab-pane.active").attr("id")) {
+						case "editor-container":
+							self.subeditors.push($column.pageeditorcolumn("convertToEditor"));
+							break;
+						default:
+						 $column.pageeditorcolumn("val", $editorArea.val());
+					}
+
+					$editorModal.modal("hide");
+					self.checkEmptyRowRequired();
+
+				};
+
+				$editorModal.modal("show").find("[data-save-button]").on("click", saveCallback)
+				$editorModal.on("hide", function() {
+					$editorModal.find("[data-save-button]").off("click", saveCallback);
+				});
+
+				$editorArea.redactor($.extend(getRedactorOptions(), {
+					iframe: true,
+					css: self.options.iframeStylePath,
+					formattingTags: ['p', 'plead', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4']
+				})).redactor("set", $column.pageeditorcolumn("val"));
+			});
+		},
+
+		checkEmptyRowRequired: function() {
+			if(this.rows().last().pageeditorrow("hasContentColumns")) {
+				this.addEmptyRow();
+			}
+		},
+
+		spanwidth: function() {
+			return this.options.spanwidth;
+		},
+
+		addEmptyRow: function() {
+			$("<div class=row></div>").appendTo(this.element).pageeditorrow({ editor: this });
+		},
+
+		rows: function() {
+			return this.element.children(".row");
+		},
+
+		destroy: function() {
+			this.rows().each(function() {
+				$(this).pageeditorrow("destroy");
+			});
+		}
+	});
+})(jQuery);

data/app/assets/javascripts/th-page-editor/row.js

@@ -0,0 +1,90 @@
+//= require jquery.ui.widget
+//= require th-page-editor/column
+
+(function($) {
+	var BASIC_SPANS_SELECTOR = ".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12";
+
+	$.widget("th.pageeditorrow", {
+		options: {
+			editor: null
+		},
+
+		_create: function() {
+			var self = this;
+			this.columns().each(function() {
+				$(this).pageeditorcolumn({ row: self });
+			});
+			this.enableColumnPlaceholders();
+		},
+
+		spanwidth: function() {
+			return this.options.editor.spanwidth();
+		},
+
+		columns: function() {
+			return this.element.children(BASIC_SPANS_SELECTOR);
+		},
+
+		refreshColumnPlaceholders: function() {
+			this.disableColumnPlaceholders();
+			this.enableColumnPlaceholders();
+		},
+
+		createColumnPlaceholder: function(span, offset) {
+			return $('<div class=column-add-placeholder></div>').pageeditorcolumn({ row: this, span: span, offset: offset });
+		},
+
+		disableColumnPlaceholders: function() {
+			this.columns().filter(".column-add-placeholder").each(function() {
+				$(this).next().pageeditorcolumn("offset", $(this).pageeditorcolumn("span"));
+			}).remove();
+		},
+
+		enableColumnPlaceholders: function(enabled) {
+			if(enabled === false) {
+				this.disableColumnPlaceholders();
+				return;
+			}
+
+			var $columns = this.columns();
+			if($columns.length == 0) {
+				this.createColumnPlaceholder(this.spanwidth()).appendTo(this.element);
+			} else {
+				var self = this;
+				var columnsRemaining = this.spanwidth();
+				$.each(this.columns(), function() {
+					columnsRemaining -= $(this).pageeditorcolumn("offset") + $(this).pageeditorcolumn("span");
+					if($(this).pageeditorcolumn("offset") > 0) {
+						self.createColumnPlaceholder($(this).pageeditorcolumn("offset")).insertBefore($(this));
+						$(this).pageeditorcolumn("offset", 0);
+					}
+				});
+				if(columnsRemaining > 0) {
+					this.createColumnPlaceholder(columnsRemaining).appendTo(this.element);
+				}
+			}
+			this._updatePlaceholderHeights();
+		},
+
+		hasContentColumns: function() {
+			return this.columns().filter(":not(.column-add-placeholder)").length;
+		},
+
+		destroy: function() {
+			if(this.hasContentColumns()) {
+				this.disableColumnPlaceholders();
+				this.columns().each(function() {
+					$(this).pageeditorcolumn("destroy");
+				});
+			} else {
+				this.element.remove();
+			}
+		},
+
+		_updatePlaceholderHeights: function() {
+			var $placeholders = this.columns().filter(".column-add-placeholder");
+			$placeholders.height(60);
+			$placeholders.height(this.element.height());
+		}
+	});
+})(jQuery);

data/app/assets/stylesheets/simple_content_management/simple_pages.css.scss

@@ -1,14 +1,86 @@
 @import "bootstrap-tagmanager";
+@import "jquery.ui.resizable";
 
-.simple-routes-list span.myTag span {
-	font-family: monospace;
+.simple-page-form {
 
-	&:before {
-		content: "/";
-		color: #aaa;
+	// tags
+	.simple-routes-list span.myTag span {
+		font-family: monospace;
+
+		&:before {
+			content: "/";
+			color: #aaa;
+		}
+		&:after {
+			content: ".html";
+			color: #aaa;
+		}
 	}
-	&:after {
-		content: ".html";
-		color: #aaa;
+
+	.content-html-container {
+		.row {
+			white-space: nowrap;
+		}
+		.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
+			display: inline-block;
+			white-space: normal;
+			float: none;
+			vertical-align: top;
+
+			&:hover, &.ui-resizable-resizing {
+				outline: 1px solid rgba(82, 168, 236, 0.8);
+				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+				background: rgba(82, 168, 236, 0.075);
+				cursor: pointer;
+
+				> .ui-resizable-e, > .ui-resizable-w {
+					background-image: image-url("simple_content_management/resize-handle.png");
+					background-repeat: no-repeat;
+					background-position: center center;
+				}
+			}
+
+			&.nested-editor:hover {
+				outline: none;
+				box-shadow: none;
+				background: transparent;
+				cursor: default;
+			}
+
+			&.column-add-placeholder {
+				min-height: 60px;
+			}
+
+			> .hovertool {
+				z-index: 91;
+				position: absolute;
+				border-radius: 22px;
+				width: 22px;
+				height: 22px;
+				margin: 0;
+				padding: 0;
+			}
+		}
+	}
+}
+
+#content-editor {
+	width: 800px;
+	margin-left: -400px;
+
+	.modal-header {
+		.nav {
+			margin-bottom: -1px;
+		}
+		padding-bottom: 0;
+	}
+
+	.modal-body {
+		height: 480px;
+		max-height: 480px;
+
+		textarea {
+			height: 480px - 32px;
+		}
 	}
 }