Skip to content

Commit

Permalink
added image viewer
Browse files Browse the repository at this point in the history
moved the inline js to perlite.js
  • Loading branch information
secure-77 committed Jun 23, 2021
1 parent cc06c9c commit 4038ea7
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 138 deletions.
145 changes: 145 additions & 0 deletions .js/perlite.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@


// get markdown content
function getContent(str) {
if (str.length == 0) {
document.getElementById("mdContent").innerHTML = "";
document.getElementsByClassName("modal-body")[0].innerHTML = "";
return;
} else {

$.ajax({url: "content.php?file=" + str, success: function(result){

// set content + fullscreen modal
$("#mdContent").html(result);
$("div.mdModalBody").html(result);
var title = $("div.mdTitleHide").first().html();
$("div.mdTitle").html(title);
$("h5.mdModalTitle").html(title);

// highlight code
hljs.highlightAll();

// run mobile settings
isMobile();

// Hide Search
$("#searchModal").modal("hide");

// Image Click
$(".pop").on("click", function() {
var path = $(this).find("img").attr("src");
$(".imagepreview").attr("src",path);
$("#imgModal").modal("show");
});
}});
}
};

// change mobile settings
function isMobile() {
var is_mobile = false;

if( $("div.no-mobile").css("display")=="none") {
is_mobile = true;
}

if (is_mobile == true) {
$("#contentModal").modal("show");
}
};


// search
function search(str) {
if (str.length == 0) {
document.getElementById("mdContent").innerHTML = "";
document.getElementsByClassName("modal-body")[0].innerHTML = "";
return;
} else {

$.ajax({url: "content.php?search=" + str, success: function(result){
$("div.searchModalBody").html(result);
var title = $("div.searchTitle").first().html();
$("h5.searchModalTitle").html(title);
hljs.highlightAll();
$("#searchModal").modal("show");
var lastSearch = $("div.lastSearch").first().html();
$("#showLastSearch").html(lastSearch);
}});
}
};


// theme toggle
$("#toggleTheme").change(function() {
if ($(this).prop("checked")) {
toggleTheme("light");
} else {
toggleTheme("dark");
}
});


function toggleTheme(mode) {

if (mode == "light") {

document.getElementById("highlight-js").setAttribute("href", ".styles/a11y-light.css");
document.getElementById("bootswatch-theme").setAttribute("href", ".styles/flatly.css");

replaceClass("link-light", "link-dark");
replaceClass("btn-close-light", "btn-close-dark");
replaceClass("navbar-dark", "navbar-light");
replaceClass("logo-light", "logo-dark");
replaceClass("btn-hover-dark", "btn-hover-light");

} else {

document.getElementById("highlight-js").setAttribute("href", ".styles/a11y-dark.css");
document.getElementById("bootswatch-theme").setAttribute("href", ".styles/darkly.css");

replaceClass("link-dark", "link-light");
replaceClass("btn-close-dark", "btn-close-light");
replaceClass("navbar-light", "navbar-dark");
replaceClass("logo-dark", "logo-light");
replaceClass("btn-hover-light", "btn-hover-dark");

}

}


function replaceClass(oldClass, newClass) {
var elem = $("."+oldClass);
console.log(elem);
elem.removeClass(oldClass);
elem.addClass(newClass);
}


// general stuff
$(document).ready(function() {
document.getElementById("f1").onsubmit = function() {

search(this.t1.value);
return false;
};

document.getElementById("showLastSearch").onclick = function () {
$("#searchModal").modal("show");
};

document.getElementById("about").onclick = function () {
$.ajax({url: "content.php?about", success: function(result){
$("div.aboutModalBody").html(result);
var title = $("div.searchTitle").first().html();
$("h5.aboutModalTitle").html("Perlite");
hljs.highlightAll();
$("#aboutModal").modal("show");
}});
};


});

5 changes: 5 additions & 0 deletions .styles/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
.btn-hover-dark:hover, .btn-hover-dark:focus {background-color: var(--bs-dark);}


#imgContainer {
text-align: center;
background-color: transparent;
}

.markdown {
height: auto;
overflow: auto;
Expand Down
4 changes: 2 additions & 2 deletions content.php
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ function parseContent($requestFile) {
// get and parse the content
$content = getContent($requestFile);
$content = $Parsedown->text($content);
$content = str_replace('![[','<img class="images" alt="image not in same folder" src="' . $path .'/',$content);
$content = str_replace(']]','"/>',$content);
$content = str_replace('![[','<a href="#" class="pop"><img class="images" alt="image not in same folder" src="' . $path .'/',$content);
$content = str_replace(']]','"/></a>',$content);
$content = '<div class="mdTitleHide" style="display: none";>'.$cleanFile.'</div>' . $content;
echo $content;

Expand Down
149 changes: 13 additions & 136 deletions index.php
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,9 @@
</svg>
<span class="visually-hidden">Button</span>
</button>

</div>
</div>

</div>
</div>



</nav>
</header>

Expand Down Expand Up @@ -83,6 +78,8 @@
</div>
</div>
</main>
';?>


<!-- Modals -->
<div class="modal fade" id="contentModal" tabindex="-1" aria-labelledby="contentModal" aria-hidden="true">
Expand Down Expand Up @@ -123,141 +120,21 @@
</div>
</div>

<div class="modal fade" id="imgModal" tabindex="-1" aria-labelledby="imgModal" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div id="imgContainer" class="modal-content">
<div class="modal-body imgModalBody" onclick="$('#imgModal').modal('hide');">
<img src="" class="imagepreview" style="" >
</div>
</div>
</div>
</div>


<script>
function getContent(str) {
if (str.length == 0) {
document.getElementById("mdContent").innerHTML = "";
document.getElementsByClassName("modal-body")[0].innerHTML = "";
return;
} else {
$.ajax({url: "content.php?file=" + str, success: function(result){
$("#mdContent").html(result);
$("div.mdModalBody").html(result);
var title = $("div.mdTitleHide").first().html();
$("div.mdTitle").html(title);
$("h5.mdModalTitle").html(title);
hljs.highlightAll();
isMobile();
$("#searchModal").modal("hide");
}});
}
};
function isMobile() {
var is_mobile = false;
if( $("div.no-mobile").css("display")=="none") {
is_mobile = true;
}
if (is_mobile == true) {
$("#contentModal").modal("show");
}
};
function search(str) {
if (str.length == 0) {
document.getElementById("mdContent").innerHTML = "";
document.getElementsByClassName("modal-body")[0].innerHTML = "";
return;
} else {
$.ajax({url: "content.php?search=" + str, success: function(result){
$("div.searchModalBody").html(result);
var title = $("div.searchTitle").first().html();
$("h5.searchModalTitle").html(title);
hljs.highlightAll();
$("#searchModal").modal("show");
var lastSearch = $("div.lastSearch").first().html();
$("#showLastSearch").html(lastSearch);
}});
}
};
$("#toggleTheme").change(function() {
if ($(this).prop("checked")) {
toggleTheme("light");
} else {
toggleTheme("dark");
}
});
function toggleTheme(mode) {
if (mode == "light") {
document.getElementById("highlight-js").setAttribute("href", ".styles/a11y-light.css");
document.getElementById("bootswatch-theme").setAttribute("href", ".styles/flatly.css");
replaceClass("link-light", "link-dark");
replaceClass("btn-close-light", "btn-close-dark");
replaceClass("navbar-dark", "navbar-light");
replaceClass("logo-light", "logo-dark");
replaceClass("btn-hover-dark", "btn-hover-light");
} else {
document.getElementById("highlight-js").setAttribute("href", ".styles/a11y-dark.css");
document.getElementById("bootswatch-theme").setAttribute("href", ".styles/darkly.css");
replaceClass("link-dark", "link-light");
replaceClass("btn-close-dark", "btn-close-light");
replaceClass("navbar-light", "navbar-dark");
replaceClass("logo-dark", "logo-light");
replaceClass("btn-hover-light", "btn-hover-dark");
}
}
function replaceClass(oldClass, newClass) {
var elem = $("."+oldClass);
console.log(elem);
elem.removeClass(oldClass);
elem.addClass(newClass);
}
$(document).ready(function() {
document.getElementById("f1").onsubmit = function() {
search(this.t1.value);
return false;
};
document.getElementById("showLastSearch").onclick = function () {
$("#searchModal").modal("show");
};
document.getElementById("about").onclick = function () {
$.ajax({url: "content.php?about", success: function(result){
$("div.aboutModalBody").html(result);
var title = $("div.searchTitle").first().html();
$("h5.aboutModalTitle").html("Perlite");
hljs.highlightAll();
$("#aboutModal").modal("show");
}});
};
<script src=".js/perlite.js"></script>

});


</script>
';

?>
</body>
</html>

0 comments on commit 4038ea7

Please sign in to comment.