Skip to content

Commit

Permalink
feat: allows custom sizes in lineheight plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-D
Alex-D committed Apr 30, 2019
1 parent 32c829f commit f00b2bc
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 25 deletions.
103 changes: 103 additions & 0 deletions docs/demos/plugins/lineheight.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line height plugin | Trumbowyg</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../../css/main.css">
</head>
<body class="documentation-body">
<div class="main main-demo-inner">
<section class="wrapper section">
<h2 class="section-title">Line height plugin</h2>

<div class="feature">
<h3>Basic usage</h3>
<p>
User can change the line-height in Trumbowyg.
</p>

<a href="../../documentation/plugins/#plugin-lineheight" class="button button-demo">Read font size plugin documentation</a>

<div id="editor">
<h2>Change the size!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
optio nam reiciendis eius beatae quibusdam!
</p>
</div>

<h4>The code</h4>
<pre><code class="js-code-to-eval javascript">
$('#editor')
.trumbowyg({
btns: [
['lineheight']
]
});
</code></pre>
</div>

<div class="feature">
<h3>Custom font sizes</h3>

<div id="editor-custom-font-sizes">
<h2>Change the font!</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident
optio nam reiciendis eius beatae quibusdam!
</p>
</div>

<h4>The code</h4>
<pre><code class="js-code-to-eval javascript">
$('#editor-custom-font-sizes')
.trumbowyg({
btns: [
['lineheight']
],
plugins: {
lineheight: {
sizeList: [
'14px',
'18px',
'22px'
]
}
}
});
</code></pre>
</div>

<div class="feature">
<h3>Setup</h3>

<h4>In head tag</h4>
<pre><code class="html loading-head">
</code></pre>
<h4>At the end of body</h4>
<pre><code class="html loading-body">
&lt;!-- Import jQuery -->
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script>
&lt;script>window.jQuery || document.write('&lt;script src="js/vendor/jquery-3.3.1.min.js">&lt;\/script>')&lt;/script>
</code></pre>
</div>
</section>
</div>


<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>

<!-- DO NOT COPY THESE LINES IN YOUR PROJECT, THEY ARE THERE JUST FOR THE EXAMPLE PAGE PURPOSE -->
<script src="../js/loader.js"></script>
<script>
loadStyle('dist/ui/trumbowyg.css');
loadScript('dist/trumbowyg.js', 'Import Trumbowyg');
loadScript('dist/plugins/lineheight/trumbowyg.lineheight.js', 'Import all plugins you want AFTER importing jQuery and Trumbowyg');
</script>
<script src="../js/runExampleCode.js"></script>
<script src="../js/highlight.js"></script>
</body>
</html>
63 changes: 38 additions & 25 deletions plugins/lineheight/trumbowyg.lineheight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,46 @@
en: {
lineheight: 'Line height',
lineheights: {
'0.9': 'Small',
'0.9': 'Small',
'normal': 'Regular',
'1.5': 'Large',
'2.0': 'Extra large'
'1.5': 'Large',
'2.0': 'Extra large'
}
},
da: {
lineheight: 'Linjehøjde',
lineheights: {
'0.9': 'Lille',
'0.9': 'Lille',
'normal': 'Normal',
'1.5': 'Stor',
'2.0': 'Ekstra stor'
'1.5': 'Stor',
'2.0': 'Ekstra stor'
}
},
fr: {
lineheight: 'Hauteur de ligne',
lineheights: {
'0.9': 'Petit',
'normal': 'Regular',
'1.5': 'Grand',
'2.0': 'Très grand'
'0.9': 'Petite',
'normal': 'Normale',
'1.5': 'Grande',
'2.0': 'Très grande'
}
},
nl: {
lineheight: 'Regelhoogte',
lineheights: {
'0.9': 'Klein',
'0.9': 'Klein',
'normal': 'Normaal',
'1.5': 'Groot',
'2.0': 'Extra groot'
'1.5': 'Groot',
'2.0': 'Extra groot'
}
},
tr: {
lineheight: 'Satır yüksekliği',
lineheights: {
'0.9': 'Küçük',
'0.9': 'Küçük',
'normal': 'Normal',
'1.5': 'Büyük',
'2.0': 'Çok Büyük'
'1.5': 'Büyük',
'2.0': 'Çok Büyük'
}
},
zh_tw: {
Expand All @@ -61,30 +61,44 @@
pt_br: {
lineheight: 'Altura de linha',
lineheights: {
'0.9': 'Pequena',
'0.9': 'Pequena',
'normal': 'Regular',
'1.5': 'Grande',
'2.0': 'Extra grande'
'1.5': 'Grande',
'2.0': 'Extra grande'
}
},
it: {
lineheight: 'Altezza linea',
lineheights: {
'0.9': 'Bassa',
'0.9': 'Bassa',
'normal': 'Normale',
'1.5': 'Alta',
'2.0': 'Molto alta'
'1.5': 'Alta',
'2.0': 'Molto alta'
}
},
}
});
// jshint camelcase:true

var defaultOptions = {
sizeList: [
'0.9',
'normal',
'1.5',
'2.0'
]
};

// Add dropdown with font sizes
$.extend(true, $.trumbowyg, {
plugins: {
lineheight: {
init: function (trumbowyg) {
trumbowyg.o.plugins.lineheight = $.extend({},
defaultOptions,
trumbowyg.o.plugins.lineheight || {}
);

trumbowyg.addBtnDef('lineheight', {
dropdown: buildDropdown(trumbowyg)
});
Expand All @@ -96,11 +110,10 @@
// Build the dropdown
function buildDropdown(trumbowyg) {
var dropdown = [];
var sizes = ['0.9', 'normal', '1.5', '2.0'];

$.each(sizes, function(index, size) {
$.each(trumbowyg.o.plugins.lineheight.sizeList, function(index, size) {
trumbowyg.addBtnDef('lineheight_' + size, {
text: '<span style="line-height: ' + size + ';">' + trumbowyg.lang.lineheights[size] + '</span>',
text: trumbowyg.lang.lineheights[size] || size,
hasIcon: false,
fn: function(){
trumbowyg.saveRange();
Expand Down

0 comments on commit f00b2bc

Please sign in to comment.