added: widget jadwal sholat

assets/css/widget.css

@@ -0,0 +1,94 @@
+.box-shalat {
+  position: relative;
+  height: 70px;
+  width: 100%;
+  border-radius: 10px;
+  background: #1B676B;
+  color: #efefef;
+  font-family: 'montserrat', sans-serif;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 3px 15px;
+  overflow: hidden;
+}
+
+.line {
+  position: relative;
+  height: 15px;
+  width: auto;
+  border-radius: 10px;
+  margin-left: 0px;
+}
+
+.line-short {
+  width: 250px;
+}
+
+.box-shalat::before {
+  content: '';
+  position: absolute;
+  background: url('../image/motif.png');
+  background-position: right bottom;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+}
+
+.shimmer {
+  background: #efefef;
+  background-image: linear-gradient(to right, #efefef 0%, #edeef1 20%, #f6f7f8 40%, #efefef 100%);
+  background-repeat: no-repeat;
+  background-size: cover;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+}
+
+.p-relative {
+  display: block;
+  position: relative;
+  height: 100%;
+  min-height: 180px;
+}
+
+.p-absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  z-index: 999;
+}
+
+.p-relative::after {
+  clear: both;
+  position: static;
+}
+
+.p-relative #jadwal-shalat {
+  background: linear-gradient(rgba(5,5,5,.7), transparent) !important;
+  padding-bottom: 60px !important;
+}
+.p-relative [data-name=kota] {
+  color: #efefef !important;
+}
+
+
+@keyframes placeholderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}

assets/js/widget.js

@@ -0,0 +1,36 @@
+$(document).ready(function () {
+	if ($('#jadwal-shalat').length) {
+
+		const BASE_API_URL = 'https://api.banghasan.com/'; 
+		const endpoint_nama_kota = `sholat/format/json/kota/kode/${KODE_KOTA}`;
+		const endpoint_jadwal = `sholat/format/json/jadwal/kota/${KODE_KOTA}/tanggal/${TANGGAL}`;
+
+		// get nama kota
+		$.ajax({
+			url: BASE_API_URL + endpoint_nama_kota,
+			type: 'get',
+			dataType: 'json',
+			crossDomain: true,
+			success: function (res) {
+				$('[data-name=kota]').html(res.kota[0].nama).removeClass('shimmer line-short');
+			}
+		});
+
+		// get jadwal sholat
+		$.ajax({
+			url: BASE_API_URL + endpoint_jadwal,
+			type: 'get',
+			dataType: 'json',
+			crossDomain: true,
+			success: function (res) {
+				$('.shimmer').removeClass('shimmer');
+				$('[data-name=imsak]').html(`<span class="small text-bold">Imsak</span><span>${res.jadwal.data.imsak}</span>`);
+				$('[data-name=subuh]').html(`<span class="small text-bold">Subuh</span><span>${res.jadwal.data.subuh}</span>`);
+				$('[data-name=dzuhur]').html(`<span class="small text-bold">Dzuhur</span><span>${res.jadwal.data.dzuhur}</span>`);
+				$('[data-name=ashar]').html(`<span class="small text-bold">Ashar</span><span>${res.jadwal.data.ashar}</span>`);
+				$('[data-name=maghrib]').html(`<span class="small text-bold">Maghrib</span><span>${res.jadwal.data.maghrib}</span>`);
+				$('[data-name=isya]').html(`<span class="small text-bold">Isya</span><span>${res.jadwal.data.isya}</span>`);
+			}
+		})
+	}
+})

layouts/arsip.tpl.php

@@ -18,6 +18,7 @@
 	</div>
 	<?php $this->load->view($folder_themes . '/commons/header') ?>
 	<?php $this->load->view($folder_themes . '/commons/nav') ?>
+	<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
 	<section id="main-content">
 		<main>
 			<div class="container">

layouts/gallery.tpl.php

@@ -18,6 +18,7 @@
 	</div>
 	<?php $this->load->view($folder_themes . '/commons/header') ?>
 	<?php $this->load->view($folder_themes . '/commons/nav') ?>
+	<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
 
 	<section id="main-content">
 		<main>

layouts/stat.tpl.php

@@ -18,6 +18,7 @@
 	</div>
 	<?php $this->load->view($folder_themes . '/commons/header') ?>
 	<?php $this->load->view($folder_themes . '/commons/nav') ?>
+	<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
 	<section id="main-content">
 		<main>
 			<div class="container">

layouts/sub_gallery.tpl.php

@@ -19,6 +19,7 @@
 	</div>
 	<?php $this->load->view($folder_themes . '/commons/header') ?>
 	<?php $this->load->view($folder_themes . '/commons/nav') ?>
+	<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
 
 	<section id="main-content">
 		<main>

partials/artikel.php

@@ -3,6 +3,8 @@
 <?php $this->load->view($folder_themes . '/commons/header') ?>
 <?php $this->load->view($folder_themes . '/commons/nav') ?>
 
+<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
+
 <section id="main-content">
 	<main>
 		<div class="container">

partials/content.php

@@ -1,11 +1,16 @@
 <?php  if(!defined('BASEPATH')) exit('No direct script access allowed'); ?>
 
 <div id="main-content">
-	<?php 
-		if ((empty($_GET['cari'])) && ((count($slide_galeri)>0 || count($slide_artikel)>0)) AND $this->uri->segment(2) != 'kategori') {
-			$this->load->view($folder_themes .'/partials/slider.php');
-		}
-	?>
+	<div class="p-relative">
+		<?php 
+			if ((empty($_GET['cari'])) && ((count($slide_galeri)>0 || count($slide_artikel)>0)) AND $this->uri->segment(2) != 'kategori') {
+				$this->load->view($folder_themes .'/partials/slider');
+			}
+		?>
+		<div class="p-absolute">
+			<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
+		</div>
+	</div>
 	<section id="artikel-area" class="py-3">
 		<div class="container">
 			<?php if(empty($_GET['cari']) AND $headline AND $this->uri->segment(2) != 'kategori') : ?>
@@ -147,6 +152,6 @@
 			</div>
 		</section>
 	<?php endif ?>
-	<?php if($transparansi) $this->load->view($folder_themes . '/partials/apbdesa.php', $transparansi) ?>
+	<?php if($transparansi) $this->load->view($folder_themes . '/partials/apbdesa', $transparansi) ?>
 </div>
 

partials/slider.php

@@ -1,16 +1,16 @@
 <?php  if(!defined('BASEPATH')) exit('No direct script access allowed'); ?>
 
 <?php if($slider_gambar['gambar']) : ?>
-	<section class="slider">
-		<div class="owl-carousel owl-theme" id="slides">
-			<?php foreach($slider_gambar['gambar'] as $data) : ?>
-				<?php $img = $slider_gambar['lokasi'] . 'sedang_' . $data['gambar']; ?>
-				<?php if(is_file($img)) : ?>
-					<div class="item">
-						<img data-src="<?= base_url($img) ?>" alt="<?= $data['judul'] ?>" class="img-fluid lazy">
-					</div>
-				<?php endif ?>
-			<?php endforeach ?>
+<section class="slider">
+	<div class="owl-carousel owl-theme" id="slides">
+		<?php foreach($slider_gambar['gambar'] as $data) : ?>
+		<?php $img = $slider_gambar['lokasi'] . 'sedang_' . $data['gambar']; ?>
+		<?php if(is_file($img)) : ?>
+		<div class="item">
+			<img data-src="<?= base_url($img) ?>" alt="<?= $data['judul'] ?>" class="img-fluid lazy">
 		</div>
-	</section>
+		<?php endif ?>
+		<?php endforeach ?>
+	</div>
+</section>
 <?php endif ?>

partials/statis.php

@@ -2,6 +2,7 @@
 
 <?php $this->load->view($folder_themes . '/commons/header') ?>
 <?php $this->load->view($folder_themes . '/commons/nav') ?>
+<?php $this->load->view($folder_themes . '/widgets/jadwal_shalat') ?>
 
 <section id="main-content">
 	<main>

template.php

@@ -5,6 +5,7 @@
 <head>
 	<?php $this->load->view($folder_themes .'/commons/meta') ?>
 	<?php $this->load->view($folder_themes .'/commons/source_css') ?>
+	<?php $this->load->view($folder_themes .'/commons/source_js') ?>
 </head>
 <body>
 	<div id="loader">
@@ -23,6 +24,5 @@
 			<?php $this->load->view($folder_themes .'/partials/content') ?>
 			<?php $this->load->view($folder_themes .'/commons/footer') ?>
 	<?php endif ?>
-	<?php $this->load->view($folder_themes .'/commons/source_js') ?>
 </body>
 </html>

widgets/jadwal_shalat.php

@@ -0,0 +1,41 @@
+<?php  if(!defined('BASEPATH')) exit('No direct script access allowed'); ?>
+<?php defined('JAKARTA', define('JAKARTA', 667)) ?>
+
+<link rel="stylesheet" href="<?= base_url("$this->theme_folder/$this->theme/assets/css/widget.min.css") ?>">
+<script>
+	const KODE_KOTA = "<?= config_item('kode_kota') ?: JAKARTA ?>";
+	const TANGGAL = "<?= date('Y-m-d') ?>";  
+</script>
+<script src="<?= base_url("$this->theme_folder/$this->theme/assets/js/widget.js") ?>"></script>
+
+<section id="jadwal-shalat" class="py-4 bg-white">
+	<div class="container">
+		<p class="font-weight-bold text-muted line line-short shimmer" data-name="kota"></p>
+		<div class="row">
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer" data-name="imsak">
+				</div>
+			</div>
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer"  data-name="subuh">
+				</div>
+			</div>
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer" data-name="dzuhur">
+				</div>
+			</div>
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer"  data-name="ashar">
+				</div>
+			</div>
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer"  data-name="maghrib">
+				</div>
+			</div>
+			<div class="col-lg-2 col-4 px-2 py-1">
+				<div class="box-shalat shimmer"  data-name="isya">
+				</div>
+			</div>
+		</div>
+	</div>
+</section>