Posted in php
10778
5:02 am, October 8, 2021
 

timeline class and function

this is a class extend that generates a timeline based on structured data and order's the items by year decending.

this code will not work out of the box as it has other requirements, but it is a good example or starting point for a similar function to generate a timeline

also it had a requirement where the colours had to change per row so i added another array of the required colours and assigned each colour to the css that is generated as part of this function. 

PHP

// timeline.extend.php
class timeline extends core {

  public $class_extend = true; // this must be set to true! :)

  public $add_to_menu = false;
  public $add_section_button = false; // add this class to the section menu
  public $add_to_admin_menu = true; // add this class to the main admin menu

  public $nice_name = "timeline";
  public $nice_description = "timeline";
	public $db_table_name = "timeline";
  public $images_enabled = true;

  public $load_array = [
    "id",
    "uid",
    "insdate",
    "title",
    "additional",
    "category",
    "year",
    "month",
  ];


  public function show_timeline() {
    $db_table_name = $this->db->escapeString($this->db_table_name);
    $sql = "select * from $db_table_name order by year desc";
    $out = "";
    $css = "";
    $color_array = array(
      "#32567a",
      "#5e788f",
      "#c5a888",
      "#9f8167",
      "#ee7202",
      "#d05126",
      "#a4381b",
      "#514539",
    );

    $result = $this->db->query($sql);
    $line_num = 1;
    $col_array_num = 0;
    if($result) {
        while($row = $result->fetchArray()) {
            // $out .= $row['field_name'];
            foreach($this->load_array as $load_title) {
                //$template->set($load_title, $row[$load_title]);
                $this->$load_title = $row[$load_title];
            }

            $out .= "<div class='timeline-item timeline-item-$line_num'>
  <div class='grid-x'>
    <div class='large-1 cell'>
      <div class='timeline-year'>
        $this->year
      </div>
    </div>
    <div class='large-1 cell'>
      <div class='timeline-dot'>
      </div>
    </div>
    <div class='large-2 cell'>
      <div class='timeline-month'>
        $this->month
      </div>
    </div>
    <div class='large-7 cell'>
      <div class='timeline-title'>
        $this->title
      </div>
    </div>
  </div>
</div>";

            // add color css
            $line_color = $color_array[$col_array_num];
            $css .= ".timeline-item-$line_num { color:$line_color; } .timeline-item-$line_num .timeline-dot { background:$line_color; }";

            $col_array_num++;
            if($col_array_num == 7) {
              $col_array_num = 0;
            }

            $line_num++;

        }
        $out = "<style>$css</style>
        <div class='timeline-wrap'>
          $out
        </div>";
        return $out;
    } else {
        return false;
    }
  }


}

// view page timeline
// where $page_content is the page output
$page_content .= '
<style>
/* Timeline */
.timeline-item {
	font-family: "Poppins", sans-serif;
	font-size:18px;
	font-weight:bold;
	padding-bottom:15px;
}
.timeline-title {
	font-weight:normal;
}
.timeline-dot::before {
	content:"";
	width:5px;
	top:22px;
	height:60px;
	background:#CCC;
	position:absolute;
	left:7px;
	z-index:9;
}
.timeline-dot::after {
    content: "";
    width: 7px;
    top: 6px;
    left: 6px;
    border-radius: 30px;
    height: 7px;
    background: #FFF;
    position: absolute;
    z-index: 9;
}
.timeline-dot {
	z-index:10;
	position:relative;
	background:#000;
	border-radius: 50px;
	height:25px;
	width:25px;
	margin:0 auto;
	border:3px solid rgba(255,255,255,0.3);
}
.timeline-year {
	text-align: right;
}
/* Timeline */
</style>
';

$page_content .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" integrity="sha512-2meDMHyoDRV8O0gr5Diq32ch+6QqI9Af9Km4eFwgxZg356CbUI4S30C3zuUetkNAN4Bn+17y9OgxoQ3HnQ648w==" crossorigin="anonymous" referrerpolicy="no-referrer" />';
$page_content .= $timeline->show_timeline();

View Statistics
This Week
408
This Month
1232
This Year
2974

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in php
php redirect echo the page id from wordpress sqlite escape string Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated getcwd usage in php to get the current working directory for file includes write to file php save string to file php using preg_match to extract text from elements encode spaces in items passed to url to %20 not + php function load as table - load_as_table turn on or off error reporting php get json with php from a url and display it php convert number with k on the end to full number extract variables from url string php No 'Access-Control-Allow-Origin' header is present on the requested resource. Fatal error: Uncaught Exception: Required extension GD is not loaded. php check if a class exists Uncaught Error: Call to undefined function mb_convert_encoding() get the subdomain name from the domain string in php - sub domain fixing error Call to undefined function simplexml_load_string get the content of a url get the content of a link with php and test if the result is empty php check if url is valid with filter_var php save csv from array to file php export csv from string to browser download convert json string to a php array how to json encode an array in php how to decode xml in php php get file and save it php function to remove the query string from a url using php parse_url function to remove the query string from a url add every value in the load_array array into the out for testing Fix for PHP Warning Trying to get property '*name*' of non-object write the contents of a url into a file with php sqlite fetchArray into another array php return json header and content list_all_array an early stages of list all function that uses an array to pass in main variables replace singular variable assignment with an array loop and variable variables using the $_SERVER['HTTP_REFERER'] to check referring pages timeline class and function php html template class system views list function for checking what views have been made on the current week load array load all items from an array while in a sqlite load sql loop create a 200 character summary from a longer html string using strlen to check the length of a string and do something about it How to record your own page views with PHP, and make them into weekly monthly and yearly charts load from fields array php class function get the current week as a number with php creating embedded php code from a database field test php bundle write check if a file exists with php
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Random CSS Property

border-bottom-left-radius

The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
border-bottom-left-radius css reference