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

Rich Editor no longer uses iframe or individual stylesheet, adds fullscreen button

This commit is contained in:
Sam Georges 2014-09-18 18:14:43 +10:00
parent 0f544cafb2
commit e7e518adf8
7 changed files with 517 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@ class RichEditor extends FormWidgetBase
public function loadAssets()
{
// Plugins
// $this->addJs('js/plugin.fullscreen.js', 'core');
$this->addJs('js/plugin.fullscreen.js', 'core');
// Redactor
$this->addCss('vendor/redactor/redactor.css', 'core');

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

@ -1,14 +1,14 @@
html {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
color: #333;
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
color: #333;
}
/*
code,
pre {
font-family: Menlo, Monaco, monospace, sans-serif;
@ -206,3 +206,197 @@ body.redactor_editor_wym {
border: none !important;
}
*/
figure {
position: relative;
}
figcaption {
text-align: center;
line-height: 1.428571429;
font-size: 14px;
}
figure[data-type=table] {
clear: both;
}
figure[data-type=video] {
position: relative;
margin-bottom: 1.428571429;
text-align: center;
clear: both;
}
figure[data-type=video] p {
margin: 0;
}
figure[data-type=video].wy-figure-full:before {
position: relative;
padding-bottom: 51%;
width: 100%;
height: 0;
content: "";
display: block;
}
figure[data-type=video].wy-figure-full iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
figure[data-type=image] {
position: relative;
margin-bottom: 1.428571429;
}
figure[data-type=image] .wy-figure-controls {
top: 0px;
}
figure[data-type=image] img {
width: 100%;
}
figure[data-type=image].wy-figure-large {
width: 100%;
clear: both;
}
figure[data-type=image].wy-figure-medium {
width: 50%;
}
figure[data-type=image].wy-figure-small {
width: 33%;
}
figure[data-type=quote] {
margin-bottom: 1.428571429;
margin-left: 1.428571429;
font-style: italic;
position: relative;
border-left: solid 5px #333333;
padding-left: 1.428571429;
}
figure[data-type=quote] figcaption {
font-weight: bold;
text-align: left;
}
figure[data-type=quote] .wy-figure-controls {
margin-left: -5px;
}
figure[data-type=quote].wy-figure-medium {
font-size: 20px;
}
figure[data-type=quote].wy-figure-large {
font-size: 24px;
}
figure[data-type=quote].wy-figure-right {
width: 33%;
}
figure[data-type=quote].wy-figure-left {
width: 33%;
border-left: none;
border-right: solid 5px #333333;
padding-left: 0;
padding-right: 1.428571429;
margin-left: 0;
margin-right: 1.428571429;
}
figure[data-type=quote].wy-figure-left .wy-figure-controls {
margin-left: 0;
margin-right: -5px;
}
figure[data-type=quote] cite {
display: block;
text-align: left;
font-weight: bold;
}
figure[data-type=quote] cite:before {
content: "\2014\00a0";
}
figure[data-type=quote] cite:empty:before {
opacity: 0.4;
content: "\2014 Type to add citation (optional)";
}
figure:hover .wy-figure-controls {
display: block;
}
.wy-figure-controls {
background: #555555;
padding: 0.35714285725;
position: absolute;
display: none;
min-width: 100%;
white-space: nowrap;
left: 0;
height: 37px;
top: -37px;
margin: 0 auto;
font-family: 'Open Sans', Arial, sans-serif;
border-bottom: solid 3px #3c3c3c;
line-height: 1.428571429;
font-style: normal;
z-index: 5;
text-align: center;
}
.wy-figure-controls span {
display: inline-block;
border: none;
background: none;
color: #fff;
vertical-align: top;
font-size: 14px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
cursor: pointer;
}
.wy-figure-controls span:hover {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
.wy-figure-controls span.on {
background: #fff;
color: #555555;
}
.wy-figure-controls span.wy-figure-controls-divider {
width: 1px;
background: #6f6f6f;
padding: 0;
margin: 0 2px;
cursor: normal;
}
.wy-figure-controls span.wy-figure-controls-small {
font-size: 50%;
}
.wy-figure-controls span.wy-figure-controls-medium {
font-size: 75%;
}
.wy-figure-controls span.wy-figure-controls-delete {
margin-left: 1.428571429;
}
.wy-figure-controls span.wy-figure-controls-delete:hover {
background: #ff0000;
}
.wy-figure-controls span.wy-figure-controls-table {
width: auto;
padding-left: 0.35714285725;
text-align: left;
}
.wy-figure-right {
float: right;
margin-left: 1.428571429;
}
.wy-figure-right .wy-figure-controls {
right: 0;
}
.wy-figure-left {
float: left;
margin-right: 1.428571429;
}
@media (max-width: 769px) {
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;
}
}

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

@ -1,3 +1,7 @@
.field-flush .field-richeditor,
.field-flush .field-richeditor.editor-focus {
border: none;
}
.field-richeditor {
border: 1px solid #e0e0e0;
}
@ -11,63 +15,107 @@
.field-richeditor.editor-focus {
border-color: #808c8d;
}
.field-richeditor.size-tiny textarea {
height: 20px;
.field-richeditor.size-tiny .redactor_editor {
height: 20px !important;
}
.field-richeditor.size-small textarea {
height: 70px;
.field-richeditor.size-small .redactor_editor {
height: 70px !important;
}
.field-richeditor.size-large textarea {
height: 170px;
.field-richeditor.size-large .redactor_editor {
height: 170px !important;
}
.field-richeditor.size-huge textarea {
height: 220px;
.field-richeditor.size-huge .redactor_editor {
height: 220px !important;
}
.field-richeditor.size-giant textarea {
height: 320px;
.field-richeditor.size-giant .redactor_editor {
height: 320px !important;
}
.field-richeditor .redactor_box {
.field-richeditor .redactor_box,
.redactor_box_fullscreen.redactor_box {
border: none;
}
.field-richeditor .redactor_box .redactor_toolbar {
.field-richeditor .redactor_box iframe,
.redactor_box_fullscreen.redactor_box iframe {
border: none;
}
.field-richeditor .redactor_box .redactor_toolbar,
.redactor_box_fullscreen.redactor_box .redactor_toolbar {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background: #f6f6f6;
border-bottom: 1px solid #e0e0e0;
background: #dddddd;
border-bottom: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.field-richeditor .redactor_box iframe {
border: none;
}
.field-richeditor.stretch .redactor_box {
.field-richeditor .redactor_box .redactor_toolbar li.redactor_btn_right,
.redactor_box_fullscreen.redactor_box .redactor_toolbar li.redactor_btn_right {
float: right;
margin-right: 2px;
}
.field-richeditor .redactor_box .redactor_toolbar li a,
.redactor_box_fullscreen.redactor_box .redactor_toolbar li a {
zoom: 1;
font-size: 14px;
color: #404040;
width: 20px;
line-height: 20px;
text-align: center;
}
.field-richeditor .redactor_box .redactor_toolbar li a:hover,
.redactor_box_fullscreen.redactor_box .redactor_toolbar li a:hover {
outline: none;
background-color: #999999;
color: #ffffff;
}
.field-richeditor .redactor_box .redactor_toolbar li a:active,
.redactor_box_fullscreen.redactor_box .redactor_toolbar li a:active,
.field-richeditor .redactor_box .redactor_toolbar li a.redactor_act,
.redactor_box_fullscreen.redactor_box .redactor_toolbar li a.redactor_act {
outline: none;
background-color: #404040;
color: #ffffff;
}
.field-richeditor .redactor_box.stretch .redactor_box,
.redactor_box_fullscreen.redactor_box.stretch .redactor_box {
display: block;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.field-richeditor.stretch .redactor_box .redactor_toolbar {
.field-richeditor .redactor_box.stretch .redactor_box .redactor_toolbar,
.redactor_box_fullscreen.redactor_box.stretch .redactor_box .redactor_toolbar {
display: block;
border-bottom: none;
position: absolute;
top: 0;
width: 100%;
}
.field-richeditor.stretch .redactor_box .redactor_toolbar > li:first-child:after {
position: absolute;
content: ' ';
width: 100%;
height: 1px;
left: 0;
top: 32px;
background-color: #e0e0e0;
}
.field-richeditor.stretch .redactor_box iframe,
.field-richeditor.stretch .redactor_box textarea {
.field-richeditor .redactor_box.stretch .redactor_box iframe,
.redactor_box_fullscreen.redactor_box.stretch .redactor_box iframe,
.field-richeditor .redactor_box.stretch .redactor_box textarea,
.redactor_box_fullscreen.redactor_box.stretch .redactor_box textarea {
display: block;
position: absolute;
height: 100%!important;
height: 100% !important;
}
.redactor_box_fullscreen {
background: #fafafa;
overflow-y: scroll !important;
}
.redactor_box_fullscreen .redactor_editor {
max-width: 960px;
margin: 20px auto !important;
padding: 20px;
}
.redactor_box_fullscreen {
z-index: 1060 !important;
}
#redactor_modal_overlay,
#redactor_modal,
.redactor_dropdown {
z-index: 1061 !important;
}

184
modules/backend/formwidgets/richeditor/assets/js/plugin.fullscreen.js Normal file
View File

@ -0,0 +1,184 @@
(function ($) {
'use strict';
window.RedactorPlugins = window.RedactorPlugins || {};
window.RedactorPlugins.fullscreen = {
init: function() {
this.fullscreen = false
this.buttonAdd('fullscreen', 'Fullscreen', $.proxy(this.toggleFullscreen, this))
this.buttonGet('fullscreen').addClass('redactor_btn_fullscreen').removeClass('redactor-btn-image')
this.buttonGet('fullscreen').parent().addClass('redactor_btn_right')
if (this.opts.fullscreen)
this.toggleFullscreen()
},
toggleFullscreen: function() {
if (!this.fullscreen)
this.enableFullScreen()
else
this.disableFullScreen()
},
enableFullScreen: function() {
var html
this.buttonChangeIcon('fullscreen', 'normalscreen')
this.buttonActive('fullscreen')
this.fullscreen = true
if (this.opts.toolbarExternal) {
this.toolcss = {}
this.boxcss = {}
this.toolcss.width = this.$toolbar.css('width')
this.toolcss.top = this.$toolbar.css('top')
this.toolcss.position = this.$toolbar.css('position')
this.boxcss.top = this.$box.css('top')
}
this.fsheight = this.$editor.height()
if (this.opts.iframe)
this.fsheight = this.$frame.height()
if (this.opts.maxHeight)
this.$editor.css('max-height', '')
if (this.opts.iframe)
html = this.get()
if (!this.$fullscreenPlaceholder)
this.$fullscreenPlaceholder = $('<div/>')
this.$fullscreenPlaceholder.insertAfter(this.$box)
this.$box.appendTo(document.body)
this.$box.addClass('redactor_box_fullscreen')
$('body, html').css('overflow', 'hidden')
if (this.opts.iframe)
this.fullscreenIframe(html)
this.fullScreenResize()
$(window).resize($.proxy(this.fullScreenResize, this))
$(document).scrollTop(0, 0)
this.focus()
this.observeStart()
},
disableFullScreen: function() {
var height
this.buttonRemoveIcon('fullscreen', 'normalscreen')
this.buttonInactive('fullscreen')
this.fullscreen = false
$(window).off('resize', $.proxy(this.fullScreenResize, this))
$('body, html').css('overflow', '')
this.$box.insertBefore(this.$fullscreenPlaceholder)
this.$fullscreenPlaceholder.remove()
this.$box.removeClass('redactor_box_fullscreen').css({ width: 'auto', height: 'auto' })
if (this.opts.iframe)
html = this.$editor.html()
if (this.opts.iframe)
this.fullscreenIframe(html)
else
this.sync()
height = this.fsheight
if (this.opts.autoresize)
height = 'auto'
if (this.opts.maxHeight)
this.$editor.css('max-height', this.opts.maxHeight)
if (this.opts.toolbarExternal) {
this.$box.css('top', this.boxcss.top)
this.$toolbar.css({
'width': this.toolcss.width,
'top': this.toolcss.top,
'position': this.toolcss.position
})
}
if (!this.opts.iframe)
this.$editor.css('height', height)
else
this.$frame.css('height', height)
this.$editor.css('height', height)
this.focus()
this.observeStart()
},
fullscreenIframe: function(html) {
this.$editor = this.$frame.contents().find('body')
this.$editor.attr({
contenteditable: true,
dir: this.opts.direction
});
// Set document & window
if (this.$editor.get(0)) {
this.document = this.$editor.get(0).ownerDocument
this.window = this.document.defaultView || window
}
// Iframe css
this.iframeAddCss()
if (this.opts.fullpage)
this.setFullpageOnInit(html)
else
this.set(html)
if (this.opts.wym)
this.$editor.addClass('redactor_editor_wym')
},
fullScreenResize: function() {
if (!this.fullscreen)
return false
var pad = this.$editor.css('padding-top').replace('px', '')
var toolbarHeight = this.$toolbar.height(),
height = $(window).height() - toolbarHeight
this.$box.width($(window).width() - 2).height(height + toolbarHeight)
if (this.opts.toolbarExternal) {
this.$toolbar.css({
'top': '0px',
'position': 'absolute',
'width': '100%'
})
this.$box.css('top', toolbarHeight + 'px')
}
// if (!this.opts.iframe) {
// this.$editor.height(height - (pad * 2))
// }
// else {
// setTimeout($.proxy(function() {
// this.$frame.height(height)
// }, this), 1)
// }
// this.$editor.height(height)
}
};
}(jQuery));

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

@ -44,6 +44,7 @@
*/
var redactorOptions = {
observeImages: false,
// autoresize: false,
focusCallback: function() { self.$el.addClass('editor-focus') },
blurCallback: function() { self.$el.removeClass('editor-focus') },
initCallback: function() { self.build() },
@ -54,16 +55,12 @@
}
}
if (this.options.stylesheet) {
redactorOptions.iframe = true
redactorOptions.css = this.options.stylesheet
}
if (this.options.fullpage) {
redactorOptions.fullpage = true
}
// redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'table', 'quote']
redactorOptions.plugins = ['fullscreen']
this.$textarea.redactor(redactorOptions)
}

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

@ -1,12 +1,15 @@
@import "../../../../assets/less/core/boot.less";
@richeditor-toolbar-size: 30px;
@richeditor-zindex: 1060;
@richeditor-gutter: 20px;
.field-flush .field-richeditor {
&, &.editor-focus {
border: none;
}
}
.field-richeditor {
border: 1px solid @color-form-field-border;
&, .redactor_box, .redactor_toolbar {
@ -17,19 +20,23 @@
border-color: @color-form-field-border-focus;
}
&.size-tiny textarea { height: (@size-tiny - @richeditor-toolbar-size); }
&.size-small textarea { height: (@size-small - @richeditor-toolbar-size); }
&.size-large textarea { height: (@size-large - @richeditor-toolbar-size); }
&.size-huge textarea { height: (@size-huge - @richeditor-toolbar-size); }
&.size-giant textarea { height: (@size-giant - @richeditor-toolbar-size); }
&.size-tiny .redactor_editor { height: (@size-tiny - @richeditor-toolbar-size) !important; }
&.size-small .redactor_editor { height: (@size-small - @richeditor-toolbar-size) !important; }
&.size-large .redactor_editor { height: (@size-large - @richeditor-toolbar-size) !important; }
&.size-huge .redactor_editor { height: (@size-huge - @richeditor-toolbar-size) !important; }
&.size-giant .redactor_editor { height: (@size-giant - @richeditor-toolbar-size) !important; }
}
.redactor_box {
//
// Redactor Box
//
.field-richeditor .redactor_box,
.redactor_box_fullscreen.redactor_box {
border: none;
iframe {
border: none;
iframe {
border: none;
}
}
.redactor_toolbar {
.border-top-radius(3px);
.border-bottom-radius(0);
@ -38,6 +45,11 @@
.box-shadow(none);
border: none;
li.redactor_btn_right {
float: right;
margin-right: 2px;
}
li a {
zoom: 1;
font-size: 14px;
@ -77,10 +89,37 @@
iframe, textarea {
display: block;
position: absolute;
height: 100%!important;
height: 100% !important;
}
}
}
}
//
// Fullscreen specific
//
.redactor_box_fullscreen {
background: @color-body-bg;
overflow-y: scroll !important;
.redactor_editor {
max-width: 960px;
margin: @richeditor-gutter auto !important;
padding: @richeditor-gutter;
}
}
//
// zIndex
//
.redactor_box_fullscreen {
z-index: @richeditor-zindex !important;
}
#redactor_modal_overlay,
#redactor_modal,
.redactor_dropdown {
z-index: @richeditor-zindex + 1 !important;
}

1
modules/backend/formwidgets/richeditor/partials/_richeditor.htm
View File

@ -4,7 +4,6 @@
<div
id="<?= $this->getId() ?>"
class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-relative stretch':'' ?>"
data-stylesheet="<?= URL::to('/modules/backend/formwidgets/richeditor/assets/css/iframe.css') ?>"
<?php if ($fullPage): ?>data-fullpage="true"<?php endif ?>
data-control="richeditor">
<textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>