diff --git a/index.html b/index.html index 5d88e19c1e3b8c4cb9f3884f15ad4fb59bfeac7d..7562a6101f363816dd4d87cd16ef03a7c5114d01 100644 --- a/index.html +++ b/index.html @@ -34,10 +34,17 @@ <div id="wrapper"> <div id="input-div"> <h2 id="input-header">Input</h2> - <div id="input-buttons"> + <div id="input-controls"> <i class="fas fa-bold"></i> <i class="fas fa-italic"></i> <i class="fas fa-underline"></i> <i class="fas fa-font"></i> <i class="fas fa-align-left"></i> <i class="fas fa-align-center"></i> <i class="fas fa-align-right"></i> - <i class="fas fa-h1"></i> <i class="fas fa-h2"></i> <i class="fas fa-h3"></i> + <i class="fas fa-paragraph"></i> <i class="fas fa-list-ul"></i> <i class="fas fa-list-ol"></i> + <select id="heading-size"> + <option value="">Heading</option> + <option value="h1">Heading 1</option> + <option value="h2">Heading 2</option> + <option value="h3">Heading 3</option> + <option value="h4">Heading 4</option> + </select> </div> <textarea id="input-textarea" autocomplete="off" aria-labelledby="input-header"></textarea> </div> diff --git a/js/application.js b/js/application.js index 2e512cea4ea9fc3f82931634c7e7ad71abd115af..82a63b9baeda26b842c1e83ac113a50186f5f55b 100644 --- a/js/application.js +++ b/js/application.js @@ -7,9 +7,62 @@ $(document).ready(function () { //console.log('Alteration!') $('#output-pre').text($('#input-textarea').val()); }); - var buttonList = ['bold', 'italic']; - var $inBtns = $('#input-buttons'); + var buttonList = [ + { + 'type': 'icon', + 'icon': 'bold', + 'name': 'Bold', + 'id': 'bold', + 'onclick': function () { + return true; + } + }, + { + 'type': 'icon', + 'icon': 'italic', + 'name': 'Italic', + 'id': 'italic', + 'onclick': function () { + return true; + } + }, + { + 'type': 'drop', + 'id': 'header', + 'values': [ + { + 'name': 'Heading 1', + 'value': 'h1' + }, + { + 'name': 'Heading 2', + 'value': 'h2' + }, + ], + 'onchange': function () { + return true; + } + } + ]; + var $inBtns = $('#input-controls'); + $inBtns.html(''); buttonList.forEach(item => { - + switch (item.type) { + case 'icon': + var $btn = $('<button>'); + //<i class="fas fa-bold"></i> + var $i = $('<i>'); + $i.addClass('fas'); + $i.addClass('fa-' + item.icon); + $i.attr('id', 'in-icon-' + item.id); + $btn.attr('id', 'in-btn-' + item.id); + $btn.append($i); + $btn.on('click', item.onclick) + $inBtns.append($btn); + break; + case 'drop': + console.log(item); + break; + } }); }); \ No newline at end of file