Posted in php
8576
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
273
This Month
1006
This Year
772

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in php
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 check if the file is a directory or check if the directory exists in 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
You drown not by falling in the river, but by staying submerged.
Unknown
Random CSS Property

Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
Pseudo-elements css reference