Skip to content

Commit

Permalink
Merge branch 'feature/text-editor' into 'master'
Browse files Browse the repository at this point in the history
Feature: Textarea Editor Tool

Closes #3

See merge request contagt/i18nInput!2
  • Loading branch information
Stephan Brandt committed Dec 13, 2024
2 parents 80a6b1c + fdeef1d commit bb78a2c
Show file tree
Hide file tree
Showing 17 changed files with 31,947 additions and 69 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
node_modules/
.idea/
package-lock.json
npm-debug.log
3 changes: 2 additions & 1 deletion dist/FlagsTool.js
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,8 @@ var FlagsTool = /*#__PURE__*/function () {
"position": "absolute",
"margin-top": "-2px",
"display": "none",
"padding": "2px",
"padding": "2px 5px",
"border-radius": "0 0 4px 4px",
"background-color": "#FFFFFF",
width: "100%",
"border": "1px solid " + this.main.inputTool.input.css('border-color'),
Expand Down
93 changes: 60 additions & 33 deletions dist/InputTool.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,23 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _TextEditorTool = _interopRequireDefault(require("./TextEditorTool"));

/**
* Created by sbrandt on 05.07.17.
*/
var InputTool = /*#__PURE__*/function () {
function InputTool(el, loader) {
var _this = this;

(0, _classCallCheck2["default"])(this, InputTool);
this.container = null;
this.main = null;
this.input = null;
this.inputvalues = {};
this.inputStyleClasses = "";
this.container = el;
this.texteditor = null;

if (el.attr("input-class") !== undefined) {
this.inputStyleClasses = el.attr("input-class");
Expand All @@ -35,18 +40,37 @@ var InputTool = /*#__PURE__*/function () {

if (rows === 1 || !rows) {
el.append("<input " + placeholder + " class='" + this.inputStyleClasses + "' type='text' style='padding-right: 36px;'/>");
this.input = $(el.children()[el.children().length - 1]);
} else {
el.append("<textarea " + placeholder + " class='" + this.inputStyleClasses + "' style='padding-right: 36px; line-height: 12px' type='text' rows='" + rows + "'></textarea>");
el.addClass("text-editor-wrapper");
var rules = null;

if (el.attr('rules') !== undefined) {
rules = JSON.parse(el.attr('rules').replace(/\[/g, '{').replace(/\]/g, '}').replace(/'/g, '"'));
}

this.texteditor = new _TextEditorTool["default"]({
placeholder: placeholder,
inputStyleClass: this.inputStyleClasses,
rows: rows,
rules: rules
});
el.append(this.texteditor.render());
this.input = $(this.texteditor.getTextarea()); // Add locale change listener to text editor

this.texteditor.setOnChangeCallback(function (value) {
var currentLanguage = _this.main.flagsTool.languages[_this.main.flagsTool.currentFlag];
_this.inputvalues[currentLanguage] = value;
});
}

this.input = $(el.children()[el.children().length - 1]);
this.main = loader;
this.input.css({
if (this.texteditor == null) this.input.css({
"width": el.attr('width') < 35 ? 35 : el.attr('width'),
"height": el.attr('height') < 12 ? 12 : el.attr('height')
});
el.css({
"width": this.input.outerWidth() < 35 ? 'auto' : this.input.outerWidth(),
"width": el.attr('width') < 35 ? 35 : el.attr('width'),
"padding-bottom": "2px",
"padding-top": "2px",
"position": "relative"
Expand All @@ -59,26 +83,28 @@ var InputTool = /*#__PURE__*/function () {
(0, _createClass2["default"])(InputTool, [{
key: "initKeyLogging",
value: function initKeyLogging() {
var _this = this;
var _this2 = this;

this.input.on('keyup', function () {
var currentLanguage = _this.main.flagsTool.languages[_this.main.flagsTool.currentFlag];
_this.inputvalues[currentLanguage] = $(_this.input).val();
var currentLanguage = _this2.main.flagsTool.languages[_this2.main.flagsTool.currentFlag];
_this2.inputvalues[currentLanguage] = $(_this2.input).val();
});
}
}, {
key: "initInputChange",
value: function initInputChange() {
var _this2 = this;
var _this3 = this;

this.input.on('change', function () {
var currentLanguage = _this2.main.flagsTool.languages[_this2.main.flagsTool.currentFlag];
_this2.inputvalues[currentLanguage] = $(_this2.input).val();
var currentLanguage = _this3.main.flagsTool.languages[_this3.main.flagsTool.currentFlag];
_this3.inputvalues[currentLanguage] = $(_this3.input).val();
});
}
}, {
key: "changedInputView",
value: function changedInputView() {
var _this$texteditor;

var currentLanguage = this.main.flagsTool.languages[this.main.flagsTool.currentFlag];

if (this.main.flagsTool.placeHolderType === "string") {
Expand All @@ -88,27 +114,28 @@ var InputTool = /*#__PURE__*/function () {
}

this.input.val(this.inputvalues[currentLanguage]);
(_this$texteditor = this.texteditor) === null || _this$texteditor === void 0 ? void 0 : _this$texteditor.updatePreview();
}
}, {
key: "addElementMethods",
value: function addElementMethods() {
var _this3 = this;
var _this4 = this;

var printResults = function printResults(lang) {
if (_this3.inputvalues !== undefined && _this3.inputvalues[lang] !== undefined) {
return _this3.inputvalues[lang];
} else if (_this3.inputvalues !== undefined) {
return _this3.main.codeTranslator.translateIsoAssocArrayToShort(_this3.inputvalues);
if (_this4.inputvalues !== undefined && _this4.inputvalues[lang] !== undefined) {
return _this4.inputvalues[lang];
} else if (_this4.inputvalues !== undefined) {
return _this4.main.codeTranslator.translateIsoAssocArrayToShort(_this4.inputvalues);
} else {
return "";
}
};

var printResultsObject = function printResultsObject(lang) {
if (_this3.inputvalues !== undefined && _this3.inputvalues[lang] !== undefined) {
return _this3.inputvalues[lang];
} else if (_this3.inputvalues !== undefined) {
return _this3.main.codeTranslator.translateIsoAssocArrayToShortObject(_this3.inputvalues);
if (_this4.inputvalues !== undefined && _this4.inputvalues[lang] !== undefined) {
return _this4.inputvalues[lang];
} else if (_this4.inputvalues !== undefined) {
return _this4.main.codeTranslator.translateIsoAssocArrayToShortObject(_this4.inputvalues);
} else {
return "";
}
Expand All @@ -121,13 +148,13 @@ var InputTool = /*#__PURE__*/function () {
var missingi18n = function missingi18n() {
var missing = [];

for (var i = 0; i < _this3.main.flagsTool.languages.length; i++) {
if (!(_this3.main.flagsTool.languages[i] in _this3.inputvalues) || _this3.inputvalues[_this3.main.flagsTool.languages[i]] === undefined || _this3.inputvalues[_this3.main.flagsTool.languages[i]].length === 0) {
missing.push(_this3.main.flagsTool.languages[i]);
for (var i = 0; i < _this4.main.flagsTool.languages.length; i++) {
if (!(_this4.main.flagsTool.languages[i] in _this4.inputvalues) || _this4.inputvalues[_this4.main.flagsTool.languages[i]] === undefined || _this4.inputvalues[_this4.main.flagsTool.languages[i]].length === 0) {
missing.push(_this4.main.flagsTool.languages[i]);
}
}

return _this3.main.codeTranslator.translateIsoArrayToShort(missing);
return _this4.main.codeTranslator.translateIsoArrayToShort(missing);
};

var setValueAuto = function setValueAuto(value) {
Expand All @@ -136,7 +163,7 @@ var InputTool = /*#__PURE__*/function () {
setValue(key, value[key]);
});
} else {
_this3.input.val(value);
_this4.input.val(value);
}
};

Expand All @@ -150,10 +177,10 @@ var InputTool = /*#__PURE__*/function () {
}

for (var i = 0; i < lng.length; i++) {
var _short = _this3.main.codeTranslator.translateIsoToShort(lng[i]);
var _short = _this4.main.codeTranslator.translateIsoToShort(lng[i]);

if (_this3.main.isi18nRegistered(_short)) {
_this3.inputvalues[_short] = value[i];
if (_this4.main.isi18nRegistered(_short)) {
_this4.inputvalues[_short] = value[i];
} else {
throw "Language " + lng + " is not registered with the View";
}
Expand All @@ -162,22 +189,22 @@ var InputTool = /*#__PURE__*/function () {
throw "Either both, or non argument must be of type Array";
}
} else {
var _short2 = _this3.main.codeTranslator.translateIsoToShort(lng);
var _short2 = _this4.main.codeTranslator.translateIsoToShort(lng);

if (_this3.main.isi18nRegistered(_short2)) {
_this3.inputvalues[_short2] = value;
if (_this4.main.isi18nRegistered(_short2)) {
_this4.inputvalues[_short2] = value;
} else {
throw "Language " + lng + " is not registered with the View";
}
}

_this3.changedInputView();
_this4.changedInputView();

return true;
};

var availablei18n = function availablei18n() {
return _this3.main.codeTranslator.getAllLongs();
return _this4.main.codeTranslator.getAllLongs();
};

var registerFormIncompleteHandler = function registerFormIncompleteHandler(handler) {
Expand All @@ -186,7 +213,7 @@ var InputTool = /*#__PURE__*/function () {
return false;
}

_this3.main.failHandler = handler;
_this4.main.failHandler = handler;
return true;
};

Expand Down
140 changes: 140 additions & 0 deletions dist/MarkdownParser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.MarkdownConfig = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var MarkdownConfig = {
RULES: {
HEADING: /^### (.*)/m,
BOLD: /\*\*(.*?)\*\*/gm,
ITALIC: /_(.*?)_/gm,
LINE_BREAK: /\n/g
},
STRICT: {
BOLD: /^\*\*(.*?)\*\*/gm,
ITALIC: /^_(.*?)_/gm
},
HTML: {
HEADING: '<h3 style="font-weight: 600; margin: 0;">$1</h3>',
BOLD: '<strong>$1</strong>',
ITALIC: '<em>$1</em>',
LINE_BREAK: '<br>'
}
};
/**
* @class MarkdownParser
* @description A class that parses markdown to HTML
* @param {Object} options
* @param {boolean} options.heading - Whether headings are allowed
* @param {boolean} options.bold - Whether bold text is allowed
* @param {boolean} options.italic - Whether italic text is allowed
* @example
* const parser = new MarkdownParser({ heading: true, bold: true, italic: true });
* const markdown = '### Hello, world!';
* const html = parser.parseMarkdown(markdown);
* console.log(html); // <h3 style="font-weight: 600; margin: 0;">Hello, world!</h3>
*
* @author Andrei Chiriac
* @version 1.0
*/

exports.MarkdownConfig = MarkdownConfig;

var MarkdownParser = /*#__PURE__*/function () {
function MarkdownParser() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
(0, _classCallCheck2["default"])(this, MarkdownParser);
var _options$heading = options.heading,
heading = _options$heading === void 0 ? true : _options$heading,
_options$bold = options.bold,
bold = _options$bold === void 0 ? true : _options$bold,
_options$italic = options.italic,
italic = _options$italic === void 0 ? true : _options$italic;
/** @private */

this._headingAllowed = heading;
/** @private */

this._boldAllowed = bold;
/** @private */

this._italicAllowed = italic;
}
/**
* @public
* @description Parses markdown to HTML. It handles headings, bold, italic, and line breaks.
* @param {string} markdown
*/


(0, _createClass2["default"])(MarkdownParser, [{
key: "parseMarkdown",
value: function parseMarkdown(markdown) {
if (!markdown) return '';
var html = markdown;
html = this._parseHeading(html);
html = this._parseBold(html);
html = this._parseItalic(html);
html = this._parseLineBreaks(html);
return html;
}
/**
* @private
* @description Parses markdown headings to HTML
* @param {string} markdown
*/

}, {
key: "_parseHeading",
value: function _parseHeading(markdown) {
if (!this._headingAllowed) return markdown;
return markdown.replace(MarkdownConfig.RULES.HEADING, MarkdownConfig.HTML.HEADING);
}
/**
* @private
* @description Parses bold markdown to HTML
* @param {string} markdown
*/

}, {
key: "_parseBold",
value: function _parseBold(markdown) {
if (!this._boldAllowed) return markdown;
return markdown.replace(MarkdownConfig.RULES.BOLD, MarkdownConfig.HTML.BOLD);
}
/**
* @private
* @description Parses italic markdown to HTML
* @param {string} markdown
*/

}, {
key: "_parseItalic",
value: function _parseItalic(markdown) {
if (!this._italicAllowed) return markdown;
return markdown.replace(MarkdownConfig.RULES.ITALIC, MarkdownConfig.HTML.ITALIC);
}
/**
* @private
* @description Parses markdown line breaks to HTML
* @param {string} markdown
*/

}, {
key: "_parseLineBreaks",
value: function _parseLineBreaks(markdown) {
return markdown.replace(MarkdownConfig.RULES.LINE_BREAK, MarkdownConfig.HTML.LINE_BREAK);
}
}]);
return MarkdownParser;
}();

exports["default"] = MarkdownParser;
Loading

0 comments on commit bb78a2c

Please sign in to comment.