News Channel Cloud

This component generates a list of News Channels into a styled infobox (see screen prints above). When clicking any of the links, the news is filtered by that channel. The component generates the channel links into a Claromentis datasrc and is called from the usual component element as detailed below. The component is also permission based so that users will only see News channels that they have permissions to see. The component has two modes as the images above show, setting ‘random_order=”true”’ randomizes the results and font sizes dependant on how popular the channel is. Setting ‘random_order=”false”’ styles the list as per the second image above. There is also a link in the footer of the container to clear the search filter.

1. Create file called:

NewsChannelCloud.php

/*
  Class to create News Channel Cloud - with user permissions & radomized font sizes by channel popularity
  @author craig.moores@babcock.co.uk & daniel.munn@claromentis.com
  
  <component class="NewsChannelCloud" random_order="true" tag_seperator="" starting_font_size="" maximum_font_size="">
  
  Attribute array values:
  - Options for "random_order" are "true" or "false", default is false.
  - Options for "tag_seperator" should be 1 (&nbsp;), 2 (&nbsp; $nbsp;) or 3 (&nbsp; $nbsp; &nbsp;), default is 2.
  - Option for "starting_font_size" is integer value, default is 10.
  - Option for "maximum_font_size" is integer value, default is 30.
*/
 
class NewsChannelCloud extends TemplaterComponentTmpl
{
	public function Show($attributes)
	{
		global $db;
		//Set the template page to parse datasrc to
		$template = "common/news_channel_cloud.html";	
		
		//Gather attribute array values from page
		$random_order = htmlentities($attributes['random_order']); //Display options in random format?
		$tag_separator = htmlentities($attributes['tag_seperator']); //How do we seperate the tag items?
		$starting_font_size = htmlentities($attributes['starting_font_size']);// Smallest font size possible
		$maximum_font_size = htmlentities($attributes['maximum_font_size']);// Largest font size possible
		
		//Check values supplied are valid and set defaults if not supplied.
		//If a mode for randomization hasn't been set, display error:- 		
	    if(!isset($attributes['random_order']))
		{
			return 'Selection type not valid. Please enter an ordering mode of true or false'; 	
		}
		
		//If a random order has been selected, set mode:-
		if ($attributes['random_order'] == "true")
		{
			$random_order = true;
		}
		else 
		{
			$random_order = false;
		}
		
		//If a tag seperator hasn't been set, set default:- 
		if(!isset($attributes['tag_seperator']))
		{
			$tag_seperator = "&nbsp;&nbsp;";
		}
		else 
		{
			if($attributes['tag_seperator'] == 1)
			{
				$tag_seperator = "&nbsp;";
			} 
			elseif($attributes['tag_seperator'] == 2) 
			{
				$tag_seperator = "&nbsp;&nbsp;";
			} 	
			else
			{ 
				$tag_seperator = "&nbsp;&nbsp;&nbsp;";
			}
		}
		
		//If a factor for calculation hasn't been set, set default:- 		
	    if(!isset($attributes['maximum_font_size']))
		{
			$maximum_font_size = 30;
		}
		
		//If a starting font size hasn't been set, set default:- 		
	    if(!isset($attributes['starting_font_size']))
		{
			$starting_font_size = 10; 	
		}
 
		if($starting_font_size >= $maximum_font_size)
			$maximum_font_size = $starting_font_size + 20;
		
		//Continue with component code
		//Get user perms for news channels they have permissions to see and select them from the DB
		$arr = array();
		foreach (NewsChannel::GetChannels4User(PERM_VIEW) as $item)
		{
			$arr[] = $item->id;
		}
		$query = new Query("SELECT nc.id, nc.channel_name, count(n.id) news_count FROM news_channel nc, news n WHERE nc.id IN in:int:ID ORDER BY RAND() GROUP by nc.id, nc.channel_name", $arr);
		$query->addJoinCondition('nc', 'n', 'nc.id=n.news_channel_id');
		$res = $db->query($query);
		
		//Get the number of rows in the table to generate random font size
		$total_count = 0;
		while($row = $res->fetchArray())
		{				
			//Tell the system whether to randomize or not by randomization mode set
			if($random_order == true)
			{
				//We will be taking a second pass at this data
				$total_count += $row['news_count'];
				$rows[] = $row;
			}
			else 
			{
				//Generate cloud links to pass to template
				$channel_name = $row['channel_name'];
				$id = $row['id'];
				$url = "/intranet/main/all_articles.php?channel=". $id ."";
				$values = "<span><a href=". $url .">". $channel_name ."</a></span>&nbsp;|&nbsp;\n";				
				$args['newschannelcloud.datasrc'][] = array('link.body_html' => $values);
			}
		}
		
		if ($random_order)
		{
			//Set the difference between max and min values
			$font_diff_factor = ($maximum_font_size - $minimum_font_size) / $total_count;
			//Entities that are being rendered
			foreach($rows as $row)
			{
				$x = round($font_diff_factor * $row['news_count']);
				$font_size = ($starting_font_size + $x) . 'px';
				$channel_name = $row['channel_name'];
				$id = $row['id'];
				$url = "/intranet/main/all_articles.php?channel=". $id ."";
				$values = "<span style='font-size:". $font_size .";'><a href=". $url .">". $channel_name ."</a></span>". $tag_seperator ."\n";				
				$args['newschannelcloud.datasrc'][] = array('link.body_html' => $values);	
			}
		}
		return $this->CallTemplater($template, $args);
	}
}

2. Copy this file into:

/intranet/common/classes/

3. Create file called:

news_channel_cloud.html

<!--@head@
<style type="text/css">
.infobox_newscloud {
	background-color:#ffffcc;
	margin-top:5px;
	border:1px solid #DEE1E6;
	padding: 1px;
}
 
.infobox_newscloud_title {
	color:#fff;
	display:block;
	font-family:Arial;
	font-size:11px;
	font-weight:bold;
	padding:5px 0 5px 5px;
	text-transform:uppercase;
	background-attachment: scroll;
	background-color: #ff9933;
	background-image: url(/interface_{custom)/img/orange_title_bg.gif);
	background-repeat: repeat-x;
	background-position: center bottom;
}
 
.newscloud_content {
	line-height:150%;
	font-size:12px;
	font-family:Arial;
	padding:10px;
}
 
.newscloud_footer {
	text-align:right;
	padding:3px 5px 3px 0;
	font-size:11px;
	border-top:1px solid #ccc;
}
</style>
-->
 
<div class="infobox_newscloud">
    <div class="infobox_newscloud_title">news channel cloud</div>
    <div class="newscloud_content" name="newschannelcloud" datasrc="">
    	<txt name="link"></txt>
    </div>
    <div class="newscloud_footer">
    	<a href="/intranet/main/all_articles.php?channel=">Clear Filter</a>
    </div> 
</div>

4. Copy this into:

/interface_{custom}/main/

5. Upload the file “orange_title_bg.gif” to:

/interface_{custom}/img/

*Remember to modify the entry in the html page above to link to your title background image.*

background-image: url(/interface_{custom)/img/orange_title_bg.gif);

6. Paste the following component code anywhere on a templater file:

  <component class="NewsChannelCloud" random_order="true" tag_seperator="" starting_font_size="" maximum_font_size="">
  
  - Options for "random_order" are "true" or "false", default is false. 
        - Setting option to "True" will randomize and display the results as per the first image above.
        - Setting option to "False" will display the results as per the second image above.
  - Options for "tag_seperator" should be 1 (&nbsp;), 2 (&nbsp; $nbsp;) or 3 (&nbsp; $nbsp; &nbsp;), default is 2.
  - Option for "starting_font_size" is integer value, default is 10.
  - Option for "maximum_font_size" is integer value, default is 30.

NOTE: The option for “random_order” is mandatory or the component will not function

Suggested location:

/interface_{custom}/main/all_articles.html  

or

/interface_{custom}/main/right_column.html