rte ui restructuring, extracted editor to be a standalone compontent, module will be re-coded to follow suit

This commit is contained in:
Ro 2018-11-06 17:27:57 -05:00
parent 2b26d3b525
commit 77f4a2721d
9 changed files with 94 additions and 127 deletions

View file

@ -2201,26 +2201,29 @@ select {
font-size: 1.5em; font-size: 1.5em;
color: #eee; color: #eee;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title #entry-date {
background: #91867a;
font-family: 'Apercu';
width: 100%;
height: 115px;
color: #4c463f;
}
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry-date {
background: #897e71; background: #897e71;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
width: 105px; width: 105px;
font-family: 'Apercu'; font-family: 'Apercu';
color: #cd898d; color: #cd898d;
height: 35px;
vertical-align: top;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta label { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-title label {
background: #81776b; background: #81776b;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
color: #a69d93; color: #a69d93;
line-height: 35px;
}
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry_tags {
background: #91867a;
font-family: 'Apercu';
width: 100%;
height: 150px;
color: #4c463f;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click, #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
@ -2585,11 +2588,11 @@ select {
------------------------------- -------------------------------
**/ **/
#edit-control { #edit-control {
margin: 10px;
top: 1px; top: 1px;
padding: 5px; padding: 2px;
border-radius: 5px; border-radius: 3px;
background: rgba(137,126,113,0.75); background: rgba(137,126,113,0.5);
width: 100%;
z-index: 2000; z-index: 2000;
} }
#edit-control button { #edit-control button {

File diff suppressed because one or more lines are too long

View file

@ -494,53 +494,7 @@ function (_EventEmitter) {
var _default = Animate; var _default = Animate;
exports.default = _default; exports.default = _default;
},{"../events/EventEmitter.jsx":"tools/events/EventEmitter.jsx"}],"tools/effects/TextEffects.jsx":[function(require,module,exports) { },{"../events/EventEmitter.jsx":"tools/events/EventEmitter.jsx"}],"tools/utilities/StringUtils.jsx":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var TexEffects =
/*#__PURE__*/
function () {
//--------------------------
// constructor
//--------------------------
function TexEffects() {
_classCallCheck(this, TexEffects);
} //--------------------------
// methods
//--------------------------
_createClass(TexEffects, [{
key: "scramble",
value: function scramble(obj, offset, complete) {
var scrambleText = new ScrambleText(obj, {
timeOffset: offset,
chars: ['安', '以', '宇', '衣', '於', '加', '幾', '久', '計', '己', '左', '之', '寸', '世', '曽', '太', '知', '川', '天', '止', '奈', '仁', '奴', '称', '乃', '波', '比', '不', '部', '保', '末', '美', '武', '女', '毛', '也', '為', '由', '恵', '与', '良', '利', '留', '礼', '呂', '和', '遠', '无'],
callback: complete
}).start();
} //--------------------------
// event handlers
//--------------------------
}]);
return TexEffects;
}();
var _default = TexEffects;
exports.default = _default;
},{}],"tools/utilities/StringUtils.jsx":[function(require,module,exports) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
@ -2763,14 +2717,14 @@ var DataEvent = _interopRequireWildcard(require("../tools/events/DataEvent"));
var Ease = _interopRequireWildcard(require("../tools/effects/Animate")); var Ease = _interopRequireWildcard(require("../tools/effects/Animate"));
var _TextEffects = _interopRequireDefault(require("../tools/effects/TextEffects"));
var _EntryTasks = _interopRequireDefault(require("../tasks/EntryTasks")); var _EntryTasks = _interopRequireDefault(require("../tasks/EntryTasks"));
var _TextEditor = _interopRequireDefault(require("../tools/utilities/TextEditor")); var _TextEditor = _interopRequireDefault(require("../tools/utilities/TextEditor"));
var _tinyDatePicker = _interopRequireDefault(require("tiny-date-picker")); var _tinyDatePicker = _interopRequireDefault(require("tiny-date-picker"));
var _DateUtils = _interopRequireDefault(require("../tools/utilities/DateUtils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@ -2791,9 +2745,11 @@ function () {
_classCallCheck(this, Entry); _classCallCheck(this, Entry);
reframe('iframe'); reframe('iframe');
var self = this;
this.uploadFiles; this.uploadFiles;
this.start(); this.start();
this.editor = new _TextEditor.default(); this.editor = new _TextEditor.default();
this.dateUtils = new _DateUtils.default();
(0, _tinyDatePicker.default)(document.getElementById('entry-date'), { (0, _tinyDatePicker.default)(document.getElementById('entry-date'), {
mode: 'dp-below', mode: 'dp-below',
format: function format(date) { format: function format(date) {
@ -2933,7 +2889,7 @@ function () {
exports.default = Entry; exports.default = Entry;
Entry.uploadFiles = []; Entry.uploadFiles = [];
},{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tools/effects/TextEffects":"tools/effects/TextEffects.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js"}],"controllers/DisplayManager.jsx":[function(require,module,exports) { },{"../tools/utilities/DataUtils":"tools/utilities/DataUtils.jsx","../tools/events/DataEvent":"tools/events/DataEvent.jsx","../tools/effects/Animate":"tools/effects/Animate.jsx","../tasks/EntryTasks":"tasks/EntryTasks.jsx","../tools/utilities/TextEditor":"tools/utilities/TextEditor.jsx","tiny-date-picker":"../../../../node_modules/tiny-date-picker/dist/tiny-date-picker.js","../tools/utilities/DateUtils":"tools/utilities/DateUtils.jsx"}],"controllers/DisplayManager.jsx":[function(require,module,exports) {
"use strict"; "use strict";
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {

File diff suppressed because one or more lines are too long

View file

@ -19,19 +19,6 @@ block main-content
#entries-edit-index-wrapper #entries-edit-index-wrapper
//h2 EDIT //h2 EDIT
=post_title =post_title
#entry-header.columns
#entry-title.column
textarea(id="entry_title" type='text', name='entry_title' class='post-edit', placeholder='title', required, autofocus)
=post_title
#entry-meta.column
textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
=post_tags
label Date Posted
input(id="entry-date" type="text" value=post_date)
br
input(id="featured-click" type="file" name="featured-click")
input(id="post-image" type="file" name="post-image")
#entry-feature #entry-feature
//label FEATURE IMAGE //label FEATURE IMAGE
if(post_feature == 'null') if(post_feature == 'null')
@ -46,37 +33,21 @@ block main-content
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image-inverted') use(xlink:href='/dash/assets/images/sprite.svg#entypo-image-inverted')
#featured-image-drop #featured-image-drop
img(src=post_feature) img(src=post_feature)
#entry-header.columns
#entry-title.column
textarea(id="entry_title" type='text', name='entry_title' class='post-edit', placeholder='title', required, autofocus)
=post_title
label Date Posted
input(id="entry-date" type="text" value=post_date)
br
#entry-meta.column
textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
=post_tags
include partials/editor
input(id="featured-click" type="file" name="featured-click")
input(id="post-image" type="file" name="post-image")
#edit-content #edit-content
#edit-control
button#option-bold.content-editor-btn-text.editor-button(title="bold")
| B
button#option-italic.content-editor-btn-text.editor-button(title="italics")
| I
button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
| S
button#option-link.content-editor-btn-icon.editor-button(title="insert link")
svg#option-link(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
button#option-header1.content-editor-btn-text.editor-button(title="header 1")
| H1
button#option-header2.content-editor-btn-text.editor-button(title="header 2")
| H2
button#option-header3.content-editor-btn-text.editor-button(title="header 3")
| H3
button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
svg#option-link(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
if(edit)
button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
svg#submit-save(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)
svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
else
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
#edit-content-wrapper #edit-content-wrapper
pre pre

View file

@ -0,0 +1,30 @@
#edit-control
button#option-bold.content-editor-btn-text.editor-button(title="bold")
| B
button#option-italic.content-editor-btn-text.editor-button(title="italics")
| I
button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
| S
button#option-link.content-editor-btn-icon.editor-button(title="insert link")
svg#option-link(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
button#option-header1.content-editor-btn-text.editor-button(title="header 1")
| H1
button#option-header2.content-editor-btn-text.editor-button(title="header 2")
| H2
button#option-header3.content-editor-btn-text.editor-button(title="header 3")
| H3
button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
svg#option-link(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
if(edit)
button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
svg#submit-save(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)
svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
else
button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST

View file

@ -10,10 +10,10 @@ import DataUtils, {
import * as DataEvent from '../tools/events/DataEvent'; import * as DataEvent from '../tools/events/DataEvent';
import Animate from '../tools/effects/Animate'; import Animate from '../tools/effects/Animate';
import * as Ease from '../tools/effects/Animate'; import * as Ease from '../tools/effects/Animate';
import TextEffects from '../tools/effects/TextEffects';
import EntryTasks from '../tasks/EntryTasks'; import EntryTasks from '../tasks/EntryTasks';
import TextEditor from '../tools/utilities/TextEditor'; import TextEditor from '../tools/utilities/TextEditor';
import TinyDatePicker from 'tiny-date-picker'; import TinyDatePicker from 'tiny-date-picker';
import DateUtils from '../tools/utilities/DateUtils';
class Entry { class Entry {
@ -22,9 +22,11 @@ class Entry {
//-------------------------- //--------------------------
constructor() { constructor() {
reframe('iframe'); reframe('iframe');
let self = this;
this.uploadFiles; this.uploadFiles;
this.start(); this.start();
this.editor = new TextEditor(); this.editor = new TextEditor();
this.dateUtils = new DateUtils();
TinyDatePicker(document.getElementById('entry-date'), { TinyDatePicker(document.getElementById('entry-date'), {
mode: 'dp-below', mode: 'dp-below',

View file

@ -1,9 +1,10 @@
#edit-control #edit-control
margin 10px //margin 10px
top 1px top 1px
padding 5px padding 2px
border-radius 5px border-radius 3px
background-opacity($primary - 10%, 0.75) background-opacity($primary - 10%, 0.50)
width: 100%
z-index 2000 z-index 2000
button button

View file

@ -62,26 +62,30 @@
height 150px height 150px
font-size 1.5em font-size 1.5em
color $white color $white
#entry-date
background $primary - 10%
border-radius 0 3px 3px 0
width 105px
font-family 'Apercu'
color $highlight
height 35px
vertical-align top
label
background $primary - 15%
border-radius 3px 0 0 3px
display inline-block
padding 5px
color $primary + 15%
line-height 35px
#entry-meta #entry-meta
#entry_tags #entry_tags
background $primary - 4% background $primary - 4%
font-family 'Apercu' font-family 'Apercu'
width 100% width 100%
height 115px height 150px
color $primary - 50% color $primary - 50%
#entry-date
background $primary - 10%
border-radius 0 3px 3px 0
width: 105px
font-family: 'Apercu'
color: $highlight
label
background: $primary - 15%
border-radius: 3px 0 0 3px
display inline-block
padding: 5px
color $primary + 15%
#featured-click, #post-image #featured-click, #post-image
display none display none