-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactoring for endings and its paddings
- Loading branch information
Showing
9 changed files
with
129 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,8 +5,8 @@ | |
| Copyright 2013-2014, Pavel Kityan ([email protected]) | ||
| 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; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | ||
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script> | ||
| <script type="text/javascript" src="./../morfana.js"></script> | ||
| </head> | ||
| <body style="font-size: 18px; text-transform: uppercase;"> | ||
|
|
||
| <div class="examples"> | ||
| <p>Этот пример иллюстрирует возможность разметки слов, находящихся в тексте. <span data-morfana-markup="pr:1-3;ko:4-6;su:7-7;ok:8-9;su:10-11;osL:1-7;osR:10-11;">разлетаются</span> · · · · · · · · <span data-morfana-markup="pr:1-3;ko:4-6;su:7-7;su:8-9;su:10-11;osL:1-7;osR:10-11;">разлетаться</span> · · · · · · · · <span data-morfana-markup="pr:1-4;ko:5-6;su:7-9;ok:10-11;os:1-9;">Разъярённый</span> · · · · · · · · <span data-morfana-markup="pr:1-2;ko:3-5;su:6-7;os:1-5;">Вырасти</span> · · · · · · · · <span data-morfana-markup="ko:1-3;pr:5-7;ko:8-10;ok:0;os:1-10;">Газопровод</span> · · · · · · · · <span data-morfana-markup="ko:1-2;ko:6-7;ok:3-5;ok:8-10;osL:1-2;osR:6-7;">Двумястами</span>. И еще несколько слов: <span data-morfana-markup="ko:1-2;ko:4-9;su:10-11;su:12-13;ok:0;os:1-13;">Инопланетянин</span> · · · · · · · · <span data-morfana-markup="pr:1-2;ko:3-8;ok:0;os:1-8">Изморось</span> · · · · · · · · <span data-morfana-markup="ko:1-6;os:1-6">Ателье</span> · · · · · · · · <span data-morfana-markup="ko:1-1;ok:2-3;os:1-1;">Ешь</span> · · · · · · · · <span data-morfana-markup="ko:1-3;su:4-4;su:5-6;os:1-4;">Ездить</span> · · · · · · · · <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;osL:1-5;osR:7-11">Десятиэтажный</span> · · · · · · · · <span data-morfana-markup="pr:1-2;ko:3-5;su:6-6;ok:6-0;os:1-6;">Заплыв</span> · · · · · · · · <span data-morfana-markup="ko:1-2;ko:5-6;ko:9-14;su:15-15;ok:16-17;os:1-15;">юго-юго-восточный</span> | ||
| </div> | ||
|
|
||
| </body></html> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | ||
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script> | ||
| <script type="text/x-morfana-config">Morfana.configure({autoStart: false, strokeWidth: 3});</script> | ||
| <script type="text/javascript" src="./../morfana.js"></script> | ||
| <script type="text/javascript">$(document).ready(function(){$('.destination').html($('.source').html()); Morfana.draw();});</script> | ||
| <style> | ||
| div {border: 1px dashed #FF00FF; float: left; margin: 25px; padding: 25px; width: 500px;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="source"> | ||
| <span data-morfana-markup="ko: 1 - 4; | ||
| ko:5-9; | ||
| ok:10-10;">Авиапо́чта</span> | ||
| <span data-morfana-markup="ok:3-5;ok:9-12;ko:1-2;ko:6-8;">двумя́ста́ми</span> / слова без разметки / слова без разметки / | ||
| <span data-morfana-markup="ok:4-6;ok:12-15;ko:1-2;ko:9-10;">дв-умя́-ст-а́ми</span> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11">десятиэтажных</span> | ||
| <span data-morfana-markup="ko:1-5;su:6-8;ok:9-10">деревянных</span> / слова без разметки / слова без разметки / | ||
| <span data-morfana-markup="pr:1-2;ko:3-4;su:5-5;su:6-6;ok:7-7">затмила</span> | ||
| <span data-morfana-markup="ko:1-4;ok:0;os:1-4;">пять</span> / слова без разметки / слова без разметки / | ||
| <span data-morfana-markup="ko:1-5;ok:6-8">лебеде́й</span> / слова без разметки / слова без разметки / | ||
| <span data-morfana-markup="ko:1-4;ko:6-8;ok:0;">Иван-чай</span><br><br> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11">дес<span style="letter-spacing: 10px;">яти<b>этажны</b>х</span></span><br> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11" style="letter-spacing: 10px;">д<span style="letter-spacing: 5px;"><span style="color: red;">еся</span>ти<b>этажны</b>х</span></span><br> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11">д<span style="font-size: 0.5em;">есятиэта</span>жных</span><br> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11" style="font-size: 0.3em;">д<span style="font-size: 2.5em;">есятиэта</span>жных</span> | ||
| <br><br> | ||
| <span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;os:1-11"><strong>десят</strong>и<span style="color: #FF00FF;">этаж</span>ный</span> | ||
| </div> | ||
| <div class="destination" style="font-family: Verdana; font-size: 12pt; line-height: 25px;"></div> | ||
| <div class="destination" style="font-family: Verdana; font-size: 12pt;"></div> | ||
| <div class="destination" style="font-family: Verdana; font-size: 12pt; text-transform: uppercase;"></div> | ||
| <div class="destination" style="font-family: Times New Roman; font-size: 14pt;"></div> | ||
| <div class="destination" style="font-family: monospace; font-size: 14pt;"></div> | ||
| <div class="destination" style="font-family: Arial; font-size: 14pt;"></div> | ||
| <div class="destination" style="font-family: Georgia; font-size: 16pt;"></div> | ||
| <div class="destination" style="font-family: Verdana; font-size: 30pt;"></div> | ||
| <div class="destination" style="font-family: Verdana; font-size: 8pt;"></div> | ||
| <div class="destination" style="font-family: Comic Sans MS; font-size: 12pt;"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters