Themes

Themes are one of the core components of DatingFramework. The frontend shown the user is based on themes. New themes can be created and existing themes can be extended.

  1. Theme Directory Structure
  2. Theme Hooks
  3. Theme Class
  4. Theme Interface
  5. Theme Installation
  6. Custom Hooks
  7. List of Theme Hooks

Theme Directory Structure

All the themes should have their own folder placed under resources/views/. The directory name should be YourThemeName. All the themes should contain YourThemeName.php file which will contain the details regarding the theme

  • resources
    • views
      • YourThemeName
        • assets
        • views
        • themes
        • YourThemeName.php
        • screenshot.png /* Can be a PNG or JPEG file */
type description
assets folder Put all your js, css, images & font files here.
views folder All the theme's view files go here.
ThemeName.php PHP Class Your theme class that contains all the details regarding your theme
screenshot png or jpeg Sample Screenshot of your Theme. Will be listed in the Admin Panel Themes section.

Theme Class

The theme's folder should have a ThemeName.php inside which the details of the theme must be present.



/*

ThemeName.php

*/

use App\Components\ThemeInterface;

class ThemeName implements ThemeInterface
{
	public function author()
	{
		return 'Saikat Dutta';
	}
	public function description()
	{
		return 'This is a new Theme';
	}
	public function version()
	{
		return '0.0.1';
	}
	public function website()
	{
		return 'www.sampletheme.com';
	}
} 

Theme Interface

All the themes must extend the App\Components\ThemeInterface. The following methods should be defined:

method return type description
author string Returns a string containing information about the author. Its either the name of the individual developer or an organization
description string Returns a string containing the functionality of the plugin
website string Returns a string containing the website of the individual developer or an organization
version string Returns the string with the current semantic version number

These are optional methods:

method return type description
hooks void Does not return anything. In this function you can define all the hooks.
child string If the theme is extending another theme then this method should return the full namespace with the Parent Theme name as string. Example: App/Themes/Default
autoload void Directories to autoload the classes can be defined here

Theme Installation

The Admin Panel will recognize all the plugins that are in the Themes folder. But not all the themes will be active. The Admin needs to manually install a theme. The assets folder will automatically be moved to public/themes/ThemeName/, this will happen automatically when the admin installs the theme.

Theme Hooks

You can use Theme::hook method to create your own hooks for internal use cases or allow other plugins to take advantage of yours. The common practice to name the hook is themename_hookname



/*

SamplePlugin.php

*/

use App\Components\ThemeInterface;
use App\Components\Theme;



class SampleTheme implements ThemeInterface
{
	public function author()
	{
		return 'Your Name';
	}
	public function description()
	{
		return 'Description about this plugin';
	}
	public function version()
	{
		return '0.0.1';
	}
	public function website()
	{
		return 'www.sampleplugincompany.com';
	}
	public function hooks()
	{
		
		Theme::hook("samplethemename_newhook", function($args){
			
		});
		
		// anything to process or modify before passing the $args to all the listeners of this hook	
		Theme::render_modifier("samplethemename_newhook", function($data){
		
		});
		
	}	
}  

To fire a hook:



/*

Add this to your view to render the hook

*/


Theme::render("samplethemename_newhook");


Theme Methods

All the themes must extend the App\Components\ThemeInterface. The following methods should be defined:

Theme methods description
Theme::view('plugin.pluginName.viewName') Checks if viewName exists in pluginName forlder in /resources/views/themes/theme-name
If exists the view is renderred or else the view is renderred from pluginName in App/Plugins folder
Theme::view('viewName') The view is renderred from /resources/views/themes/theme-name folder
Theme::asset('js/filename.js') or Theme::asset('css/filename.css') It returns the path of the file from public/themes/activated-theme-name
Theme::layout('layout-name') This should be used to extend a layout in a view.
It returns the path that 'extends' keyword needs to access a layout
*note: If Child theme is activated, the above methods will check for files in child-theme-name folder first.

All Theme Hooks

Hook Names description
styles Used to include specific css in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("styles",function(){
				$arr = array();
				array_push($arr, Theme::asset('css/sample.css'));
				return $arr;
				});
			}
			
scripts Used to include specific script url's in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("scripts",function(){
				$arr = array();
				array_push($arr, Theme::asset('js/sample.js'));
				return $arr;
				});
			}
			
scriptTags Used to include raw script code in a view from a Plugin or Theme

			 public function hooks()
			{
				Theme::hook("scriptTags",function(){
				$str = (some scripts);
				or
				array_push($str, (some scripts));
				return $str;
				});
			}
			
spot Used to display spotlight in any view. The view for spotlight is to be added in the
views folder of Spotlight Plugin

			 public function hooks()
			{
				Theme::hook("spot",function(){
				$spots = someFunction();
				return Theme::view('plugin.SpotlightPlugin.spot_view', array('spots'=>$spots));
				});
			}
			
main_menu Used to add Menu Links in the view.
1)symname - used to display the symbol at the left of the link
2)notification_type - Any link using notifications should give a notification_type and count
which displays the latest notifications count for the link
3)priority - Used to set the order in which the link will be displayed in the menu
4)class - to include css for the link
5)url - to redirect the page to the specific url on click

			 public function hooks()
			{
				Theme::hook("main_menu",function(){
				$url = url('link_route_name');            
				return array(array("title" => 'link_title', "notification_type" => '' ,  "symname" => "","count" => , "priority" => 4 , "url" => $url, "attributes" =>array("class"=>"class-name")));
				});
			}
			
login Used to add login buttons from different social networks

			Theme::hook('login', function(){
			$html = 'Link to url with css';
			return $html;
		});
			
admin_plugin_menu Used to add Menu Links in Admin Settings Dropdown.

			Theme::hook('admin_plugin_menu', function(){
			$html = 'Link to url with css for page load';
			return $html;
		});
			
profile_widget_visited This hook can be used to add anything below the score displayed in visited profile's view.

			Theme::hook('profile_widget_visited', function(){
			return Theme::view('view_name', []);
				});
			
profile_widget_loguser This hook can be used to add anything below the score displayed in profile-edit view of logged in user.

			Theme::hook('profile_widget_loguser', function(){
			return Theme::view('view_name', []);
				});
			
photo_slider_widget_visited This hook can be used to add anything below the photo slider in visited profile's view.

			Theme::hook('photo_slider_widget_visited', function(){
			return Theme::view('view_name', []);
				});
			
photo_slider_widget_loguser This hook can be used to add anything below the photo slider in profile-edit view of logged in user.

			Theme::hook('photo_slider_widget_loguser', function(){
			return Theme::view('view_name', []);
				});
			
user_action_widget This hook can be used to add anything below the right sidebar.

			Theme::hook('user_action_widget', function(){
			return Theme::view('view_name', []);
				});
			
profile_user_action_menu This hook can be used to add links to the dropdown in profile view containing report and block features.

			Theme::hook('profile_user_action_menu', function(){
			$html = 'link to url';
			return $html;
				});
			
photos This hook can be used to add thumbnail links of various social netwroking sites in 'add photos' section
of profile_edit.blade.php to import photos from the site.

			Theme::hook('photos', function(){
			return view('sample.blade.php');
				});
			

Modifiers Explanation

1) Theme::render_modifier('hookName') - This basically acts as an intermediary between adding the hook and rendering it.
In the sample hook below an array of arrays is passed to hook a link with various attributes.
The modifier function takes the data passed by the hook, accesses its fields and generates a link that is returned where the hook is being renderred.

	 Theme::hook('sample',function(){
		           array(array("title" => , "url" => , "attributes" =>array("class"=>"material-icons pull-left material-icon-custom-styling")))
});

	Theme::render_modifier('sample',function($data){

			$concat = '';
			$marker = "";
			$tag = "
  • "; foreach($data as $link) { foreach($link['attributes'] as $key => $value) { if($key == "class") $marker = ' '; elseif($key == "id") $tag = '
  • '; } $l = $tag . ''.$marker . ' ' . $link['title'].''; $concat.=$l; } return $concat; });
  • 2) ClassName::formatter($type, $obj) - This is similar to render_modifier. What this does is it executes a specific function according to the type of formatter added.
    In the example below a 'sample' type of formatter is added which adds a user attribute to a data object and returns it.
    The function is pushed to an array according to the type. So when the formatter function is called in the function random(), the formatter performs the task according to the type passed as argument.
    
    		ClassName::add_formatter("sample", function($data){
    			$data->user = User::find($data->id);
    			return $data;
       		});
    
    		In ClassName.php
    	protected static $formatters = array();
    	
    	public function random()
    	{
    		$obj = new StdClass;
    		$obj->attr = '';
    		return ClassName::formatter($type, $obj);
    	}
    
    	public static function add_formatter($type,$func)
        {   
            array_push(self::$formatters[$type], $func);
        }
    
        public static function formatter($type,$obj)
        {
            foreach(self::$formatters as $key => $value)
            {
    		if($key == $type)
    	            return $func($value);
            }
        }