From 0d806c1b0acb922ddcb68a69b739f30aba67da7a Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 01:23:25 -0300 Subject: [PATCH 01/24] MG-400 start mobile and web separation --- docker-compose.yml | 3 +- public/css/style.css | 15 ++ public/js/ct/bookmarkHome.js | 8 +- public/js/ct/mobile/bookmarkEdit.js | 339 +++++++++++++++++++++++++++ src/controller/BookmarkController.js | 80 +++++-- view/layout.html | 1 + 6 files changed, 421 insertions(+), 25 deletions(-) create mode 100644 public/js/ct/mobile/bookmarkEdit.js diff --git a/docker-compose.yml b/docker-compose.yml index 1cdcf89..693f89b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -61,11 +61,12 @@ services: # useful to run api for development prod-api-compiler-bk: - container_name: prod-api-compiler-bk extends: prod-api-build-bk + container_name: prod-api-compiler-bk volumes: - /var/lib/mageddo/bookmarks-node/db:/opt/bookmarks/db command: bash -c "go install -v bk-api/vendor/github.com/mattn/go-sqlite3 && tail -f /dev/null" + working_dir: /go/src/bk-api hostname: bk-api.dev # run app for development diff --git a/public/css/style.css b/public/css/style.css index b38e63c..e81a53f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -202,3 +202,18 @@ pre { background-color: #e6e6e6 } + + +/** + * New area + */ +.modal-editor { + display: block; + position: fixed; + background: red; + top: 0; + left: 0; + z-index: 9999; + width: 100%; + height: 100% +} diff --git a/public/js/ct/bookmarkHome.js b/public/js/ct/bookmarkHome.js index 5f8388e..a6ffb32 100644 --- a/public/js/ct/bookmarkHome.js +++ b/public/js/ct/bookmarkHome.js @@ -51,7 +51,11 @@ $(window).resize(function(){ }) $(".bookmarkNew").click(function(e){ - mg.popUpScreen("/bookmark/new"); + if(mg.isMobile){ + mg.popUpScreen("/mobile/bookmark/new"); + }else{ + mg.popUpScreen("/bookmark/new"); + } }); function adaptarTamanhoMenu(){ @@ -123,7 +127,7 @@ function populaTabela(data){ function abrirTelaEdicao(e){ var that = $(this); if(this == e.target || that.hasClass("divItemBody") || that.hasClass("divItemHead")){ - mg.popUpScreen("/bookmark/edit", { + mg.popUpScreen(mg.isMobile ? "/mobile/bookmark/edit" : "/bookmark/edit", { data: { id: that.parents(".divItem").data("id"), editMode: true diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js new file mode 100644 index 0000000..9568c50 --- /dev/null +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -0,0 +1,339 @@ +function cb(editMode){ + + window.onbeforeunload = function(){return "";}; + + var isMobile = mg.isMobile, + st = getSt(editMode), + editorEl = $("#txtDescription"), + combo = $(".js-data-example-ajax"), + frm = $("#frmBookmarkEdit").submit(function(e){ + st.save.call(this, e); + }); + + universal(); + if(isMobile){ + mobile(); + }else{ + web(); + } + var originalData = JSON.stringify(getFormData()); + + function web(){ + + var ed = editorEl.markdownEditor({ + preview: true, + theme: "ace/theme/tomorrow_night", + onPreview: function (content, callback) { + callback(parseCode(content, callback)); + $(".md-preview a").not('.skipped').click(function(e){ + e.stopPropagation(); + this.target = "_blank"; + }); + } + }), + session = ed.editor.getSession(); + session.setUseSoftTabs(false); + session.setTabSize(2); + ed.focus(function(){ + ed.editor.focus(); + }); + if(editMode){ + ed.find(".btn-preview").trigger("click"); + } + } + + function mobile(){ + var text = editorEl.text(); + editorEl.empty(); + editorEl.append(getMobileEditor("text-editor", "editor-preview", "btn-visualize", "btn-edit", "btn-fullscren", "btn-linewrap", text, false)); + + var editorMb = $(".mobile-full-screen-modal"); + editorMb.html(getMobileEditor("editor-mb", "editor-preview", "btn-visualize-mb", "btn-edit-mb", "btn-fullscren-mb", "btn-linewrap", text, true)); + + $("#text-editor").height(($(window).height() - $(".header-editor-container").height()) + "px"); + + $(".btn-fullscren").click(function(){ + editorMb.show(); + window.modalCloseClick = true; + $('#modal').modal('toggle'); + }); + $(".btn-fullscren-mb").click(function(){ + $("#text-editor").val($("#editor-mb").val()); + $('#modal').modal('toggle'); + editorMb.hide(); + }); + $('.btn-bk-save').click(function(e){ + var mbText = $("#editor-mb").val(); + $("#text-editor").val(mbText); + st.save.call(this, e); + }); + } + + function universal(){ + + $("body").on('click', '.close', function(){ + window.modalCloseClick = true; + }); + + combo.select2({ + tags: true, tokenSeparators: [',', '\t', ' '], + ajax: { + url: "/api/tag/search", + dataType: 'json', + delay: 340, + data: function (params) { + return { + q: params.term, + page: params.page + }; + }, + processResults: function (data, page) { + return { + results: data.map(function(o){ + o.text = o.name; + o.id = o.name; + return o; + }) + }; + }, + cache: true + } + }); + combo.val(tagsToEdit).trigger("change"); + var i = combo.next().find(".select2-selection ul"); + i.mousedown(function(){ + this.hasClick = true; + }); + i.focus(function(e){ + if(!this.hasClick){ + combo.select2("open"); + } + this.hasClick = false; + }); + i.attr("tabindex", '3'); + + setTimeout(function(){ + $(".btn-fullscren").trigger("click"); + $('#editor-mb').trigger('focus').selectRange(0).scrollTop(0); + }, 200); + + mg.modal.close(function(){ + console.debug('m=modal-close-cb, modalCloseClicked=%s', window.modalCloseClick); + if(!window.modalCloseClick){ + if((!editMode && getEditorValue())){ + frm.trigger("submit"); + }else if(editMode){ + if(originalData != JSON.stringify(getFormData())){ + console.debug('m=save-trigger, status=different-values, original=%s, current=%s', originalData, JSON.stringify(getFormData())); + frm.trigger("submit"); + } + } + } + window.modalCloseClick = false; + }); + + } + + /* + Mount mobile panel + */ + function getMobileEditor(editorId, editorPreviewSlc, btnVisualizeSlc, btnEditSlc, btnFullScreenSlc, btnLineWrap, text, fullscreen){ + var editorPanel = $('
'), + btnEditorPanel = $('
'); + + editorPanel.append(btnEditorPanel); + btnEditorPanel.append(''); + btnEditorPanel.append(' '); + btnEditorPanel.append(''); + btnEditorPanel.append(' '); + btnEditorPanel.append(''); + btnEditorPanel.append(' '); + btnEditorPanel.append(''); + btnEditorPanel.append(' '); + btnEditorPanel.append(''); + if(fullscreen){ + btnEditorPanel.append(''); + } + editorPanel.append('
'); + + var editor = editorPanel.find("#" + editorId); + var btnVisualize = btnEditorPanel.find("." + btnVisualizeSlc); + var btnLineWrap = btnEditorPanel.find("." + btnLineWrap); + var btnEdit = btnEditorPanel.find("." + btnEditSlc); + + + editor.val(text); + + btnEdit.click(function(){ + $(".btn-edit-common").addClass("active"); + $(".btn-visualize-common").removeClass("active"); + $(".editor-common").show(); + $("." + editorPreviewSlc).hide(); + }).trigger("click"); + + btnVisualize.click(function(){ + $(".btn-edit-common").removeClass("active"); + $(".btn-visualize-common").addClass("active"); + $("." + editorPreviewSlc).html(parseCode(editor.val())); + + $(".editor-common").hide(); + $("." + editorPreviewSlc).show(); + }); + + btnLineWrap.click(function(){ + + if(editor.hasClass("line-wrap-on")){ + editor.removeClass("line-wrap-on") + editor.addClass("line-wrap-off") + }else{ + editor.removeClass("line-wrap-off") + editor.addClass("line-wrap-on") + } + $(this).toggleClass("png-active"); + + }); + + btnEditorPanel.find('.btn-fullscren-common').bind('click', function(){ + $(".btn-fullscren-common").toggleClass("active"); + $("." + editorPreviewSlc).html(parseCode(editor.val())); + $(".editor-common").val(editor.val()); + }); + + btnEditorPanel.find('.btn-tab').click(function(e){ + e.preventDefault(); + mg.insertAtCaret('#' + editorId, '\t'); + }) + + return editorPanel; + } + + + function getFormData(){ + var data = $("#frmBookmarkEdit").serializeArray(); + data.push({ + name: "html", + value: getEditorValue() + }); + return data; + } + function getEditorValue(){ + var mobileValue = $("#text-editor").val(), value = $("#txtDescription").markdownEditor('content'); + console.debug('m=getEditorValue, isMobile=%s', isMobile); + if(isMobile){ + return mobileValue; + } + return value; + } + function setEditorValue(val){ + return $("#txtDescription").markdownEditor('setContent', val); + } + function successEvent(editMode){ + if(editMode) + mg.notify.info('Bookmark salvo com sucesso'); + else + mg.notify.success('Bookmark cadastrado com sucesso'); + + refreshBookmarkList(); + } + function getSt(editMode){ + + // public link + $("#visible").change(function(){ + var formData = getFormData(); + var linkSpan = $(".public-link"); + if(this.checked && editMode){ + linkSpan.html('bookmark'); + } else { + linkSpan.html('bookmark'); + } + }).trigger('change'); + + var title = mg.modal.modal().find(".title"); + if(editMode){ + title.html("Edit"); + }else{ + title.html("New"); + } + + return editMode ? { + save: function(e){ + var submitBtn = $("#frmBookmarkEdit *[type=submit]") + .prop("disabled", true); + e.preventDefault(); + $.ajax({ + url: "/api/bookmark", + type: 'POST', + data: getFormData(), + success: function () { + successEvent(1); + console.debug("editado"); + originalData = JSON.stringify(getFormData()); + } + }).always(function(){ + submitBtn.prop("disabled", false); + }) + } + } : { + save: function(e){ + e.preventDefault(); + var submitBtn = $("#frmBookmarkEdit *[type=submit]") + .prop("disabled", true); + + $.ajax({ + url: "/api/bookmark", + type: 'PUT', + data: getFormData(), + success: function (id) { + st = getSt(editMode = true); + console.debug("cadastrado"); + frm.prop("id").value = id; + successEvent(); + originalData = JSON.stringify(getFormData()); + } + }).always(function(){ + submitBtn.prop("disabled", false); + }) + } + }; + }; + + $('body').off('click', '.painel-acoes li .toggle-scroll').on('click', '.painel-acoes li .toggle-scroll', function(e){ + $(this).parent().toggleClass("active"); + $(this).parents(".mg-code").find('pre').toggleClass("with-scroll"); + e.preventDefault(); + e.stopPropagation(); + }); + +// if you change here maybe also want to change src/controller/BookmarkController.js#306 +var languagesMap = null; +function parseCode(content){ + + if(languagesMap == null){ + languagesMap = {}; + hljs.listLanguages().forEach(lang => languagesMap[lang] = true) + } + var renderer = new marked.Renderer(); + renderer.code = function(code, lang){ + var parsedCode = languagesMap[lang] ? hljs.highlight(lang, code) : {value: code, plain: true}; // MG-40 hljs.highlightAuto(code) it is slow (1-2 seconds to parse) + return Mustache.render($('#tplCodeBlock').html(), { + lang: lang, code: parsedCode.value, plain: parsedCode.plain, + overflown: parsedCode.value.split(/\r\n|\r|\n/).length > 7 + }); + } + renderer.table = function(header, body) { + return '\n' + + '\n' + + header + + '\n' + + '\n' + + body + + '\n' + + '
\n'; + } + + return marked(content, { + renderer: renderer + }) +} + +};cb($(".ctBookmarkNew").data("edit-mode")); diff --git a/src/controller/BookmarkController.js b/src/controller/BookmarkController.js index 5e174ee..cb27308 100644 --- a/src/controller/BookmarkController.js +++ b/src/controller/BookmarkController.js @@ -180,6 +180,64 @@ module.exports.controller = function(app) { }); }); + app.get('/bookmark/edit', function(req, res) { + var query = url.parse(req.url, true).query; + m.getBookmarkById(query.id, function(err, bookmark){ + mTag.getTagsByBoomarkId(query.id, function(err, tags){ + res.render('bookmarkEdit', { + layout: false, + bookmark: bookmark, + tags: tags, + editMode: query.editMode, + stringify: function(){ + return function(val, render){ + return JSON.stringify(this.tags.map(function(tag){ + return tag.name; + })); + } + }, + getVisibilityFlag: getVisibilityFlag + }); + }); + }); + }); + + + app.get('/mobile/bookmark/new', function(req, res) { + res.render('bookmarkEdit', { + layout: false, + stringify: function(){ + return function(){ + return '[]'; + } + }, + getVisibilityFlag: getVisibilityFlag + }); + }); + + app.get('/mobile/bookmark/edit', function(req, res) { + var query = url.parse(req.url, true).query; + m.getBookmarkById(query.id, function(err, bookmark){ + mTag.getTagsByBoomarkId(query.id, function(err, tags){ + res.render('bookmarkEdit', { + layout: false, + bookmark: bookmark, + tags: tags, + editMode: query.editMode, + stringify: function(){ + return function(val, render){ + return JSON.stringify(this.tags.map(function(tag){ + return tag.name; + })); + } + }, + getVisibilityFlag: getVisibilityFlag + }); + }); + }); + }); + + /** * Public bookmark view */ @@ -232,28 +290,6 @@ module.exports.controller = function(app) { }); }); - app.get('/bookmark/edit', function(req, res) { - var query = url.parse(req.url, true).query; - m.getBookmarkById(query.id, function(err, bookmark){ - mTag.getTagsByBoomarkId(query.id, function(err, tags){ - res.render('bookmarkEdit', { - layout: false, - bookmark: bookmark, - tags: tags, - editMode: query.editMode, - stringify: function(){ - return function(val, render){ - return JSON.stringify(this.tags.map(function(tag){ - return tag.name; - })); - } - }, - getVisibilityFlag: getVisibilityFlag - }); - }); - }); - }); - function associarTagsBookmarks(app,req, res,id, editMode){ if(editMode){ try{ diff --git a/view/layout.html b/view/layout.html index b208166..290b449 100644 --- a/view/layout.html +++ b/view/layout.html @@ -78,5 +78,6 @@
+ From ee0544736346b4472ae4fe03ce77246057ede987 Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 01:27:42 -0300 Subject: [PATCH 02/24] MG-400 removing web from mobile js --- public/js/ct/mobile/bookmarkEdit.js | 193 +++++++++++----------------- 1 file changed, 76 insertions(+), 117 deletions(-) diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js index 9568c50..6e9c063 100644 --- a/public/js/ct/mobile/bookmarkEdit.js +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -1,8 +1,6 @@ function cb(editMode){ - window.onbeforeunload = function(){return "";}; - - var isMobile = mg.isMobile, + var st = getSt(editMode), editorEl = $("#txtDescription"), combo = $(".js-data-example-ajax"), @@ -10,129 +8,90 @@ function cb(editMode){ st.save.call(this, e); }); - universal(); - if(isMobile){ - mobile(); - }else{ - web(); - } var originalData = JSON.stringify(getFormData()); - function web(){ - - var ed = editorEl.markdownEditor({ - preview: true, - theme: "ace/theme/tomorrow_night", - onPreview: function (content, callback) { - callback(parseCode(content, callback)); - $(".md-preview a").not('.skipped').click(function(e){ - e.stopPropagation(); - this.target = "_blank"; - }); + combo.select2({ + tags: true, tokenSeparators: [',', '\t', ' '], + ajax: { + url: "/api/tag/search", + dataType: 'json', + delay: 340, + data: function (params) { + return { + q: params.term, + page: params.page + }; + }, + processResults: function (data, page) { + return { + results: data.map(function(o){ + o.text = o.name; + o.id = o.name; + return o; + }) + }; + }, + cache: true + } + }); + combo.val(tagsToEdit).trigger("change"); + var i = combo.next().find(".select2-selection ul"); + i.mousedown(function(){ + this.hasClick = true; + }); + i.focus(function(e){ + if(!this.hasClick){ + combo.select2("open"); + } + this.hasClick = false; + }); + i.attr("tabindex", '3'); + + setTimeout(function(){ + $(".btn-fullscren").trigger("click"); + $('#editor-mb').trigger('focus').selectRange(0).scrollTop(0); + }, 200); + + mg.modal.close(function(){ + console.debug('m=modal-close-cb, modalCloseClicked=%s', window.modalCloseClick); + if(!window.modalCloseClick){ + if((!editMode && getEditorValue())){ + frm.trigger("submit"); + }else if(editMode){ + if(originalData != JSON.stringify(getFormData())){ + console.debug('m=save-trigger, status=different-values, original=%s, current=%s', originalData, JSON.stringify(getFormData())); + frm.trigger("submit"); } - }), - session = ed.editor.getSession(); - session.setUseSoftTabs(false); - session.setTabSize(2); - ed.focus(function(){ - ed.editor.focus(); - }); - if(editMode){ - ed.find(".btn-preview").trigger("click"); + } } - } - - function mobile(){ - var text = editorEl.text(); - editorEl.empty(); - editorEl.append(getMobileEditor("text-editor", "editor-preview", "btn-visualize", "btn-edit", "btn-fullscren", "btn-linewrap", text, false)); - - var editorMb = $(".mobile-full-screen-modal"); - editorMb.html(getMobileEditor("editor-mb", "editor-preview", "btn-visualize-mb", "btn-edit-mb", "btn-fullscren-mb", "btn-linewrap", text, true)); - - $("#text-editor").height(($(window).height() - $(".header-editor-container").height()) + "px"); - - $(".btn-fullscren").click(function(){ - editorMb.show(); - window.modalCloseClick = true; - $('#modal').modal('toggle'); - }); - $(".btn-fullscren-mb").click(function(){ - $("#text-editor").val($("#editor-mb").val()); - $('#modal').modal('toggle'); - editorMb.hide(); - }); - $('.btn-bk-save').click(function(e){ - var mbText = $("#editor-mb").val(); - $("#text-editor").val(mbText); - st.save.call(this, e); - }); - } - - function universal(){ + window.modalCloseClick = false; + }); - $("body").on('click', '.close', function(){ - window.modalCloseClick = true; - }); + var text = editorEl.text(); + editorEl.empty(); + editorEl.append(getMobileEditor("text-editor", "editor-preview", "btn-visualize", "btn-edit", "btn-fullscren", "btn-linewrap", text, false)); - combo.select2({ - tags: true, tokenSeparators: [',', '\t', ' '], - ajax: { - url: "/api/tag/search", - dataType: 'json', - delay: 340, - data: function (params) { - return { - q: params.term, - page: params.page - }; - }, - processResults: function (data, page) { - return { - results: data.map(function(o){ - o.text = o.name; - o.id = o.name; - return o; - }) - }; - }, - cache: true - } - }); - combo.val(tagsToEdit).trigger("change"); - var i = combo.next().find(".select2-selection ul"); - i.mousedown(function(){ - this.hasClick = true; - }); - i.focus(function(e){ - if(!this.hasClick){ - combo.select2("open"); - } - this.hasClick = false; - }); - i.attr("tabindex", '3'); + var editorMb = $(".mobile-full-screen-modal"); + editorMb.html(getMobileEditor("editor-mb", "editor-preview", "btn-visualize-mb", "btn-edit-mb", "btn-fullscren-mb", "btn-linewrap", text, true)); - setTimeout(function(){ - $(".btn-fullscren").trigger("click"); - $('#editor-mb').trigger('focus').selectRange(0).scrollTop(0); - }, 200); + $("#text-editor").height(($(window).height() - $(".header-editor-container").height()) + "px"); - mg.modal.close(function(){ - console.debug('m=modal-close-cb, modalCloseClicked=%s', window.modalCloseClick); - if(!window.modalCloseClick){ - if((!editMode && getEditorValue())){ - frm.trigger("submit"); - }else if(editMode){ - if(originalData != JSON.stringify(getFormData())){ - console.debug('m=save-trigger, status=different-values, original=%s, current=%s', originalData, JSON.stringify(getFormData())); - frm.trigger("submit"); - } - } - } - window.modalCloseClick = false; - }); + $(".btn-fullscren").click(function(){ + editorMb.show(); + window.modalCloseClick = true; + $('#modal').modal('toggle'); + }); + $(".btn-fullscren-mb").click(function(){ + $("#text-editor").val($("#editor-mb").val()); + $('#modal').modal('toggle'); + editorMb.hide(); + }); + $('.btn-bk-save').click(function(e){ + var mbText = $("#editor-mb").val(); + $("#text-editor").val(mbText); + st.save.call(this, e); + }); - } /* Mount mobile panel From 9f87d2e3e2dd2f4a2286985cee2b542ff29c76b9 Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 01:53:16 -0300 Subject: [PATCH 03/24] MG-400 mounting page --- public/css/style.css | 12 +++++++++--- public/js/core.js | 15 +++++++++++++++ public/js/ct/bookmarkHome.js | 2 +- public/js/ct/mobile/bookmarkEdit.js | 6 +----- src/controller/BookmarkController.js | 4 ++-- view/layout.html | 2 +- view/mobile/bookmarkEdit.html | 11 +++++++++++ 7 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 view/mobile/bookmarkEdit.html diff --git a/public/css/style.css b/public/css/style.css index e81a53f..3afc209 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -126,12 +126,18 @@ input:checked + .slider:before{ padding: 10px 5px; height: 100%; } -.mobile-full-screen-modal .editor-panel { - height: 90%; +.editor-panel { + height: 100%; + display: flex; } -.mobile-full-screen-modal textarea { + +.editor-panel .btn-editor-panel { min-height: 100%; } +.editor-panel textarea { + min-height: 100%; + width: 100%; +} .editor-preview { border: 1px solid #CECBCB; margin: 10px 0px; diff --git a/public/js/core.js b/public/js/core.js index 81414cc..5eccc84 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -79,6 +79,21 @@ $(container).html("Error on load " + url + "
" + error); }); } + + mg.popUpScreen2 = function(url, options, container){ + container = container || ".modal-editor"; + options = options || {}; + options.url = url; + $.ajax(options).done(function(data){ + $(container) + .html(data) + .removeClass("hidden"); + }).error(function(error){ + // TODO EFS fazer isso buscar de um template + $(container).html("Error on load " + url + "
" + error); + }); + } + mg.clearSelection = function() { if(document.selection && document.selection.empty) { document.selection.empty(); diff --git a/public/js/ct/bookmarkHome.js b/public/js/ct/bookmarkHome.js index a6ffb32..71966dc 100644 --- a/public/js/ct/bookmarkHome.js +++ b/public/js/ct/bookmarkHome.js @@ -52,7 +52,7 @@ $(window).resize(function(){ $(".bookmarkNew").click(function(e){ if(mg.isMobile){ - mg.popUpScreen("/mobile/bookmark/new"); + mg.popUpScreen2("/mobile/bookmark/new"); }else{ mg.popUpScreen("/bookmark/new"); } diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js index 6e9c063..e276b3d 100644 --- a/public/js/ct/mobile/bookmarkEdit.js +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -177,11 +177,7 @@ function cb(editMode){ } function getEditorValue(){ var mobileValue = $("#text-editor").val(), value = $("#txtDescription").markdownEditor('content'); - console.debug('m=getEditorValue, isMobile=%s', isMobile); - if(isMobile){ - return mobileValue; - } - return value; + return mobileValue; } function setEditorValue(val){ return $("#txtDescription").markdownEditor('setContent', val); diff --git a/src/controller/BookmarkController.js b/src/controller/BookmarkController.js index cb27308..601f1bd 100644 --- a/src/controller/BookmarkController.js +++ b/src/controller/BookmarkController.js @@ -204,7 +204,7 @@ module.exports.controller = function(app) { app.get('/mobile/bookmark/new', function(req, res) { - res.render('bookmarkEdit', { + res.render('mobile/bookmarkEdit', { layout: false, stringify: function(){ return function(){ @@ -219,7 +219,7 @@ module.exports.controller = function(app) { var query = url.parse(req.url, true).query; m.getBookmarkById(query.id, function(err, bookmark){ mTag.getTagsByBoomarkId(query.id, function(err, tags){ - res.render('bookmarkEdit', { + res.render('mobile/bookmarkEdit', { layout: false, bookmark: bookmark, tags: tags, diff --git a/view/layout.html b/view/layout.html index 290b449..b3a8f04 100644 --- a/view/layout.html +++ b/view/layout.html @@ -78,6 +78,6 @@
- + diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html new file mode 100644 index 0000000..a0f0cf2 --- /dev/null +++ b/view/mobile/bookmarkEdit.html @@ -0,0 +1,11 @@ +
+
+   +   +   +   + + +
+
+
From e5904842d60e1465f244347647de50407d8d9064 Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 02:28:49 -0300 Subject: [PATCH 04/24] MG-400 formating mobile page --- public/css/style.css | 20 +++++++++----- view/mobile/bookmarkEdit.html | 51 ++++++++++++++++++++++++++++------- 2 files changed, 54 insertions(+), 17 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 3afc209..0315e12 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -126,17 +126,22 @@ input:checked + .slider:before{ padding: 10px 5px; height: 100%; } -.editor-panel { - height: 100%; + +#bookmarkForm { display: flex; + flex-direction: column; } -.editor-panel .btn-editor-panel { - min-height: 100%; +.editor-panel { + min-height: 100vh; + display: flex; + flex-direction: column; } + .editor-panel textarea { - min-height: 100%; width: 100%; + flex: 1; + resize: none; } .editor-preview { border: 1px solid #CECBCB; @@ -216,10 +221,11 @@ pre { .modal-editor { display: block; position: fixed; - background: red; + background: white; top: 0; left: 0; z-index: 9999; width: 100%; - height: 100% + height: 100%; + overflow: auto; } diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html index a0f0cf2..9d9dc64 100644 --- a/view/mobile/bookmarkEdit.html +++ b/view/mobile/bookmarkEdit.html @@ -1,11 +1,42 @@ -
-
-   -   -   -   - - -
+
+ +
+
+   +   +   +   + + +
+ + +
+ From 815a683582aac3fa7c18e468cb7a5a15f29d481c Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 02:44:22 -0300 Subject: [PATCH 05/24] MG-400 start build js --- public/css/style.css | 2 +- public/js/ct/mobile/bookmarkEdit.js | 256 +--------------------------- view/mobile/bookmarkEdit.html | 12 +- 3 files changed, 11 insertions(+), 259 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 0315e12..c4ccd7f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -227,5 +227,5 @@ pre { z-index: 9999; width: 100%; height: 100%; - overflow: auto; + overflow-y: auto; } diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js index e276b3d..da3e955 100644 --- a/public/js/ct/mobile/bookmarkEdit.js +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -1,15 +1,6 @@ function cb(editMode){ - var - st = getSt(editMode), - editorEl = $("#txtDescription"), - combo = $(".js-data-example-ajax"), - frm = $("#frmBookmarkEdit").submit(function(e){ - st.save.call(this, e); - }); - - var originalData = JSON.stringify(getFormData()); - + var combo = $(".js-data-example-ajax") combo.select2({ tags: true, tokenSeparators: [',', '\t', ' '], ajax: { @@ -34,6 +25,7 @@ function cb(editMode){ cache: true } }); + combo.val(tagsToEdit).trigger("change"); var i = combo.next().find(".select2-selection ul"); i.mousedown(function(){ @@ -47,248 +39,4 @@ function cb(editMode){ }); i.attr("tabindex", '3'); - setTimeout(function(){ - $(".btn-fullscren").trigger("click"); - $('#editor-mb').trigger('focus').selectRange(0).scrollTop(0); - }, 200); - - mg.modal.close(function(){ - console.debug('m=modal-close-cb, modalCloseClicked=%s', window.modalCloseClick); - if(!window.modalCloseClick){ - if((!editMode && getEditorValue())){ - frm.trigger("submit"); - }else if(editMode){ - if(originalData != JSON.stringify(getFormData())){ - console.debug('m=save-trigger, status=different-values, original=%s, current=%s', originalData, JSON.stringify(getFormData())); - frm.trigger("submit"); - } - } - } - window.modalCloseClick = false; - }); - - var text = editorEl.text(); - editorEl.empty(); - editorEl.append(getMobileEditor("text-editor", "editor-preview", "btn-visualize", "btn-edit", "btn-fullscren", "btn-linewrap", text, false)); - - var editorMb = $(".mobile-full-screen-modal"); - editorMb.html(getMobileEditor("editor-mb", "editor-preview", "btn-visualize-mb", "btn-edit-mb", "btn-fullscren-mb", "btn-linewrap", text, true)); - - $("#text-editor").height(($(window).height() - $(".header-editor-container").height()) + "px"); - - $(".btn-fullscren").click(function(){ - editorMb.show(); - window.modalCloseClick = true; - $('#modal').modal('toggle'); - }); - $(".btn-fullscren-mb").click(function(){ - $("#text-editor").val($("#editor-mb").val()); - $('#modal').modal('toggle'); - editorMb.hide(); - }); - $('.btn-bk-save').click(function(e){ - var mbText = $("#editor-mb").val(); - $("#text-editor").val(mbText); - st.save.call(this, e); - }); - - - /* - Mount mobile panel - */ - function getMobileEditor(editorId, editorPreviewSlc, btnVisualizeSlc, btnEditSlc, btnFullScreenSlc, btnLineWrap, text, fullscreen){ - var editorPanel = $('
'), - btnEditorPanel = $('
'); - - editorPanel.append(btnEditorPanel); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - if(fullscreen){ - btnEditorPanel.append(''); - } - editorPanel.append('
'); - - var editor = editorPanel.find("#" + editorId); - var btnVisualize = btnEditorPanel.find("." + btnVisualizeSlc); - var btnLineWrap = btnEditorPanel.find("." + btnLineWrap); - var btnEdit = btnEditorPanel.find("." + btnEditSlc); - - - editor.val(text); - - btnEdit.click(function(){ - $(".btn-edit-common").addClass("active"); - $(".btn-visualize-common").removeClass("active"); - $(".editor-common").show(); - $("." + editorPreviewSlc).hide(); - }).trigger("click"); - - btnVisualize.click(function(){ - $(".btn-edit-common").removeClass("active"); - $(".btn-visualize-common").addClass("active"); - $("." + editorPreviewSlc).html(parseCode(editor.val())); - - $(".editor-common").hide(); - $("." + editorPreviewSlc).show(); - }); - - btnLineWrap.click(function(){ - - if(editor.hasClass("line-wrap-on")){ - editor.removeClass("line-wrap-on") - editor.addClass("line-wrap-off") - }else{ - editor.removeClass("line-wrap-off") - editor.addClass("line-wrap-on") - } - $(this).toggleClass("png-active"); - - }); - - btnEditorPanel.find('.btn-fullscren-common').bind('click', function(){ - $(".btn-fullscren-common").toggleClass("active"); - $("." + editorPreviewSlc).html(parseCode(editor.val())); - $(".editor-common").val(editor.val()); - }); - - btnEditorPanel.find('.btn-tab').click(function(e){ - e.preventDefault(); - mg.insertAtCaret('#' + editorId, '\t'); - }) - - return editorPanel; - } - - - function getFormData(){ - var data = $("#frmBookmarkEdit").serializeArray(); - data.push({ - name: "html", - value: getEditorValue() - }); - return data; - } - function getEditorValue(){ - var mobileValue = $("#text-editor").val(), value = $("#txtDescription").markdownEditor('content'); - return mobileValue; - } - function setEditorValue(val){ - return $("#txtDescription").markdownEditor('setContent', val); - } - function successEvent(editMode){ - if(editMode) - mg.notify.info('Bookmark salvo com sucesso'); - else - mg.notify.success('Bookmark cadastrado com sucesso'); - - refreshBookmarkList(); - } - function getSt(editMode){ - - // public link - $("#visible").change(function(){ - var formData = getFormData(); - var linkSpan = $(".public-link"); - if(this.checked && editMode){ - linkSpan.html('bookmark'); - } else { - linkSpan.html('bookmark'); - } - }).trigger('change'); - - var title = mg.modal.modal().find(".title"); - if(editMode){ - title.html("Edit"); - }else{ - title.html("New"); - } - - return editMode ? { - save: function(e){ - var submitBtn = $("#frmBookmarkEdit *[type=submit]") - .prop("disabled", true); - e.preventDefault(); - $.ajax({ - url: "/api/bookmark", - type: 'POST', - data: getFormData(), - success: function () { - successEvent(1); - console.debug("editado"); - originalData = JSON.stringify(getFormData()); - } - }).always(function(){ - submitBtn.prop("disabled", false); - }) - } - } : { - save: function(e){ - e.preventDefault(); - var submitBtn = $("#frmBookmarkEdit *[type=submit]") - .prop("disabled", true); - - $.ajax({ - url: "/api/bookmark", - type: 'PUT', - data: getFormData(), - success: function (id) { - st = getSt(editMode = true); - console.debug("cadastrado"); - frm.prop("id").value = id; - successEvent(); - originalData = JSON.stringify(getFormData()); - } - }).always(function(){ - submitBtn.prop("disabled", false); - }) - } - }; - }; - - $('body').off('click', '.painel-acoes li .toggle-scroll').on('click', '.painel-acoes li .toggle-scroll', function(e){ - $(this).parent().toggleClass("active"); - $(this).parents(".mg-code").find('pre').toggleClass("with-scroll"); - e.preventDefault(); - e.stopPropagation(); - }); - -// if you change here maybe also want to change src/controller/BookmarkController.js#306 -var languagesMap = null; -function parseCode(content){ - - if(languagesMap == null){ - languagesMap = {}; - hljs.listLanguages().forEach(lang => languagesMap[lang] = true) - } - var renderer = new marked.Renderer(); - renderer.code = function(code, lang){ - var parsedCode = languagesMap[lang] ? hljs.highlight(lang, code) : {value: code, plain: true}; // MG-40 hljs.highlightAuto(code) it is slow (1-2 seconds to parse) - return Mustache.render($('#tplCodeBlock').html(), { - lang: lang, code: parsedCode.value, plain: parsedCode.plain, - overflown: parsedCode.value.split(/\r\n|\r|\n/).length > 7 - }); - } - renderer.table = function(header, body) { - return '\n' - + '\n' - + header - + '\n' - + '\n' - + body - + '\n' - + '
\n'; - } - - return marked(content, { - renderer: renderer - }) -} - };cb($(".ctBookmarkNew").data("edit-mode")); diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html index 9d9dc64..07474ed 100644 --- a/view/mobile/bookmarkEdit.html +++ b/view/mobile/bookmarkEdit.html @@ -6,19 +6,19 @@
-
+
-
+

- {{#tags}} {{/tags}}
-
+

+ + From d53a634e39f2d52f9c85f949d6fd641107c210ff Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 23:37:13 -0300 Subject: [PATCH 06/24] MG-400 fixing css --- public/css/style.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index c4ccd7f..adfe381 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -224,8 +224,24 @@ pre { background: white; top: 0; left: 0; - z-index: 9999; + z-index: 1030; width: 100%; height: 100%; overflow-y: auto; } + +/** + * Tags combo + */ +.select2-dropdown { + z-index: 1031; +} + +.select2-container--focus .select2-selection { + border: 1px solid #66afe9!important; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6) +} + +.select2-selection { + border: 1px solid #CCC!important; +} From b2db412da805292751c3f220af3ad6dc77674eac Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Mon, 11 Sep 2017 23:41:03 -0300 Subject: [PATCH 07/24] MG-400 adding fullscreen action --- public/js/ct/mobile/bookmarkEdit.js | 9 +++++++++ view/mobile/bookmarkEdit.html | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js index da3e955..ac67ca1 100644 --- a/public/js/ct/mobile/bookmarkEdit.js +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -1,5 +1,14 @@ function cb(editMode){ + /** + * Events + */ + + $(".btn-fullscreen").click(function(){ + $(".fields").slideToggle(); + }); + + // tag search var combo = $(".js-data-example-ajax") combo.select2({ tags: true, tokenSeparators: [',', '\t', ' '], diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html index 07474ed..bfa1cce 100644 --- a/view/mobile/bookmarkEdit.html +++ b/view/mobile/bookmarkEdit.html @@ -33,7 +33,7 @@       - +
From 65ad258ffce6576e698a1babc92b79567251786a Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Thu, 14 Sep 2017 22:30:41 -0300 Subject: [PATCH 08/24] MG-400 edition page --- public/css/mobile/style.css | 0 public/css/style.css | 26 +++++++++------------ public/js/ct/main.js | 36 +++++++++++++++++++++++++++++ public/js/ct/mobile/bookmarkEdit.js | 29 +++++++++++++++++++++-- view/layout.html | 14 ++++++++++- view/mobile/bookmarkEdit.html | 8 +++---- 6 files changed, 91 insertions(+), 22 deletions(-) create mode 100644 public/css/mobile/style.css create mode 100644 public/js/ct/main.js diff --git a/public/css/mobile/style.css b/public/css/mobile/style.css new file mode 100644 index 0000000..e69de29 diff --git a/public/css/style.css b/public/css/style.css index adfe381..0e0d87f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -106,7 +106,7 @@ input:checked + .slider:before{ text-align: center; } -#text-editor, #editor-mb { +#text-editor, #md-editor { width: 100%; font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 13px; @@ -114,17 +114,9 @@ input:checked + .slider:before{ tab-size: 2; outline: none; line-height: 150%; -} - -.mobile-full-screen-modal { - position: fixed; - top: 0px; - left: 0px; - z-index: 3000; - background: #ffffff; - width: 100%; - padding: 10px 5px; - height: 100%; + border: 1px solid #CCC; + border-left: 0px; + border-right: 0px; } #bookmarkForm { @@ -136,6 +128,11 @@ input:checked + .slider:before{ min-height: 100vh; display: flex; flex-direction: column; + margin: 0px 5px; +} + +.btn-editor-panel { + margin-top: 2px; } .editor-panel textarea { @@ -143,12 +140,11 @@ input:checked + .slider:before{ flex: 1; resize: none; } + .editor-preview { - border: 1px solid #CECBCB; margin: 10px 0px; padding: 5px; - max-height: 100%; - overflow-y: auto; + } .editor-common { diff --git a/public/js/ct/main.js b/public/js/ct/main.js new file mode 100644 index 0000000..86ca6e2 --- /dev/null +++ b/public/js/ct/main.js @@ -0,0 +1,36 @@ +// if you change here maybe also want to change src/controller/BookmarkController.js#306 +var languagesMap = null; +function parseCode(content){ + + console.debug('m=parseCode, length=%s', content.length) + if(languagesMap == null){ + languagesMap = {}; + hljs.listLanguages().forEach(lang => languagesMap[lang] = true) + } + var renderer = new marked.Renderer(); + renderer.code = function(code, lang){ + console.debug('onparse=begin, code=%s, lang=%s', code, lang) + var parsedCode = languagesMap[lang] ? hljs.highlight(lang, code) : {value: code, plain: true}; // MG-40 hljs.highlightAuto(code) it is slow (1-2 seconds to parse) + return Mustache.render($('#tplCodeBlock').html(), { + lang: lang, code: parsedCode.value, plain: parsedCode.plain, + overflown: parsedCode.value.split(/\r\n|\r|\n/).length > 7 + }); + } + renderer.table = function(header, body) { + return '\n' + + '\n' + + header + + '\n' + + '\n' + + body + + '\n' + + '
\n'; + } + + console.debug('parsing, ',marked(content, { + renderer: renderer + })); + return marked(content, { + renderer: renderer + }) +} diff --git a/public/js/ct/mobile/bookmarkEdit.js b/public/js/ct/mobile/bookmarkEdit.js index ac67ca1..378ee1b 100644 --- a/public/js/ct/mobile/bookmarkEdit.js +++ b/public/js/ct/mobile/bookmarkEdit.js @@ -3,10 +3,35 @@ function cb(editMode){ /** * Events */ + var items = { + btnEditor: $(".btn-edit"), + btnVisualize: $(".btn-visualize"), + editor: $("#md-editor"), + preview: $(".editor-preview") + } $(".btn-fullscreen").click(function(){ $(".fields").slideToggle(); - }); + }) + + items.btnEditor.click(function(){ + + items.btnEditor.addClass("active"); + items.btnVisualize.removeClass("active"); + + items.editor.removeClass("hidden"); + items.preview.addClass("hidden"); + + }) + + items.btnVisualize.click(function(){ + + items.btnEditor.removeClass("active"); + items.btnVisualize.addClass("active"); + + items.editor.addClass("hidden"); + items.preview.removeClass("hidden").html(parseCode(items.editor.val())) + }) // tag search var combo = $(".js-data-example-ajax") @@ -33,7 +58,7 @@ function cb(editMode){ }, cache: true } - }); + }) combo.val(tagsToEdit).trigger("change"); var i = combo.next().find(".select2-selection ul"); diff --git a/view/layout.html b/view/layout.html index b3a8f04..13c48f9 100644 --- a/view/layout.html +++ b/view/layout.html @@ -72,12 +72,24 @@ + +
{{> body }}
- + diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html index bfa1cce..a51db26 100644 --- a/view/mobile/bookmarkEdit.html +++ b/view/mobile/bookmarkEdit.html @@ -29,15 +29,15 @@
-   -   +   +      
- - + +
- + + From 2c597c29873e6c9d86234b76f49127e5a95d206c Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Fri, 15 Sep 2017 02:33:48 -0300 Subject: [PATCH 15/24] MG-400 fixing edition page --- public/js/ct/bookmarkHome.js | 2 +- public/js/ct/main.js | 7 +++---- view/layout.html | 12 ------------ view/mobile/bookmarkEdit.html | 14 +++++++++++++- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/public/js/ct/bookmarkHome.js b/public/js/ct/bookmarkHome.js index 71966dc..39c3b0d 100644 --- a/public/js/ct/bookmarkHome.js +++ b/public/js/ct/bookmarkHome.js @@ -127,7 +127,7 @@ function populaTabela(data){ function abrirTelaEdicao(e){ var that = $(this); if(this == e.target || that.hasClass("divItemBody") || that.hasClass("divItemHead")){ - mg.popUpScreen(mg.isMobile ? "/mobile/bookmark/edit" : "/bookmark/edit", { + mg.popUpScreen2(mg.isMobile ? "/mobile/bookmark/edit" : "/bookmark/edit", { data: { id: that.parents(".divItem").data("id"), editMode: true diff --git a/public/js/ct/main.js b/public/js/ct/main.js index 86ca6e2..b91e25d 100644 --- a/public/js/ct/main.js +++ b/public/js/ct/main.js @@ -11,7 +11,8 @@ function parseCode(content){ renderer.code = function(code, lang){ console.debug('onparse=begin, code=%s, lang=%s', code, lang) var parsedCode = languagesMap[lang] ? hljs.highlight(lang, code) : {value: code, plain: true}; // MG-40 hljs.highlightAuto(code) it is slow (1-2 seconds to parse) - return Mustache.render($('#tplCodeBlock').html(), { + console.debug('onparse=parsed, parsedCode=%o', parsedCode) + return Mustache.render($('#tplCodeBlock-2').html(), { lang: lang, code: parsedCode.value, plain: parsedCode.plain, overflown: parsedCode.value.split(/\r\n|\r|\n/).length > 7 }); @@ -27,9 +28,7 @@ function parseCode(content){ + '\n'; } - console.debug('parsing, ',marked(content, { - renderer: renderer - })); + console.debug('parsing, ',marked(content, {renderer: renderer})); return marked(content, { renderer: renderer }) diff --git a/view/layout.html b/view/layout.html index 13c48f9..533306a 100644 --- a/view/layout.html +++ b/view/layout.html @@ -81,15 +81,3 @@ - - diff --git a/view/mobile/bookmarkEdit.html b/view/mobile/bookmarkEdit.html index 13c6667..c782c89 100644 --- a/view/mobile/bookmarkEdit.html +++ b/view/mobile/bookmarkEdit.html @@ -41,7 +41,7 @@
- +
@@ -50,3 +50,15 @@ + + From 488e4f8866cc162020dd3dba5e67d1caae7d0f80 Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Fri, 15 Sep 2017 02:40:09 -0300 Subject: [PATCH 16/24] MG-400 fixing wor wrap --- public/css/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index 0e0d87f..348a293 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -144,7 +144,7 @@ input:checked + .slider:before{ .editor-preview { margin: 10px 0px; padding: 5px; - + word-break: break-word; } .editor-common { @@ -241,3 +241,5 @@ pre { .select2-selection { border: 1px solid #CCC!important; } + + From f8b0f0abbc24c63471e662aee389cf6e20036f89 Mon Sep 17 00:00:00 2001 From: Elvis de Freitas Date: Sat, 16 Sep 2017 11:35:07 -0300 Subject: [PATCH 17/24] MG-400 refactoring web page --- public/css/mobile/style.css | 7 + public/css/style.css | 5 +- public/js/ct/bookmarkEdit.js | 372 ++++------------------------------- view/bookmarkEdit.html | 111 +++++------ 4 files changed, 100 insertions(+), 395 deletions(-) diff --git a/public/css/mobile/style.css b/public/css/mobile/style.css index 14ad7df..d962fab 100644 --- a/public/css/mobile/style.css +++ b/public/css/mobile/style.css @@ -9,3 +9,10 @@ .btn-public-link { flex: 1; } + +.editor-panel { + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 5px 5px; +} diff --git a/public/css/style.css b/public/css/style.css index 348a293..f5c095f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -125,10 +125,7 @@ input:checked + .slider:before{ } .editor-panel { - min-height: 100vh; - display: flex; - flex-direction: column; - margin: 0px 5px; + margin: 5px 5px; } .btn-editor-panel { diff --git a/public/js/ct/bookmarkEdit.js b/public/js/ct/bookmarkEdit.js index 9568c50..b13b5c0 100644 --- a/public/js/ct/bookmarkEdit.js +++ b/public/js/ct/bookmarkEdit.js @@ -1,339 +1,47 @@ -function cb(editMode){ +(function(items){ - window.onbeforeunload = function(){return "";}; + var edition = new BookmarkEdition(), items = edition.items, ctx = edition.ctx; + Object.assign(items, edition); - var isMobile = mg.isMobile, - st = getSt(editMode), - editorEl = $("#txtDescription"), - combo = $(".js-data-example-ajax"), - frm = $("#frmBookmarkEdit").submit(function(e){ - st.save.call(this, e); - }); - - universal(); - if(isMobile){ - mobile(); - }else{ - web(); - } - var originalData = JSON.stringify(getFormData()); - - function web(){ - - var ed = editorEl.markdownEditor({ - preview: true, - theme: "ace/theme/tomorrow_night", - onPreview: function (content, callback) { - callback(parseCode(content, callback)); - $(".md-preview a").not('.skipped').click(function(e){ - e.stopPropagation(); - this.target = "_blank"; - }); - } - }), - session = ed.editor.getSession(); - session.setUseSoftTabs(false); - session.setTabSize(2); - ed.focus(function(){ - ed.editor.focus(); - }); - if(editMode){ - ed.find(".btn-preview").trigger("click"); - } - } - - function mobile(){ - var text = editorEl.text(); - editorEl.empty(); - editorEl.append(getMobileEditor("text-editor", "editor-preview", "btn-visualize", "btn-edit", "btn-fullscren", "btn-linewrap", text, false)); - - var editorMb = $(".mobile-full-screen-modal"); - editorMb.html(getMobileEditor("editor-mb", "editor-preview", "btn-visualize-mb", "btn-edit-mb", "btn-fullscren-mb", "btn-linewrap", text, true)); - - $("#text-editor").height(($(window).height() - $(".header-editor-container").height()) + "px"); - - $(".btn-fullscren").click(function(){ - editorMb.show(); - window.modalCloseClick = true; - $('#modal').modal('toggle'); - }); - $(".btn-fullscren-mb").click(function(){ - $("#text-editor").val($("#editor-mb").val()); - $('#modal').modal('toggle'); - editorMb.hide(); - }); - $('.btn-bk-save').click(function(e){ - var mbText = $("#editor-mb").val(); - $("#text-editor").val(mbText); - st.save.call(this, e); - }); - } - - function universal(){ - - $("body").on('click', '.close', function(){ - window.modalCloseClick = true; - }); - - combo.select2({ - tags: true, tokenSeparators: [',', '\t', ' '], - ajax: { - url: "/api/tag/search", - dataType: 'json', - delay: 340, - data: function (params) { - return { - q: params.term, - page: params.page - }; - }, - processResults: function (data, page) { - return { - results: data.map(function(o){ - o.text = o.name; - o.id = o.name; - return o; - }) - }; - }, - cache: true - } - }); - combo.val(tagsToEdit).trigger("change"); - var i = combo.next().find(".select2-selection ul"); - i.mousedown(function(){ - this.hasClick = true; - }); - i.focus(function(e){ - if(!this.hasClick){ - combo.select2("open"); - } - this.hasClick = false; - }); - i.attr("tabindex", '3'); - - setTimeout(function(){ - $(".btn-fullscren").trigger("click"); - $('#editor-mb').trigger('focus').selectRange(0).scrollTop(0); - }, 200); - - mg.modal.close(function(){ - console.debug('m=modal-close-cb, modalCloseClicked=%s', window.modalCloseClick); - if(!window.modalCloseClick){ - if((!editMode && getEditorValue())){ - frm.trigger("submit"); - }else if(editMode){ - if(originalData != JSON.stringify(getFormData())){ - console.debug('m=save-trigger, status=different-values, original=%s, current=%s', originalData, JSON.stringify(getFormData())); - frm.trigger("submit"); - } - } - } - window.modalCloseClick = false; - }); - - } - - /* - Mount mobile panel - */ - function getMobileEditor(editorId, editorPreviewSlc, btnVisualizeSlc, btnEditSlc, btnFullScreenSlc, btnLineWrap, text, fullscreen){ - var editorPanel = $('
'), - btnEditorPanel = $('
'); - - editorPanel.append(btnEditorPanel); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - btnEditorPanel.append(' '); - btnEditorPanel.append(''); - if(fullscreen){ - btnEditorPanel.append(''); - } - editorPanel.append('
'); - - var editor = editorPanel.find("#" + editorId); - var btnVisualize = btnEditorPanel.find("." + btnVisualizeSlc); - var btnLineWrap = btnEditorPanel.find("." + btnLineWrap); - var btnEdit = btnEditorPanel.find("." + btnEditSlc); - - - editor.val(text); - - btnEdit.click(function(){ - $(".btn-edit-common").addClass("active"); - $(".btn-visualize-common").removeClass("active"); - $(".editor-common").show(); - $("." + editorPreviewSlc).hide(); - }).trigger("click"); - - btnVisualize.click(function(){ - $(".btn-edit-common").removeClass("active"); - $(".btn-visualize-common").addClass("active"); - $("." + editorPreviewSlc).html(parseCode(editor.val())); - - $(".editor-common").hide(); - $("." + editorPreviewSlc).show(); - }); - - btnLineWrap.click(function(){ - - if(editor.hasClass("line-wrap-on")){ - editor.removeClass("line-wrap-on") - editor.addClass("line-wrap-off") - }else{ - editor.removeClass("line-wrap-off") - editor.addClass("line-wrap-on") - } - $(this).toggleClass("png-active"); - - }); - - btnEditorPanel.find('.btn-fullscren-common').bind('click', function(){ - $(".btn-fullscren-common").toggleClass("active"); - $("." + editorPreviewSlc).html(parseCode(editor.val())); - $(".editor-common").val(editor.val()); - }); - - btnEditorPanel.find('.btn-tab').click(function(e){ + items.btnTab.click(function(e){ e.preventDefault(); - mg.insertAtCaret('#' + editorId, '\t'); - }) - - return editorPanel; - } - - - function getFormData(){ - var data = $("#frmBookmarkEdit").serializeArray(); - data.push({ - name: "html", - value: getEditorValue() - }); - return data; - } - function getEditorValue(){ - var mobileValue = $("#text-editor").val(), value = $("#txtDescription").markdownEditor('content'); - console.debug('m=getEditorValue, isMobile=%s', isMobile); - if(isMobile){ - return mobileValue; - } - return value; - } - function setEditorValue(val){ - return $("#txtDescription").markdownEditor('setContent', val); - } - function successEvent(editMode){ - if(editMode) - mg.notify.info('Bookmark salvo com sucesso'); - else - mg.notify.success('Bookmark cadastrado com sucesso'); - - refreshBookmarkList(); - } - function getSt(editMode){ - - // public link - $("#visible").change(function(){ - var formData = getFormData(); - var linkSpan = $(".public-link"); - if(this.checked && editMode){ - linkSpan.html('bookmark'); - } else { - linkSpan.html('bookmark'); - } - }).trigger('change'); + mg.insertAtCaret(items.editor.get(0), '\t'); + }); - var title = mg.modal.modal().find(".title"); - if(editMode){ - title.html("Edit"); - }else{ - title.html("New"); + items.editorPanel = items.editor.markdownEditor({ + preview: true, + theme: "ace/theme/tomorrow_night", + onPreview: function (content, callback) { + callback(parseCode(content, callback)); + $(".md-preview a").not('.skipped').click(function(e){ + e.stopPropagation(); + this.target = "_blank"; + }); } - - return editMode ? { - save: function(e){ - var submitBtn = $("#frmBookmarkEdit *[type=submit]") - .prop("disabled", true); - e.preventDefault(); - $.ajax({ - url: "/api/bookmark", - type: 'POST', - data: getFormData(), - success: function () { - successEvent(1); - console.debug("editado"); - originalData = JSON.stringify(getFormData()); - } - }).always(function(){ - submitBtn.prop("disabled", false); - }) - } - } : { - save: function(e){ - e.preventDefault(); - var submitBtn = $("#frmBookmarkEdit *[type=submit]") - .prop("disabled", true); - - $.ajax({ - url: "/api/bookmark", - type: 'PUT', - data: getFormData(), - success: function (id) { - st = getSt(editMode = true); - console.debug("cadastrado"); - frm.prop("id").value = id; - successEvent(); - originalData = JSON.stringify(getFormData()); - } - }).always(function(){ - submitBtn.prop("disabled", false); - }) - } - }; - }; - - $('body').off('click', '.painel-acoes li .toggle-scroll').on('click', '.painel-acoes li .toggle-scroll', function(e){ - $(this).parent().toggleClass("active"); - $(this).parents(".mg-code").find('pre').toggleClass("with-scroll"); - e.preventDefault(); - e.stopPropagation(); + }); + var session = items.editorPanel.editor.getSession(); + session.setUseSoftTabs(false); + session.setTabSize(2); + items.editorPanel.focus(function(){ + items.editorPanel.editor.focus(); }); -// if you change here maybe also want to change src/controller/BookmarkController.js#306 -var languagesMap = null; -function parseCode(content){ - - if(languagesMap == null){ - languagesMap = {}; - hljs.listLanguages().forEach(lang => languagesMap[lang] = true) - } - var renderer = new marked.Renderer(); - renderer.code = function(code, lang){ - var parsedCode = languagesMap[lang] ? hljs.highlight(lang, code) : {value: code, plain: true}; // MG-40 hljs.highlightAuto(code) it is slow (1-2 seconds to parse) - return Mustache.render($('#tplCodeBlock').html(), { - lang: lang, code: parsedCode.value, plain: parsedCode.plain, - overflown: parsedCode.value.split(/\r\n|\r|\n/).length > 7 - }); - } - renderer.table = function(header, body) { - return '\n' - + '\n' - + header - + '\n' - + '\n' - + body - + '\n' - + '
\n'; - } - - return marked(content, { - renderer: renderer - }) -} - -};cb($(".ctBookmarkNew").data("edit-mode")); + if(ctx.editMode){ + items.editorPanel.find(".btn-preview").trigger("click"); + } + +})(new function(){ + this.btnEditor = $(".btn-edit") + this.btnVisualize = $(".btn-visualize") + this.btnFullScreen = $(".btn-fullscreen") + this.editor = $("#md-editor") + this.preview = $(".editor-preview") + this.form = $("#bookmarkForm") + this.modal = $(".modal-editor") + this.btnCloseEditor = this.modal.find(".btn-close-modal") + this.linkContainer = this.modal.find(".link-container") + this.btnLink = this.modal.find(".btn-public-link") + this.iptVisible = this.form.find("#visible") + this.btnLineWrap = this.modal.find(".btn-linewrap") + this.btnTab = this.modal.find(".btn-tab") +}); diff --git a/view/bookmarkEdit.html b/view/bookmarkEdit.html index d3257f1..01c12dd 100644 --- a/view/bookmarkEdit.html +++ b/view/bookmarkEdit.html @@ -1,65 +1,58 @@ -
-