biola_wcms_components 0.8.0 → 0.9.0

data/vendor/assets/javascripts/redactor_table.js

@@ -0,0 +1,338 @@
+if (!RedactorPlugins) var RedactorPlugins = {};
+
+(function($)
+{
+	RedactorPlugins.table = function()
+	{
+		return {
+			getTemplate: function()
+			{
+				return String()
+				+ '<section id="redactor-modal-table-insert">'
+					+ '<label>' + this.lang.get('rows') + '</label>'
+					+ '<input type="text" size="5" value="2" id="redactor-table-rows" />'
+					+ '<label>' + this.lang.get('columns') + '</label>'
+					+ '<input type="text" size="5" value="3" id="redactor-table-columns" />'
+				+ '</section>';
+			},
+			init: function()
+			{
+
+				var dropdown = {};
+
+				dropdown.insert_table = { title: this.lang.get('insert_table'), func: this.table.show };
+				dropdown.insert_row_above = { title: this.lang.get('insert_row_above'), func: this.table.addRowAbove };
+				dropdown.insert_row_below = { title: this.lang.get('insert_row_below'), func: this.table.addRowBelow };
+				dropdown.insert_column_left = { title: this.lang.get('insert_column_left'), func: this.table.addColumnLeft };
+				dropdown.insert_column_right = { title: this.lang.get('insert_column_right'), func: this.table.addColumnRight };
+				dropdown.add_head = { title: this.lang.get('add_head'), func: this.table.addHead };
+				dropdown.delete_head = { title: this.lang.get('delete_head'), func: this.table.deleteHead };
+				dropdown.delete_column = { title: this.lang.get('delete_column'), func: this.table.deleteColumn };
+				dropdown.delete_row = { title: this.lang.get('delete_row'), func: this.table.deleteRow };
+				dropdown.delete_table = { title: this.lang.get('delete_table'), func: this.table.deleteTable };
+
+				this.observe.addButton('td', 'table');
+				this.observe.addButton('th', 'table');
+
+				var button = this.button.addBefore('link', 'table', this.lang.get('table'));
+				this.button.addDropdown(button, dropdown);
+			},
+			show: function()
+			{
+				this.modal.addTemplate('table', this.table.getTemplate());
+
+				this.modal.load('table', this.lang.get('insert_table'), 300);
+				this.modal.createCancelButton();
+
+				var button = this.modal.createActionButton(this.lang.get('insert'));
+				button.on('click', this.table.insert);
+
+				this.selection.save();
+				this.modal.show();
+
+				$('#redactor-table-rows').focus();
+
+			},
+			insert: function()
+			{
+				this.placeholder.remove();
+				this.clean.cleanEmptyParagraph();
+				
+				var rows = $('#redactor-table-rows').val(),
+					columns = $('#redactor-table-columns').val(),
+					$tableBox = $('<div>'),
+					tableId = Math.floor(Math.random() * 99999),
+					$table = $('<table id="table' + tableId + '"><tbody></tbody></table>'),
+					i, $row, z, $column;
+
+				for (i = 0; i < rows; i++)
+				{
+					$row = $('<tr>');
+
+					for (z = 0; z < columns; z++)
+					{
+						$column = $('<td>' + this.opts.invisibleSpace + '</td>');
+
+						// set the focus to the first td
+						if (i === 0 && z === 0)
+						{
+							$column.append(this.selection.getMarker());
+						}
+
+						$($row).append($column);
+					}
+
+					$table.append($row);
+				}
+
+				$tableBox.append($table);
+				var html = $tableBox.html();
+
+				this.modal.close();
+				this.selection.restore();
+
+				if (this.table.getTable()) return;
+
+				this.buffer.set();
+
+				var current = this.selection.getBlock() || this.selection.getCurrent();
+				if (current && current.tagName != 'BODY')
+				{
+					if (current.tagName == 'LI') current = $(current).closest('ul, ol');
+					$(current).after(html);
+				}
+				else
+				{
+					this.insert.html(html, false);
+				}
+
+				this.selection.restore();
+
+				var table = this.$editor.find('#table' + tableId);
+
+				if (!this.opts.linebreaks && (this.utils.browser('mozilla') || this.utils.browser('msie')))
+				{
+					var $next = table.next();
+					if ($next.length === 0)
+					{
+						 table.after(this.opts.emptyHtml);
+					}
+				}
+
+				this.observe.buttons();
+
+				table.find('span.redactor-selection-marker').remove();
+				table.removeAttr('id');
+
+				this.code.sync();
+				this.core.setCallback('insertedTable', table);
+			},
+			getTable: function()
+			{
+				var $table = $(this.selection.getParent()).closest('table');
+
+				if (!this.utils.isRedactorParent($table)) return false;
+				if ($table.size() === 0) return false;
+
+				return $table;
+			},
+			restoreAfterDelete: function($table)
+			{
+				this.selection.restore();
+				$table.find('span.redactor-selection-marker').remove();
+				this.code.sync();
+			},
+			deleteTable: function()
+			{
+				var $table = this.table.getTable();
+				if (!$table) return;
+
+				this.buffer.set();
+
+
+				var $next = $table.next();
+				if (!this.opts.linebreaks && $next.length !== 0)
+				{
+					this.caret.setStart($next);
+				}
+				else
+				{
+					this.caret.setAfter($table);
+				}
+
+
+				$table.remove();
+
+				this.code.sync();
+			},
+			deleteRow: function()
+			{
+			var $table = this.table.getTable();
+			if (!$table) return;
+
+			var $current = $(this.selection.getCurrent());
+
+			this.buffer.set();
+
+			var $current_tr = $current.closest('tr');
+			var $focus_tr = $current_tr.prev().length ? $current_tr.prev() : $current_tr.next();
+			if ($focus_tr.length)
+			{
+				var $focus_td = $focus_tr.children('td, th').first();
+				if ($focus_td.length) $focus_td.prepend(this.selection.getMarker());
+			}
+
+			$current_tr.remove();
+			this.table.restoreAfterDelete($table);
+		},
+			deleteColumn: function()
+			{
+			var $table = this.table.getTable();
+			if (!$table) return;
+
+			this.buffer.set();
+
+			var $current = $(this.selection.getCurrent());
+			var $current_td = $current.closest('td, th');
+			var index = $current_td[0].cellIndex;
+
+			$table.find('tr').each($.proxy(function(i, elem)
+			{
+				var $elem = $(elem);
+				var focusIndex = index - 1 < 0 ? index + 1 : index - 1;
+				if (i === 0) $elem.find('td, th').eq(focusIndex).prepend(this.selection.getMarker());
+
+				$elem.find('td, th').eq(index).remove();
+
+			}, this));
+
+			this.table.restoreAfterDelete($table);
+		},
+			addHead: function()
+			{
+				var $table = this.table.getTable();
+				if (!$table) return;
+
+				this.buffer.set();
+
+				if ($table.find('thead').size() !== 0)
+				{
+					this.table.deleteHead();
+					return;
+				}
+
+				var tr = $table.find('tr').first().clone();
+				tr.find('td').replaceWith($.proxy(function()
+				{
+					return $('<th>').html(this.opts.invisibleSpace);
+				}, this));
+
+				$thead = $('<thead></thead>').append(tr);
+				$table.prepend($thead);
+
+				this.code.sync();
+
+			},
+			deleteHead: function()
+			{
+				var $table = this.table.getTable();
+				if (!$table) return;
+
+				var $thead = $table.find('thead');
+				if ($thead.size() === 0) return;
+
+				this.buffer.set();
+
+				$thead.remove();
+				this.code.sync();
+			},
+			addRowAbove: function()
+			{
+				this.table.addRow('before');
+			},
+			addRowBelow: function()
+			{
+				this.table.addRow('after');
+			},
+			addColumnLeft: function()
+			{
+				this.table.addColumn('before');
+			},
+			addColumnRight: function()
+			{
+				this.table.addColumn('after');
+			},
+			addRow: function(type)
+			{
+				var $table = this.table.getTable();
+				if (!$table) return;
+
+				this.buffer.set();
+
+				var $current = $(this.selection.getCurrent());
+				var $current_tr = $current.closest('tr');
+				var new_tr = $current_tr.clone();
+
+				new_tr.find('th').replaceWith(function()
+				{
+					var $td = $('<td>');
+					$td[0].attributes = this.attributes;
+
+					return $td.append($(this).contents());
+				});
+
+				new_tr.find('td').html(this.opts.invisibleSpace);
+
+				if (type == 'after')
+				{
+					$current_tr.after(new_tr);
+				}
+				else
+				{
+					$current_tr.before(new_tr);
+				}
+
+				this.code.sync();
+			},
+			addColumn: function (type)
+			{
+				var $table = this.table.getTable();
+				if (!$table) return;
+
+				var index = 0;
+				var current = $(this.selection.getCurrent());
+
+				this.buffer.set();
+
+				var $current_tr = current.closest('tr');
+				var $current_td = current.closest('td, th');
+
+				$current_tr.find('td, th').each($.proxy(function(i, elem)
+				{
+					if ($(elem)[0] === $current_td[0]) index = i;
+
+				}, this));
+
+				$table.find('tr').each($.proxy(function(i, elem)
+				{
+					var $current = $(elem).find('td, th').eq(index);
+
+					var td = $current.clone();
+					td.html(this.opts.invisibleSpace);
+
+					if (type == 'after')
+					{
+						$current.after(td);
+					}
+					else
+					{
+						$current.before(td);
+					}
+
+				}, this));
+
+				this.code.sync();
+			}
+		};
+	};
+})(jQuery);

data/vendor/assets/javascripts/redactor_video.js

@@ -0,0 +1,77 @@
+if (!RedactorPlugins) var RedactorPlugins = {};
+
+(function($)
+{
+	RedactorPlugins.video = function()
+	{
+		return {
+			reUrlYoutube: /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig,
+			reUrlVimeo: /https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/,
+			getTemplate: function()
+			{
+				return String()
+				+ '<section id="redactor-modal-video-insert">'
+					+ '<label>' + this.lang.get('video_html_code') + '</label>'
+					+ '<textarea id="redactor-insert-video-area" style="height: 160px;"></textarea>'
+				+ '</section>';
+			},
+			init: function()
+			{
+				var button = this.button.addAfter('image', 'video', this.lang.get('video'));
+				this.button.addCallback(button, this.video.show);
+			},
+			show: function()
+			{
+				this.modal.addTemplate('video', this.video.getTemplate());
+
+				this.modal.load('video', this.lang.get('video'), 700);
+				this.modal.createCancelButton();
+
+				var button = this.modal.createActionButton(this.lang.get('insert'));
+				button.on('click', this.video.insert);
+
+				this.selection.save();
+				this.modal.show();
+
+				$('#redactor-insert-video-area').focus();
+
+			},
+			insert: function()
+			{
+				var data = $('#redactor-insert-video-area').val();
+
+				if (!data.match(/<iframe|<video/gi))
+				{
+					data = this.clean.stripTags(data);
+
+					// parse if it is link on youtube & vimeo
+					var iframeStart = '<iframe style="width: 500px; height: 281px;" src="',
+						iframeEnd = '" frameborder="0" allowfullscreen></iframe>';
+
+					if (data.match(this.video.reUrlYoutube))
+					{
+						data = data.replace(this.video.reUrlYoutube, iframeStart + '//www.youtube.com/embed/$1' + iframeEnd);
+					}
+					else if (data.match(this.video.reUrlVimeo))
+					{
+						data = data.replace(this.video.reUrlVimeo, iframeStart + '//player.vimeo.com/video/$2' + iframeEnd);
+					}
+				}
+
+				this.selection.restore();
+				this.modal.close();
+
+				var current = this.selection.getBlock() || this.selection.getCurrent();
+
+				if (current) $(current).after(data);
+				else
+				{
+					this.insert.html(data);
+				}
+
+				this.code.sync();
+			}
+
+		};
+	};
+})(jQuery);

data/vendor/assets/stylesheets/redactor.css

@@ -1,7 +1,3 @@
-/* ON CHANGE:
-  remove the .redactor-toolbar z-index;
-*/
-
 /*
   Icon font
 */
@@ -42,29 +38,31 @@
 .redactor-box textarea:focus {
   outline: none;
 }
-/*
-  Z-index setup
-*/
 .redactor-editor,
 .redactor-box {
   background: #fff;
 }
+/*
+  Z-index setup
+*/
 .redactor-editor,
 .redactor-box,
 .redactor-box textarea {
-  z-index: auto !important;
+  z-index: auto;
 }
 .redactor-box-fullscreen {
-  z-index: 1052 !important;
+  z-index: 1051;
+}
+.redactor-toolbar {
+  z-index: 100;
 }
-.redactor-toolbar,
 .redactor-dropdown {
-  /*z-index: 1053 !important; -- [Ryan] This get shown above a lot of things. */
+  z-index: 1052;
 }
 #redactor-modal-overlay,
 #redactor-modal-box,
 #redactor-modal {
-  z-index: 1054 !important;
+  z-index: 1053;
 }
 /*
   Resize
@@ -111,11 +109,13 @@ body .redactor-box-fullscreen {
   font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
   font-size: 14px;
   line-height: 1.6em;
-  border-radius: 0 0 4px 4px; /* [Ryan] - added */
 }
 .redactor-editor:focus {
   outline: none;
 }
+.toolbar-fixed-box + .redactor-editor {
+  padding-top: 32px !important;
+}
 /*
   Placeholder
 */
@@ -227,6 +227,12 @@ body .redactor-box-fullscreen {
   background-color: transparent !important;
   cursor: default;
 }
+/*
+  CodeMirror
+*/
+.redactor-box .CodeMirror {
+  display: none;
+}
 /*
   Icons
 */
@@ -655,7 +661,7 @@ body .redactor-box-fullscreen {
   padding-left: 0;
   list-style: none;
   max-height: 250px;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 #redactor-modal #redactor-modal-list li {
   border-bottom: 1px solid #ddd;
@@ -845,6 +851,12 @@ body .redactor-box-fullscreen {
   padding-left: 2em;
   border: none;
 }
+.redactor-editor ol ol li {
+  list-style-type: lower-alpha;
+}
+.redactor-editor ol ol ol li {
+  list-style-type: lower-roman;
+}
 .redactor-editor dl dt {
   font-weight: bold;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: biola_wcms_components
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Ryan Hall
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-14 00:00:00.000000000 Z
+date: 2015-05-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: ace-rails-ap
@@ -211,6 +211,8 @@ files:
 - vendor/assets/javascripts/handlebars.js
 - vendor/assets/javascripts/redactor.js
 - vendor/assets/javascripts/redactor_fullscreen.js
+- vendor/assets/javascripts/redactor_table.js
+- vendor/assets/javascripts/redactor_video.js
 - vendor/assets/javascripts/typeahead.js
 - vendor/assets/stylesheets/bootstrap-multiselect.css
 - vendor/assets/stylesheets/bootstrap-tagsinput.css