Fixes for new editor
This commit is contained in:
benweet
parent
8cb7c307ee
commit
0b6742873e
@ -1,183 +0,0 @@
|
|||||||
define(['jquery'], function($) {
|
|
||||||
function PreEditor(preElt) {
|
|
||||||
this.selectionStart = 0;
|
|
||||||
this.selectionEnd = 0;
|
|
||||||
this.scrollTop = 0;
|
|
||||||
this.$preContentElt = $('<div contenteditable class="pre-content">');
|
|
||||||
|
|
||||||
preElt.appendChild(this.$preContentElt[0]);
|
|
||||||
|
|
||||||
preElt.focus = function() {
|
|
||||||
this.$preContentElt.focus();
|
|
||||||
this.setSelectionRange(this.selectionStart, this.selectionEnd);
|
|
||||||
preElt.scrollTop = this.scrollTop;
|
|
||||||
};
|
|
||||||
this.$preContentElt.focus(function() {
|
|
||||||
preElt.focused = true;
|
|
||||||
});
|
|
||||||
this.$preContentElt.blur(function() {
|
|
||||||
preElt.focused = false;
|
|
||||||
});
|
|
||||||
Object.defineProperty(preElt, 'value', {
|
|
||||||
get: function() {
|
|
||||||
return this.$preContentElt.text();
|
|
||||||
},
|
|
||||||
set: function(value) {
|
|
||||||
this.$preContentElt.text(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.defineProperty(preElt, 'value', {
|
|
||||||
get: function() {
|
|
||||||
return this.$preContentElt.text();
|
|
||||||
},
|
|
||||||
set: function(value) {
|
|
||||||
this.$preContentElt.text(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Object.defineProperty(preElt, 'selectionStart', {
|
|
||||||
get: function() {
|
|
||||||
var selection = window.getSelection();
|
|
||||||
|
|
||||||
if(selection.rangeCount) {
|
|
||||||
var range = selection.getRangeAt(0),
|
|
||||||
element = range.startContainer,
|
|
||||||
container = element,
|
|
||||||
offset = range.startOffset;
|
|
||||||
|
|
||||||
if(!(this.compareDocumentPosition(element) & 0x10)) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
do {
|
|
||||||
while(element = element.previousSibling) {
|
|
||||||
if(element.textContent) {
|
|
||||||
offset += element.textContent.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
element = container = container.parentNode;
|
|
||||||
} while(element && element != this);
|
|
||||||
|
|
||||||
return offset;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
set: function(value) {
|
|
||||||
preElt.setSelectionRange(value, this.selectionEnd);
|
|
||||||
},
|
|
||||||
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.defineProperty(preElt, 'selectionEnd', {
|
|
||||||
get: function() {
|
|
||||||
var selection = window.getSelection();
|
|
||||||
|
|
||||||
if(selection.rangeCount) {
|
|
||||||
return this.selectionStart + (selection.getRangeAt(0) + '').length;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
set: function(value) {
|
|
||||||
preElt.setSelectionRange(this.selectionStart, value);
|
|
||||||
},
|
|
||||||
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true
|
|
||||||
});
|
|
||||||
|
|
||||||
preElt.setSelectionRange = function(ss, se) {
|
|
||||||
this.selectionStart = ss;
|
|
||||||
this.selectionEnd = se;
|
|
||||||
function findOffset(root, ss) {
|
|
||||||
if(!root) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
var offset = 0,
|
|
||||||
element = root,
|
|
||||||
container;
|
|
||||||
|
|
||||||
do {
|
|
||||||
container = element;
|
|
||||||
element = element.firstChild;
|
|
||||||
|
|
||||||
if(element) {
|
|
||||||
do {
|
|
||||||
var len = element.textContent.length;
|
|
||||||
|
|
||||||
if(offset <= ss && offset + len > ss) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
offset += len;
|
|
||||||
} while(element = element.nextSibling);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!element) {
|
|
||||||
// It's the container's lastChild
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} while(element && element.hasChildNodes() && element.nodeType != 3);
|
|
||||||
|
|
||||||
if(element) {
|
|
||||||
return {
|
|
||||||
element: element,
|
|
||||||
offset: ss - offset
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else if(container) {
|
|
||||||
element = container;
|
|
||||||
|
|
||||||
while(element && element.lastChild) {
|
|
||||||
element = element.lastChild;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(element.nodeType === 3) {
|
|
||||||
return {
|
|
||||||
element: element,
|
|
||||||
offset: element.textContent.length
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return {
|
|
||||||
element: element,
|
|
||||||
offset: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
element: root,
|
|
||||||
offset: 0,
|
|
||||||
error: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var range = document.createRange(),
|
|
||||||
offset = findOffset(this, ss);
|
|
||||||
|
|
||||||
range.setStart(offset.element, offset.offset);
|
|
||||||
|
|
||||||
if(se && se != ss) {
|
|
||||||
offset = findOffset(this, se);
|
|
||||||
}
|
|
||||||
|
|
||||||
range.setEnd(offset.element, offset.offset);
|
|
||||||
|
|
||||||
var selection = window.getSelection();
|
|
||||||
selection.removeAllRanges();
|
|
||||||
selection.addRange(range);
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return PreEditor;
|
|
||||||
});
|
|
||||||
@ -726,7 +726,9 @@ define([
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Apply dynamic stylesheet
|
// Apply dynamic stylesheet
|
||||||
var style = document.createElement("style");
|
var style = crel('style', {
|
||||||
|
type : 'text/css'
|
||||||
|
});
|
||||||
style.innerHTML = styleContent;
|
style.innerHTML = styleContent;
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
|
|
||||||
@ -773,7 +775,7 @@ define([
|
|||||||
menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
|
menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
|
||||||
$menuPanelElt.addClass('move-to-front');
|
$menuPanelElt.addClass('move-to-front');
|
||||||
// To avoid opening delay
|
// To avoid opening delay
|
||||||
setTimeout(function() {
|
$.support.transition && setTimeout(function() {
|
||||||
$menuPanelElt.trigger($.support.transition.end);
|
$menuPanelElt.trigger($.support.transition.end);
|
||||||
}, 50);
|
}, 50);
|
||||||
}
|
}
|
||||||
@ -784,7 +786,7 @@ define([
|
|||||||
}).on('hide.bs.collapse', function(e) {
|
}).on('hide.bs.collapse', function(e) {
|
||||||
if(e.target === $menuPanelElt[0]) {
|
if(e.target === $menuPanelElt[0]) {
|
||||||
isMenuPanelShown = false;
|
isMenuPanelShown = false;
|
||||||
menuPanelBackdropElt.parentNode.removeChild(menuPanelBackdropElt);
|
menuPanelBackdropElt.removeBackdrop();
|
||||||
$menuPanelElt.removeClass('move-to-front');
|
$menuPanelElt.removeClass('move-to-front');
|
||||||
aceEditor ? aceEditor.focus() : $editorElt.focus();
|
aceEditor ? aceEditor.focus() : $editorElt.focus();
|
||||||
}
|
}
|
||||||
@ -805,7 +807,7 @@ define([
|
|||||||
documentPanelBackdropElt = utils.createBackdrop('collapse', '.document-panel');
|
documentPanelBackdropElt = utils.createBackdrop('collapse', '.document-panel');
|
||||||
$documentPanelElt.addClass('move-to-front');
|
$documentPanelElt.addClass('move-to-front');
|
||||||
// To avoid opening delay
|
// To avoid opening delay
|
||||||
setTimeout(function() {
|
$.support.transition && setTimeout(function() {
|
||||||
$documentPanelElt.trigger($.support.transition.end);
|
$documentPanelElt.trigger($.support.transition.end);
|
||||||
}, 50);
|
}, 50);
|
||||||
}
|
}
|
||||||
@ -816,7 +818,7 @@ define([
|
|||||||
}).on('hide.bs.collapse', function(e) {
|
}).on('hide.bs.collapse', function(e) {
|
||||||
if(e.target === $documentPanelElt[0]) {
|
if(e.target === $documentPanelElt[0]) {
|
||||||
isDocumentPanelShown = false;
|
isDocumentPanelShown = false;
|
||||||
documentPanelBackdropElt.parentNode.removeChild(documentPanelBackdropElt);
|
documentPanelBackdropElt.removeBackdrop();
|
||||||
$documentPanelElt.removeClass('move-to-front');
|
$documentPanelElt.removeClass('move-to-front');
|
||||||
aceEditor ? aceEditor.focus() : $editorElt.focus();
|
aceEditor ? aceEditor.focus() : $editorElt.focus();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,6 +20,7 @@ define([
|
|||||||
var selectionEnd = 0;
|
var selectionEnd = 0;
|
||||||
var scrollTop = 0;
|
var scrollTop = 0;
|
||||||
var inputElt;
|
var inputElt;
|
||||||
|
var $inputElt;
|
||||||
var previewElt;
|
var previewElt;
|
||||||
var pagedownEditor;
|
var pagedownEditor;
|
||||||
var refreshPreviewLater = (function() {
|
var refreshPreviewLater = (function() {
|
||||||
@ -93,7 +94,7 @@ define([
|
|||||||
}
|
}
|
||||||
|
|
||||||
function adjustCursorPosition() {
|
function adjustCursorPosition() {
|
||||||
setTimeout(function() {
|
inputElt && setTimeout(function() {
|
||||||
selectionStart = inputElt.selectionStart;
|
selectionStart = inputElt.selectionStart;
|
||||||
selectionEnd = inputElt.selectionEnd;
|
selectionEnd = inputElt.selectionEnd;
|
||||||
|
|
||||||
@ -114,14 +115,13 @@ define([
|
|||||||
cursorY = container.parentNode.offsetTop + container.parentNode.offsetHeight / 2 - inputElt.scrollTop;
|
cursorY = container.parentNode.offsetTop + container.parentNode.offsetHeight / 2 - inputElt.scrollTop;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if(selectionStart === selectionEnd) {
|
var cursorOffset = backwards ? selectionStart : selectionEnd;
|
||||||
var selectedChar = inputElt.textContent[selectionStart];
|
var selectedChar = inputElt.textContent[cursorOffset];
|
||||||
if(selectedChar === undefined || selectedChar == '\n') {
|
if(selectedChar === undefined || selectedChar == '\n') {
|
||||||
selectionRange = createRange(selectionStart - 1, selectionEnd);
|
selectionRange = createRange(cursorOffset - 1, cursorOffset);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
selectionRange = createRange(selectionStart, selectionEnd + 1);
|
selectionRange = createRange(cursorOffset, cursorOffset + 1);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
var selectionRect = selectionRange.getBoundingClientRect();
|
var selectionRect = selectionRange.getBoundingClientRect();
|
||||||
cursorY = selectionRect.top + selectionRect.height / 2 - inputElt.offsetTop;
|
cursorY = selectionRect.top + selectionRect.height / 2 - inputElt.offsetTop;
|
||||||
@ -146,9 +146,10 @@ define([
|
|||||||
|
|
||||||
editor.init = function(elt1, elt2) {
|
editor.init = function(elt1, elt2) {
|
||||||
inputElt = elt1;
|
inputElt = elt1;
|
||||||
|
$inputElt = $(inputElt);
|
||||||
previewElt = elt2;
|
previewElt = elt2;
|
||||||
editor.contentElt = crel('div', {
|
editor.contentElt = crel('div', {
|
||||||
class: 'pre-content',
|
class: 'editor-content',
|
||||||
contenteditable: true
|
contenteditable: true
|
||||||
});
|
});
|
||||||
editor.$contentElt = $(editor.contentElt);
|
editor.$contentElt = $(editor.contentElt);
|
||||||
@ -279,10 +280,11 @@ define([
|
|||||||
selection.addRange(range);
|
selection.addRange(range);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var clearNewline = false;
|
||||||
editor.$contentElt.on('keydown', function (evt) {
|
editor.$contentElt.on('keydown', function (evt) {
|
||||||
var cmdOrCtrl = evt.metaKey || evt.ctrlKey;
|
var cmdOrCtrl = evt.metaKey || evt.ctrlKey;
|
||||||
|
|
||||||
if(!cmdOrCtrl && !event.altKey && !event.shiftKey) {
|
if(!cmdOrCtrl && !event.altKey && !(event.shiftKey && evt.keyCode === 16)) {
|
||||||
adjustCursorPosition();
|
adjustCursorPosition();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -308,6 +310,9 @@ define([
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
if(evt.keyCode !== 13) {
|
||||||
|
clearNewline = false;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
editor.$contentElt.on('paste', function () {
|
editor.$contentElt.on('paste', function () {
|
||||||
@ -339,12 +344,9 @@ define([
|
|||||||
};
|
};
|
||||||
|
|
||||||
actions[action](state, options);
|
actions[action](state, options);
|
||||||
|
|
||||||
inputElt.value = state.before + state.selection + state.after;
|
inputElt.value = state.before + state.selection + state.after;
|
||||||
|
|
||||||
inputElt.setSelectionRange(state.ss, state.se);
|
inputElt.setSelectionRange(state.ss, state.se);
|
||||||
|
$inputElt.trigger('input');
|
||||||
inputElt.dispatchEvent(new window.Event('input'));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var actions = {
|
var actions = {
|
||||||
@ -382,14 +384,30 @@ define([
|
|||||||
|
|
||||||
newline: function (state) {
|
newline: function (state) {
|
||||||
var lf = state.before.lastIndexOf('\n') + 1;
|
var lf = state.before.lastIndexOf('\n') + 1;
|
||||||
var indent = (state.before.slice(lf).match(/^\s+/) || [''])[0];
|
if(clearNewline) {
|
||||||
|
state.before = state.before.substring(0, lf);
|
||||||
|
state.selection = '';
|
||||||
|
state.ss = lf;
|
||||||
|
state.se = lf;
|
||||||
|
clearNewline = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
clearNewline = false;
|
||||||
|
var previousLine = state.before.slice(lf);
|
||||||
|
var indentMatch = previousLine.match(/^ {0,3}>[ ]*|^[ \t]*(?:[*+\-]|(\d+)\.)[ \t]|^\s+/);
|
||||||
|
var indent = (indentMatch || [''])[0];
|
||||||
|
if(indentMatch && indentMatch[1]) {
|
||||||
|
var number = parseInt(indentMatch[1], 10);
|
||||||
|
indent = indent.replace(/\d+/, number + 1);
|
||||||
|
}
|
||||||
|
if(indent.length) {
|
||||||
|
clearNewline = true;
|
||||||
|
}
|
||||||
|
|
||||||
pagedownEditor.undoManager.setMode("newlines");
|
pagedownEditor.undoManager.setMode("newlines");
|
||||||
|
|
||||||
state.before += '\n' + indent;
|
state.before += '\n' + indent;
|
||||||
|
|
||||||
state.selection = '';
|
state.selection = '';
|
||||||
|
|
||||||
state.ss += indent.length + 1;
|
state.ss += indent.length + 1;
|
||||||
state.se = state.ss;
|
state.se = state.ss;
|
||||||
},
|
},
|
||||||
@ -504,12 +522,20 @@ define([
|
|||||||
}
|
}
|
||||||
|
|
||||||
function highlight(section) {
|
function highlight(section) {
|
||||||
var text = section.textWithFrontMatter.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
|
var text = section.text.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
|
||||||
|
text = Prism.highlight(text, Prism.languages.md);
|
||||||
|
var frontMatter = section.textWithFrontMatter.substring(0, section.textWithFrontMatter.length-section.text.length);
|
||||||
|
if(frontMatter.length) {
|
||||||
|
// Custom front matter highlighting
|
||||||
|
frontMatter = frontMatter.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' ');
|
||||||
|
frontMatter = frontMatter.replace(/\n/g, '<span class="token lf">\n</span>');
|
||||||
|
text = '<span class="token md">' + frontMatter + '</span>' + text;
|
||||||
|
}
|
||||||
var sectionElt = crel('span', {
|
var sectionElt = crel('span', {
|
||||||
id: 'wmd-input-section-' + section.id,
|
id: 'wmd-input-section-' + section.id,
|
||||||
class: 'wmd-input-section'
|
class: 'wmd-input-section'
|
||||||
});
|
});
|
||||||
sectionElt.innerHTML = Prism.highlight(text, Prism.languages.md);
|
sectionElt.innerHTML = text;
|
||||||
section.highlightedContent = sectionElt;
|
section.highlightedContent = sectionElt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
define([
|
define([
|
||||||
"jquery",
|
"jquery",
|
||||||
"underscore",
|
"underscore",
|
||||||
"caret",
|
|
||||||
"crel",
|
"crel",
|
||||||
"classes/Extension"
|
"classes/Extension"
|
||||||
], function($, _, caret, crel, Extension) {
|
], function($, _, crel, Extension) {
|
||||||
|
|
||||||
var buttonFocusMode = new Extension("buttonFocusMode", 'Button "Focus Mode"', true, true);
|
var buttonFocusMode = new Extension("buttonFocusMode", 'Button "Focus Mode"', true, true);
|
||||||
buttonFocusMode.settingsBlock = "When typing, scrolls automatically the editor to always have the caret centered verticaly.";
|
buttonFocusMode.settingsBlock = "When typing, scrolls automatically the editor to always have the caret centered verticaly.";
|
||||||
@ -26,40 +25,6 @@ define([
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var $editorElt;
|
|
||||||
//var $positionHelper = $('<span>').css('display', 'inline-block');
|
|
||||||
var coef = 0.2;
|
|
||||||
function doFocus() {
|
|
||||||
setTimeout(function() {
|
|
||||||
if(!($editorElt && $editorElt[0].focused)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
var range = window.getSelection().getRangeAt(0);
|
|
||||||
range.insertNode($positionHelper[0]);
|
|
||||||
var parentNode = $positionHelper[0].parentNode;
|
|
||||||
*/
|
|
||||||
var editorHeight = $editorElt.height();
|
|
||||||
var cursorMinY = coef*editorHeight;
|
|
||||||
var cursorMaxY = (1-coef)*editorHeight;
|
|
||||||
var cursorY = $editorElt.caret('offset').top - $editorElt.offset().top;
|
|
||||||
//console.log($editorElt.find('.pre-content').caret('offset'));
|
|
||||||
//console.log(window.getSelection().getRangeAt(0).getBoundingClientRect());
|
|
||||||
//$positionHelper.detach();
|
|
||||||
//parentNode.normalize();
|
|
||||||
/*
|
|
||||||
if(cursorY < cursorMinY) {
|
|
||||||
$editorElt.scrollTop($editorElt.scrollTop() - cursorMinY + cursorY);
|
|
||||||
}
|
|
||||||
else if(cursorY > cursorMaxY) {
|
|
||||||
$editorElt.scrollTop($editorElt.scrollTop() + cursorY - cursorMaxY);
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
buttonFocusMode.onLayoutResize = doFocus;
|
|
||||||
|
|
||||||
buttonFocusMode.onReady = function() {
|
buttonFocusMode.onReady = function() {
|
||||||
if(aceEditor) {
|
if(aceEditor) {
|
||||||
aceEditor.getSession().selection.on('changeCursor', doFocusMode);
|
aceEditor.getSession().selection.on('changeCursor', doFocusMode);
|
||||||
@ -71,15 +36,7 @@ define([
|
|||||||
}, true);
|
}, true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$editorElt = $('#wmd-input').on('keydown', function(event) {
|
|
||||||
if(event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
doFocus();
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return buttonFocusMode;
|
return buttonFocusMode;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,22 @@
|
|||||||
define([
|
define([
|
||||||
"jquery",
|
"jquery",
|
||||||
"underscore",
|
"underscore",
|
||||||
|
"crel",
|
||||||
"classes/Extension"
|
"classes/Extension"
|
||||||
], function ($, _, Extension) {
|
], function ($, _, crel, Extension) {
|
||||||
|
|
||||||
var workingIndicator = new Extension("workingIndicator", "Working Indicator");
|
var workingIndicator = new Extension("workingIndicator", "Working Indicator");
|
||||||
|
|
||||||
|
var keyframeTemlate = [
|
||||||
|
'@<%= prefix %>keyframes <%= name %> {',
|
||||||
|
' 0% { opacity:<%= z %>; }',
|
||||||
|
' <%= start %>.01% { opacity:<%= alpha %>; }',
|
||||||
|
' <%= start %>.02% { opacity:1; }',
|
||||||
|
' <%= ((start + trail) % 100) %>.01% { opacity:<%= alpha %>; }',
|
||||||
|
' 100% { opacity:<%= z %>; }',
|
||||||
|
'}'
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
var $bodyElt;
|
var $bodyElt;
|
||||||
var $workingIndicatorElt;
|
var $workingIndicatorElt;
|
||||||
workingIndicator.onAsyncRunning = function (isRunning) {
|
workingIndicator.onAsyncRunning = function (isRunning) {
|
||||||
@ -14,15 +25,39 @@ define([
|
|||||||
};
|
};
|
||||||
|
|
||||||
workingIndicator.onReady = function () {
|
workingIndicator.onReady = function () {
|
||||||
|
var styleContent = '';
|
||||||
|
|
||||||
|
function addKeyframe(params) {
|
||||||
|
params.z = Math.max(1 - (1-params.alpha) / params.trail * (100-params.start), params.alpha);
|
||||||
|
styleContent += _.template(keyframeTemlate, _.extend({
|
||||||
|
prefix: ''
|
||||||
|
}, params));
|
||||||
|
styleContent += _.template(keyframeTemlate, _.extend({
|
||||||
|
prefix: '-webkit-'
|
||||||
|
}, params));
|
||||||
|
}
|
||||||
$bodyElt = $(document.body);
|
$bodyElt = $(document.body);
|
||||||
$workingIndicatorElt = $('<div class="hide">');
|
$workingIndicatorElt = $('<div class="hide">');
|
||||||
$('.working-indicator').append($workingIndicatorElt);
|
$('.working-indicator').append($workingIndicatorElt);
|
||||||
for (var i = 0; i < 3; i++) {
|
for (var i = 0; i < 3; i++) {
|
||||||
|
var name = 'working-indicator-bar' + i;
|
||||||
|
addKeyframe({
|
||||||
|
name: name,
|
||||||
|
alpha: 0.25,
|
||||||
|
start: 20 * i,
|
||||||
|
trail: 50
|
||||||
|
});
|
||||||
|
var animation = name + ' 0.7s linear infinite';
|
||||||
$workingIndicatorElt.append($('<div class="bar">').css({
|
$workingIndicatorElt.append($('<div class="bar">').css({
|
||||||
'animation-delay': (i*15/100).toPrecision(3) + 's',
|
'animation': animation,
|
||||||
'-webkit-animation-delay': (i*15/100).toPrecision(3) + 's',
|
'-webkit-animation': animation,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
var styleElt = crel('style', {
|
||||||
|
type : 'text/css'
|
||||||
|
});
|
||||||
|
document.head.appendChild(styleElt);
|
||||||
|
styleElt.innerHTML = styleContent;
|
||||||
};
|
};
|
||||||
|
|
||||||
return workingIndicator;
|
return workingIndicator;
|
||||||
|
|||||||
@ -104,7 +104,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" data-toggle="modal" data-target=".modal-manage-sharing"
|
<a href="#" data-toggle="modal" data-target=".modal-manage-sharing"
|
||||||
class="action-reset-input list-group-item"><i class="icon-provider-stackedit"></i>
|
class="action-reset-input list-group-item"><i class="icon-link"></i>
|
||||||
Sharing links</a>
|
Sharing links</a>
|
||||||
<a href="#" data-toggle="collapse" data-target=".collapse-save-as"
|
<a href="#" data-toggle="collapse" data-target=".collapse-save-as"
|
||||||
class="list-group-item"><i class="icon-hdd"></i> Export to disk</a>
|
class="list-group-item"><i class="icon-hdd"></i> Export to disk</a>
|
||||||
@ -189,7 +189,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-document-manager">
|
<div class="modal fade modal-document-manager">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -245,7 +245,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-insert-link">
|
<div class="modal fade modal-insert-link">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -272,7 +272,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-insert-image">
|
<div class="modal fade modal-insert-image">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -301,7 +301,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-import-image">
|
<div class="modal fade modal-import-image">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -345,7 +345,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-remove-file-confirm">
|
<div class="modal fade modal-remove-file-confirm">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -373,7 +373,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-import-url">
|
<div class="modal fade modal-import-url">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -404,7 +404,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-import-harddrive-markdown">
|
<div class="modal fade modal-import-harddrive-markdown">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -431,7 +431,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-import-harddrive-html">
|
<div class="modal fade modal-import-harddrive-html">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -462,23 +462,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-upload-gdrive">
|
<div class="modal fade modal-upload-gdrive">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal modal-upload-gdrivesec">
|
<div class="modal fade modal-upload-gdrivesec">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal modal-upload-gdriveter">
|
<div class="modal fade modal-upload-gdriveter">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-autosync-gdrive">
|
<div class="modal fade modal-autosync-gdrive">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal modal-autosync-gdrivesec">
|
<div class="modal fade modal-autosync-gdrivesec">
|
||||||
</div>
|
</div>
|
||||||
<div class="modal modal-autosync-gdriveter">
|
<div class="modal fade modal-autosync-gdriveter">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-upload-dropbox">
|
<div class="modal fade modal-upload-dropbox">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -526,7 +526,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-manage-sync">
|
<div class="modal fade modal-manage-sync">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -563,7 +563,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-publish">
|
<div class="modal fade modal-publish">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -819,7 +819,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-manage-publish">
|
<div class="modal fade modal-manage-publish">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -846,7 +846,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-manage-sharing">
|
<div class="modal fade modal-manage-sharing">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -881,7 +881,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-settings">
|
<div class="modal fade modal-settings">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -1173,7 +1173,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-non-unique">
|
<div class="modal fade modal-non-unique">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -1195,7 +1195,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-redirect-confirm">
|
<div class="modal fade modal-redirect-confirm">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -1215,7 +1215,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-app-reset">
|
<div class="modal fade modal-app-reset">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -1236,7 +1236,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal modal-import-docs-settings">
|
<div class="modal fade modal-import-docs-settings">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
|
|||||||
@ -5,7 +5,7 @@ Prism.languages.md = (function() {
|
|||||||
|
|
||||||
var md = {};
|
var md = {};
|
||||||
md.pre = {
|
md.pre = {
|
||||||
pattern: /(^|(?:^|(?:^|\n)(?![ \t]*([*+\-]|\d+\.)[ \t]).*\n)\s*?\n)(\s*(?:[ ]{4}|\t).*(?:\n|$))+/g,
|
pattern: /(^|(?:^|(?:^|\n)(?![ \t]*([*+\-]|\d+\.)[ \t]).*\n)\s*?\n)(\s*(?: {4}|\t).*(?:\n|$))+/g,
|
||||||
lookbehind: true,
|
lookbehind: true,
|
||||||
inside: {
|
inside: {
|
||||||
}
|
}
|
||||||
@ -32,17 +32,17 @@ Prism.languages.md = (function() {
|
|||||||
md.li = {
|
md.li = {
|
||||||
pattern: /^[ \t]*([*+\-]|\d+\.)[ \t].+$/gm,
|
pattern: /^[ \t]*([*+\-]|\d+\.)[ \t].+$/gm,
|
||||||
inside: {
|
inside: {
|
||||||
"md md-li": /^[ ]?([*+\-]|\d+\.)[ \t]/m,
|
"md md-li": /^ ?([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li2": /^[ ]?(?:[ ]{2}|[ ]{1})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li2": /^ ?(?: {2}|\t{1})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li3": /^[ ]?(?:[ ]{4}|[ ]{2})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li3": /^ ?(?: {4}|\t{2})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li4": /^[ ]?(?:[ ]{6}|[ ]{3})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li4": /^ ?(?: {6}|\t{3})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li5": /^[ ]?(?:[ ]{8}|[ ]{4})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li5": /^ ?(?: {8}|\t{4})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li6": /^[ ]?(?:[ ]{10}|[ ]{5})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li6": /^ ?(?: {10}|\t{5})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li7": /^[ ]?(?:[ ]{12}|[ ]{6})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li7": /^ ?(?: {12}|\t{6})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li8": /^[ ]?(?:[ ]{14}|[ ]{7})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li8": /^ ?(?: {14}|\t{7})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li9": /^[ ]?(?:[ ]{16}|[ ]{8})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li9": /^ ?(?: {16}|\t{8})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li10": /^[ ]?(?:[ ]{18}|[ ]{9})([*+\-]|\d+\.)[ \t]/m,
|
"md md-li10": /^ ?(?: {18}|\t{9})([*+\-]|\d+\.)[ \t]/m,
|
||||||
"md md-li11": /^[ ]?(?:[ ]{20}|[ ]{10})([*+\-]|\d+\.)[ \t]/m
|
"md md-li11": /^ ?(?: {20}|\t{10})([*+\-]|\d+\.)[ \t]/m
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
for (var i = 6; i >= 1; i--) {
|
for (var i = 6; i >= 1; i--) {
|
||||||
@ -54,9 +54,9 @@ Prism.languages.md = (function() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
md.blockquote = {
|
md.blockquote = {
|
||||||
pattern: /^>[ ]*[^\n]+$/gm,
|
pattern: /^ {0,3}> *[^\n]+$/gm,
|
||||||
inside: {
|
inside: {
|
||||||
"md md-gt": /^>[ ]*/
|
"md md-gt": /^ {0,3}> */
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
md['math block'] = {
|
md['math block'] = {
|
||||||
@ -106,7 +106,7 @@ Prism.languages.md = (function() {
|
|||||||
'md md-toc': /^\s*\[(toc|TOC)\]\s*$/g
|
'md md-toc': /^\s*\[(toc|TOC)\]\s*$/g
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
md.br = /^\n$/gm;
|
md.lf = /^\n$/gm;
|
||||||
md.img = {
|
md.img = {
|
||||||
pattern: /!\[[^\]]*\]\([^\)]+\)/g,
|
pattern: /!\[[^\]]*\]\([^\)]+\)/g,
|
||||||
inside: {
|
inside: {
|
||||||
|
|||||||
@ -177,17 +177,23 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal {
|
||||||
background-color: @secondary-bg-light;
|
&.fade .modal-dialog {
|
||||||
}
|
.translate(0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-content {
|
||||||
background-color: @secondary-bg-lighter;
|
background-color: @secondary-bg-light;
|
||||||
padding-bottom: 30px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
.modal-body {
|
||||||
margin-top: 0;
|
background-color: @secondary-bg-lighter;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -475,8 +481,6 @@ a {
|
|||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
background-color: @btn-success-color;
|
background-color: @btn-success-color;
|
||||||
animation: indicator 0.6s ease-out infinite;
|
|
||||||
-webkit-animation: indicator 0.6s ease-out infinite; /* Safari and Chrome */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -501,15 +505,6 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes indicator {
|
|
||||||
from {opacity: 1;}
|
|
||||||
to {opacity: 0.25;}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes indicator /* Safari and Chrome */ {
|
|
||||||
from {opacity: 1;}
|
|
||||||
to {opacity: 0.25;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************
|
/*********************
|
||||||
* Menu/Document panels
|
* Menu/Document panels
|
||||||
@ -1250,8 +1245,7 @@ a {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
> div {
|
> .editor-content {
|
||||||
margin: 0 auto;
|
|
||||||
padding-bottom: 230px;
|
padding-bottom: 230px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1374,7 +1368,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.md-li, .md-li2, .md-li3, .md-li4, .md-li5, .md-li6, .md-li7, .md-li8, .md-li9, .md-li10, .md-li11 {
|
.md-li, .md-li2, .md-li3, .md-li4, .md-li5, .md-li6, .md-li7, .md-li8, .md-li9, .md-li10, .md-li11 {
|
||||||
white-space: pre-line;
|
//white-space: pre-line;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-li {
|
.md-li {
|
||||||
|
|||||||
@ -187,11 +187,19 @@ define([
|
|||||||
// Create a backdrop and add to the body
|
// Create a backdrop and add to the body
|
||||||
utils.createBackdrop = function(toggle, target) {
|
utils.createBackdrop = function(toggle, target) {
|
||||||
var result = crel('div', {
|
var result = crel('div', {
|
||||||
'class': 'modal-backdrop in',
|
'class': 'modal-backdrop fade',
|
||||||
'data-toggle': toggle,
|
'data-toggle': toggle,
|
||||||
'data-target': target,
|
'data-target': target,
|
||||||
});
|
});
|
||||||
document.body.appendChild(result);
|
document.body.appendChild(result);
|
||||||
|
result.offsetWidth; // force reflow
|
||||||
|
result.className = result.className + ' in';
|
||||||
|
result.removeBackdrop = function() {
|
||||||
|
result.className = 'modal-backdrop fade';
|
||||||
|
setTimeout(function() {
|
||||||
|
result.parentNode.removeChild(result);
|
||||||
|
}, 150);
|
||||||
|
};
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user