momo
/
editor.md
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fixed editor z-index on fullscreen #591

develop
pandao 6 years ago
parent
506472d3aa
commit
1008e2ced9
13 changed files with 387 additions and 350 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      css/editormd.css
  2. 4
      css/editormd.min.css
  3. 3
      css/editormd.preview.css
  4. 2
      css/editormd.preview.min.css
  5. 23
      editormd.amd.js
  6. 2
      editormd.amd.min.js
  7. 23
      editormd.js
  8. 2
      editormd.min.js
  9. 2
      lib/codemirror/modes.min.js
  10. 368
      scss/editormd.dialog.scss
  11. 4
      scss/editormd.preview.scss
  12. 274
      scss/editormd.scss
  13. 23
      src/editormd.js

7
css/editormd.css
View File

@ -389,7 +389,7 @@
/* W3C */ /* W3C */
filter: alpha(opacity=20); filter: alpha(opacity=20);
/* IE */ /* IE */
z-index: 99998;
z-index: 9998;
} }
.editormd-container-mask, .editormd-container-mask,
@ -4535,6 +4535,9 @@ li.L9 {
.markdown-body .editormd-toc-menu ul { .markdown-body .editormd-toc-menu ul {
padding-left: 0; padding-left: 0;
} }
.markdown-body img {
background: none;
}
.markdown-body .highlight pre, .markdown-body pre { .markdown-body .highlight pre, .markdown-body pre {
line-height: 1.6; line-height: 1.6;
} }
@ -4760,7 +4763,7 @@ hr.editormd-page-break {
top: 0; top: 0;
left: 0; left: 0;
border: none; border: none;
margin: 0 auto;
margin: 0 auto !important;
} }
/* Editor.md Dark theme */ /* Editor.md Dark theme */

4
css/editormd.min.css
View File

File diff suppressed because one or more lines are too long

3
css/editormd.preview.css
View File

@ -3817,6 +3817,9 @@ li.L9 {
.markdown-body .editormd-toc-menu ul { .markdown-body .editormd-toc-menu ul {
padding-left: 0; padding-left: 0;
} }
.markdown-body img {
background: none;
}
.markdown-body .highlight pre, .markdown-body pre { .markdown-body .highlight pre, .markdown-body pre {
line-height: 1.6; line-height: 1.6;
} }

2
css/editormd.preview.min.css
View File

File diff suppressed because one or more lines are too long

23
editormd.amd.js
View File

@ -395,7 +395,7 @@
tex : editormd.classPrefix + "tex" tex : editormd.classPrefix + "tex"
}; };
editormd.dialogZindex = 99999;
editormd.dialogZindex = 9999;
editormd.$katex = null; editormd.$katex = null;
editormd.$marked = null; editormd.$marked = null;
@ -1861,11 +1861,18 @@
editor.css("height", (typeof height === "number") ? height + "px" : height); editor.css("height", (typeof height === "number") ? height + "px" : height);
} }
var hasToolbar = settings.toolbar && !settings.readOnly;
var toolbarHeight = hasToolbar && toolbar ? toolbar.height() : 0;
var $codeMirrorGutters = codeMirror.find('.CodeMirror-gutters');
if (state.fullscreen) { if (state.fullscreen) {
editor.height($(window).height()); editor.height($(window).height());
$codeMirrorGutters.height($(window).height() - toolbarHeight);
} else {
$codeMirrorGutters.height(editor.height() - toolbarHeight);
} }
if (settings.toolbar && !settings.readOnly) {
if (hasToolbar) {
codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height()); codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height());
} else { } else {
codeMirror.css("margin-top", 0).height(editor.height()); codeMirror.css("margin-top", 0).height(editor.height());
@ -2566,8 +2573,9 @@
$("html,body").css("overflow", "hidden"); $("html,body").css("overflow", "hidden");
editor.css({ editor.css({
width : $(window).width(),
height : $(window).height()
width : $(window).width(),
height : $(window).height(),
zIndex : editormd.dialogZindex,
}).addClass(fullscreenClass); }).addClass(fullscreenClass);
this.resize(); this.resize();
@ -2606,8 +2614,9 @@
$("html,body").css("overflow", ""); $("html,body").css("overflow", "");
editor.css({ editor.css({
width : editor.data("oldWidth"),
height : editor.data("oldHeight")
width : editor.data("oldWidth"),
height : editor.data("oldHeight"),
zIndex : ''
}).removeClass(fullscreenClass); }).removeClass(fullscreenClass);
this.resize(); this.resize();
@ -4064,7 +4073,7 @@
buttons : false buttons : false
}; };
options = $.extend(true, defaults, options);
options = $.extend(true, {}, defaults, options);
var $this = this; var $this = this;
var editor = this.editor; var editor = this.editor;

2
editormd.amd.min.js
View File

File diff suppressed because one or more lines are too long

23
editormd.js
View File

@ -325,7 +325,7 @@
tex : editormd.classPrefix + "tex" tex : editormd.classPrefix + "tex"
}; };
editormd.dialogZindex = 99999;
editormd.dialogZindex = 9999;
editormd.$katex = null; editormd.$katex = null;
editormd.$marked = null; editormd.$marked = null;
@ -1791,11 +1791,18 @@
editor.css("height", (typeof height === "number") ? height + "px" : height); editor.css("height", (typeof height === "number") ? height + "px" : height);
} }
var hasToolbar = settings.toolbar && !settings.readOnly;
var toolbarHeight = hasToolbar && toolbar ? toolbar.height() : 0;
var $codeMirrorGutters = codeMirror.find('.CodeMirror-gutters');
if (state.fullscreen) { if (state.fullscreen) {
editor.height($(window).height()); editor.height($(window).height());
$codeMirrorGutters.height($(window).height() - toolbarHeight);
} else {
$codeMirrorGutters.height(editor.height() - toolbarHeight);
} }
if (settings.toolbar && !settings.readOnly) {
if (hasToolbar) {
codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height()); codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height());
} else { } else {
codeMirror.css("margin-top", 0).height(editor.height()); codeMirror.css("margin-top", 0).height(editor.height());
@ -2496,8 +2503,9 @@
$("html,body").css("overflow", "hidden"); $("html,body").css("overflow", "hidden");
editor.css({ editor.css({
width : $(window).width(),
height : $(window).height()
width : $(window).width(),
height : $(window).height(),
zIndex : editormd.dialogZindex,
}).addClass(fullscreenClass); }).addClass(fullscreenClass);
this.resize(); this.resize();
@ -2536,8 +2544,9 @@
$("html,body").css("overflow", ""); $("html,body").css("overflow", "");
editor.css({ editor.css({
width : editor.data("oldWidth"),
height : editor.data("oldHeight")
width : editor.data("oldWidth"),
height : editor.data("oldHeight"),
zIndex : ''
}).removeClass(fullscreenClass); }).removeClass(fullscreenClass);
this.resize(); this.resize();
@ -3994,7 +4003,7 @@
buttons : false buttons : false
}; };
options = $.extend(true, defaults, options);
options = $.extend(true, {}, defaults, options);
var $this = this; var $this = this;
var editor = this.editor; var editor = this.editor;

2
editormd.min.js
View File

File diff suppressed because one or more lines are too long

2
lib/codemirror/modes.min.js
View File

File diff suppressed because one or more lines are too long

368
scss/editormd.dialog.scss
View File

@ -1,184 +1,184 @@
@charset "UTF-8";
#{$prefix}dialog {
color: $color;
position: fixed;
z-index: 99999;
display: none;
@include border-radius(3px);
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.3));
//@include user-select(none);
background: #fff;
font-size: 14px;
}
#{$prefix}dialog-container {
position: relative;
padding: 20px;
line-height: 1.4;
h1 {
font-size: 24px;
margin-bottom: 10px;
.fa {
color: #2C7EEA;
padding-right: 5px;
}
small {
padding-left: 5px;
font-weight: normal;
font-size: 12px;
color: #999;
}
}
select {
color: #999;
padding: 3px 8px;
border: 1px solid $borderColor;
}
}
#{$prefix}dialog-close {
position: absolute;
top: 12px;
right: 15px;
font-size: 18px;
color: #ccc;
@include transition(color 300ms ease-out);
&:hover {
color: #999;
}
}
#{$prefix}dialog-header {
padding: 11px 20px;
border-bottom: 1px solid #eee;
@include transition(background 300ms ease-out);
&:hover {
background: #f6f6f6;
}
}
#{$prefix}dialog-title {
font-size: 14px;
}
#{$prefix}dialog-footer {
padding: 10px 0 0 0;
text-align: right;
}
#{$prefix}dialog-info {
width: 420px;
h1 {
font-weight: normal;
}
#{$prefix}dialog-container {
padding: 20px 25px 25px;
}
#{$prefix}dialog-close {
top: 10px;
right: 10px;
}
p > a, .hover-link:hover {
color: #2196F3;
}
.hover-link {
color: #666;
}
a {
.fa-external-link {
display: none;
}
&:hover {
color: #2196F3;
.fa-external-link {
display: inline-block;
}
}
}
}
#{$prefix}mask,
#{$prefix}container-mask,
#{$prefix}dialog-mask {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#{$prefix}mask,
#{$prefix}dialog-mask-bg {
background: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
#{$prefix}mask {
position: fixed;
background: #000;
@include opacity(0.2);
z-index: 99998;
}
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background: url(../images/loading.gif) no-repeat center center;
@include background-size(32px 32px);
}
#{$prefix}container-mask {
z-index: 20;
display: block;
background-color: #fff;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background-image: url(../images/loading@2x.gif);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background-image: url(../images/loading@3x.gif);
}
}
#{$prefix}code-block-dialog,
#{$prefix}preformatted-text-dialog {
textarea {
width: 100%;
height: 400px;
margin-bottom: 6px;
overflow: auto;
border: 1px solid #eee;
background: #fff;
padding: 15px;
resize: none;
}
}
#{$prefix}code-toolbar {
color: #999;
font-size: 14px;
margin: -5px 0 10px;
}
@charset "UTF-8";
#{$prefix}dialog {
color: $color;
position: fixed;
z-index: 99999;
display: none;
@include border-radius(3px);
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.3));
//@include user-select(none);
background: #fff;
font-size: 14px;
}
#{$prefix}dialog-container {
position: relative;
padding: 20px;
line-height: 1.4;
h1 {
font-size: 24px;
margin-bottom: 10px;
.fa {
color: #2C7EEA;
padding-right: 5px;
}
small {
padding-left: 5px;
font-weight: normal;
font-size: 12px;
color: #999;
}
}
select {
color: #999;
padding: 3px 8px;
border: 1px solid $borderColor;
}
}
#{$prefix}dialog-close {
position: absolute;
top: 12px;
right: 15px;
font-size: 18px;
color: #ccc;
@include transition(color 300ms ease-out);
&:hover {
color: #999;
}
}
#{$prefix}dialog-header {
padding: 11px 20px;
border-bottom: 1px solid #eee;
@include transition(background 300ms ease-out);
&:hover {
background: #f6f6f6;
}
}
#{$prefix}dialog-title {
font-size: 14px;
}
#{$prefix}dialog-footer {
padding: 10px 0 0 0;
text-align: right;
}
#{$prefix}dialog-info {
width: 420px;
h1 {
font-weight: normal;
}
#{$prefix}dialog-container {
padding: 20px 25px 25px;
}
#{$prefix}dialog-close {
top: 10px;
right: 10px;
}
p > a, .hover-link:hover {
color: #2196F3;
}
.hover-link {
color: #666;
}
a {
.fa-external-link {
display: none;
}
&:hover {
color: #2196F3;
.fa-external-link {
display: inline-block;
}
}
}
}
#{$prefix}mask,
#{$prefix}container-mask,
#{$prefix}dialog-mask {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#{$prefix}mask,
#{$prefix}dialog-mask-bg {
background: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
#{$prefix}mask {
position: fixed;
background: #000;
@include opacity(0.2);
z-index: 9998;
}
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background: url(../images/loading.gif) no-repeat center center;
@include background-size(32px 32px);
}
#{$prefix}container-mask {
z-index: 20;
display: block;
background-color: #fff;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background-image: url(../images/loading@2x.gif);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {
#{$prefix}container-mask,
#{$prefix}dialog-mask-con {
background-image: url(../images/loading@3x.gif);
}
}
#{$prefix}code-block-dialog,
#{$prefix}preformatted-text-dialog {
textarea {
width: 100%;
height: 400px;
margin-bottom: 6px;
overflow: auto;
border: 1px solid #eee;
background: #fff;
padding: 15px;
resize: none;
}
}
#{$prefix}code-toolbar {
color: #999;
font-size: 14px;
margin: -5px 0 10px;
}

4
scss/editormd.preview.scss
View File

@ -289,6 +289,10 @@
} }
} }
img {
background: none;
}
.highlight pre, pre { .highlight pre, pre {
line-height: 1.6; line-height: 1.6;
} }

274
scss/editormd.scss
View File

@ -1,137 +1,137 @@
@charset "UTF-8";
@import "lib/variables";
@import "lib/prefixes";
.editormd {
width: 90%;
height: 640px;
margin: 0 auto;
text-align: left;
overflow: hidden;
position: relative;
margin-bottom: 15px;
border: 1px solid $borderColor;
font-family: "Meiryo UI", "Microsoft YaHei", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
*, *:before, *:after {
@include box-sizing(border-box);
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: middle;
}
> textarea,
#{$prefix}html-textarea,
#{$prefix}markdown-textarea {
width: 0;
height: 0;
outline: 0;
resize:none;
}
#{$prefix}html-textarea,
#{$prefix}markdown-textarea {
display : none;
}
input[type="text"],
input[type="button"],
input[type="submit"],
select, textarea, button {
@include appearance(none);
}
::-webkit-scrollbar {
height: 10px;
width: 7px;
background: rgba(0, 0, 0, .1);
&:hover {
background: rgba(0, 0, 0, .2);
}
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
@include border-radius(6px);
&:hover {
@include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, .25));
background-color: rgba(0, 0, 0, .4);
}
}
}
#{$prefix}user-unselect {
@include user-select(none);
}
#{$prefix}toolbar {
width: 100%;
min-height: 37px;
background: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid $borderColor;
}
#{$prefix}toolbar-container {
padding: 0 8px;
min-height: 35px;
@include user-select(none);
}
@import "editormd.menu";
#{$prefix}container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding: 35px 0 0;
position: relative;
background: #fff;
@include box-sizing(border-box);
}
@import "editormd.dialog";
@import "editormd.grid";
@import "editormd.tab";
@import "editormd.form";
@import "editormd.codemirror";
@import "editormd.preview";
@import "editormd.preview.themes";
#{$prefix}onlyread {
#{$prefix}toolbar {
display: none;
}
.CodeMirror {
margin-top: 0;
}
#{$prefix}preview {
top: 0;
}
}
#{$prefix}fullscreen {
position: fixed;
top : 0;
left : 0;
border: none;
margin: 0 auto;
}
@import "editormd.themes";
@charset "UTF-8";
@import "lib/variables";
@import "lib/prefixes";
.editormd {
width: 90%;
height: 640px;
margin: 0 auto;
text-align: left;
overflow: hidden;
position: relative;
margin-bottom: 15px;
border: 1px solid $borderColor;
font-family: "Meiryo UI", "Microsoft YaHei", "Malgun Gothic", "Segoe UI", "Trebuchet MS", Helvetica, "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
*, *:before, *:after {
@include box-sizing(border-box);
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: middle;
}
> textarea,
#{$prefix}html-textarea,
#{$prefix}markdown-textarea {
width: 0;
height: 0;
outline: 0;
resize:none;
}
#{$prefix}html-textarea,
#{$prefix}markdown-textarea {
display : none;
}
input[type="text"],
input[type="button"],
input[type="submit"],
select, textarea, button {
@include appearance(none);
}
::-webkit-scrollbar {
height: 10px;
width: 7px;
background: rgba(0, 0, 0, .1);
&:hover {
background: rgba(0, 0, 0, .2);
}
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
@include border-radius(6px);
&:hover {
@include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, .25));
background-color: rgba(0, 0, 0, .4);
}
}
}
#{$prefix}user-unselect {
@include user-select(none);
}
#{$prefix}toolbar {
width: 100%;
min-height: 37px;
background: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid $borderColor;
}
#{$prefix}toolbar-container {
padding: 0 8px;
min-height: 35px;
@include user-select(none);
}
@import "editormd.menu";
#{$prefix}container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
padding: 35px 0 0;
position: relative;
background: #fff;
@include box-sizing(border-box);
}
@import "editormd.dialog";
@import "editormd.grid";
@import "editormd.tab";
@import "editormd.form";
@import "editormd.codemirror";
@import "editormd.preview";
@import "editormd.preview.themes";
#{$prefix}onlyread {
#{$prefix}toolbar {
display: none;
}
.CodeMirror {
margin-top: 0;
}
#{$prefix}preview {
top: 0;
}
}
#{$prefix}fullscreen {
position: fixed;
top : 0;
left : 0;
border: none;
margin: 0 auto!important;
}
@import "editormd.themes";

23
src/editormd.js
View File

@ -313,7 +313,7 @@
tex : editormd.classPrefix + "tex" tex : editormd.classPrefix + "tex"
}; };
editormd.dialogZindex = 99999;
editormd.dialogZindex = 9999;
editormd.$katex = null; editormd.$katex = null;
editormd.$marked = null; editormd.$marked = null;
@ -1779,11 +1779,18 @@
editor.css("height", (typeof height === "number") ? height + "px" : height); editor.css("height", (typeof height === "number") ? height + "px" : height);
} }
var hasToolbar = settings.toolbar && !settings.readOnly;
var toolbarHeight = hasToolbar && toolbar ? toolbar.height() : 0;
var $codeMirrorGutters = codeMirror.find('.CodeMirror-gutters');
if (state.fullscreen) { if (state.fullscreen) {
editor.height($(window).height()); editor.height($(window).height());
$codeMirrorGutters.height($(window).height() - toolbarHeight);
} else {
$codeMirrorGutters.height(editor.height() - toolbarHeight);
} }
if (settings.toolbar && !settings.readOnly) {
if (hasToolbar) {
codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height()); codeMirror.css("margin-top", toolbar.height() + 1).height(editor.height() - toolbar.height());
} else { } else {
codeMirror.css("margin-top", 0).height(editor.height()); codeMirror.css("margin-top", 0).height(editor.height());
@ -2484,8 +2491,9 @@
$("html,body").css("overflow", "hidden"); $("html,body").css("overflow", "hidden");
editor.css({ editor.css({
width : $(window).width(),
height : $(window).height()
width : $(window).width(),
height : $(window).height(),
zIndex : editormd.dialogZindex,
}).addClass(fullscreenClass); }).addClass(fullscreenClass);
this.resize(); this.resize();
@ -2524,8 +2532,9 @@
$("html,body").css("overflow", ""); $("html,body").css("overflow", "");
editor.css({ editor.css({
width : editor.data("oldWidth"),
height : editor.data("oldHeight")
width : editor.data("oldWidth"),
height : editor.data("oldHeight"),
zIndex : ''
}).removeClass(fullscreenClass); }).removeClass(fullscreenClass);
this.resize(); this.resize();
@ -3982,7 +3991,7 @@
buttons : false buttons : false
}; };
options = $.extend(true, defaults, options);
options = $.extend(true, {}, defaults, options);
var $this = this; var $this = this;
var editor = this.editor; var editor = this.editor;

Write Preview
Loading…
Cancel
Save