From 9c9d1ddc4250d7b448a1845f3300df198272854a Mon Sep 17 00:00:00 2001 From: Pavel Kityan Date: Wed, 10 Sep 2014 16:43:20 +0400 Subject: [PATCH] refactoring for endings and its paddings --- README.md | 5 ++++ morfana.js | 54 +++++++++++++++++++++++++----------- tests/examples.html | 15 ++++++++++ tests/game.html | 31 --------------------- tests/markup_children.html | 2 +- tests/ok.html | 50 ++++++++++++++------------------- tests/scaled.html | 4 +-- tests/simple.long.thick.html | 46 ++++++++++++++++++++++++++++++ tests/simple.short.html | 2 +- 9 files changed, 129 insertions(+), 80 deletions(-) create mode 100644 tests/examples.html delete mode 100644 tests/game.html create mode 100644 tests/simple.long.thick.html diff --git a/README.md b/README.md index 91d6734..607a768 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,11 @@ Demo HTML document For more demos visit [official website](http://morfana.ru/) ##Changelog +`2.2.0b` / `10.09.2014` +- Code refactoring: adding paddings for '(zero)-ending' and positioning them +- Changed default of configp['zeroEndingWidthFactor'], now is 0.7 +- Added 'paddingFactor' to config, default is 0.2 + `2.1.1b` / `07.09.2014` - Added 'zeroEndingWidthFactor' to config - SVG for morpheme "ending" and "zero-ending" now contains not PATH but RECT diff --git a/morfana.js b/morfana.js index 9593e1d..015df4a 100644 --- a/morfana.js +++ b/morfana.js @@ -5,8 +5,8 @@ Copyright 2013-2014, Pavel Kityan (pavel@kityan.ru) Licensed under the MIT license. - Version: 2.1.2b - Build date: 7 September 2014 + Version: 2.2.0b + Build date: 10 September 2014 */ (function (root, factory) { @@ -35,7 +35,8 @@ configure({ strokeWidth: 1.5, // px stroke: 'rgb(150,150,150)', disablePointerEvents: true, // add pointer-events: none to each svg - zeroEndingWidthFactor: 0.43 // now: width of "zero-ending" = data.height * zeroEndingWidthFactor + 9 + zeroEndingWidthFactor: 0.7, // now: width of "zero-ending" = data.height * zeroEndingWidthFactor + paddingFactor: 0.2 // now: width of padding for "ending" = data.height * paddingFactor }); // Queue - array for processing words with setInterval() @@ -63,7 +64,6 @@ $(document).ready(function(){ }); - /** * Wrap letter into spans with paddings. Called by wrapPaddings(). */ @@ -72,7 +72,10 @@ function wrapPadding(data, letterIndex, paddingType){ rng.setStart(data.maps.actual[letterIndex].element, data.maps.actual[letterIndex].index); rng.setEnd(data.maps.actual[letterIndex].element, data.maps.actual[letterIndex].index+1); var newNode = document.createElement('span'); - var val = Math.ceil((paddingType == 'after')?(data.height * config['zeroEndingWidthFactor'] + 14):5); // padding params in px + var val = Math.ceil((paddingType == 'after') + ? (data.height * config['zeroEndingWidthFactor'] + data.height * config['paddingFactor'] + config['strokeWidth']*2) + : ((data.height * config['paddingFactor']) + config['strokeWidth'])); // padding params in px + var side = (paddingType != 'start') ? 'right' : 'left'; $(newNode).css('padding-' + side, val + 'px'); $(newNode).addClass('morfana-paddings morfana-paddings-' + side); @@ -85,6 +88,7 @@ function wrapPadding(data, letterIndex, paddingType){ + /** * Create SVG for morpheme. Called by createImages(). */ @@ -102,24 +106,41 @@ function createImage(data, morphemeType, range)//morphemeType, obj, start, stop, switch (morphemeType) { case 'ok': + var isLastLetter = !data.letters[range[0]+1]; + var p = config['strokeWidth']; //config['paddingFactor']*h; if (range[1] != null){ // morpheme 'ending' - w = w + ((range[0] == range[1])?10:0); - x = x + ((range[0] != range[1])?5:0); - // compensate paddings for "ending" - x-=5; - if (range[0] != range[1]){ - x-=5; w+=10; - } + var ofs = h*config['paddingFactor']/2 + config['strokeWidth']*2; + x -= ofs; + w += ofs*2; + } else { // morpheme 'zero-ending' - w = h*config['zeroEndingWidthFactor'] + 9; - x = x + data.metrics[range[0]].w + 2; - + + if (isLastLetter){ + // is last word letter + //x = x + data.metrics[range[0]].w + h*config['paddingFactor']; + x = x + data.metrics[range[0]].w + (data.width - (x + data.metrics[range[0]].w))/2 - h*config['paddingFactor']*2; + + } else { + // not last word letter + x = x + data.metrics[range[0]].w + (data.metrics[range[0]+1].x - (x + data.metrics[range[0]].w))/2 - h*config['paddingFactor']*2; + } + + w = h*config['zeroEndingWidthFactor'] + config['strokeWidth']*2; // we have 'ending' stop on this letter and 'zero-ending' after this letter. // nonsense, but try to show it correctly. if (data.letters[range[0]].stop && data.letters[range[0]].stop['ok']){ - x+=5; + x += h*config['paddingFactor']/2; + if (isLastLetter){ + x += h*config['paddingFactor'] - config['strokeWidth']*2.5; + } + } + + // but if after 'zero-ending' goes 'edning' again (nonsense too!) clear this: + if (data.letters[range[0]+1] && data.letters[range[0]+1].start && data.letters[range[0]+1].start['ok']){ + x -= h*config['paddingFactor']/2; } + } h*=1.35; @@ -247,6 +268,7 @@ function calculateMetrics(data, justHeightReturnWordHeight){ // setting line-height to normal, calculating word's height var h_lineHeightAsItWas = tmpDiv.height(); setAllChildren(tmpDiv, 'line-height', 'normal'); + data.width = tmpDiv.width(); // width of whole word data.height = tmpDiv.height(); data.heightDiff = h_lineHeightAsItWas - data.height; diff --git a/tests/examples.html b/tests/examples.html new file mode 100644 index 0000000..eeb8c41 --- /dev/null +++ b/tests/examples.html @@ -0,0 +1,15 @@ + + + + + + + + + + +
+

Этот пример иллюстрирует возможность разметки слов, находящихся в тексте. разлетаются · · · · · · · · разлетаться · · · · · · · · Разъярённый · · · · · · · · Вырасти · · · · · · · · Газопровод · · · · · · · · Двумястами. И еще несколько слов: Инопланетянин · · · · · · · · Изморось · · · · · · · · Ателье · · · · · · · · Ешь · · · · · · · · Ездить · · · · · · · · Десятиэтажный · · · · · · · · Заплыв · · · · · · · · юго-юго-восточный +

+ + \ No newline at end of file diff --git a/tests/game.html b/tests/game.html deleted file mode 100644 index a7bd506..0000000 --- a/tests/game.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - -

перпендикуляр

- - - - - - - diff --git a/tests/markup_children.html b/tests/markup_children.html index 8d8bd91..73d0432 100644 --- a/tests/markup_children.html +++ b/tests/markup_children.html @@ -5,7 +5,7 @@ - +