TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add table plugins, isolate WYSIWYG classes to OC prefix, add front end defaults

This commit is contained in:
Sam Georges 2014-09-20 15:46:50 +10:00
parent d27eed4e15
commit 12b8e07aa2
12 changed files with 971 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/backend/formwidgets/RichEditor.php
View File

@ -49,17 +49,13 @@ class RichEditor extends FormWidgetBase
*/
public function loadAssets()
{
// Plugins
$this->addJs('js/plugin.cleanup.js', 'core');
$this->addJs('js/plugin.fullscreen.js', 'core');
$this->addJs('js/plugin.figure.js', 'core');
$this->addJs('js/plugin.quote.js', 'core');
$this->addJs('js/plugin.table.js', 'core');
// Redactor
// $this->addCss('vendor/redactor/redactor.css', 'core');
$this->addJs('vendor/redactor/redactor.js', 'core');
// Rich editor
$this->addCss('css/richeditor.css', 'core');
$this->addJs('js/richeditor.js', 'core');

213
modules/backend/formwidgets/richeditor/assets/css/cms-default.css Normal file
View File

@ -0,0 +1,213 @@
figure {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure {
position: relative;
}
figcaption {
text-align: center;
line-height: 24px;
font-size: 16px;
}
figure[data-type=table] {
clear: both;
}
figure[data-type=video] {
position: relative;
margin-bottom: 24px;
text-align: center;
clear: both;
}
figure[data-type=video] p {
margin: 0;
}
figure[data-type=video].oc-figure-full p {
position: relative;
padding-bottom: 51%;
width: 100%;
height: 0;
}
figure[data-type=video].oc-figure-full iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
figure[data-type=image] {
position: relative;
margin-bottom: 24px;
}
figure[data-type=image] img {
width: 100%;
}
figure[data-type=image].oc-figure-large {
width: 100%;
clear: both;
}
figure[data-type=image].oc-figure-medium {
width: 50%;
}
figure[data-type=image].oc-figure-small {
width: 33%;
}
figure[data-type=quote] {
font-family: "Georgia", serif;
margin-bottom: 24px;
margin-left: 24px;
font-style: italic;
position: relative;
border-left: solid 5px #404040;
padding-left: 24px;
}
figure[data-type=quote] figcaption {
font-weight: bold;
text-align: left;
}
figure[data-type=quote].oc-figure-medium {
font-size: 20px;
}
figure[data-type=quote].oc-figure-large {
font-size: 24px;
}
figure[data-type=quote].oc-figure-right {
width: 33%;
}
figure[data-type=quote].oc-figure-left {
width: 33%;
border-left: none;
border-right: solid 5px #404040;
padding-left: 0;
padding-right: 24px;
margin-left: 0;
margin-right: 24px;
}
figure[data-type=quote] cite {
display: block;
text-align: left;
font-weight: bold;
}
figure[data-type=quote] cite:before {
content: "\2014\00a0";
}
.oc-figure-right {
float: right;
margin-left: 24px;
}
.oc-figure-right .oc-figure-controls {
right: 0;
}
.oc-figure-left {
float: left;
margin-right: 24px;
}
@media screen and (max-width: 480px) {
figure[data-type=image] {
width: 100% !important;
float: none !important;
margin-left: 0;
margin-right: 0;
}
figure[data-type=video] iframe {
width: 100% !important;
height: auto !important;
}
}
.oc-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin-bottom: 20px;
}
.oc-table caption {
color: #000;
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
.oc-table td,
.oc-table th {
font-size: 90%;
margin: 0;
overflow: visible;
padding: 8px;
}
.oc-table td:first-child,
.oc-table th:first-child {
border-left-width: 0;
}
.oc-table thead {
color: #000;
text-align: left;
vertical-align: bottom;
white-space: nowrap;
}
.oc-table thead th {
font-weight: bold;
border-bottom: solid 2px #dddddd;
}
.oc-table td {
background-color: transparent;
vertical-align: middle;
}
.oc-table td p {
line-height: 15px;
}
.oc-table td p:last-child {
margin-bottom: 0;
}
.oc-table .oc-table-cell-min {
width: 1%;
padding-right: 0;
}
.oc-table .oc-table-cell-min input[type=checkbox],
.oc-table .oc-table-cell-min input[type=checkbox] {
margin: 0;
}
.oc-table-secondary {
color: #333333;
font-size: 90%;
}
.oc-table-tertiary {
color: #333333;
font-size: 80%;
}
.oc-table-odd td,
.oc-table-striped tr:nth-child(2n-1) td {
background-color: #f9f9f9;
}
.oc-table-backed {
background-color: #f9f9f9;
}
.oc-table-bordered-all {
border: 1px solid #dddddd;
}
.oc-table-bordered-all td {
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
.oc-table-bordered-all tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-bordered {
border: 1px solid #dddddd;
}
.oc-table-bordered-rows td {
border-bottom: 1px solid #dddddd;
}
.oc-table-bordered-rows tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-horizontal td,
.oc-table-horizontal th {
border-width: 0 0 1px 0;
border-bottom: 1px solid #dddddd;
}
.oc-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0;
}

208
modules/backend/formwidgets/richeditor/assets/css/richeditor.css
View File

@ -61,7 +61,7 @@
#redactor_modal_overlay,
#redactor_modal,
.redactor_dropdown {
z-index: 1061 !important;
z-index: 1062 !important;
}
body .redactor_air {
position: absolute;
@ -144,7 +144,6 @@ body .redactor_box_fullscreen .redactor_editor {
.redactor_editor p,
.redactor_editor ul,
.redactor_editor ol,
.redactor_editor table,
.redactor_editor dl,
.redactor_editor blockquote,
.redactor_editor pre {
@ -184,19 +183,6 @@ body .redactor_box_fullscreen .redactor_editor {
.redactor_editor dd {
margin-left: 1em;
}
.redactor_editor table {
border-collapse: collapse;
font-size: 1em !important;
}
.redactor_editor table td {
padding: 5px !important;
border: 1px solid #ddd;
vertical-align: top;
}
.redactor_editor table thead td {
border-bottom: 2px solid #000 !important;
font-weight: bold !important;
}
.redactor_editor code {
background-color: #d8d7d7 !important;
}
@ -270,7 +256,7 @@ body .redactor_box_fullscreen .redactor_editor {
line-height: 1 !important;
border: none;
background: #dddddd;
z-index: 1063;
z-index: 1061;
}
.redactor_toolbar:after {
content: "";
@ -935,7 +921,7 @@ body .redactor_air .redactor_toolbar {
.redactor_editor figure[data-type=video] p {
margin: 0;
}
.redactor_editor figure[data-type=video].wy-figure-full:before {
.redactor_editor figure[data-type=video].oc-figure-full:before {
position: relative;
padding-bottom: 51%;
width: 100%;
@ -943,7 +929,7 @@ body .redactor_air .redactor_toolbar {
content: "";
display: block;
}
.redactor_editor figure[data-type=video].wy-figure-full iframe {
.redactor_editor figure[data-type=video].oc-figure-full iframe {
width: 100%;
height: 100%;
position: absolute;
@ -954,20 +940,20 @@ body .redactor_air .redactor_toolbar {
position: relative;
margin-bottom: 20px;
}
.redactor_editor figure[data-type=image] .wy-figure-controls {
.redactor_editor figure[data-type=image] .oc-figure-controls {
top: 0px;
}
.redactor_editor figure[data-type=image] img {
width: 100%;
}
.redactor_editor figure[data-type=image].wy-figure-large {
.redactor_editor figure[data-type=image].oc-figure-large {
width: 100%;
clear: both;
}
.redactor_editor figure[data-type=image].wy-figure-medium {
.redactor_editor figure[data-type=image].oc-figure-medium {
width: 50%;
}
.redactor_editor figure[data-type=image].wy-figure-small {
.redactor_editor figure[data-type=image].oc-figure-small {
width: 33%;
}
.redactor_editor figure[data-type=quote] {
@ -983,21 +969,21 @@ body .redactor_air .redactor_toolbar {
font-weight: bold;
text-align: left;
}
.redactor_editor figure[data-type=quote] .wy-figure-controls {
.redactor_editor figure[data-type=quote] .oc-figure-controls {
margin-left: -5px;
}
.redactor_editor figure[data-type=quote].wy-figure-medium,
.redactor_editor figure[data-type=quote].wy-figure-medium blockquote {
.redactor_editor figure[data-type=quote].oc-figure-medium,
.redactor_editor figure[data-type=quote].oc-figure-medium blockquote {
font-size: 20px;
}
.redactor_editor figure[data-type=quote].wy-figure-large,
.redactor_editor figure[data-type=quote].wy-figure-large blockquote {
.redactor_editor figure[data-type=quote].oc-figure-large,
.redactor_editor figure[data-type=quote].oc-figure-large blockquote {
font-size: 24px;
}
.redactor_editor figure[data-type=quote].wy-figure-right {
.redactor_editor figure[data-type=quote].oc-figure-right {
width: 33%;
}
.redactor_editor figure[data-type=quote].wy-figure-left {
.redactor_editor figure[data-type=quote].oc-figure-left {
width: 33%;
border-left: none;
border-right: solid 5px #333333;
@ -1006,7 +992,7 @@ body .redactor_air .redactor_toolbar {
margin-left: 0;
margin-right: 20px;
}
.redactor_editor figure[data-type=quote].wy-figure-left .wy-figure-controls {
.redactor_editor figure[data-type=quote].oc-figure-left .oc-figure-controls {
margin-left: 0;
margin-right: -5px;
}
@ -1022,10 +1008,10 @@ body .redactor_air .redactor_toolbar {
opacity: 0.4;
content: "\2014 Type to add citation (optional)";
}
.redactor_box figure:hover .wy-figure-controls {
.redactor_box figure:hover .oc-figure-controls {
display: block;
}
.redactor_box .wy-figure-controls {
.redactor_box .oc-figure-controls {
background: #dddddd !important;
padding: 0;
position: absolute;
@ -1042,7 +1028,7 @@ body .redactor_air .redactor_toolbar {
z-index: 1560;
text-align: center;
}
.redactor_box .wy-figure-controls span {
.redactor_box .oc-figure-controls span {
display: inline-block;
border: none;
background: none;
@ -1055,35 +1041,35 @@ body .redactor_air .redactor_toolbar {
text-align: center;
cursor: pointer;
}
.redactor_box .wy-figure-controls span:before {
.redactor_box .oc-figure-controls span:before {
line-height: 24px;
}
.redactor_box .wy-figure-controls span:hover {
.redactor_box .oc-figure-controls span:hover {
background: rgba(255, 255, 255, 0.3);
color: #fff;
background: #999999;
color: #ffffff;
}
.redactor_box .wy-figure-controls span.on {
.redactor_box .oc-figure-controls span.on {
background: #fff;
color: #555555;
background-color: #404040;
color: #ffffff;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-divider {
.redactor_box .oc-figure-controls span.oc-figure-controls-divider {
width: 1px;
background: #cccccc;
padding: 0;
margin: 0 4px;
cursor: normal;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-small {
.redactor_box .oc-figure-controls span.oc-figure-controls-small {
font-size: 7px;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-medium {
.redactor_box .oc-figure-controls span.oc-figure-controls-medium {
font-size: 10px;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-arrow-left:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-arrow-left:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1092,7 +1078,7 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f060";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-arrow-right:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-arrow-right:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1101,7 +1087,7 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f061";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-arrow-up:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-arrow-up:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1110,7 +1096,7 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f062";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-arrow-down:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-arrow-down:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1119,7 +1105,7 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f063";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-resize-full:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-resize-full:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1128,7 +1114,7 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f065";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-resize-small:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-resize-small:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1137,10 +1123,10 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f066";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-delete {
.redactor_box .oc-figure-controls span.oc-figure-controls-delete {
margin-left: 20px;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-delete:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-delete:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1149,15 +1135,16 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f014";
}
.redactor_box .wy-figure-controls span.wy-figure-controls-delete:hover {
.redactor_box .oc-figure-controls span.oc-figure-controls-delete:hover {
background: #c63e26;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-table {
.redactor_box .oc-figure-controls span.oc-figure-controls-table {
width: auto;
padding-left: 5px;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
.redactor_box .wy-figure-controls span.wy-figure-controls-table:before {
.redactor_box .oc-figure-controls span.oc-figure-controls-table:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -1166,17 +1153,34 @@ body .redactor_air .redactor_toolbar {
*margin-right: .3em;
content: "\f0ce";
}
.redactor_box .wy-figure-right {
.redactor_box .oc-figure-right {
float: right;
margin-left: 20px;
}
.redactor_box .wy-figure-right .wy-figure-controls {
.redactor_box .oc-figure-right .oc-figure-controls {
right: 0;
}
.redactor_box .wy-figure-left {
.redactor_box .oc-figure-left {
float: left;
margin-right: 20px;
}
.redactor_box .oc-dropdown-menu,
.redactor_box .oc-dropdown-menu ul {
padding: 0 !important;
}
.redactor_box .oc-dropdown-menu ul {
background-color: #ffffff !important;
}
.redactor_box .oc-dropdown-menu a {
text-decoration: none;
padding: 0 15px !important;
color: #39454a !important;
text-decoration: none !important;
}
.redactor_box .oc-dropdown-menu a:hover,
.redactor_box .oc-dropdown-menu a:focus {
color: #ffffff !important;
}
@media (max-width: 769px) {
.redactor_box figure[data-type=image] {
width: 100% !important;
@ -1189,6 +1193,102 @@ body .redactor_air .redactor_toolbar {
height: auto !important;
}
}
.oc-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin-bottom: 20px;
}
.oc-table caption {
color: #000;
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
.oc-table td,
.oc-table th {
font-size: 90%;
margin: 0;
overflow: visible;
padding: 8px;
}
.oc-table td:first-child,
.oc-table th:first-child {
border-left-width: 0;
}
.oc-table thead {
color: #000;
text-align: left;
vertical-align: bottom;
white-space: nowrap;
}
.oc-table thead th {
font-weight: bold;
border-bottom: solid 2px #dddddd;
}
.oc-table td {
background-color: transparent;
vertical-align: middle;
}
.oc-table td p {
line-height: 15px;
}
.oc-table td p:last-child {
margin-bottom: 0;
}
.oc-table .oc-table-cell-min {
width: 1%;
padding-right: 0;
}
.oc-table .oc-table-cell-min input[type=checkbox],
.oc-table .oc-table-cell-min input[type=checkbox] {
margin: 0;
}
.oc-table-secondary {
color: #333333;
font-size: 90%;
}
.oc-table-tertiary {
color: #333333;
font-size: 80%;
}
.oc-table-odd td,
.oc-table-striped tr:nth-child(2n-1) td {
background-color: #f9f9f9;
}
.oc-table-backed {
background-color: #f9f9f9;
}
.oc-table-bordered-all {
border: 1px solid #dddddd;
}
.oc-table-bordered-all td {
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
.oc-table-bordered-all tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-bordered {
border: 1px solid #dddddd;
}
.oc-table-bordered-rows td {
border-bottom: 1px solid #dddddd;
}
.oc-table-bordered-rows tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0;
}
.oc-table-horizontal td,
.oc-table-horizontal th {
border-width: 0 0 1px 0;
border-bottom: 1px solid #dddddd;
}
.oc-table-horizontal tbody > tr:last-child td {
border-bottom-width: 0;
}
.field-flush .field-richeditor,
.field-flush .field-richeditor.editor-focus {
border: none;

42
modules/backend/formwidgets/richeditor/assets/js/plugin.figure.js
View File

@ -86,7 +86,7 @@
},
hideToolbar: function (event) {
$(event.currentTarget).find('.wy-figure-controls').appendTo(this.redactor.$box)
$(event.currentTarget).find('.oc-figure-controls').appendTo(this.redactor.$box)
},
observeToolbars: function () {
@ -94,12 +94,12 @@
/*
* Before clicking a command, make sure we save the current node within the editor
*/
this.redactor.$editor.on('mousedown', '.wy-figure-controls', $.proxy(function () {
this.redactor.$editor.on('mousedown', '.oc-figure-controls', $.proxy(function () {
event.preventDefault()
this.current = this.redactor.getCurrent()
}, this))
this.redactor.$editor.on('click', '.wy-figure-controls span, .wy-figure-controls a', $.proxy(function (event) {
this.redactor.$editor.on('click', '.oc-figure-controls span, .oc-figure-controls a', $.proxy(function (event) {
event.stopPropagation()
var $target = $(event.currentTarget),
command = $target.data('command'),
@ -122,7 +122,7 @@
* If $editor is focused, click doesn't seem to fire
*/
this.redactor.$editor.on('touchstart', 'figure', function (event) {
if (event.target.nodeName !== 'FIGCAPTION' && $(event.target).parents('.wy-figure-controls').length) {
if (event.target.nodeName !== 'FIGCAPTION' && $(event.target).parents('.oc-figure-controls').length) {
$(this).trigger('click', event)
}
})
@ -153,14 +153,13 @@
},
getToolbar: function (type) {
if (this.toolbar[type])
return this.toolbar[type]
var controlGroup = (this.redactor[type] && this.redactor[type].controlGroup) || this.controlGroup,
controls = $.extend({}, this.control, (this.redactor[type] && this.redactor[type].control) || {}),
$controls = this.buildControls(controlGroup, controls),
$toolbar = $('<div class="wy-figure-controls">').append($controls)
$toolbar = $('<div class="oc-figure-controls">').append($controls)
this.toolbar[type] = $toolbar
@ -182,7 +181,7 @@
control = controls[command]
$controls = $controls.add($('<span>', {
'class': 'wy-figure-controls-' + control.classSuffix,
'class': 'oc-figure-controls-' + control.classSuffix,
'text': control.text
}).data({
command: command,
@ -195,31 +194,38 @@
else if (typeof command === 'object') {
$.each(command, $.proxy(function (text, commands) {
var dropdown = $('<span>').text(' ' + text).addClass('wy-figure-controls-table wy-dropdown')
var $button = $('<span>').text(' ' + text).addClass('oc-figure-controls-table dropdown'),
$dropdown = $('<ul class="dropdown-menu open oc-dropdown-menu" />'),
container = $('<li class="dropdown-container" />'),
list = $('<ul />'),
listItem
$('<span class="caret">').appendTo(dropdown)
$dropdown.append(container.append(list))
$button.append($dropdown)
var list = $('<dl class="wy-dropdown-menu wy-dropdown-bubble wy-dropdown-arrow wy-dropdown-arrow-left">').appendTo(dropdown)
dropdown.on('mouseover', function () { list.show() })
dropdown.on('mouseout', function () { list.hide() })
$button.on('mouseover', function () { $dropdown.show() })
$button.on('mouseout', function () { $dropdown.hide() })
$.each(commands, $.proxy(function (index, command) {
control = controls[command]
if (command === '|') {
$('<dd class="divider">').appendTo(list)
$('<li class="divider" />').appendTo(list)
}
else {
$('<a>', {
listItem = $('<li />')
$('<a />', {
text: control.text
}).data({
command: command,
control: control
}).appendTo($('<dd>').appendTo(list))
}).appendTo(listItem)
if (index == 0) listItem.addClass('first-item')
listItem.appendTo(list)
}
}, this))
$controls = $controls.add(dropdown)
$controls = $controls.add($button)
}, this))
}
@ -233,7 +239,7 @@
/*
* Move the toolbar before carrying out the command so it doesn't break when undoing/redoing
*/
$figure.find('.wy-figure-controls').appendTo(this.redactor.$box)
$figure.find('.oc-figure-controls').appendTo(this.redactor.$box)
/*
* Maintain undo history

44
modules/backend/formwidgets/richeditor/assets/js/plugin.quote.js
View File

@ -55,29 +55,29 @@
$toolbar.children().removeClass('on')
if ($figure.hasClass('wy-figure-medium')) {
$toolbar.find('.wy-figure-controls-medium').addClass('on')
if ($figure.hasClass('oc-figure-medium')) {
$toolbar.find('.oc-figure-controls-medium').addClass('on')
}
else if ($figure.hasClass('wy-figure-large')) {
$toolbar.find('.wy-figure-controls-large').addClass('on')
else if ($figure.hasClass('oc-figure-large')) {
$toolbar.find('.oc-figure-controls-large').addClass('on')
}
else {
$toolbar.find('.wy-figure-controls-small').addClass('on')
$toolbar.find('.oc-figure-controls-small').addClass('on')
}
if ($figure.hasClass('wy-figure-left')) {
$toolbar.find('.wy-figure-controls-arrow-left').addClass('on')
$toolbar.find('.wy-figure-controls-resize-small').hide()
$toolbar.find('.wy-figure-controls-resize-full').show()
if ($figure.hasClass('oc-figure-left')) {
$toolbar.find('.oc-figure-controls-arrow-left').addClass('on')
$toolbar.find('.oc-figure-controls-resize-small').hide()
$toolbar.find('.oc-figure-controls-resize-full').show()
}
else if ($figure.hasClass('wy-figure-right')) {
$toolbar.find('.wy-figure-controls-arrow-right').addClass('on')
$toolbar.find('.wy-figure-controls-resize-small').hide()
$toolbar.find('.wy-figure-controls-resize-full').show()
else if ($figure.hasClass('oc-figure-right')) {
$toolbar.find('.oc-figure-controls-arrow-right').addClass('on')
$toolbar.find('.oc-figure-controls-resize-small').hide()
$toolbar.find('.oc-figure-controls-resize-full').show()
}
else {
$toolbar.find('.wy-figure-controls-resize-small').show()
$toolbar.find('.wy-figure-controls-resize-full').hide()
$toolbar.find('.oc-figure-controls-resize-small').show()
$toolbar.find('.oc-figure-controls-resize-full').hide()
}
},
@ -86,31 +86,31 @@
switch (command) {
case 'left':
$figure.removeClass('wy-figure-right').addClass('wy-figure-left')
$figure.removeClass('oc-figure-right').addClass('oc-figure-left')
break
case 'right':
$figure.removeClass('wy-figure-left').addClass('wy-figure-right')
$figure.removeClass('oc-figure-left').addClass('oc-figure-right')
break
case 'resize_full':
$figure.removeClass('wy-figure-left wy-figure-right')
$figure.removeClass('oc-figure-left oc-figure-right')
break
case 'resize_small':
$figure.addClass('wy-figure-left')
$figure.addClass('oc-figure-left')
break
case 'small':
$figure.removeClass('wy-figure-medium wy-figure-large').addClass('wy-figure-small')
$figure.removeClass('oc-figure-medium oc-figure-large').addClass('oc-figure-small')
break
case 'medium':
$figure.removeClass('wy-figure-small wy-figure-large').addClass('wy-figure-medium')
$figure.removeClass('oc-figure-small oc-figure-large').addClass('oc-figure-medium')
break
case 'large':
$figure.removeClass('wy-figure-small wy-figure-medium').addClass('wy-figure-large')
$figure.removeClass('oc-figure-small oc-figure-medium').addClass('oc-figure-large')
break
}

235
modules/backend/formwidgets/richeditor/assets/js/plugin.table.js Normal file
View File

@ -0,0 +1,235 @@
(function ($) {
'use strict';
window.RedactorPlugins = window.RedactorPlugins || {}
var Table = function (redactor) {
this.redactor = redactor
}
Table.prototype = {
control: {
rowUp : { text: 'Add row above' },
rowDown : { text: 'Add row below' },
colLeft : { text: 'Add column left' },
colRight : { text: 'Add column right' },
addHead : { text: 'Add header' },
delHead : { text: 'Delete header' },
delCol : { text: 'Delete column' },
delRow : { text: 'Delete row' },
delTable : { text: 'Delete table' },
stripe : { text: 'Striped row' },
border : { text: 'Borders on rows' },
fullBorder: { text: 'Borders everywhere' }
},
controlGroup: [ 'up', 'down', '|', {
'Table Options': [
'rowUp', 'rowDown', 'colLeft', 'colRight', '|',
'addHead', 'delHead', '|',
'delCol', 'delRow', 'delTable', '|',
'border', 'stripe', 'fullBorder'
]
}, 'remove'],
insertTable: function (rows, columns) {
this.redactor.bufferSet(false)
var $tableBox = $('<div></div>'),
tableId = Math.floor(Math.random() * 99999),
$table = $('<table id="table' + tableId + '">'),
$thead = $('<thead>').appendTo($table),
$tbody = $('<tbody>').appendTo($table),
$row,
$column
$row = $('<tr>').appendTo($thead)
for (var z = 0; z < columns; z++) {
$('<th>Header</th>').appendTo($row)
}
for (var i = 0; i < rows; i++) {
$row = $('<tr>')
for (var z = 0; z < columns; z++) {
$column = $('<td>Data</td>')
/*
* Set the focus to the first table data row
*/
if (i === 0 && z === 0) {
$column.append('<span id="selection-marker-1">' + this.redactor.opts.invisibleSpace + '</span>')
}
$($row).append($column)
}
$tbody.append($row)
}
$('<figure data-type="table">').addClass('oc-table oc-table-bordered-rows').append($table).appendTo($tableBox)
var html = $tableBox.html()
this.redactor.modalClose()
this.redactor.selectionRestore()
var current = this.redactor.getBlock() || this.redactor.getCurrent()
if (current) {
$(current).after(html)
}
else {
this.redactor.insertHtmlAdvanced(html, false)
}
this.redactor.selectionRestore()
var table = this.redactor.$editor.find('#table' + tableId)
table.find('span#selection-marker-1').remove()
table.removeAttr('id')
this.redactor.sync()
},
command: function (command, $figure, $target) {
switch (command) {
case 'rowUp':
case 'rowDown':
$.proxy(function () {
var $row = $target.closest('tr'),
$clone = $('<tr>'),
childCount = $row.children().length
for (var i = 0; i < childCount; i++) {
$('<td>').text('Data').appendTo($clone)
}
if (command === 'rowUp') {
$clone.insertBefore($row)
}
else {
$clone.insertAfter($row)
}
}, this)()
break
case 'colLeft':
case 'colRight':
$.proxy(function () {
var $cell = $target.closest('td'),
$row = $cell.closest('tr'),
$table = $row.closest('table'),
position = $row.children().index($cell) + 1,
insertPosition = command === 'colLeft' ? 'before' : 'after'
$table.find('thead tr').children(':nth-child(' + position + ')')[insertPosition]($('<th>').text('Header'))
$table.find('tbody tr').children(':nth-child(' + position + ')')[insertPosition]($('<td>').text('Data'))
}, this)()
break
case 'addHead':
if (!$figure.find('table thead').length) {
$.proxy(function () {
var numCols = $figure.find('tr').first().children().length,
$table = $figure.find('table'),
$thead = $('<thead>').prependTo($table),
$row = $('<tr>').appendTo($thead)
for (var i = 0; i < numCols; i++) {
$('<th>').text('Header').appendTo($row)
}
}, this)()
}
break
case 'delHead':
$figure.find('thead').remove()
break
case 'delCol':
$.proxy(function () {
var $cell = $target.closest('td'),
position = $cell.parent().children().index($cell) + 1
$cell.closest('table').find('tr').children(':nth-child(' + position + ')').remove()
}, this)()
break
case 'delRow':
$target.closest('tr').remove()
break
case 'delTable':
$figure.remove()
break
case 'border':
$figure.removeClass('oc-table-bordered-all').toggleClass('oc-table-bordered-rows')
break
case 'stripe':
$figure.toggleClass('oc-table-striped')
break
case 'fullBorder':
$figure.removeClass('oc-table-bordered-rows').toggleClass('oc-table-bordered-all')
break
}
}
}
window.RedactorPlugins.table = {
init: function () {
this.table = new Table(this)
this.buttonAddBefore('link', 'table', 'Table', $.proxy(function () {
/*
* Save cursor position
*/
this.selectionSave()
var callback = $.proxy(function () {
$('#redactor_insert_table_btn').on('click', $.proxy(function () {
this.table.insertTable($('#redactor_table_rows').val(), $('#redactor_table_columns').val())
this.buttonInactive('table')
}, this))
$('.redactor_btn_modal_close').on('click', $.proxy(function () {
this.buttonInactive('table')
}, this))
setTimeout(function () {
$('#redactor_table_rows').trigger('focus')
}, 200)
}, this)
var modal = String() +
'<section>' +
'<label>' + this.opts.curLang.rows + '</label>' +
'<input type="text" size="5" value="2" id="redactor_table_rows" class="redactor_input">' +
'<label>' + this.opts.curLang.columns + '</label>' +
'<input type="text" size="5" value="3" id="redactor_table_columns" class="redactor_input">' +
'</section>' +
'<footer>' +
'<button type="button" class="redactor_modal_btn redactor_btn_modal_close">' + this.opts.curLang.cancel + '</button>' +
'<button type="button" class="redactor_modal_btn redactor_modal_action_btn" id="redactor_insert_table_btn">' + this.opts.curLang.insert + '</button>' +
'</footer>'
this.modalInit('Insert Table', modal, 500, callback)
}, this))
this.buttonGet('table')
.addClass('redactor_btn_table')
.removeClass('redactor-btn-image')
}
}
}(jQuery));

5
modules/backend/formwidgets/richeditor/assets/js/richeditor.js
View File

@ -55,7 +55,6 @@
*/
var redactorOptions = {
observeImages: false,
// autoresize: false,
focusCallback: function() { self.$el.addClass('editor-focus') },
blurCallback: function() { self.$el.removeClass('editor-focus') },
initCallback: function() { self.build() },
@ -73,8 +72,8 @@
redactorOptions.fullpage = true
}
// redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'table', 'quote']
redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'quote']
redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'quote', 'table']
redactorOptions.buttons = ['formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link', 'horizontalrule', 'html'],
this.$textarea.redactor(redactorOptions)
}

80
modules/backend/formwidgets/richeditor/assets/less/figures.less → modules/backend/formwidgets/richeditor/assets/less/_figures.less
View File

@ -27,7 +27,7 @@
margin: 0;
}
&.wy-figure-full {
&.oc-figure-full {
&:before {
position: relative;
padding-bottom: 51%;
@ -49,20 +49,20 @@
figure[data-type=image] {
position: relative;
margin-bottom: @line-height-computed;
.wy-figure-controls {
.oc-figure-controls {
top: 0px;
}
img {
width: 100%;
}
&.wy-figure-large {
&.oc-figure-large {
width: 100%;
clear: both;
}
&.wy-figure-medium {
&.oc-figure-medium {
width: 50%;
}
&.wy-figure-small {
&.oc-figure-small {
width: 33%;
}
}
@ -79,19 +79,19 @@
font-weight: bold;
text-align: left;
}
.wy-figure-controls {
.oc-figure-controls {
margin-left: -5px;
}
&.wy-figure-medium {
&.oc-figure-medium {
&, blockquote { font-size: 20px; }
}
&.wy-figure-large {
&.oc-figure-large {
&, blockquote { font-size: 24px; }
}
&.wy-figure-right {
&.oc-figure-right {
width: 33%;
}
&.wy-figure-left {
&.oc-figure-left {
width: 33%;
border-left: none;
border-right: solid 5px @text-color;
@ -99,7 +99,7 @@
padding-right: @line-height-computed;
margin-left: 0;
margin-right: @line-height-computed;
.wy-figure-controls {
.oc-figure-controls {
margin-left: 0;
margin-right: -5px;
}
@ -122,11 +122,11 @@
.redactor_box {
figure:hover .wy-figure-controls {
figure:hover .oc-figure-controls {
display: block
}
.wy-figure-controls {
.oc-figure-controls {
background: @color-richeditor-toolbar !important;
padding: 0;
position: absolute;
@ -144,7 +144,7 @@
text-align: center;
}
.wy-figure-controls span {
.oc-figure-controls span {
display: inline-block;
border: none;
background: none;
@ -173,64 +173,84 @@
}
}
.wy-figure-controls span {
&.wy-figure-controls-divider {
.oc-figure-controls span {
&.oc-figure-controls-divider {
width: 1px;
background: @color-border;
padding: 0;
margin: 0 4px;
cursor: normal;
}
&.wy-figure-controls-small {
&.oc-figure-controls-small {
font-size: 7px;
}
&.wy-figure-controls-medium {
&.oc-figure-controls-medium {
font-size: 10px;
}
&.wy-figure-controls-arrow-left:before {
&.oc-figure-controls-arrow-left:before {
.icon(@arrow-left);
}
&.wy-figure-controls-arrow-right:before {
&.oc-figure-controls-arrow-right:before {
.icon(@arrow-right);
}
&.wy-figure-controls-arrow-up:before {
&.oc-figure-controls-arrow-up:before {
.icon(@arrow-up);
}
&.wy-figure-controls-arrow-down:before {
&.oc-figure-controls-arrow-down:before {
.icon(@arrow-down);
}
&.wy-figure-controls-resize-full:before {
&.oc-figure-controls-resize-full:before {
.icon(@expand);
}
&.wy-figure-controls-resize-small:before {
&.oc-figure-controls-resize-small:before {
.icon(@compress);
}
&.wy-figure-controls-delete {
&.oc-figure-controls-delete {
margin-left: @line-height-computed;
&:before { .icon(@trash-o); }
&:hover { background: @color-btn-danger; }
}
&.wy-figure-controls-table {
&.oc-figure-controls-table {
width: auto;
padding-left: @line-height-computed / 4;
padding-left: @line-height-computed / 2;
padding-right: @line-height-computed / 2;
text-align: left;
&:before { .icon(@table); }
}
}
.wy-figure-right {
.oc-figure-right {
float: right;
margin-left: @line-height-computed;
.wy-figure-controls {
.oc-figure-controls {
right: 0;
}
}
.wy-figure-left {
.oc-figure-left {
float: left;
margin-right: @line-height-computed;
}
.oc-dropdown-menu {
&, ul { padding: 0 !important; }
ul {
background-color: @dropdown-bg !important;
}
a {
text-decoration: none;
padding: 0 15px !important;
color: @dropdown-link-color !important;
text-decoration: none !important;
&:hover,
&:focus {
color: @color-dropdown-hover-text !important;
}
}
}
@media (max-width: @menu-breakpoint-max) {
figure[data-type=image] {
width: 100% !important;

32
modules/backend/formwidgets/richeditor/assets/less/redactor.less → modules/backend/formwidgets/richeditor/assets/less/_redactor.less
View File

@ -83,7 +83,7 @@
#redactor_modal_overlay,
#redactor_modal,
.redactor_dropdown {
z-index: @richeditor-zindex + 1 !important;
z-index: @richeditor-zindex + 2 !important;
}
@ -200,7 +200,7 @@ body .redactor_box_fullscreen {
video, img {
height: auto;
}
div, p, ul, ol, table, dl, blockquote, pre {
div, p, ul, ol, dl, blockquote, pre {
margin: 0;
margin-bottom: 10px !important;
border: none;
@ -231,19 +231,19 @@ body .redactor_box_fullscreen {
dd {
margin-left: 1em;
}
table {
border-collapse: collapse;
font-size: 1em !important;
}
table td {
padding: 5px !important;
border: 1px solid #ddd;
vertical-align: top;
}
table thead td {
border-bottom: 2px solid #000 !important;
font-weight: bold !important;
}
// table {
// border-collapse: collapse;
// font-size: 1em !important;
// }
// table td {
// padding: 5px !important;
// border: 1px solid #ddd;
// vertical-align: top;
// }
// table thead td {
// border-bottom: 2px solid #000 !important;
// font-weight: bold !important;
// }
code {
background-color: #d8d7d7 !important;
}
@ -325,7 +325,7 @@ body .redactor_box_fullscreen {
// October
background: @color-richeditor-toolbar;
z-index: @richeditor-zindex + 3;
z-index: @richeditor-zindex + 1;
&:after {
content: "";

118
modules/backend/formwidgets/richeditor/assets/less/_shared.less Normal file
View File

@ -0,0 +1,118 @@
.oc-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin-bottom: @line-height-computed;
caption {
color: #000;
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
td, th {
font-size: 90%;
margin: 0;
overflow: visible;
padding: @table-cell-padding;
}
td:first-child, th:first-child {
border-left-width: 0;
}
thead {
color: #000;
text-align: left;
vertical-align: bottom;
white-space: nowrap;
th {
font-weight: bold;
border-bottom: solid 2px @table-border-color;
}
}
td {
background-color: transparent;
vertical-align: middle;
}
}
.oc-table td p {
line-height: @line-height-computed * .75;
&:last-child {
margin-bottom: 0;
}
}
.oc-table .oc-table-cell-min {
width: 1%;
padding-right: 0;
input[type=checkbox], input[type=checkbox] {
margin: 0;
}
}
.oc-table-secondary {
color: @text-color;
font-size: 90%;
}
.oc-table-tertiary {
color: @text-color;
font-size: 80%;
}
//
// Striped tables
//
.oc-table-odd td, .oc-table-striped tr:nth-child(2n-1) td {
background-color: @table-bg-accent;
}
.oc-table-backed {
background-color: @table-bg-accent;
}
//
// Bordered tables
//
.oc-table-bordered-all {
border: 1px solid @table-border-color;
td {
border-bottom: 1px solid @table-border-color;
border-left: 1px solid @table-border-color;
}
tbody > tr:last-child td {
border-bottom-width: 0;
}
}
.oc-table-bordered {
border: 1px solid @table-border-color;
}
.oc-table-bordered-rows {
td {
border-bottom: 1px solid @table-border-color;
}
tbody > tr:last-child td {
border-bottom-width: 0;
}
}
.oc-table-horizontal {
tbody > tr:last-child td {
border-bottom-width: 0;
}
td, th {
border-width: 0 0 1px 0;
border-bottom: 1px solid @table-border-color;
}
tbody > tr:last-child td {
border-bottom-width: 0;
}
}

132
modules/backend/formwidgets/richeditor/assets/less/cms-default.less Normal file
View File

@ -0,0 +1,132 @@
@import "../../../../assets/less/core/boot.less";
figure {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure {
position: relative;
}
figcaption {
text-align: center;
line-height: 24px;
font-size: 16px;
}
figure[data-type=table] {
clear: both;
}
figure[data-type=video] {
position: relative;
margin-bottom: 24px;
text-align: center;
clear: both;
}
figure[data-type=video] p {
margin: 0;
}
figure[data-type=video].oc-figure-full p {
position: relative;
padding-bottom: 51%;
width: 100%;
height: 0;
}
figure[data-type=video].oc-figure-full iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
figure[data-type=image] {
position: relative;
margin-bottom: 24px;
}
figure[data-type=image] img {
width: 100%;
}
figure[data-type=image].oc-figure-large {
width: 100%;
clear: both;
}
figure[data-type=image].oc-figure-medium {
width: 50%;
}
figure[data-type=image].oc-figure-small {
width: 33%;
}
figure[data-type=quote] {
font-family: "Georgia", serif;
margin-bottom: 24px;
margin-left: 24px;
font-style: italic;
position: relative;
border-left: solid 5px #404040;
padding-left: 24px;
}
figure[data-type=quote] figcaption {
font-weight: bold;
text-align: left;
}
figure[data-type=quote].oc-figure-medium {
font-size: 20px;
}
figure[data-type=quote].oc-figure-large {
font-size: 24px;
}
figure[data-type=quote].oc-figure-right {
width: 33%;
}
figure[data-type=quote].oc-figure-left {
width: 33%;
border-left: none;
border-right: solid 5px #404040;
padding-left: 0;
padding-right: 24px;
margin-left: 0;
margin-right: 24px;
}
figure[data-type=quote] cite {
display: block;
text-align: left;
font-weight: bold;
}
figure[data-type=quote] cite:before {
content: "\2014\00a0";
}
.oc-figure-right {
float: right;
margin-left: 24px;
}
.oc-figure-right .oc-figure-controls {
right: 0;
}
.oc-figure-left {
float: left;
margin-right: 24px;
}
@media screen and (max-width: 480px) {
figure[data-type=image] {
width: 100% !important;
float: none !important;
margin-left: 0;
margin-right: 0;
}
figure[data-type=video] iframe {
width: 100% !important;
height: auto !important;
}
}
@import "_shared.less";

5
modules/backend/formwidgets/richeditor/assets/less/richeditor.less
View File

@ -4,8 +4,9 @@
@richeditor-zindex: 1060;
@richeditor-gutter: 20px;
@import "redactor.less";
@import "figures.less";
@import "_redactor.less";
@import "_figures.less";
@import "_shared.less";
.field-flush .field-richeditor {
&, &.editor-focus {