Skip to content

Commit

Permalink
Merge pull request #29 from Roky97/toolbar-2.4
Browse files Browse the repository at this point in the history 
Toolbar 2.4
  • Loading branch information
@stefanogermano
stefanogermano authored Mar 22, 2020
2 parents 4f42e68 + 06d0ffb commit 555570a
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 55 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "LoIDE",
"version": "2.3",
"version": "2.4",
"description": "Web-based IDE for Logic Programming",
"main": "app.js",
"scripts": {
Expand Down
4 changes: 3 additions & 1 deletion resources/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ a[role="button"]:focus {
}

#input-select {
cursor: pointer;
position: relative;
text-align: center;
vertical-align: middle;
Expand All @@ -209,6 +210,7 @@ a[role="button"]:focus {

#files {
display: inline-block;
cursor: pointer;
}

#setting-editor>.modal-dialog>.modal-content>.modal-body>.row {
Expand Down Expand Up @@ -363,7 +365,7 @@ label[for=btn-download] {
border-top-right-radius: 0.5rem;
}

.toast {
#toast-container {
position: absolute;
z-index: 1060;
top: 0;
Expand Down
59 changes: 33 additions & 26 deletions resources/index.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,28 +27,30 @@
</head>

<body>
<div id="notification" class="toast hidden" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fa fa-exclamation-circle"></i>
<strong class="mr-auto ml-2">LoIDE</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div id="notidication-body" class="toast-body"></div>
</div>
<div id="notification-project" class="toast hidden" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fa fa-exclamation-circle"></i>
<strong class="mr-auto ml-2">LoIDE - Project found</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div id="toast-container">
<div id="notification-project" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fa fa-exclamation-circle"></i>
<strong class="mr-auto ml-2">LoIDE - Project found</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
<p>Maybe you were working on a project.<br>Do you wish to continue? </p>
<button id="load-project" type="button" class="btn btn-primary btn-sm btn-block">Yes</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-dismiss="toast" aria-label="Close">No</button>
</div>
</div>
<div class="toast-body">
<p>Maybe you were working on a project.<br>Do you wish to continue? </p>
<button id="load-project" type="button" class="btn btn-primary btn-sm btn-block">Yes</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-dismiss="toast" aria-label="Close">No</button>
<div id="notification" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fa fa-exclamation-circle"></i>
<strong class="mr-auto ml-2">LoIDE</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div id="notidication-body" class="toast-body"></div>
</div>
</div>
<nav class="navbar navbar-expand-sm navbar-light ">
Expand Down Expand Up @@ -188,12 +190,17 @@
</li>
</ul>
<div class="col-xs-12 ml-auto text-center toolbar">
<button id="btn-dwn-this-lp" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Download this logic program" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-download" aria-hidden="true"></i></button>
<div class="undo-redo btn-group" role="group">
<button id="btn-cut" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Cut" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-scissors" aria-hidden="true"></i></button>
<button id="btn-copy" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Copy" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button id="btn-paste" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Paste" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-clipboard" aria-hidden="true"></i></button>
</div>
<button id="btn-search" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Search / Replace" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-search" aria-hidden="true"></i></button>
<div class="undo-redo btn-group" role="group">
<button id="btn-undo" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Undo" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-arrow-left"></i></button>
<button id="btn-redo" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Redo" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-arrow-right"></i></button>
<button id="btn-undo" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Undo" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-undo" aria-hidden="true"></i></button>
<button id="btn-redo" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Redo" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-repeat" aria-hidden="true"></i></button>
</div>
<button id="btn-run-thistab" type="button" class="btn btn-light" data-toggle="tooltip" data-placement="bottom" title="Run this tab" data-delay='{"show":"700", "hide":"0"}'><i class="fa fa-play"></i></button>
<!--<button id="btn-share-tab" type="button" class="btn btn-light popover-share" data-content="none"><i class="fa fa-share-alt"></i></button>-->
</div>
</div>
<!-- Tab panes -->
Expand Down Expand Up @@ -384,4 +391,4 @@

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
</body>
</html>
</html>
118 changes: 91 additions & 27 deletions resources/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,27 @@

})(jQuery);

/**
* @param {string} str - text to copy
* @description Copy a string to clipboard
*/
function copyStringToClipboard (str) {
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}

/**
* @param {json} result - description of the problem
* @description Open a container to display the result
Expand Down Expand Up @@ -109,6 +130,9 @@ var defaultDarkTheme = "ace/theme/idle_fingers";
editors = {};
setUpAce(idEditor, "");

var searchBoxOpened = false;


/**
* @global
* @description default size of the mobile max window width
Expand Down Expand Up @@ -1687,39 +1711,24 @@ function inizializePopovers(){
if(localStorage.getItem('mode') === 'dark') {
$('#btn-copy-link').removeClass('btn-outline-dark');
$('#btn-copy-link').addClass('btn-outline-light');
// $('#share-btn-download').removeClass('btn-outline-dark');
// $('#share-btn-download').addClass('btn-outline-light');
}
else{
$('#btn-copy-link').removeClass('btn-outline-light');
$('#btn-copy-link').addClass('btn-outline-dark');
// $('#share-btn-download').removeClass('btn-outline-light');
// $('#share-btn-download').addClass('btn-outline-dark');
}

$('#link-to-share').val("Loading...");
createURL();

// $('#share-btn-download').on('click',function () {
// var text = editors[idEditor].getValue();
// var TabToDownload = $('#' + idEditor).parent().attr('id');
// var nameTab = $(".btn-tab[data-target='#" + TabToDownload +"']");
// var string = nameTab.text().replace(/\s/g,'');
// createFileToDownload(text,"local","LogicProgram_" + string,"txt");
// });
// $('#share-btn-save-on-cloud').on('click',function(){
// console.log("Download this on cloud");
// });
});

$('.popover-share').on('hidden.bs.popover', function(){
$('#btn-copy-link').off('click');
// $('#share-btn-download').off('click');
// $('#share-btn-save-on-cloud').off('click');
});
}

function inizializeToolbar() {

$('#btn-undo').on('click',function () {
var undoManager = editors[idEditor].session.getUndoManager();
if(undoManager.hasUndo()){
Expand All @@ -1735,11 +1744,73 @@ function inizializeToolbar() {

});

$('#btn-run-thistab').on('click',function () {
$("#output").empty();
$("#output").text("Sending..");
callSocketServer(true);
$('#btn-search').on('click',function () {

var searchPanel = $('#'+ idEditor).find('.ace_search');

if(searchPanel.length == 0) {
editors[idEditor].execCommand("find");
}
else {
if(searchPanel.css('display') == 'none') {
searchPanel.css('display', 'block');
}
else {
searchPanel.css('display', 'none');
}
}

});

$('#btn-copy').on('click', function () {
copyStringToClipboard(editors[idEditor].getCopyText());
editors[idEditor].focus();
});

$('#btn-cut').on('click', function () {
copyStringToClipboard(editors[idEditor].getCopyText());
editors[idEditor].execCommand("cut");
editors[idEditor].focus();
});

var ok = false;
try {
navigator.clipboard.readText();
ok = true;
}
catch (e) {
console.error('Clipboard API is not supported in this browser',e);
$('#btn-paste').remove();
}

if(ok) {
$('#btn-paste').on('click', function () {
navigator.clipboard.readText()
.then(text => {
editors[idEditor].insert(text);
})
.catch(err => {
// maybe user didn't grant access to read from clipboard
operation_alert({reason: 'Clipboard read error'});
console.error((err));
});
});
}

$('#btn-dwn-this-lp').on('click', function () {
var text = editors[idEditor].getValue();
var TabToDownload = $('#' + idEditor).parent().attr('id');
var nameTab = $(".btn-tab[data-target='#" + TabToDownload +"']");
var string = nameTab.text().replace(/\s/g,'');
createFileToDownload(text,"local","LogicProgram_" + string,"txt");
});

// TO-DO
// $('#btn-run-thistab').on('click',function () {
// $("#output").empty();
// $("#output").text("Sending..");
// callSocketServer(true);
// });
}

function inizializeSnippets() {
Expand Down Expand Up @@ -2250,13 +2321,6 @@ function setNotifications() {
$('#notification-project').toast({
delay: 10000,
});
$('.toast').on('show.bs.toast',function () {
$('.toast').removeClass('hidden');
});
$('.toast').on('hidden.bs.toast',function () {
$('.toast').addClass('hidden');
});

$('#load-project').on('click',function () {
loadProjectFromLocalStorage();
$('#notification-project').toast('hide');
Expand Down

0 comments on commit 555570a

Please sign in to comment.