forked from projects/fipamo
rte ui restructuring, extracted editor to be a standalone compontent, module will be re-coded to follow suit
This commit is contained in:
parent
2b26d3b525
commit
77f4a2721d
9 changed files with 94 additions and 127 deletions
|
@ -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
56
themes/dash/assets/js/dash.min.js
vendored
56
themes/dash/assets/js/dash.min.js
vendored
|
@ -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
|
@ -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
|
||||||
|
|
30
themes/dash/partials/editor.pug
Normal file
30
themes/dash/partials/editor.pug
Normal 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
|
|
@ -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',
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue