From 79237470d8fac9c1c18cfe3c4bcf1c142fb83654 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 05:51:21 +0500 Subject: [PATCH 01/10] quick fix of CSS to be able to set up style of posts text with b, i, etc tags --- css/style.css | 15 ++++++++------- theme_calm/css/style.css | 23 ++++++++++++----------- theme_nin/css/style.css | 1 - 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index ff61c80..ba6beb4 100644 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,21 @@ -@font-face -{ +@font-face { font-family: "Open Sans"; src: url("OpenSans-Regular.ttf"); + font-weight: normal; + font-style: normal; } -@font-face -{ + +@font-face { font-family: "Open Sans"; src: url("OpenSans-Bold.ttf"); font-weight: bold; } -@font-face -{ + +@font-face { font-family: "Symbola"; src: url("Symbola.ttf"); } + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -32,7 +34,6 @@ time, mark, audio, video, textarea padding: 0; border: 0; font-size: 100%; - font: inherit; vertical-align: baseline; box-sizing: border-box; font-family: 'Open Sans', sans-serif, Symbola; diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index c91f8fc..cb6c1f6 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -1,30 +1,32 @@ -@font-face -{ +@font-face { font-family: "Open Sans"; src: url("OpenSans-Regular.ttf"); + font-weight: normal; + font-style: normal; } -@font-face -{ + +@font-face { font-family: "Open Sans"; src: url("OpenSans-Bold.ttf"); font-weight: bold; } -@font-face -{ + +@font-face { font-family: "Open Sans"; src: url("OpenSans-Italic.ttf"); font-style: italic; } -@font-face -{ + +@font-face { font-family: "Open Sans Condensed"; src: url("OpenSansCondensed300.ttf"); } -@font-face -{ + +@font-face { font-family: "Symbola"; src: url("/css/Symbola.ttf"); } + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -43,7 +45,6 @@ time, mark, audio, video, textarea padding: 0; border: 0; font-size: 100%; - font: inherit; vertical-align: baseline; box-sizing: border-box; font-family: 'Open Sans', sans-serif, Symbola; diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 31d3d99..519623a 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -232,7 +232,6 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font: inherit; font-size: 100%; vertical-align: baseline; } From fc61d019b67b5281fc671ad1ac4530ce419f29cf Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 05:54:11 +0500 Subject: [PATCH 02/10] text markdown with *bold*, ~italic~, _underlined_ and -strikethrough- --- js/twister_formatpost.js | 143 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 136 insertions(+), 7 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 13d1d31..6aa26b2 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -226,6 +226,133 @@ function htmlFormatMsg(msg, mentions) { return i; } + function markdown(str, chr, tag) { + function whiteSpace(i, j) { + j++; + for (i += 1; i < j; i++) { + if (p[i].w) + return true; + } + + return false; + } + + var i, j, t; + var w = false; + var p = []; + + // collecting chars position data + for (i = 0; i < str.length; i++) { + if (str[i] === chr) { + for (j = i + 1; j < str.length; j++) { + if (str[j] !== chr) + break; + } + if (whiteSpaces.indexOf(str[i - 1]) === -1 || whiteSpaces.indexOf(str[j]) === -1) { + if (whiteSpaces.indexOf(str[i - 1]) > -1 || i === 0) + t = -1; + else if (whiteSpaces.indexOf(str[j]) > -1 || i === str.length - 1) + t = 1; + else if (stopCharsMarkDown.indexOf(str[i - 1]) > -1) { + if (stopCharsMarkDown.indexOf(str[j]) === -1) + t = -1; + else { + for (t = j + 1; t < str.length; t++) { + if (whiteSpaces.indexOf(str[t]) > -1) { + if ((2 * j - t) < 0 || whiteSpaces.indexOf(str[2 * j - t]) === -1) { + t = 1; + break; + } + } else if (stopCharsMarkDown.indexOf(str[t]) === -1) { + if ((2 * j - t) < 0 || whiteSpaces.indexOf(str[2 * j - t]) > -1) { + t = -1; + break; + } + } + } + if (t = str.length) + t = 1; + } + } else if (stopCharsMarkDown.indexOf(str[j]) > -1) + t = 1; + else + t = 0; + p.push({i: i, k: j - i, t: t, w: w, a: -1, p: -1}); + w = false; + } + i = j; + } else if (!w && whiteSpaces.indexOf(str[i]) > -1) { + w = true; + } + } + + // calculating dependencies + for (i = 0; i < p.length; i++) { + if (p[i].t < 1 && p[i].a === -1) { + t = i; + for (j = i + 1; j < p.length; j++) { + if (p[i].t === 0 && whiteSpace(i, j)) { + i = j - 1; + break; + } else if (p[j].t < 1 && p[j].a === -1) { + p[t].p = j; + t = j; + } else if (p[j].t === 1 && p[j].a === -1) { + p[i].a = j; + p[j].a = i; + i = j; + break; + } + } + } + } + for (i = 0; i < p.length; i++) { + if (p[i].t === -1 && p[i].a === -1) { + for (j = p[i].p; j > -1; j = p[j].p) { + if (whiteSpace(i, j)) { + i = j - 1; + break; + } else if (p[j].t === 0 + && !(p[j].p > -1 && p[p[j].p].t === 0 && !whiteSpace(j, p[j].p))) { + p[j].a = i; + p[i].a = j; + i = j; + break; + } + } + } + } + + // changing the string + for (i = 0; i < p.length; i++) { + if (p[i].a > -1) { + if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) { + if (p[i].k > 1) + html.push('<' + tag + '>' + Array(p[i].k).join(chr)); + else + html.push('<' + tag + '>'); + } else if (p[i].t === 1 || (p[i].t === 0 && p[i].a < i)) { + if (p[i].k > 1) + html.push(Array(p[i].k).join(chr) + ''); + else + html.push(''); + } else { + if (p[i].k > 1) + html.push(Array(p[i].k + 1).join(chr)); + else + html.push(chr); + } + strEncoded = '>' + (html.length - 1).toString() + '<'; + str = str.slice(0, p[i].i) + strEncoded + str.slice(p[i].i + p[i].k); + l = strEncoded.length - p[i].k; + for (j = i + 1; j < p.length; j++) + p[j].i += l; + } + } + + return str; + } + function htmlSplitCounter(str) { html.push('' + str + ''); @@ -233,12 +360,13 @@ function htmlFormatMsg(msg, mentions) { } var mentionsChars = 'abcdefghijklmnopqrstuvwxyz_0123456789'; - var stopCharsTrailing = '/\\.,:;?!*%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; + var stopCharsTrailing = '/\\*.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; var stopCharsTrailingUrl = stopCharsTrailing.slice(1); var whiteSpaces = ' \f\n\r\t\v​\u00A0\u1680\u180E\u2000​\u2001\u2002​\u2003\u2004\u2005\u2006​\u2007\u2008​\u2009\u200A\u2028\u2029​\u202F\u205F\u3000'; var stopCharsLeft = '<' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces; var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; + var stopCharsMarkDown = '~_-+=<>&' + stopCharsTrailing + whiteSpaces; var j, str, strEncoded; var html = []; @@ -340,7 +468,11 @@ function htmlFormatMsg(msg, mentions) { } } - msg = msg + msg = markdown(markdown(markdown(markdown(msg, + '*', 'b'), // bold + '~', 'i'), // italic + '_', 'u'), // underlined + '-', 's') // striketrough .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/"/g, '"') @@ -363,11 +495,8 @@ function htmlFormatMsg(msg, mentions) { msg = msg.replace(/\n/g, '
'); // TODO: add options for emotions; msg = $.emotions(msg); - // TODO: add at least basic markdown (optional) with syntax like this: - // *text* -> bold text - // ~text~ -> italic text - // _text_ -> underlined text - // -text- -> strikethrough text + // TODO make markdown optionally mutable ? + // some escaping tag return msg; } From f6d8e6a380c357e5adcbb0f3ca34b619af911f38 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 05:55:25 +0500 Subject: [PATCH 03/10] text markdown with [link](url) --- js/twister_formatpost.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 6aa26b2..254247b 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -373,7 +373,24 @@ function htmlFormatMsg(msg, mentions) { msg = escapeHtmlEntities(msg); for (var i = 0; i < msg.length - 7; i++) { - if (msg.slice(i, i + 4).toLowerCase() === 'http') { + if (msg.slice(i, i + 2) === '](') { + // FIXME there can be text with [] inside [] or links with () wee need to handle it too + j = getStrStart(msg, i - 1, '[', ''); + if (j < i) { + var k = getStrEnd(msg, i + 2, ')', ''); + if (k > i + 1) { + html.push($('#external-page-link-template')[0].outerHTML + .replace(/\bid\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('id') + //.replace(/\bhref\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('href') + .replace(/)[^]*?(<\/a>)/ig, '$1' + msg.slice(j, i) + '$2') // $().closest('a').text(url) + ); + strEncoded = '>' + (html.length - 1).toString() + '<'; + msg = msg.slice(0, j - 1) + strEncoded + msg.slice(k + 2); + i = j + strEncoded.length - 1; + } + } + } else if (msg.slice(i, i + 4).toLowerCase() === 'http') { if (msg.slice(i + 4, i + 7) === '://' && stopCharsRight.indexOf(msg[i + 7]) === -1) { j = getStrEnd(msg, i + 7, stopCharsRight, stopCharsTrailingUrl); if (j > i + 6) { From ad7c95308c9227e469b72138075cadb95597f161 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 12:58:33 +0500 Subject: [PATCH 04/10] text markdown with `monospace` --- css/style.css | 9 +- js/twister_formatpost.js | 7 +- theme_calm/css/style.css | 9 +- theme_nin/css/style.css | 4 + theme_nin/sass/_postboard.sass | 454 +++++++++++++++++---------------- 5 files changed, 250 insertions(+), 233 deletions(-) diff --git a/css/style.css b/css/style.css index ba6beb4..4611ee1 100644 --- a/css/style.css +++ b/css/style.css @@ -1025,12 +1025,17 @@ ol.toptrends-list { opacity: .5; text-decoration: none; } -.post-text -{ + +.post-text { font-size: 13px; margin: 2px 10px 4px 60px; word-wrap: break-word; } + +.post-text samp { + background: #f0efcc; +} + .post-context { font-size: 11px; diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 254247b..ad7e26d 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -366,7 +366,7 @@ function htmlFormatMsg(msg, mentions) { var stopCharsLeft = '<' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces; var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; - var stopCharsMarkDown = '~_-+=<>&' + stopCharsTrailing + whiteSpaces; + var stopCharsMarkDown = '~_-`+=<>&' + stopCharsTrailing + whiteSpaces; var j, str, strEncoded; var html = []; @@ -485,11 +485,12 @@ function htmlFormatMsg(msg, mentions) { } } - msg = markdown(markdown(markdown(markdown(msg, + msg = markdown(markdown(markdown(markdown(markdown(msg, '*', 'b'), // bold '~', 'i'), // italic '_', 'u'), // underlined - '-', 's') // striketrough + '-', 's'), // striketrough + '`', 'samp') // kind of monospace .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/"/g, '"') diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index cb6c1f6..9d9fb55 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -1230,12 +1230,17 @@ textarea.splited-post { text-decoration: none; color: #43464d; } -.post-text -{ + +.post-text { font-size: 13px; margin: 2px 10px 4px 60px; word-wrap: break-word; } + +.post-text samp { + background: #eee; +} + .post-context { font-size: 11px; diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 519623a..3928b1a 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -878,6 +878,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, padding: 0; } +.post-text samp { + background: #eee; +} + /* line 138, ../sass/_postboard.sass */ .post-context { font-size: 11px; diff --git a/theme_nin/sass/_postboard.sass b/theme_nin/sass/_postboard.sass index 1d93a0d..61bdd00 100755 --- a/theme_nin/sass/_postboard.sass +++ b/theme_nin/sass/_postboard.sass @@ -1,311 +1,313 @@ /************* POST BOARD *************/ .postboard, .following - padding-left: $column-width + $gut-width - +box-sizing(border-box) - width: $postboard-width - @extend .clear-fix + padding-left: $column-width + $gut-width + +box-sizing(border-box) + width: $postboard-width + @extend .clear-fix .postboard-posts - position: relative - z-index: 1 - clear: both + position: relative + z-index: 1 + clear: both .postboard-news - font-size: 12px - box-sizing: border-box - position: relative - margin-bottom: 1px - cursor: pointer - padding: 10px - font-weight: 900 - clear: both - color: white - text-align: center - text-transform: uppercase - background: $main-color-color + font-size: 12px + box-sizing: border-box + position: relative + margin-bottom: 1px + cursor: pointer + padding: 10px + font-weight: 900 + clear: both + color: white + text-align: center + text-transform: uppercase + background: $main-color-color .post, .following li - background: $bloc-background-color - box-sizing: border-box - position: relative - margin-bottom: 1px - transition: margin .4s ease-out - -moz-transition: margin .4s ease-out + background: $bloc-background-color + box-sizing: border-box + position: relative + margin-bottom: 1px + transition: margin .4s ease-out + -moz-transition: margin .4s ease-out - - .post, .original.post, .post.open - background: $bloc-background-color - position: relative - margin-bottom: 1px + + .post, .original.post, .post.open + background: $bloc-background-color + position: relative + margin-bottom: 1px .module.open - .post - color: darken($defaut-font-color, 15%) + .post + color: darken($defaut-font-color, 15%) .post:hover - color: darken($defaut-font-color, 15%) + color: darken($defaut-font-color, 15%) .post-data - padding: 10px + padding: 10px -.post.open - .original, .related - margin-bottom: 1px +.post.open + .original, .related + margin-bottom: 1px .postboard-posts > .post - &.open - margin-top: 20px - margin-bottom: 20px - &:after - content: "" - position: absolute - right: 0 - top: 0 - width: 0 - height: 100% - transition: all .2s linear - &.open:after - width: 5px + &.open + margin-top: 20px + margin-bottom: 20px + &:after + content: "" + position: absolute + right: 0 + top: 0 + width: 0 + height: 100% + transition: all .2s linear + &.open:after + width: 5px .post:hover - cursor: pointer + cursor: pointer .open - background: none - &:hover - background: none + background: none + &:hover + background: none .post-photo - margin: 0 - display: inline-block - float: left - vertical-align: middle - width: 48px - height: 48px - overflow: hidden - img - width: 100% - height: 100% + margin: 0 + display: inline-block + float: left + vertical-align: middle + width: 48px + height: 48px + overflow: hidden + img + width: 100% + height: 100% .post-info-name - font-weight: 700 - font-size: 1em - line-height: 14px - color: inherit - text-decoration: none - display: inline-block - padding-left: 10px - float: left + font-weight: 700 + font-size: 1em + line-height: 14px + color: inherit + text-decoration: none + display: inline-block + padding-left: 10px + float: left .post-info-name:hover - text-decoration: none - color: $main-color-light + text-decoration: none + color: $main-color-light .post-info-tag - font-size: 12px - opacity: .6 - margin-top: 4px - display: inline-block + font-size: 12px + opacity: .6 + margin-top: 4px + display: inline-block .post-info-time - float: right - font-size: 11px - line-height: 14px - text-decoration: none - color: lighten($dark-grey,30%) - &:hover - color: lighten($dark-grey,5%) + float: right + font-size: 11px + line-height: 14px + text-decoration: none + color: lighten($dark-grey,30%) + &:hover + color: lighten($dark-grey,5%) .post-text - margin: 0 0 0 58px - word-wrap: break-word - min-height: 25px - padding: 0 + margin: 0 0 0 58px + word-wrap: break-word + min-height: 25px + padding: 0 + samp + background: #eee .post-context - font-size: 11px - line-height: 11px - margin: 0 0 1em 0 - color: lighten($dark-grey,30%) - span - @extend .icon-twistagain - @extend .extend-icon - &:before - display: block - float: left - background: $main-color-color - text-align: center - padding: 1px 2px 2px 2px - line-height: 9px - font-size: 9px - +border-radius(3px) - color: white - margin-right: .4em + font-size: 11px + line-height: 11px + margin: 0 0 1em 0 + color: lighten($dark-grey,30%) + span + @extend .icon-twistagain + @extend .extend-icon + &:before + display: block + float: left + background: $main-color-color + text-align: center + padding: 1px 2px 2px 2px + line-height: 9px + font-size: 9px + +border-radius(3px) + color: white + margin-right: .4em .mini-screen-name - font-size: 13px - color: $dark-grey + font-size: 13px + color: $dark-grey .post-retransmited-icon - display: none + display: none .post-interactions - margin: 10px 0 3px 0 - text-align: right - height: 12px - line-height: 12px - span - color: lighten($dark-grey,30%) - cursor: pointer - font-size: 12px - line-height: 12px + margin: 10px 0 3px 0 + text-align: right + height: 12px + line-height: 12px + span + color: lighten($dark-grey,30%) + cursor: pointer + font-size: 12px + line-height: 12px .post-expand - color: lighten($dark-grey,30%) - cursor: pointer - font-size: 12px - position: absolute - left: 10px - bottom: 10px - &:hover - color: lighten($dark-grey,5%) + color: lighten($dark-grey,30%) + cursor: pointer + font-size: 12px + position: absolute + left: 10px + bottom: 10px + &:hover + color: lighten($dark-grey,5%) .post-reply - @extend .extend-icon - @extend .icon-comment + @extend .extend-icon + @extend .icon-comment .post-propagate - @extend .extend-icon - @extend .icon-twistagain + @extend .extend-icon + @extend .icon-twistagain .post-favorite - display: none!important - @extend .extend-icon - @extend .icon-star + display: none!important + @extend .extend-icon + @extend .icon-star .post .show-more - display: inline-block - float: right - font-size: 12px - color: lighten($dark-grey,30%) - @extend .extend-icon - @extend .icon-chat - &:hover - color: lighten($dark-grey,5%) + display: inline-block + float: right + font-size: 12px + color: lighten($dark-grey,30%) + @extend .extend-icon + @extend .icon-chat + &:hover + color: lighten($dark-grey,5%) .expanded-content.show-pic - display: block + display: block .expanded-post - .post-expand, .post-reply, .post-propagate, .post-favorite - color: lighten($dark-grey,30%) - &:hover - color: lighten($dark-grey,5%) + .post-expand, .post-reply, .post-propagate, .post-favorite + color: lighten($dark-grey,30%) + &:hover + color: lighten($dark-grey,5%) .related .post-expand - display: none - margin: 0 + display: none + margin: 0 .post-reply, .post-propagate, .post-favorite - padding-left: 10px - display: none + padding-left: 10px + display: none .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover - .post-reply, .post-propagate, .post-favorite - display: inline-block + .post-reply, .post-propagate, .post-favorite + display: inline-block .open .related - .post-reply, .post-propagate, .post-favorite - display: none!important - &:hover - .post-reply, .post-propagate/*, .post-favorite*/ - display: inline-block!important + .post-reply, .post-propagate, .post-favorite + display: none!important + &:hover + .post-reply, .post-propagate/*, .post-favorite*/ + display: inline-block!important .post-reply:hover, .post-propagate:hover, .post-favorite:hover - color: lighten($dark-grey,5%) + color: lighten($dark-grey,5%) .expanded-content - display: none - padding: 5px 5px 0 5px - @extend .clear-fix + display: none + padding: 5px 5px 0 5px + @extend .clear-fix .image-preview - width: 100% - display: block - margin: auto + width: 100% + display: block + margin: auto .preview-container - max-height: 500px - width: 100% - text-align: center - overflow-y: auto - background: black + max-height: 500px + width: 100% + text-align: center + overflow-y: auto + background: black .post-stats - float: left - li - display: inline-block - &.stat-count - font-weight: 700 - font-size: 11px - float: left - line-height: 20px - color: llighten($dark-grey,30%) - span:last-child - padding-right: 5px - a - position: relative - text-decoration: none - display: inline-block - width: 20px - height: 20px - margin: 0 1px 0 0 - img - width: 20px - height: 20px - + float: left + li + display: inline-block + &.stat-count + font-weight: 700 + font-size: 11px + float: left + line-height: 20px + color: llighten($dark-grey,30%) + span:last-child + padding-right: 5px + a + position: relative + text-decoration: none + display: inline-block + width: 20px + height: 20px + margin: 0 1px 0 0 + img + width: 20px + height: 20px + .user-name-tooltip - display: none - position: absolute - background: lighten($main-color-dark,3%) - font-size: 12px - white-space: nowrap - padding: 3px 5px - color: #fff - top: -42px - left: 0px - &:after - content: "" - position: absolute - width: 0 - left: 4px - bottom: -5px - border-top: solid 5px lighten($main-color-dark,3%) - border-left: solid 5px transparent - border-right: solid 5px transparent + display: none + position: absolute + background: lighten($main-color-dark,3%) + font-size: 12px + white-space: nowrap + padding: 3px 5px + color: #fff + top: -42px + left: 0px + &:after + content: "" + position: absolute + width: 0 + left: 4px + bottom: -5px + border-top: solid 5px lighten($main-color-dark,3%) + border-left: solid 5px transparent + border-right: solid 5px transparent .post-stats a:hover .user-name-tooltip - display: inline-block + display: inline-block .post-replies .sub-replies - border-left: solid 3px $main-color-color - margin-left: 1px + border-left: solid 3px $main-color-color + margin-left: 1px @@ -313,16 +315,16 @@ /* MODAL */ .modal-content - .postboard - width: auto!important - padding: 0 - clear: none!important - position: relative - .post-text - margin: 0 0 0 40px - .post-photo - width: 30px - height: 30px - img - width: 100% - height: 100% \ No newline at end of file + .postboard + width: auto!important + padding: 0 + clear: none!important + position: relative + .post-text + margin: 0 0 0 40px + .post-photo + width: 30px + height: 30px + img + width: 100% + height: 100% From 98c875b2c2553fedc2cafc287b9f9ed5b179fabd Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 17:37:10 +0500 Subject: [PATCH 05/10] fix of RTF markup --- js/twister_formatpost.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index ad7e26d..661350d 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -360,13 +360,13 @@ function htmlFormatMsg(msg, mentions) { } var mentionsChars = 'abcdefghijklmnopqrstuvwxyz_0123456789'; - var stopCharsTrailing = '/\\*.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; + var stopCharsTrailing = '/\\*~_-`.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; var stopCharsTrailingUrl = stopCharsTrailing.slice(1); var whiteSpaces = ' \f\n\r\t\v​\u00A0\u1680\u180E\u2000​\u2001\u2002​\u2003\u2004\u2005\u2006​\u2007\u2008​\u2009\u200A\u2028\u2029​\u202F\u205F\u3000'; var stopCharsLeft = '<' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces; var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; - var stopCharsMarkDown = '~_-`+=<>&' + stopCharsTrailing + whiteSpaces; + var stopCharsMarkDown = '+=<>&' + stopCharsTrailing + whiteSpaces; var j, str, strEncoded; var html = []; From 17328b0d7b16520ae84783747e791b545afe6f7a Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 20:10:59 +0500 Subject: [PATCH 06/10] make ` to be escaping character for any markup, fixes of post formatting --- js/twister_formatpost.js | 97 ++++++++++++++++++++++++---------------- 1 file changed, 59 insertions(+), 38 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 661350d..387f98a 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -237,7 +237,7 @@ function htmlFormatMsg(msg, mentions) { return false; } - var i, j, t; + var i, j, t, strEncoded; var w = false; var p = []; @@ -324,29 +324,50 @@ function htmlFormatMsg(msg, mentions) { } // changing the string - for (i = 0; i < p.length; i++) { - if (p[i].a > -1) { - if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) { - if (p[i].k > 1) - html.push('<' + tag + '>' + Array(p[i].k).join(chr)); - else - html.push('<' + tag + '>'); - } else if (p[i].t === 1 || (p[i].t === 0 && p[i].a < i)) { - if (p[i].k > 1) - html.push(Array(p[i].k).join(chr) + ''); - else - html.push(''); - } else { - if (p[i].k > 1) - html.push(Array(p[i].k + 1).join(chr)); - else - html.push(chr); + if (chr === '`') { + for (i = 0; i < p.length; i++) { + if (p[i].a > -1) { + if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) { + if (p[i].k > 1) + t = '<' + tag + '>' + Array(p[i].k).join(chr); + else + t = '<' + tag + '>'; + j = p[i].a; + t = t + str.slice(p[i].i + p[i].k, p[j].i); + if (p[j].k > 1) + t = t + Array(p[i].k).join(chr) + ''; + else + t = t + ''; + html.push(t.replace(/&(?!lt;|gt;)/g, '&')); + strEncoded = '>' + (html.length - 1).toString() + '<'; + str = str.slice(0, p[i].i) + strEncoded + str.slice(p[j].i + p[j].k); + t = strEncoded.length - p[j].i - p[j].k + p[i].i; + i = j; + for (j += 1; j < p.length; j++) + p[j].i += t; + } + } + } + } else { + for (i = 0; i < p.length; i++) { + if (p[i].a > -1) { + if (p[i].t === -1 || (p[i].t === 0 && p[i].a > i)) { + if (p[i].k > 1) + html.push('<' + tag + '>' + Array(p[i].k).join(chr)); + else + html.push('<' + tag + '>'); + } else if (p[i].t === 1 || (p[i].t === 0 && p[i].a < i)) { + if (p[i].k > 1) + html.push(Array(p[i].k).join(chr) + ''); + else + html.push(''); + } + strEncoded = '>' + (html.length - 1).toString() + '<'; + str = str.slice(0, p[i].i) + strEncoded + str.slice(p[i].i + p[i].k); + t = strEncoded.length - p[i].k; + for (j = i + 1; j < p.length; j++) + p[j].i += t; } - strEncoded = '>' + (html.length - 1).toString() + '<'; - str = str.slice(0, p[i].i) + strEncoded + str.slice(p[i].i + p[i].k); - l = strEncoded.length - p[i].k; - for (j = i + 1; j < p.length; j++) - p[j].i += l; } } @@ -365,19 +386,21 @@ function htmlFormatMsg(msg, mentions) { var whiteSpaces = ' \f\n\r\t\v​\u00A0\u1680\u180E\u2000​\u2001\u2002​\u2003\u2004\u2005\u2006​\u2007\u2008​\u2009\u200A\u2028\u2029​\u202F\u205F\u3000'; var stopCharsLeft = '<' + whiteSpaces; var stopCharsRight = '>' + whiteSpaces; - var stopCharsRightHashtags = stopCharsRight + stopCharsTrailing; + var stopCharsRightHashtags = '>/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011' // same as stopCharsTrailing but without '*~_-`' plus '>' + + whiteSpaces; var stopCharsMarkDown = '+=<>&' + stopCharsTrailing + whiteSpaces; - var j, str, strEncoded; + var i, j, k, str, strEncoded; var html = []; - msg = escapeHtmlEntities(msg); + msg = markdown(escapeHtmlEntities(msg), + '`', 'samp'); // kind of monospace, sequence of chars inside will be escaped from markup - for (var i = 0; i < msg.length - 7; i++) { + for (i = 0; i < msg.length - 7; i++) { if (msg.slice(i, i + 2) === '](') { // FIXME there can be text with [] inside [] or links with () wee need to handle it too j = getStrStart(msg, i - 1, '[', ''); if (j < i) { - var k = getStrEnd(msg, i + 2, ')', ''); + k = getStrEnd(msg, i + 2, ')', ''); if (k > i + 1) { html.push($('#external-page-link-template')[0].outerHTML .replace(/\bid\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('id') @@ -425,12 +448,12 @@ function htmlFormatMsg(msg, mentions) { } } - for (var i = 1; i < msg.length - 1; i++) { + for (i = 1; i < msg.length - 1; i++) { if (msg[i] === '@' && stopCharsLeft.indexOf(msg[i - 1]) === -1 && stopCharsTrailing.indexOf(msg[i - 1]) === -1 && stopCharsRight.indexOf(msg[i + 1]) === -1) { j = getStrStart(msg, i - 1, stopCharsLeft, stopCharsTrailing); if (j < i) { - var k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing); + k = getStrEnd(msg, i + 1, stopCharsRight, stopCharsTrailing); if (k > i) { str = msg.slice(j, k + 1); html.push($('#external-page-link-template')[0].outerHTML @@ -447,7 +470,7 @@ function htmlFormatMsg(msg, mentions) { } } - for (var i = 0; i < msg.length - 1; i++) { + for (i = 0; i < msg.length - 1; i++) { if (msg[i] === '@' && mentionsChars.indexOf(msg[i + 1].toLowerCase()) > -1) { for (j = i + 2; j < msg.length; j++) { if (mentionsChars.indexOf(msg[j].toLowerCase()) === -1) @@ -467,7 +490,7 @@ function htmlFormatMsg(msg, mentions) { } } - for (var i = 0; i < msg.length - 1; i++) { + for (i = 0; i < msg.length - 1; i++) { if (msg[i] === '#' && msg[i + 1] !== '#' && stopCharsRight.indexOf(msg[i + 1]) === -1) { j = getStrEnd(msg, i + 1, stopCharsRightHashtags, stopCharsTrailing); if (j > i) { @@ -485,21 +508,20 @@ function htmlFormatMsg(msg, mentions) { } } - msg = markdown(markdown(markdown(markdown(markdown(msg, + msg = markdown(markdown(markdown(markdown(msg, '*', 'b'), // bold '~', 'i'), // italic '_', 'u'), // underlined - '-', 's'), // striketrough - '`', 'samp') // kind of monospace + '-', 's') // striketrough .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/"/g, '"') .replace(/'/g, ''') ; - for (var i = 0; i < msg.length - 2; i++) { + for (i = 0; i < msg.length - 2; i++) { if (msg[i] === '>') { - for (var j = i + 2; j < msg.length; j++) { + for (j = i + 2; j < msg.length; j++) { if (msg[j] === '<') break; } @@ -514,7 +536,6 @@ function htmlFormatMsg(msg, mentions) { // TODO: add options for emotions; msg = $.emotions(msg); // TODO make markdown optionally mutable ? - // some escaping tag return msg; } From 4eb9ab921363c67b91fb17dc90d05b0c772ada21 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Tue, 14 Jul 2015 23:47:24 +0500 Subject: [PATCH 07/10] more fixes of post formatting --- js/twister_formatpost.js | 86 ++++++++++++++++++++++++---------------- 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 387f98a..3a6b0aa 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -237,7 +237,7 @@ function htmlFormatMsg(msg, mentions) { return false; } - var i, j, t, strEncoded; + var i, j, t, l, r, strEncoded; var w = false; var p = []; @@ -248,39 +248,54 @@ function htmlFormatMsg(msg, mentions) { if (str[j] !== chr) break; } - if (whiteSpaces.indexOf(str[i - 1]) === -1 || whiteSpaces.indexOf(str[j]) === -1) { - if (whiteSpaces.indexOf(str[i - 1]) > -1 || i === 0) - t = -1; - else if (whiteSpaces.indexOf(str[j]) > -1 || i === str.length - 1) - t = 1; - else if (stopCharsMarkDown.indexOf(str[i - 1]) > -1) { - if (stopCharsMarkDown.indexOf(str[j]) === -1) - t = -1; - else { - for (t = j + 1; t < str.length; t++) { - if (whiteSpaces.indexOf(str[t]) > -1) { - if ((2 * j - t) < 0 || whiteSpaces.indexOf(str[2 * j - t]) === -1) { - t = 1; - break; - } - } else if (stopCharsMarkDown.indexOf(str[t]) === -1) { - if ((2 * j - t) < 0 || whiteSpaces.indexOf(str[2 * j - t]) > -1) { - t = -1; - break; - } - } + // ***. hey *stupid* + if (i === 0) { + p.push({i: i, k: j - i, t: -1, w: w, a: -1, p: -1}); + w = false; + } else if (j === str.length) { + p.push({i: i, k: j - i, t: 1, w: w, a: -1, p: -1}); + w = false; + } else { + if (stopCharsMarkDown.indexOf(str[i - 1]) > -1) { + l = 1; + for (t = i - 2; t > -1; t--) { + if (stopCharsMarkDown.indexOf(str[t]) === -1) { + l = whiteSpacesMarkDown.indexOf(str[t]); + break; + } + } + } else + l = whiteSpacesMarkDown.indexOf(str[i - 1]); + if (stopCharsMarkDown.indexOf(str[j]) > -1) { + r = 1; + for (t = j + 1; t < str.length; t++) { + if (stopCharsMarkDown.indexOf(str[t]) === -1) { + r = whiteSpacesMarkDown.indexOf(str[t]); + break; } - if (t = str.length) - t = 1; } - } else if (stopCharsMarkDown.indexOf(str[j]) > -1) - t = 1; - else - t = 0; - p.push({i: i, k: j - i, t: t, w: w, a: -1, p: -1}); + } else + r = whiteSpacesMarkDown.indexOf(str[j]); + if (l > -1) { + if (r > -1) { + if (j - i > 2) { + l = p.push({i: i, k: j - i - 1, t: -1, w: w, a: -1, p: -1}) - 1; + p[l].a = p.push({i: j - 1, k: 1, t: 1, w: false, a: l, p: -1}) - 1; + } + t = 10; + } else + t = -1; + } else { + if (r > -1) + t = 1; + else + t = 0; + } + if (t !== 10) + p.push({i: i, k: j - i, t: t, w: w, a: -1, p: -1}); w = false; } - i = j; + i = j - 1; } else if (!w && whiteSpaces.indexOf(str[i]) > -1) { w = true; } @@ -341,10 +356,10 @@ function htmlFormatMsg(msg, mentions) { html.push(t.replace(/&(?!lt;|gt;)/g, '&')); strEncoded = '>' + (html.length - 1).toString() + '<'; str = str.slice(0, p[i].i) + strEncoded + str.slice(p[j].i + p[j].k); - t = strEncoded.length - p[j].i - p[j].k + p[i].i; + l = strEncoded.length - p[j].i - p[j].k + p[i].i; i = j; for (j += 1; j < p.length; j++) - p[j].i += t; + p[j].i += l; } } } @@ -364,9 +379,9 @@ function htmlFormatMsg(msg, mentions) { } strEncoded = '>' + (html.length - 1).toString() + '<'; str = str.slice(0, p[i].i) + strEncoded + str.slice(p[i].i + p[i].k); - t = strEncoded.length - p[i].k; + l = strEncoded.length - p[i].k; for (j = i + 1; j < p.length; j++) - p[j].i += t; + p[j].i += l; } } } @@ -388,7 +403,8 @@ function htmlFormatMsg(msg, mentions) { var stopCharsRight = '>' + whiteSpaces; var stopCharsRightHashtags = '>/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011' // same as stopCharsTrailing but without '*~_-`' plus '>' + whiteSpaces; - var stopCharsMarkDown = '+=<>&' + stopCharsTrailing + whiteSpaces; + var whiteSpacesMarkDown = whiteSpaces + '+=&/\\.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; + var stopCharsMarkDown = '*~_-`'; var i, j, k, str, strEncoded; var html = []; From c6c4531a11475d83df9d960e84dba44bf8e15eec Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 15 Jul 2015 11:19:58 +0500 Subject: [PATCH 08/10] fix of post formatting to handle sequence of markdown chars correctly --- js/twister_formatpost.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 3a6b0aa..9603a6e 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -259,7 +259,10 @@ function htmlFormatMsg(msg, mentions) { if (stopCharsMarkDown.indexOf(str[i - 1]) > -1) { l = 1; for (t = i - 2; t > -1; t--) { - if (stopCharsMarkDown.indexOf(str[t]) === -1) { + if (str[t] === chr) { + l = -1; + break; + } else if (stopCharsMarkDown.indexOf(str[t]) === -1) { l = whiteSpacesMarkDown.indexOf(str[t]); break; } @@ -269,7 +272,10 @@ function htmlFormatMsg(msg, mentions) { if (stopCharsMarkDown.indexOf(str[j]) > -1) { r = 1; for (t = j + 1; t < str.length; t++) { - if (stopCharsMarkDown.indexOf(str[t]) === -1) { + if (str[t] === chr) { + r = -1; + break; + } else if (stopCharsMarkDown.indexOf(str[t]) === -1) { r = whiteSpacesMarkDown.indexOf(str[t]); break; } From 45788ac9d67c3aff0b6f1b03e525e8f22ac141d6 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 15 Jul 2015 14:05:10 +0500 Subject: [PATCH 09/10] delete dev comment --- js/twister_formatpost.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 9603a6e..965a212 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -248,7 +248,6 @@ function htmlFormatMsg(msg, mentions) { if (str[j] !== chr) break; } - // ***. hey *stupid* if (i === 0) { p.push({i: i, k: j - i, t: -1, w: w, a: -1, p: -1}); w = false; From 72e47e0de449c7d5da32b81bb6e11c184d4b6c89 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Wed, 15 Jul 2015 16:24:56 +0500 Subject: [PATCH 10/10] fix of post formatting to parse ~markdown~ inside [] of link definition --- js/twister_formatpost.js | 54 ++++++++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 965a212..6c00a41 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -400,6 +400,24 @@ function htmlFormatMsg(msg, mentions) { return '>' + (html.length - 1).toString() + '<'; } + function unpackHtml(str) { + var t; + + for (var i = 0; i < str.length - 2; i++) { + if (str[i] === '>') { + for (var j = i + 2; j < str.length; j++) { + if (str[j] === '<') + break; + } + t = html[parseInt(str.slice(i + 1, j))]; + str = str.slice(0, i) + t + str.slice(j + 1); + i = i + t.length - 1; + } + } + + return str; + } + var mentionsChars = 'abcdefghijklmnopqrstuvwxyz_0123456789'; var stopCharsTrailing = '/\\*~_-`.,:;?!%\'"[](){}^|«»…\u201C\u201D\u2026\u2014\u4E00\u3002\uFF0C\uFF1A\uFF1F\uFF01\u3010\u3011'; var stopCharsTrailingUrl = stopCharsTrailing.slice(1); @@ -427,7 +445,16 @@ function htmlFormatMsg(msg, mentions) { .replace(/\bid\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('id') //.replace(/\bhref\s*=\s*"[^]*?"+/ig, '') // $().removeAttr('href') .replace(/)[^]*?(<\/a>)/ig, '$1' + msg.slice(j, i) + '$2') // $().closest('a').text(url) + .replace(/()[^]*?(<\/a>)/ig, '$1' + + unpackHtml( + markdown(markdown(markdown(markdown(msg.slice(j, i), + '*', 'b'), // bold + '~', 'i'), // italic + '_', 'u'), // underlined + '-', 's') // striketrough + .replace(/&(?!lt;|gt;)/g, '&') + ) + + '$2') // $().closest('a').text(url) ); strEncoded = '>' + (html.length - 1).toString() + '<'; msg = msg.slice(0, j - 1) + strEncoded + msg.slice(k + 2); @@ -529,28 +556,17 @@ function htmlFormatMsg(msg, mentions) { } } - msg = markdown(markdown(markdown(markdown(msg, - '*', 'b'), // bold - '~', 'i'), // italic - '_', 'u'), // underlined - '-', 's') // striketrough + msg = unpackHtml( + markdown(markdown(markdown(markdown(msg, + '*', 'b'), // bold + '~', 'i'), // italic + '_', 'u'), // underlined + '-', 's') // striketrough .replace(/\(\d{1,2}\/\d{1,2}\)$/, htmlSplitCounter) .replace(/&(?!lt;|gt;)/g, '&') // FIXME in many cases there is no need to escape ampersand in HTML 5 .replace(/"/g, '"') .replace(/'/g, ''') - ; - - for (i = 0; i < msg.length - 2; i++) { - if (msg[i] === '>') { - for (j = i + 2; j < msg.length; j++) { - if (msg[j] === '<') - break; - } - str = html[parseInt(msg.slice(i + 1, j))]; - msg = msg.slice(0, i) + str + msg.slice(j + 1); - i = i + str.length - 1; - } - } + ); if ($.Options.displayLineFeeds.val === 'enable') msg = msg.replace(/\n/g, '
');