Add pager in gallery

Load 40 images for each pager.

system/admin/admin.php

@@ -1009,9 +1009,9 @@ function find_draft_page($static = null)
     $posts = get_draft_pages();
 
     $tmp = array();
-	
+
     $counter = config('views.counter');
-	
+
     if ($counter == 'true') {
         $viewsFile = "content/data/views.json";
         if (file_exists($viewsFile)) {
@@ -1079,9 +1079,9 @@ function find_draft_subpage($static = null, $sub_static = null)
     $posts = get_draft_subpages($static);
 
     $tmp = array();
-	
+
     $counter = config('views.counter');
-	
+
     if ($counter == 'true') {
         $viewsFile = "content/data/views.json";
         if (file_exists($viewsFile)) {
@@ -1626,3 +1626,27 @@ function reorder_subpages($subpages = null)
 
     rebuilt_cache();
 }
+
+// Return image gallery in pager.
+function image_gallery($images, $page = 1, $perpage = 0) 
+{
+    if (empty($images)) {
+        $images = get_gallery();
+    }
+    $pagination = has_pagination(count($images), $perpage, $page);    
+    $tmp = '';
+    $images = array_slice($images, ($page - 1) * $perpage, $perpage);
+    $tmp .= '<div class="cover-container">';
+    foreach ($images as $index => $v) {
+        $tmp .= '<div class="cover-item"><img loading="lazy" class="img-thumbnail the-img" src="' . site_url() . $v['dirname'] . '/'. $v['basename'].'"></div>';
+    }
+    $tmp .= '</div><br><div class="row">';
+    if (!empty($pagination['prev'])) {
+        $tmp .= '<a class="btn btn-primary left" href="#'. $page - 1 .'" onclick="loadImages(' . $page - 1 . ')">← '. i18n('Prev') .'</a>';    
+    }
+    if (!empty($pagination['next'])) {
+        $tmp .= '<a class="btn btn-primary right" href="#'. $page + 1 .'" onclick="loadImages(' . $page + 1 . ')">'. i18n('Next') .' →</a>';    
+    }
+    $tmp .= '</div>';
+    return $tmp;
+}

system/admin/editor/js/editor.js

@@ -11,6 +11,8 @@
         $('#insertImageDialogFile').val('');
         $('#insertMediaDialogURL').val('');
         $('#insertMediaDialogFile').val('');
+        $('#gallery-1').html(initial_image);
+        $('#gallery-2').html(initial_image);		
     };
     $('#insertImageDialogInsert').click( function() {
         callbackFunc( $('#insertImageDialogURL').val().length > 0 ? $('#insertImageDialogURL').val() : null );

system/admin/views/add-content.html.php

@@ -24,7 +24,7 @@ if (file_exists($tagslang)) {
     file_put_contents($tagslang, print_r($tmp, true), LOCK_EX);
 }
 
-$images = get_gallery();
+$images = image_gallery(null, 1, 40);
 
 ?>
 
@@ -227,18 +227,12 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-1">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -267,18 +261,12 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-2">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertMediaDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -301,12 +289,25 @@ $( function() {
 </div>
 
 <!-- Declare the base path. Important -->
-<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
+<script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
 <script>
-  $('.the-img').click(function(e) {
-    $('#insertMediaDialogURL').val($(e.target).attr('src'));
-    $('#insertImageDialogURL').val($(e.target).attr('src'));
+function loadImages(page) {
+  $.ajax({
+    url: '<?php echo site_url();?>admin/gallery',
+    type: 'POST',
+    data: { page: page },
+    dataType: 'json',
+      success: function(response) {
+        $('#gallery-1').html(response.images);
+        $('#gallery-2').html(response.images);
+      }
   });
+}
+
+$('.img-container').on("click", ".the-img", function(e) {
+  $('#insertMediaDialogURL').val($(e.target).attr('src'));
+  $('#insertImageDialogURL').val($(e.target).attr('src'));
+});
 </script>

system/admin/views/add-page.html.php

@@ -1,5 +1,5 @@
 <?php if (!defined('HTMLY')) die('HTMLy'); ?>
-<?php $images = get_gallery(); ?>
+<?php $images = image_gallery(null, 1, 40); ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
 <script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
 <script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script>
@@ -91,18 +91,12 @@
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-1">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -122,10 +116,24 @@
     </div>
 </div>
 <!-- Declare the base path. Important -->
-<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
+<script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script>
-  $('.the-img').click(function(e) {
-    $('#insertImageDialogURL').val($(e.target).attr('src'));
+function loadImages(page) {
+  $.ajax({
+    url: '<?php echo site_url();?>admin/gallery',
+    type: 'POST',
+    data: { page: page },
+    dataType: 'json',
+      success: function(response) {
+        $('#gallery-1').html(response.images);
+        $('#gallery-2').html(response.images);
+      }
   });
+}
+
+$('.img-container').on("click", ".the-img", function(e) {
+  $('#insertMediaDialogURL').val($(e.target).attr('src'));
+  $('#insertImageDialogURL').val($(e.target).attr('src'));
+});
 </script>

system/admin/views/edit-content.html.php

@@ -69,7 +69,7 @@ if (file_exists($tagslang)) {
     file_put_contents($tagslang, print_r($tmp, true), LOCK_EX);
 }
 
-$images = get_gallery();
+$images = image_gallery(null, 1, 40);
 
 ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@@ -278,18 +278,12 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-1">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -318,18 +312,12 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-2">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertMediaDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -351,12 +339,25 @@ $( function() {
     
 </div>
 <!-- Declare the base path. Important -->
-<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
+<script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
 <script>
-  $('.the-img').click(function(e) {
-    $('#insertMediaDialogURL').val($(e.target).attr('src'));
-    $('#insertImageDialogURL').val($(e.target).attr('src'));
+function loadImages(page) {
+  $.ajax({
+    url: '<?php echo site_url();?>admin/gallery',
+    type: 'POST',
+    data: { page: page },
+    dataType: 'json',
+      success: function(response) {
+        $('#gallery-1').html(response.images);
+        $('#gallery-2').html(response.images);
+      }
   });
-</script>
+}
+
+$('.img-container').on("click", ".the-img", function(e) {
+  $('#insertMediaDialogURL').val($(e.target).attr('src'));
+  $('#insertImageDialogURL').val($(e.target).attr('src'));
+});
+</script>

system/admin/views/edit-page.html.php

@@ -76,7 +76,7 @@ if ($type == 'is_frontpage') {
     }
 }
 
-$images = get_gallery();
+$images = image_gallery(null, 1, 40);
 
 ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@@ -184,18 +184,12 @@ $images = get_gallery();
                     </button>
                 </div>
                 <div class="modal-body">
-                    <?php if (!empty($images)) :?>
                     <div class="form-group">
-                        <div class="row-fluid cover-container">
-                            <?php foreach ($images as $img):?>
-                                <div class="cover-item">
-                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
-                                </div>
-                            <?php endforeach;?>
+                        <div class="row-fluid img-container" id="gallery-1">
+                            <?php echo $images;?>
                         </div>
                     </div>
                     <hr>
-                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -215,10 +209,24 @@ $images = get_gallery();
     </div>
 </div>
 <!-- Declare the base path. Important -->
-<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
+<script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script>
-  $('.the-img').click(function(e) {
-    $('#insertImageDialogURL').val($(e.target).attr('src'));
+function loadImages(page) {
+  $.ajax({
+    url: '<?php echo site_url();?>admin/gallery',
+    type: 'POST',
+    data: { page: page },
+    dataType: 'json',
+      success: function(response) {
+        $('#gallery-1').html(response.images);
+        $('#gallery-2').html(response.images);
+      }
   });
+}
+
+$('.img-container').on("click", ".the-img", function(e) {
+  $('#insertMediaDialogURL').val($(e.target).attr('src'));
+  $('#insertImageDialogURL').val($(e.target).attr('src'));
+});
 </script>

system/htmly.php

@@ -1824,6 +1824,14 @@ post('/admin/menu', function () {
     }
 });
 
+post('/admin/gallery', function () {
+
+    if (login()) {
+        $page = from($_REQUEST, 'page');
+        $images = image_gallery(null, $page, 40);
+        echo json_encode(array('images' => $images));
+    }
+});
 
 // Show category page
 get('/admin/categories', function () {

system/resources/js/media.uploader.js

@@ -8,6 +8,8 @@
         $('#insertImageDialogFile').val('');
         $('#insertMediaDialogURL').val('');
         $('#insertMediaDialogFile').val('');
+        $('#gallery-1').html(initial_image);
+        $('#gallery-2').html(initial_image);
     };
     $('#insertMediaDialogInsert').click( function() {
         $('.media-uploader').val('');