Feature-box jquery work. Slider and Tabs functional.

2025-09-03 03:13:34 +02:00 · 2012-06-05 09:14:22 +00:00
parent 855c6f2b8d
commit 6673c50006
14 changed files with 1325 additions and 46 deletions
--- a/e107_plugins/featurebox/admin_config.php
+++ b/e107_plugins/featurebox/admin_config.php
@@ -76,6 +76,8 @@ class fb_category_ui extends e_admin_ui
 		'fb_category_random' 	=> array('title'=> 'Random',			'type' => 'boolean',	'data' => 'int', 	'width' => '5%', 'thclass' => 'center', 'class' => 'center', 'batch' => true, 'filter' => true),
 		'fb_category_class' 	=> array('title'=> LAN_VISIBILITY,		'type' => 'userclass',	'data' => 'int', 	'width' => 'auto', 'filter' => true, 'batch' => true),
 		'fb_category_limit' 	=> array('title'=> 'Limit',				'type' => 'number',		'data' => 'int', 	'width' => '5%', 'thclass' => 'left', 'help' => 'number of items to be shown, 0 - show all'),
+		'fb_category_parms' 	=> array('title'=> 'Parameters (optional)',		'type' => 'textarea',	'data' => 'str', 	'width' => 'auto', 'thclass' => 'left', 'class' => 'left','writeParms' => 'expand=Advanced&help=Optional Javascript Parameters (format subject to change)'),		
+		
 		'options' 				=> array('title'=> LAN_OPTIONS,			'type' => null,								'width' => '10%', 'forced'=>TRUE, 'thclass' => 'center last', 'class' => 'center')
 	);	
 	
@@ -179,7 +181,7 @@ class fb_main_ui extends e_admin_ui
 		//DEPRECATED 'fb_mode' 			=> array('title'=> FBLAN_12,			'type' => 'dropdown',		'data'=> 'int',	'width' => '5%', 'filter'=>TRUE, 'batch'=>TRUE),		
 		//DEPRECATED 'fb_rendertype' 	=> array('title'=> FBLAN_22,			'type' => 'dropdown',		'data'=> 'int',	'width' => 'auto', 'noedit' => TRUE),	
        'fb_template' 		=> array('title'=> FBLAN_25,			'type' => 'layouts',		'data'=> 'str', 'width' => 'auto', 'writeParms' => 'plugin=featurebox', 'filter' => true, 'batch' => true),	 	// Photo
-		'fb_image' 			=> array('title'=> "Image",				'type' => 'image',			'width' => 'auto'),
+		'fb_image' 			=> array('title'=> "Image",				'type' => 'image',			'width' => 'auto', 'readParms'=>'thumb=60&thumb_urlraw=0&thumb_aw=60'),
 		'fb_imageurl' 		=> array('title'=> "Image Link",		'type' => 'url',			'width' => 'auto'),
 		'fb_class' 			=> array('title'=> LAN_VISIBILITY,		'type' => 'userclass',		'data' => 'int', 'width' => 'auto', 'filter' => true, 'batch' => true),	// User id
 		'fb_order' 			=> array('title'=> LAN_ORDER,			'type' => 'number',			'data'=> 'int','width' => '5%' ),
--- a/e107_plugins/featurebox/e_header.php
+++ b/e107_plugins/featurebox/e_header.php
@@ -0,0 +1,6 @@
+<?php
+
+//TODO add checks so that it's only loaded when needed. 
+e107::css('core','camera/css/camera.css','jquery');
+
+?>
--- a/e107_plugins/featurebox/e_shortcode.php
+++ b/e107_plugins/featurebox/e_shortcode.php
@@ -10,7 +10,8 @@ if (!defined('e107_INIT')) { exit; }

 e107::includeLan(e_PLUGIN.'featurebox/languages/'.e_LANGUAGE.'_front_featurebox.php');

-class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_FOLDER]_shortcodes
+
+class featurebox_shortcodes// must match the plugin's folder name. ie. [PLUGIN_FOLDER]_shortcodes
 {	
 	protected $_categories = array();
 	
@@ -25,9 +26,11 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 	 * 
 	 * @param string $parm parameters
 	 * @param string $mod category template
+	 * @example {FEATUREBOX=cols=2|tabs}
 	 */
 	function sc_featurebox($parm, $mod = '')
 	{
+		
 		// TODO cache
 		if(!e107::isInstalled('featurebox')) //just in case
 		{
@@ -37,6 +40,7 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		if(!$mod)
 		{
 			$ctemplate = 'default';
+	
 		}
 		else
 		{
@@ -64,7 +68,30 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		}
 		
 		$tmpl = $this->getFboxTemplate($ctemplate);
+	
+		
+		$type = vartrue($tmpl['js_type'],''); // Legacy support (prototype.js)
+		
+		if(vartrue($tmpl['js']))
+		{		
+			$tmp = explode(',', $tmpl['js']);
+			
+			foreach($tmp as $file)
+			{
+				e107::js('footer',$file,$type);	
+			}
+		}
+		
 		$tp = e107::getParser();
+				
+		if(vartrue($tmpl['js_inline']))
+		{
+			$data = $tp->toText($category->getData('fb_category_parms'));
+			$jsInline = str_replace("{FEATUREBOX_PARMS}","{".trim($data)."}",$tmpl['js_inline']);
+			e107::js('footer-inline', $jsInline, $type, 3);
+		}
+				
+	
 		
 		// Fix - don't use tablerender if no result (category could contain hidden items)
 		$ret = $this->render($category, $ctemplate, $parm);
@@ -92,7 +119,9 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 	 */
 	function sc_featurebox_navigation($parm, $mod = '')
 	{
-		// TODO cache
+		// TODO cache	
+		//TODO default $parm values. eg. assume 'tabs' when included in the 'tabs' template. 	
+		
 		if(!e107::isInstalled('featurebox')) //just in case
 		{
 			return '';
@@ -109,6 +138,7 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		parse_str($parm, $parm);
 		
 		$category = $this->getCategoryModel($ctemplate); 
+		
 		if(!$category->hasData())
 		{
 			return '';
@@ -119,6 +149,7 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 			return '';
 		}
 		$tmpl = $this->getFboxTemplate($ctemplate);
+		
 		if($category->get('fb_category_random'))
 		{
 			unset($parm['loop']);
@@ -190,16 +221,35 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 		}
 		$ret .= $category->toHTML(varset($tmpl[$base.'end']), true);
 		
-		if(vartrue($tmpl['js']))
-		{
-			e107::getJs()->footerFile(explode(',', $tmpl['js']));
-		}
+		// Moved to 'sc_featurebox' - as it wouldn't load js if navigation was not used. 
+		/*
+		$type = vartrue($tmpl['js_type'],''); // Legacy support (prototype.js)
 		
+		if(vartrue($tmpl['js']))
+		{		
+			$tmp = explode(',', $tmpl['js']);
+			
+			foreach($tmp as $file)
+			{
+				e107::js('footer',$file,$type);	
+			}
+		}
+				
 		if(vartrue($tmpl['js_inline']))
 		{
-			e107::getJs()->footerInline($tmpl['js_inline'], 3);
+			e107::js('inline',$tmpl['js_inline'],$type,3);
+			// e107::getJs()->footerInline($tmpl['js_inline'], 3);
 		}
 		
+		if(vartrue($tmpl['css']))
+		{		
+			$tmp = explode(',', $tmpl['css']);
+			foreach($tmp as $file)
+			{
+				e107::css('url',$file,$type);	
+			}
+		}
+		*/
 		return $ret;
 	}
 	
@@ -385,8 +435,9 @@ class featurebox_shortcodes // must match the plugin's folder name. ie. [PLUGIN_
 	 */
 	public function getCategoryModel($template, $force = false)
 	{
+		
 		if(!isset($this->_categories[$template]))
-		{
+		{		
 			$this->_categories[$template] = new plugin_featurebox_category();
 			$this->_categories[$template]->loadByTemplate($template, $force);
 		}
--- a/e107_plugins/featurebox/featurebox_sql.php
+++ b/e107_plugins/featurebox/featurebox_sql.php
@@ -23,6 +23,7 @@ CREATE TABLE featurebox_category (
  `fb_category_random` tinyint(1) unsigned NOT NULL DEFAULT '0',
  `fb_category_class` smallint(5) NOT NULL DEFAULT '0',
  `fb_category_limit` tinyint(3) unsigned NOT NULL DEFAULT '1',
+  `fb_category_parms` text NOT NULL,
  PRIMARY KEY (`fb_category_id`),
  UNIQUE KEY `fb_category_template` (`fb_category_template`)
 ) ENGINE=MyISAM;
--- a/e107_plugins/featurebox/includes/item.php
+++ b/e107_plugins/featurebox/includes/item.php
@@ -125,6 +125,16 @@ class plugin_featurebox_item extends e_model
 		}
 		return '<a id="featurebox-imageurl-'.$this->getId().'" href="'.$tp->replaceConstants($this->get('fb_imageurl'), 'full').'" title="'.$tp->toAttribute($this->get('fb_title')).'" rel="'.$tp->toAttribute(vartrue($parm['rel'], 'external')).'">'.$tag.'</a>';
 	}
+	
+	public function sc_featurebox_thumb($parm='')
+	{
+		if(!$this->get('fb_image'))
+		{
+			return '';
+		}
+		$att = ($parm) ?$parm : 'aw=100&ah=60';
+		return e107::getParser()->thumbUrl($this->get('fb_image'),$att);			
+	}

 	/**
 	 * Item counter number (starting from 1)
--- a/e107_plugins/featurebox/templates/featurebox_category_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_category_template.php
@@ -87,22 +87,61 @@ $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['nav_separator'] = '&nbsp;';
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js'] = '{e_PLUGIN}featurebox/featurebox.js';
 // inline JS, without <script> tags
 $FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js_inline'] = 'new Featurebox(\'featurebox-container\')';
+$FEATUREBOX_CATEGORY_TEMPLATE['dynamic']['js_type'] = 'prototype';


+// ------------------------------------------ TABS (Legacy Prototype.js) ---------------------------

-//TODO - tabs template.
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_start'] = '
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['list_start'] = '
 <div class="box featurebox admintabs" id="featurebox-tab-container">
 	{FEATUREBOX_NAVIGATION|tabs=loop&uselimit}
 	<div class="tab-content-wrap">
 ';

+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['list_end'] = '
+	</div>
+	<div class="clear"><!-- --></div>
+</div>
+';
+
+// no column support
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['col_start'] = '<div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['col_end'] = '</div></div>';
+
+// ajax navigation (unobtrusive)
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_separator'] = '<div class="clear"><!-- --></div>';
+
+// empty item  - used with col templates, no shortcodes just basic markup
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['item_empty'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_start'] = '<div class="tabs"><ul class="e-tabs clear" id="front-tabs">';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_item'] = '<li id="featurebox-tab-{FEATUREBOX_COUNTER}"><a href="#tab-{FEATUREBOX_COUNTER}-activate"><span>{FEATUREBOX_TITLE}</span></a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_end'] = '</ul></div>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['nav_separator'] = '';
+
+// external JS, comma separated list
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js'] = '{e_FILE}jslib/core/tabs.js';
+// inline JS, without <script> tags
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js_inline'] = 'new e107Widgets.Tabs("featurebox-tab-container", { bookmarkFix: false });';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs-proto']['js_type'] = 'prototype';
+
+
+// ------------------------------------------ TABS (jquery) ----------------------------------------------
+
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_start'] = '
+<div class="box featurebox e-tabs" id="featurebox-tab-container">
+	{FEATUREBOX_NAVIGATION|tabs=loop&uselimit}	
+';
+
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['list_end'] = '
 	</div>
 	<div class="clear"><!-- --></div>
 </div>
 ';
-
 // no column support
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['col_start'] = '<div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['col_end'] = '</div></div>';
@@ -115,15 +154,60 @@ $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['item_separator'] = '<div class="clear"><!
 // empty item  - used with col templates, no shortcodes just basic markup
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['item_empty'] = '';

-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_start'] = '<div class="tabs"><ul class="e-tabs clear" id="front-tabs">';
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_item'] = '<li id="featurebox-tab-{FEATUREBOX_COUNTER}"><a href="#tab-{FEATUREBOX_COUNTER}-activate"><span>{FEATUREBOX_TITLE}</span></a></li>';
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_end'] = '</ul></div>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_start'] = '<ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_item'] = '<li><a href="#tab-{FEATUREBOX_COUNTER}-activate">{FEATUREBOX_TITLE}</a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_end'] = '</ul>';
 $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['nav_separator'] = '';
-
+//<div class="e-tabs">
 // external JS, comma separated list
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js'] = '{e_FILE}jslib/core/tabs.js';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js'] = '';
 // inline JS, without <script> tags
-$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = 'new e107Widgets.Tabs("featurebox-tab-container", { bookmarkFix: false });';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_type'] = 'jquery';
+
+
+// ------------------------------------------ CAMERA ----------------------------------------------
+/*
+ <div class="camera_wrap">
+    <div data-src="images/image_1.jpg"></div>
+    <div data-src="images/image_1.jpg"></div>
+    <div data-src="images/image_2.jpg"></div>
+</div>
+ */
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['list_start'] = '<!-- start Camera -->
+<div class="box featurebox camera_wrap camera_azure_skin">
+	
+';
+// {FEATUREBOX_NAVIGATION|camera=loop&uselimit}
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['list_end'] = '
+</div>
+<div class="clear"><!-- --></div>
+<!-- End Camera -->
+';
+// no column support
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['col_start'] = '';// <div id="tab-{FEATUREBOX_COLSCOUNT}-activate"><div class="tab-content">';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['col_end'] = ''; // </div></div>';
+
+// ajax navigation (unobtrusive)
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_start'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_end'] = '';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_separator'] = '';// <div class="clear"><!-- --></div>';
+
+// empty item  - used with col templates, no shortcodes just basic markup
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['item_empty'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_start'] = ''; // <ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_item'] = ''; // <li><a href="#tab-{FEATUREBOX_COUNTER}-activate">{FEATUREBOX_TITLE}</a></li>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_end'] = ''; // </ul>';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['nav_separator'] = '';
+
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js'] = '{e_FILE}jslib/camera/scripts/camera.min.js';
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js_inline'] = "$('.camera_wrap').camera({FEATUREBOX_PARMS});";
+$FEATUREBOX_CATEGORY_TEMPLATE['camera']['js_type'] = 'jquery';
+
+

 /**
 * Template information.
@@ -135,8 +219,10 @@ $FEATUREBOX_CATEGORY_TEMPLATE['tabs']['js_inline'] = 'new e107Widgets.Tabs("feat
 * @var array
 */
 $FEATUREBOX_CATEGORY_INFO = array(
-	'default' 	=> array('title' => 'Default (core)', 'description' => 'Flat - show by category limit'),
-	'dynamic' 	=> array('title' => 'Dynamic (core)', 'description' => 'Load items on click (AJAX)'),
-	'tabs'		=> array('title' => 'Tabs (core)'	, 'description' => 'Tabbed Feature box items')
+	'tabs' 			=> array('title' => 'Tabs (jquery)'	, 'description' => 'Tabbed Feature box items'),
+	'camera' 		=> array('title' => 'Image-Slider (jquery)'	, 'description' => 'Image transitions using "<a href=\'http://www.pixedelic.com/plugins/camera/\'>Camera</a>"'),
+	'default' 		=> array('title' => 'Default (prototype.js)', 'description' => 'Flat - show by category limit'),
+	'dynamic' 		=> array('title' => 'Dynamic (prototype.js)', 'description' => 'Load items on click (AJAX)'),
+	'tabs-proto' 	=> array('title' => 'Tabs (prototype.js)'	, 'description' => 'Tabbed Feature box items')
 );
 ?>
--- a/e107_plugins/featurebox/templates/featurebox_template.php
+++ b/e107_plugins/featurebox/templates/featurebox_template.php
@@ -8,13 +8,14 @@

 global $sc_style;

-$FEATUREBOX_TEMPLATE['default'] = '
-<div class="featurebox-item">
+$FEATUREBOX_TEMPLATE['default'] = '<!-- Feature box Item -->
+<div class="featurebox-item" >
 	<h3>{FEATUREBOX_TITLE|default}</h3>
 	{FEATUREBOX_TEXT|default}
 </div>
 ';

+
 $sc_style['FEATUREBOX_IMAGE|image_left']['pre'] = '<img class="f-left" src="';
 $sc_style['FEATUREBOX_IMAGE|image_left']['post'] = '" alt="" />';
 $FEATUREBOX_TEMPLATE['image_left'] = '
@@ -24,6 +25,7 @@ $FEATUREBOX_TEMPLATE['image_left'] = '
 </div>
 ';

+
 $sc_style['FEATUREBOX_IMAGE|image_right']['pre'] = '<img class="f-right" src="';
 $sc_style['FEATUREBOX_IMAGE|image_right']['post'] = '" alt="" />';
 $FEATUREBOX_TEMPLATE['image_right'] = '
@@ -33,9 +35,36 @@ $FEATUREBOX_TEMPLATE['image_right'] = '
 </div>
 ';

+
+
+$FEATUREBOX_TEMPLATE['camera'] = '
+<div class="featurebox-item" data-thumb="{FEATUREBOX_THUMB}" data-src="{FEATUREBOX_IMAGE|camera=src}" data-link="{FEATUREBOX_URL}">
+	<div class="featurebox-text camera_effected" style="position:absolute">
+		<div class="featurebox-title">{FEATUREBOX_TITLE|camera}</div>
+		<div class="featurebox-text">{FEATUREBOX_TEXT|camera}</div>
+	</div>
+</div>
+';
+
+
+
+$FEATUREBOX_TEMPLATE['camera_caption'] = '
+<div class="featurebox-item" data-thumb="{FEATUREBOX_THUMB}" data-src="{FEATUREBOX_IMAGE|camera=src}" data-link="{FEATUREBOX_URL}">
+	<div class="camera_caption fadeFromBottom">
+		<h3>{FEATUREBOX_TITLE|camera}</h3>
+		{FEATUREBOX_TEXT|camera}
+	</div>
+</div>
+';
+
+
+
+
 $FEATUREBOX_INFO = array(
 	'default' 		=> array('title' => 'Default (core)', 		'description' => 'Title and description - no image'),
 	'image_right' 	=> array('title' => 'Right image (core)',	'description' => 'Right floated image'),
-	'image_left'	=> array('title' => 'Left image (core)'	, 	'description' => 'Left floated image')
+	'image_left'	=> array('title' => 'Left image (core)'	, 	'description' => 'Left floated image'),
+	'camera'		=> array('title' => 'Image with text-overlay',	'description' => 'For use with the "camera" category'),
+	'camera_caption' => array('title' => 'Image with lower caption',	'description' => 'For use with the "camera" category')
 );
 ?>