Hopiu/django-markdownx
1
0
Fork 0
mirror of https://github.com/Hopiu/django-markdownx.git synced 2026-04-19 12:41:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Delocalisation of functions.

Browse source
This commit is contained in:
Pouria Hadjibagheri 2017-03-22 09:58:26 +00:00
parent 16e2652298
commit 8a78618a9f
3 changed files with 170 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
markdownx/static/markdownx/js/markdownx.js
View file

@ -13,7 +13,8 @@
"use strict";
exports.__esModule = true;
var utils_1 = require("./utils");
var UPLOAD_URL_ATTRIBUTE = "data-markdownx-upload-urls-path", PROCESSING_URL_ATTRIBUTE = "data-markdownx-urls-path", RESIZABILITY_ATTRIBUTE = "data-markdownx-editor-resizable", LATENCY_ATTRIBUTE = "data-markdownx-latency", LATENCY_MINIMUM = 500; // microseconds.
var UPLOAD_URL_ATTRIBUTE = "data-markdownx-upload-urls-path", PROCESSING_URL_ATTRIBUTE = "data-markdownx-urls-path", RESIZABILITY_ATTRIBUTE = "data-markdownx-editor-resizable", LATENCY_ATTRIBUTE = "data-markdownx-latency", LATENCY_MINIMUM = 500, // microseconds.
XHR_RESPONSE_ERROR = "Invalid response", UPLOAD_START_OPACITY = "0.3", NORMAL_OPACITY = "1", INDENTATION_KEY = "Tab", DUPLICATION_KEY = "d";
// ---------------------------------------------------------------------------------------------------------------------
/**
*
@ -53,9 +54,9 @@ function removeIndentation(start, end, value) {
}
/**
*
* @param start
* @param end
* @param value
* @param {number} start
* @param {number} end
* @param {string} value
* @returns {string}
*/
function applyDuplication(start, end, value) {
@ -73,7 +74,7 @@ function applyDuplication(start, end, value) {
}
/**
*
* @param element
* @param {HTMLElement} element
* @returns {number}
*/
function getHeight(element) {
@ -82,6 +83,38 @@ function getHeight(element) {
(parseInt(element.style.height) || 0) // Property's own height if set, otherwise 0.
);
}
/**
*
* @param {HTMLTextAreaElement} editor
* @returns {HTMLTextAreaElement}
*/
function updateHeight(editor) {
// Ensure that the editor is resizable before anything else.
// Change size if scroll is larger that height, otherwise do nothing.
if (getHeight(editor) < editor.scrollHeight)
editor.style.height = editor.scrollHeight + "px";
return editor;
}
/**
* Routine tasks for event handlers (e.g. default preventions).
*
* @param {Event} event
* @returns {Event}
*/
function inhibitDefault(event) {
event.preventDefault();
event.stopPropagation();
return event;
}
/**
*
* @param event
* returns {Event}
*/
function onDragEnter(event) {
event.dataTransfer.dropEffect = 'copy';
return inhibitDefault(event);
}
/**
* @example
*
@ -110,10 +143,10 @@ var MarkdownX = function (parent, editor, preview) {
var documentListeners = {
object: document,
listeners: [
{ type: "drop", capture: false, listener: onHtmlEvents },
{ type: "dragover", capture: false, listener: onHtmlEvents },
{ type: "dragenter", capture: false, listener: onHtmlEvents },
{ type: "dragleave", capture: false, listener: onHtmlEvents }
{ type: "drop", capture: false, listener: inhibitDefault },
{ type: "dragover", capture: false, listener: inhibitDefault },
{ type: "dragenter", capture: false, listener: inhibitDefault },
{ type: "dragleave", capture: false, listener: inhibitDefault }
]
}, editorListeners = {
object: properties.editor,
@ -123,7 +156,7 @@ var MarkdownX = function (parent, editor, preview) {
{ type: "keydown", capture: true, listener: onKeyDown },
{ type: "dragover", capture: false, listener: onDragEnter },
{ type: "dragenter", capture: false, listener: onDragEnter },
{ type: "dragleave", capture: false, listener: onDragLeave },
{ type: "dragleave", capture: false, listener: inhibitDefault },
{ type: "compositionstart", capture: true, listener: onKeyDown }
]
};
@ -154,81 +187,49 @@ var MarkdownX = function (parent, editor, preview) {
clearTimeout(_this.timeout);
_this.timeout = setTimeout(getMarkdown, properties._latency);
};
/**
* Routine tasks for event handlers (e.g. default preventions).
*
* @param {Event} event
* @private
*/
var _inhibitDefault = function (event) {
event.preventDefault();
event.stopPropagation();
};
/**
*
*/
var updateHeight = function () {
// Ensure that the editor is resizable before anything else.
// Change size if scroll is larger that height, otherwise do nothing.
if (properties._editorIsResizable && getHeight(properties.editor) < properties.editor.scrollHeight)
properties.editor.style.height = properties.editor.scrollHeight + "px";
};
/**
*
*/
var inputChanged = function () {
updateHeight();
_markdownify();
properties.editor = properties._editorIsResizable ?
updateHeight(properties.editor) : properties.editor;
return _markdownify();
};
/**
*
* @param event
*/
var onHtmlEvents = function (event) { return _inhibitDefault(event); };
/**
*
* @param event
*/
var onDragEnter = function (event) {
event.dataTransfer.dropEffect = 'copy';
_inhibitDefault(event);
};
/**
*
* @param event
*/
var onDragLeave = function (event) { return _inhibitDefault(event); };
/**
*
* @param event
* @param {DragEvent} event
*/
var onDrop = function (event) {
if (event.dataTransfer && event.dataTransfer.files.length)
Object.keys(event.dataTransfer.files).map(function (fileKey) { return sendFile(event.dataTransfer.files[fileKey]); });
_inhibitDefault(event);
Object.keys(event.dataTransfer.files).map(function (fileKey) {
return sendFile(event.dataTransfer.files[fileKey]);
});
inhibitDefault(event);
};
/**
*
* @param event
* @returns {KeyboardEvent}
* @param {KeyboardEvent} event
* @returns {Boolean | null}
*/
var onKeyDown = function (event) {
// `Tab` for indentation, `d` for duplication.
if (event.key !== 'Tab' && event.key !== 'd')
if (event.key !== INDENTATION_KEY && event.key !== DUPLICATION_KEY)
return null;
_inhibitDefault(event);
event = inhibitDefault(event);
var handlerFunc = null;
switch (event.key) {
case "Tab":
case INDENTATION_KEY:
// Shift pressed: un-indent, otherwise indent.
handlerFunc = event.shiftKey ? removeIndentation : applyIndentation;
break;
case "d":
if (event.ctrlKey || event.metaKey)
case DUPLICATION_KEY:
if (event.ctrlKey || event.metaKey) {
// Is CTRL or CMD (on Mac) pressed?
handlerFunc = applyDuplication;
break;
}
else
return false;
break;
default:
return false;
}
@ -246,7 +247,7 @@ var MarkdownX = function (parent, editor, preview) {
* @param file
*/
var sendFile = function (file) {
properties.editor.style.opacity = "0.3";
properties.editor.style.opacity = UPLOAD_START_OPACITY;
var xhr = new utils_1.Request(properties.editor.getAttribute(UPLOAD_URL_ATTRIBUTE), // URL
utils_1.preparePostData({ image: file }) // Data
);
@ -262,14 +263,14 @@ var MarkdownX = function (parent, editor, preview) {
utils_1.triggerCustomEvent('markdownx.fileUploadEnd', properties.parent, [response]);
}
else {
console.error('Wrong response', response);
console.error(XHR_RESPONSE_ERROR, response);
utils_1.triggerCustomEvent('markdownx.fileUploadError', properties.parent, [response]);
}
properties.preview.innerHTML = _this.response;
properties.editor.style.opacity = "1";
properties.editor.style.opacity = NORMAL_OPACITY;
};
xhr.error = function (response) {
properties.editor.style.opacity = "1";
properties.editor.style.opacity = NORMAL_OPACITY;
console.error(response);
utils_1.triggerCustomEvent('fileUploadError', properties.parent, [response]);
};
@ -284,7 +285,7 @@ var MarkdownX = function (parent, editor, preview) {
);
xhr.success = function (response) {
properties.preview.innerHTML = response;
updateHeight();
properties.editor = updateHeight(properties.editor);
utils_1.triggerCustomEvent('markdownx.update', properties.parent, [response]);
};
xhr.error = function (response) {

2
markdownx/static/markdownx/js/markdownx.min.js vendored
View file

File diff suppressed because one or more lines are too long

189
markdownx/static/markdownx/js/src/markdownx.ts
View file

@ -16,7 +16,6 @@
declare function docReady(args: any): any;
import {
zip,
Request,
mountEvents,
triggerEvent,
@ -28,7 +27,12 @@ const UPLOAD_URL_ATTRIBUTE: string = "data-markdownx-upload-urls-path",
PROCESSING_URL_ATTRIBUTE: string = "data-markdownx-urls-path",
RESIZABILITY_ATTRIBUTE: string = "data-markdownx-editor-resizable",
LATENCY_ATTRIBUTE: string = "data-markdownx-latency",
LATENCY_MINIMUM: number = 500; // microseconds.
LATENCY_MINIMUM: number = 500, // microseconds.
XHR_RESPONSE_ERROR: string = "Invalid response",
UPLOAD_START_OPACITY: string = "0.3",
NORMAL_OPACITY: string = "1",
INDENTATION_KEY: string = "Tab",
DUPLICATION_KEY: string = "d";
// ---------------------------------------------------------------------------------------------------------------------
@ -89,12 +93,12 @@ function removeIndentation(start: number, end: number, value: string): string {
/**
*
* @param start
* @param end
* @param value
* @param {number} start
* @param {number} end
* @param {string} value
* @returns {string}
*/
function applyDuplication(start, end, value): string {
function applyDuplication(start: number, end: number, value: string): string {
// Selected.
if (start !== end) return (
@ -117,7 +121,7 @@ function applyDuplication(start, end, value): string {
/**
*
* @param element
* @param {HTMLElement} element
* @returns {number}
*/
function getHeight (element: HTMLElement): number {
@ -130,6 +134,53 @@ function getHeight (element: HTMLElement): number {
}
/**
*
* @param {HTMLTextAreaElement} editor
* @returns {HTMLTextAreaElement}
*/
function updateHeight(editor: HTMLTextAreaElement): HTMLTextAreaElement {
// Ensure that the editor is resizable before anything else.
// Change size if scroll is larger that height, otherwise do nothing.
if (getHeight(editor) < editor.scrollHeight)
editor.style.height = `${editor.scrollHeight}px`;
return editor
}
/**
* Routine tasks for event handlers (e.g. default preventions).
*
* @param {Event} event
* @returns {Event}
*/
function inhibitDefault(event: Event | KeyboardEvent): any {
event.preventDefault();
event.stopPropagation();
return event
}
/**
*
* @param event
* returns {Event}
*/
function onDragEnter(event: DragEvent ): Event {
event.dataTransfer.dropEffect = 'copy';
return inhibitDefault(event)
}
/**
* @example
*
@ -163,22 +214,22 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
let documentListeners = {
object: document,
listeners: [
{ type: "drop" , capture: false, listener: onHtmlEvents },
{ type: "dragover" , capture: false, listener: onHtmlEvents },
{ type: "dragenter", capture: false, listener: onHtmlEvents },
{ type: "dragleave", capture: false, listener: onHtmlEvents }
{ type: "drop" , capture: false, listener: inhibitDefault },
{ type: "dragover" , capture: false, listener: inhibitDefault },
{ type: "dragenter", capture: false, listener: inhibitDefault },
{ type: "dragleave", capture: false, listener: inhibitDefault }
]
},
editorListeners = {
object: properties.editor,
listeners: [
{ type: "drop", capture: false, listener: onDrop },
{ type: "input", capture: true , listener: inputChanged },
{ type: "keydown", capture: true , listener: onKeyDown },
{ type: "dragover", capture: false, listener: onDragEnter },
{ type: "dragenter", capture: false, listener: onDragEnter },
{ type: "dragleave", capture: false, listener: onDragLeave },
{ type: "compositionstart", capture: true , listener: onKeyDown }
{ type: "drop", capture: false, listener: onDrop },
{ type: "input", capture: true , listener: inputChanged },
{ type: "keydown", capture: true , listener: onKeyDown },
{ type: "dragover", capture: false, listener: onDragEnter },
{ type: "dragenter", capture: false, listener: onDragEnter },
{ type: "dragleave", capture: false, listener: inhibitDefault },
{ type: "compositionstart", capture: true , listener: onKeyDown }
]
};
@ -220,102 +271,61 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
};
/**
* Routine tasks for event handlers (e.g. default preventions).
*
* @param {Event} event
* @private
*/
const _inhibitDefault = (event: any): void => {
event.preventDefault();
event.stopPropagation()
};
/**
*
*/
const updateHeight = (): void => {
// Ensure that the editor is resizable before anything else.
// Change size if scroll is larger that height, otherwise do nothing.
if (properties._editorIsResizable && getHeight(properties.editor) < properties.editor.scrollHeight)
properties.editor.style.height = `${properties.editor.scrollHeight}px`;
};
/**
*
*/
const inputChanged = (): void => {
updateHeight();
_markdownify()
properties.editor = properties._editorIsResizable ?
updateHeight(properties.editor) : properties.editor;
return _markdownify()
};
/**
*
* @param event
* @param {DragEvent} event
*/
const onHtmlEvents = (event: Event): void => _inhibitDefault(event);
/**
*
* @param event
*/
const onDragEnter = (event: any): void => {
event.dataTransfer.dropEffect = 'copy';
_inhibitDefault(event)
};
/**
*
* @param event
*/
const onDragLeave = (event: Event): void => _inhibitDefault(event);
/**
*
* @param event
*/
const onDrop = (event: any): void => {
const onDrop = (event: DragEvent): void => {
if (event.dataTransfer && event.dataTransfer.files.length)
Object.keys(event.dataTransfer.files).map(fileKey => sendFile(event.dataTransfer.files[fileKey]));
Object.keys(event.dataTransfer.files).map(fileKey =>
_inhibitDefault(event);
sendFile(event.dataTransfer.files[fileKey])
);
inhibitDefault(event);
};
/**
*
* @param event
* @returns {KeyboardEvent}
* @param {KeyboardEvent} event
* @returns {Boolean | null}
*/
const onKeyDown = (event: KeyboardEvent): Boolean | null => {
// `Tab` for indentation, `d` for duplication.
if (event.key !== 'Tab' && event.key !== 'd') return null;
if (event.key !== INDENTATION_KEY && event.key !== DUPLICATION_KEY) return null;
_inhibitDefault(event);
event = inhibitDefault(event);
let handlerFunc = null;
switch (event.key) {
case "Tab": // For indentation.
case INDENTATION_KEY: // For indentation.
// Shift pressed: un-indent, otherwise indent.
handlerFunc = event.shiftKey ? removeIndentation : applyIndentation;
break;
case "d": // For duplication.
if (event.ctrlKey || event.metaKey) // Is CTRL or CMD (on Mac) pressed?
case DUPLICATION_KEY: // For duplication.
if (event.ctrlKey || event.metaKey) {
// Is CTRL or CMD (on Mac) pressed?
handlerFunc = applyDuplication;
else
return false;
break;
break
} else return false;
default:
return false
@ -347,7 +357,7 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
*/
const sendFile = (file: File) => {
properties.editor.style.opacity = "0.3";
properties.editor.style.opacity = UPLOAD_START_OPACITY;
const xhr = new Request(
properties.editor.getAttribute(UPLOAD_URL_ATTRIBUTE), // URL
@ -371,19 +381,19 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
} else {
console.error('Wrong response', response);
console.error(XHR_RESPONSE_ERROR, response);
triggerCustomEvent('markdownx.fileUploadError', properties.parent, [response])
}
properties.preview.innerHTML = this.response;
properties.editor.style.opacity = "1";
properties.editor.style.opacity = NORMAL_OPACITY;
};
xhr.error = (response: string): void => {
properties.editor.style.opacity = "1";
properties.editor.style.opacity = NORMAL_OPACITY;
console.error(response);
triggerCustomEvent('fileUploadError', properties.parent, [response])
@ -404,14 +414,20 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
);
xhr.success = (response: string): void => {
properties.preview.innerHTML = response;
updateHeight();
properties.editor = updateHeight(properties.editor);
triggerCustomEvent('markdownx.update', properties.parent, [response])
};
xhr.error = (response: string): void => {
console.error(response);
triggerCustomEvent('markdownx.updateError', properties.parent, [response])
};
return xhr.send()
@ -438,6 +454,7 @@ const MarkdownX = function (parent: HTMLElement, editor: HTMLTextAreaElement, pr
};
_initialize();
};