truncgit/citrus-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement helper functions and add branding assets for admin panel interface

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-28 22:34:17 +03:00
parent faa129a02a
commit 4ad58c1b84
20 changed files with 2785 additions and 2451 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/admin/dashboard/admin.blade.php
+142 -141
View File
@@ -1,167 +1,168 @@
<!-- pdf.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.10.377/build/pdf.min.js"></script>
<style>
.flowchart .page {
zoom: 50%;
transition:all .5s
}
.flowchart .page {
zoom: 50%;
transition: all .5s
}
</style>
<script>
$(function(){
var zoom = 50;
$(".zoomin").on("click", function(){
zoom = zoom + 10;
$(".flowchart .page").css("zoom", zoom + "%");
});
$(".zoomout").on("click", function(){
zoom = zoom - 10;
$(".flowchart .page").css("zoom", zoom + "%");
});
$(function () {
var zoom = 50;
$(".zoomin").on("click", function () {
zoom = zoom + 10;
$(".flowchart .page").css("zoom", zoom + "%");
});
});
$(".zoomout").on("click", function () {
zoom = zoom - 10;
$(".flowchart .page").css("zoom", zoom + "%");
});
});
</script>
<script>
$(function(){
const $pdf = '{{url("assets/diagram.pdf")}}';
$(function () {
const $pdf = '{{url("assets/diagram.pdf")}}';
const $initialState = {
pdfDoc: null,
currentPage: 1,
pageCount: 0,
zoom: 0.615,
};
const $initialState = {
pdfDoc: null,
currentPage: 1,
pageCount: 0,
zoom: 0.615,
};
// Render the page.
const renderPage = () => {
// Load the first page.
$initialState.pdfDoc
.getPage($initialState.currentPage)
.then((page) => {
console.log('page', page);
// Render the page.
const renderPage = () => {
// Load the first page.
$initialState.pdfDoc
.getPage($initialState.currentPage)
.then((page) => {
console.log('page', page);
const canvas = $('#canvas')[0];
const $ctx = canvas.getContext('2d');
const $viewport = page.getViewport({
scale: $initialState.zoom,
const canvas = $('#canvas')[0];
const $ctx = canvas.getContext('2d');
const $viewport = page.getViewport({
scale: $initialState.zoom,
});
canvas.height = $viewport.height;
canvas.width = $viewport.width;
// Render the PDF page into the canvas context.
const renderCtx = {
canvasContext: $ctx,
viewport: $viewport,
};
page.render(renderCtx);
$('#page_num').html($initialState.currentPage);
});
};
// Load the document.
pdfjsLib
.getDocument($pdf)
.promise.then((doc) => {
$initialState.pdfDoc = doc;
console.log('pdfDocument', $initialState.pdfDoc);
$('#page_count').html($initialState.pdfDoc.numPages);
renderPage();
})
.catch((err) => {
alert(err.message);
});
canvas.height = $viewport.height;
canvas.width = $viewport.width;
function showPrevPage() {
if ($initialState.pdfDoc === null || $initialState.currentPage <= 1)
return;
$initialState.currentPage--;
// Render the current page
$('#current_page').val($initialState.currentPage);
renderPage();
}
// Render the PDF page into the canvas context.
const renderCtx = {
canvasContext: $ctx,
viewport: $viewport,
};
function showNextPage() {
if (
$initialState.pdfDoc === null ||
$initialState.currentPage >=
$initialState.pdfDoc._pdfInfo.numPages
)
return;
page.render(renderCtx);
$initialState.currentPage++;
$('#current_page').val($initialState.currentPage);
renderPage();
}
$('#page_num').html($initialState.currentPage);
// Button events.
$('#prev-page').click(showPrevPage);
$('#next-page').click(showNextPage);
// Display a specific page.
$('#current_page').on('keypress', (event) => {
if ($initialState.pdfDoc === null) return;
// Get the key code.
const $keycode = event.keyCode ? event.keyCode : event.which;
if ($keycode === 13) {
// Get the new page number and render it.
let desiredPage = $('#current_page')[0].valueAsNumber;
$initialState.currentPage = Math.min(
Math.max(desiredPage, 1),
$initialState.pdfDoc._pdfInfo.numPages,
);
renderPage();
$('#current_page').val($initialState.currentPage);
}
});
};
// Load the document.
pdfjsLib
.getDocument($pdf)
.promise.then((doc) => {
$initialState.pdfDoc = doc;
console.log('pdfDocument', $initialState.pdfDoc);
// Zoom functionality.
$('#zoom_in').on('click', () => {
if ($initialState.pdfDoc === null) return;
$initialState.zoom *= 4 / 3;
$('#page_count').html($initialState.pdfDoc.numPages);
renderPage();
});
renderPage();
})
.catch((err) => {
alert(err.message);
$('#zoom_out').on('click', () => {
if ($initialState.pdfDoc === null) return;
$initialState.zoom *= 2 / 3;
renderPage();
});
});
function showPrevPage() {
if ($initialState.pdfDoc === null || $initialState.currentPage <= 1)
return;
$initialState.currentPage--;
// Render the current page
$('#current_page').val($initialState.currentPage);
renderPage();
}
function showNextPage() {
if (
$initialState.pdfDoc === null ||
$initialState.currentPage >=
$initialState.pdfDoc._pdfInfo.numPages
)
return;
$initialState.currentPage++;
$('#current_page').val($initialState.currentPage);
renderPage();
}
// Button events.
$('#prev-page').click(showPrevPage);
$('#next-page').click(showNextPage);
// Display a specific page.
$('#current_page').on('keypress', (event) => {
if ($initialState.pdfDoc === null) return;
// Get the key code.
const $keycode = event.keyCode ? event.keyCode : event.which;
if ($keycode === 13) {
// Get the new page number and render it.
let desiredPage = $('#current_page')[0].valueAsNumber;
$initialState.currentPage = Math.min(
Math.max(desiredPage, 1),
$initialState.pdfDoc._pdfInfo.numPages,
);
renderPage();
$('#current_page').val($initialState.currentPage);
}
});
// Zoom functionality.
$('#zoom_in').on('click', () => {
if ($initialState.pdfDoc === null) return;
$initialState.zoom *= 4 / 3;
renderPage();
});
$('#zoom_out').on('click', () => {
if ($initialState.pdfDoc === null) return;
$initialState.zoom *= 2 / 3;
renderPage();
});
});
</script>
<header>
<table class="table ">
<tr>
<td width="20%" style="vertical-align: middle">
<div class="btn-group">
<button class="btn btn-outline-primary" id="zoom_in">
<i class="fas fa-search-plus"></i>
</button>
<table class="table ">
<tr>
<td width="20%" style="vertical-align: middle">
<div class="btn-group">
<button class="btn btn-outline-primary" id="zoom_in">
<i class="fas fa-search-plus"></i>
</button>
<button class="btn btn-outline-primary" id="zoom_out">
<i class="fas fa-search-minus"></i>
</button>
</div>
</td>
<td width="60%" class="text-center"><img src="{{url("assets/logo.svg")}}" class="p-1" alt=""></td>
<td width="20%" style="vertical-align: bottom;font-size:16px">
</td>
</tr>
</table>
</header>
<button class="btn btn-outline-primary" id="zoom_out">
<i class="fas fa-search-minus"></i>
</button>
</div>
</td>
<td width="60%" class="text-center"><img src="{{url("assets/citrus-logos/citrus-yatay.svg")}}" class="p-1"
alt=""></td>
<td width="20%" style="vertical-align: bottom;font-size:16px">
</td>
</tr>
</table>
</header>
<div class="flowchart" style="overflow:auto;width:100%;height:80vh;margin-top:10px">
<!-- Canvas to place the PDF -->
<canvas id="canvas" class="canvas__container"></canvas>
</div>
<!-- Canvas to place the PDF -->
<canvas id="canvas" class="canvas__container"></canvas>
</div>