Image slider

bug_attachments_slider.php

<?php // print_p($t_list_attachments);?>
<div ng-app="myCarouselApp" class="show-grid">
  <div ng-controller="CarouselCtrl" >
    <?php echo '<div class="hidden no-print" id="image_list">'. json_encode($t_list_attachments).'</div>';?>
    <div>
      <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" class="bg-danger">
        <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" class="bg-warning">
          <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
            <h4 class="text-success">Slide {{slide.id}}</h4>
            <p class="text-info">{{slide.text}}</p>
          </div>
        </uib-slide>
      </uib-carousel>
    </div>
    <div class="row">
      <div class="col-md-6">
        <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
        <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="noWrapSlides">
            Disable Slide Looping
          </label>
        </div>
      </div>
      <div class="col-md-6">
        Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval"> See bug_attachment_display.php for fullview, bug_attachments_slider.php for modification
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/development/mantisbt130/javascript/bug_view_attachments.js"></script>
 <?php // require_js( 'bug_view_attachments.js' );?>

bug_desc_api.php

<?php
# MantisBT - A PHP based bugtracking system

# MantisBT is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 2 of the License, or
# (at your option) any later version.
#
# MantisBT is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with MantisBT.  If not, see <http://www.gnu.org/licenses/>.
/**
* @package CoreAPI
 * @subpackage BUG_DESC_API
 * @copyright Copyright 2000 - 2002  Kenzaburo Ito - kenito@300baud.org
 * @copyright Copyright 2002  MantisBT Team - mantisbt-dev@lists.sourceforge.net
 * @copyright Copyright 2016 - ZeTek
 * @link github.com/zenithtekla
 * @uses core.php
 */

// require_once( 'core.php' );
$g_mantis_bug_text_table = 'mantis_bug_text_table ';
$g_emailreporting_table = 'mantis_plugin_emailreporting_msgids_table';

function get_issue_id ($s)
{
	GLOBAL $g_emailreporting_table;
	$query = 'SELECT issue_id
			FROM ' . $g_emailreporting_table . '
			WHERE issue_id ='. $s;
	$t_result = db_query_bound( $query );
	return string_display(db_fetch_array( $t_result ));
}

function ERP_bug_from_email( $p_bug_id ) {
	return $p_bug_id == get_issue_id ($p_bug_id);
}

function get_description($p_bug_id){
	GLOBAL $g_mantis_bug_text_table;
	try {
 		$query = 'SELECT description FROM ' . $g_mantis_bug_text_table . ' WHERE id='. $p_bug_id;
		$res = db_query_bound( $query );
		if (count($res)<1) throw new Exception('Query result NOT found');
		$result = db_fetch_array($res);
	} catch (Exception $e) {
		$result['description'] = $e->getMessage();
	}
	finally {
		return $result;
	}
}

// new methods
/**
 * Prints the list of visible attachments belonging to a given bug.
 * @param integer $p_bug_id ID of the bug to print attachments list for.
 * @return array
 */
function bug_inline_get_attachments( $p_bug_id ) {
	$t_attachments = file_get_visible_attachments( $p_bug_id );
	$count = 0;
	foreach ( $t_attachments as $t_attachment ) {
		if( $t_attachment['type'] === 'image' ){
			$t_images[] = $t_attachment;
			$count++;
		}
	}
	return ($count>0) ? $result['response'] = bug_attachment_preview_image_array( $t_images ) : null;
}

/**
 * Prints the preview of an image file attachment.
 * @param array An attachment array of image files
 * @return array
 */
function bug_attachment_preview_image_array( array $attachments ) {
	foreach ($attachments as $p_attachment) {
		$file['download_url'] = string_attribute( $p_attachment['download_url'] );
		$file['image_url'] = string_attribute( $p_attachment['download_url'] );
		// $file['src'] = '<img src="' . string_attribute( $p_attachment['download_url'] ). string_attribute( $t_image_url ) . '" alt="' . string_attribute( $t_title ) . '" style="' . string_attribute( $t_preview_style ) . '" />';
		$file['cid'] = string_attribute( $p_attachment['id'] );
		// comment out file_name (line below) for security
		$file['file_name'] = string_attribute( $p_attachment['display_name'] );
		$result[] = $file;
 	}
	return $result;
}

function bug_get_image_url($response){
	foreach ($response as $value) {
		$result[md5($value['file_name'])] = $value['image_url'];
	}
	return $result;
}

function bug_get_image_url_simplified($response){
	foreach ($response as $value) {
		$result[]['image_url'] = $value['image_url'];
	}
	return $result;
}

/**
 * Prints the preview of an image file attachment.
 * @param language string for 'description', bug_id and customize settings
 * @return array
 */
function show_description($p_bug_id, $p_inline = null){
	$response = get_description($p_bug_id);
	$t_description = $response['description'];
	if (!empty($p_inline)){
		preg_match_all('/src=[("|\')]([^"&&^\']+)[("|\')]/', $t_description, $src_array);
		$t_img_urls = bug_get_image_url($p_inline);
		// $result['img_urls'] = $t_img_urls;
		$t_cid_array = $src_array[1];
		// $result['cid_array'] = $t_cid_array;
		foreach ($t_cid_array as $cid){
			// echo '<br/> *my cid: '. $cid;
			/*for($i;$i<count($p_inline);$i++){
				$p_inline[$i]['cid'] = $cid ;
				$pre_str = $p_inline[$i]['file_name'];
				if (preg_match("/$pre_str/", $cid, $match))
				$t_description = str_replace($p_inline[$i]['cid'], $p_inline[$i]['image_url'] , $t_description);
			}*/
			foreach ($p_inline as $value) {
				$pre_str = $value['file_name'];
				// echo '<br/> *my inline: '. $pre_str;
				if (preg_match("/$pre_str/", $cid, $match)){
					$t_img_url = $t_img_urls[md5($pre_str)];
					// echo ';<br/> *method str_replace(: '. $cid. ', ' . $t_img_url;
					$t_description = str_replace($cid, $t_img_url, $t_description);
				}
			}
		}
		$result['description'] = $t_description . '<br/> Email HTML Generated';
	}
	return (object)$result;
}

function print_p ($a){
	echo '<pre>';
	print_r($a);
	echo '</pre>';
}

bug_view_attachment.js

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}

angular.module('myCarouselApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myCarouselApp').controller('CarouselCtrl', function ($scope, $window) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  // given an array of attachment images, slider can be made using the following
  var bug_view_images = angular.element(image_list).text();
  bug_view_images = JSON.parse(bug_view_images);
  var list_of_php_bug_view_images = [];
  for (var i of bug_view_images){
    list_of_php_bug_view_images.push(i.image_url);
  }

  var img_array = [
    'images/test_images/image002.jpg',
    'images/test_images/image005.jpg'];
  list_of_php_bug_view_images = list_of_php_bug_view_images.concat(img_array);
  img_array = list_of_php_bug_view_images;

  for (var i of img_array) {
    slides.push({
      image: i,
      text: ['random_text01', 'random_text02', 'random_text03', 'random_text04', 'random_text05'][slides.length%5],
      id: currIndex++
    });
  }

  $scope.addSlide = function() {
    // var newWidth = 600 + slides.length + 1;
    var i = Math.floor(Math.random()*73);
    var suffix = i.pad(3);
    slides.push({
      // image: 'images/test_images' + newWidth + '/300',
      image: 'images/test_images/image'+ suffix +'.jpg',
      text: ['Nice image','Awesome photograph','That is a sample picture','testing photo'][slides.length % 4],
      id: currIndex++
    });
  };

  $scope.randomize = function() {
    var indexes = generateIndexesArray();
    assignNewIndexesToSlides(indexes);
  };

  // adding some random 4 slides
  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }

  // Randomize logic below

  function assignNewIndexesToSlides(indexes) {
    for (var i = 0, l = slides.length; i < l; i++) {
      slides[i].id = indexes.pop();
    }
  }

  function generateIndexesArray() {
    var indexes = [];
    for (var i = 0; i < currIndex; ++i) {
      indexes[i] = i;
    }
    return shuffle(indexes);
  }

  // http://stackoverflow.com/questions/962802#962890
  function shuffle(array) {
    var tmp, current, top = array.length;

    if (top) {
      while (--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = array[current];
        array[current] = array[top];
        array[top] = tmp;
      }
    }

    return array;
  }
});

bug_view_inc.php

// add list_attachments variable
$t_show_attachments = in_array( 'attachments', $t_fields );
$t_list_attachments;

// line 84-89
require_css( 'bootstrap.min.css' );
require_js( 'jquery-1.11.3.min.js' );
require_js( 'angular.js' );
require_js( 'angular-animate.js' );
require_js( 'ui-bootstrap-tpls-1.3.3.js' );
require_js( 'bug_view_attachments.js' );
// line 750
if( $t_show_attachments ) {
	echo '<tr id="attachments">';
	echo '<th class="bug-attachments category">', lang_get( 'attached_files' ), '</th>';
	echo '<td class="bug-attachments" colspan="5">';
	$t_list_attachments = ( $t_show_description ) ? bug_get_image_url_simplified($t_list_attachments) : bug_get_image_url_simplified(bug_inline_get_attachments($f_bug_id));
	// read view template
	require_once('bug_attachments_slider.php');
	echo '<div class="attachments_list">';
		print_bug_attachments_list( $t_bug_id );
	echo '</div>';
	echo '</td></tr>';
}