com.newsblob.phphtmllib/widgets/ActiveTab.inc

<?php
/**
 * This file contains the ActiveTab class
 *
 * $Id: ActiveTab.inc,v 1.14 2004/02/04 00:27:12 hemna Exp $
 *
 * @author Walter A. Boring IV <waboring@buildabetterweb.com>
 * @package phpHtmlLib
 * 
 */

/**
 * This class is used for creating a tab panel of content
 * where the tabs can be switched on the fly w/ JS, thereby
 * eliminating a page turn to see the other tab's content.
 *
 * @author Walter A. Boring IV <waboring@buildabetterweb.com>
 * @package phpHtmlLib
 */
class ActiveTab extends BaseWidget {


    /**
     * We have to code these here instead of 
     * the css because JS is used to change
     * the colors.  JS can't change a color
     * that is defined in a css class.  It only
     * works on an inline style
     */

    /**
     * The active tab's background color
     *
     */
    var $_selected_background = "#eeeeee";

    /**
     * The hidden tab's background color
     */
    var $_hidden_background = "#e0e0e0";

    /**
     * The default selected tab
     * this is a tab name
     * 
     * ActiveTab::name("Title of Tab");
     */
    var $_selected_tab = null;


    /**
     * This is the constructor for the ActiveTab
     * object.
     *
     * @param string - the width table
     * @param string - the height of the tab's contents
     * @param string - the selected tab name.
     *                 NOTE: this is set with
     *                       ActiveTab::name("Title of Tab");
     *                       add_tab() can override this.
     */
    function ActiveTab($width="100%", $height="300px", $selected_tab=null) {
        $this->set_width( $width );
        $this->_height = $height;
        $this->_selected_tab = $selected_tab;
    }


    function render($indent_level=1, $output_debug=0) {
        $tabs = $this->build_tabs();

        $span = 2 + (count($this->_data) *2 );

        $td = new TDtag(array("colspan" => $span), $this->build_content() );
        $tabs->add_row( $td );
        $div = html_div("activetab", $tabs);
        $div->set_style("width:".$this->get_width());
        return $div->render($indent_level, $output_debug);
    }

    /**
     * This function MUST be called AFTER ALL content
     * has been added, in order for the js to work properly
     *
     * @return string
     */
    function get_javascript() {
        $function = "function show_activetab(tab) {\n";

        $function .= "     var tabs = new Array();\n";

        foreach( $this->_data as $tab ) {
            $function .= "     tabs['".$this->name($tab["title"])."'] = 1;\n";
        }

        $function .= "     for (title in tabs ) {\n";
        $function .= "        obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";
        $function .= "        obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";
        $function .= "        obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";
        $function .= "        obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";
        $function .= "     }\n";

        $function .= "     // show the content of ips\n";
        $function .= "     obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";

        $function .= "     // draw the tab separator line\n";
        $function .= "     obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";
        $function .= "     obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";
        $function .= "     obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";

        $function .= "     // save the last viewed div in a hidden variable (if it's there)\n";
        $function .= "     obj = document.getElementsByName('div_selected');\n";
        $function .= "     if (obj[0] != null && obj[0].value) obj[0].value = tab;\n";
        $function .= "}\n";
        return $function;
    }


    /**
     * Add a tab
     *
     * @param string - the title of the tab
     * @param mixed - the conetnts for the tab
     * @param boolean - should this tab be
     *                  the default selected tab?
     * 
     *                  Note: This will override the
     *                        selected tab parameter
     *                        in the constructor.
     * 
     * @param int   - the width of the tab in pixels
     *                defaults to 60
     *
     */
    function add_tab( $title, $content, $selected=FALSE, $width=NULL) {
        $this->_data[] = array("title" => $title,
                               "selected" => $selected,
                               "width" => $width,
                               "content" => $content
                               );
        if ($selected) {
            $this->_selected_tab = $this->name($title);
        }
    }


    function build_tabs() {
        $table = html_table($this->get_width(), 0,0,0, "center");

        $tr = new TRtag;

        //make sure that we have at least the 
        //first tab selected if there is non selected
        if ($this->_selected_tab === null || strcasecmp($this->_selected_tab, "0") == 0) {
            $this->_selected_tab = $this->name($this->_data[0]["title"]);
        }

        $tr->add( $this->_spacer_td() );
        foreach( $this->_data as $tab) {
            $selected = FALSE;
            if (strcasecmp($this->name($tab["title"]),$this->_selected_tab) == 0 || 
                $tab["selected"] == TRUE) {
                $selected = TRUE;
            } 
            $tr->add( $this->_build_tab_td( $tab["title"], 
                                            $selected,
                                            $tab["width"]) );
            $tr->add( $this->_spacer_td() );
        }
        $tr->add( $this->_end_td() );

        $table->add( $tr );
        return $table;
    }

    function build_content() {
        $div = html_div("content");
        $div->set_class( "content" );
        $div->set_style( "height:".$this->_height.";");


        foreach ( $this->_data as $tab ) {
            if ( strcasecmp($this->_tab_name($tab["title"]), $this->_selected_tab) == 0 ) {
                $class = "content_visible";
            } else {
                $class = "content_hidden";
            }
            $tab_div = html_div($class, $tab["content"]);
            $tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );
            $div->add( $tab_div );
        }

        return $div;
    }

    function _spacer_td() {
        return html_td("spacer", NULL, "&nbsp;");
    }

    function _end_td() {
        return html_td("end", NULL, "&nbsp;");
    }


    function _build_tab_td($title, $selected, $width) {
        $td_class = "tab";
        $link_class = "link";

        if ( $width == NULL ) {
            $width = "60px";
        }

        if ( !strstr($width, "px") ) {
            $width .= "px";
        }

        if ( $selected ) {
            $td_class .= "selected";
        } else {
            $td_class .= "hidden";
        }
        $func = "show_activetab('".$this->name($title)."');";
        $link = html_a("javascript: ".$func, $title, "link");

        $td = html_td($td_class, "", $link);
        $td->set_id("tab_".$this->name($title));
        $td->set_tag_attribute("onclick", "javascript: ".$func);
        if ( $selected ) {
            $style = "font-weight: bold;background-color: ".$this->_selected_background.";";
        } else {
            $style = "background-color: ".$this->_hidden_background.";";
        }
        $td->set_style($style."width:".$width);
        return $td;
    }

    /**
     * Thie method is used to change the selected tab's
     * background color
     */
    function selected_background( $color ) {
        $this->_selected_background = $color;
    }

    /**
     * Thie method is used to change the hidden tab's
     * background color
     */
    function hidden_background( $color ) {
        $this->_hidden_background = $color;
    }

    /**
     * Build the 'name' of the tab.  This can be
     * called in a static way to set the default
     * selected tab.
     * 
     * {@source }
     * @param string
     * @return strint
     */ 
    function name($title) {
        return str_replace(" ", "_", strtolower($title));
    }

    function _tab_name( $title ) {
        return $this->name($title);
    }

}

/**
 * The CSSBuilder object for the ActiveTab widget
 *
 * @package phpHtmlLib
 */
class ActiveTabCSS extends CSSBuilder {
    function user_setup() {
        $this->add_entry(".activetab", "",
                         array("align" => "center") );

        $this->add_entry(".activetab", ".spacer",
                         array("width" => "5px",
                               "border-bottom" => "1px solid #a1a1a1"));
        $this->add_entry(".activetab", ".end",
                         array("border-bottom" => "1px solid #a1a1a1"));

        $this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",
                         array("text-decoration" => "none",
                               "color" => "#000000"));

        $this->add_entry(".activetab", ".tabhidden",
                         array("border" => "1px solid #999999",                           
                               "padding-left" => "5px",
                               "padding-right" => "5px",
                               "background-color" => "#eeeeee",
                               "text-align" => "center",
                               "white-space" => "nowrap",
                               "font-family" => "arial",
                               "font-size" => "10pt"));

        $this->add_entry(".activetab", ".tabselected",
                         array("border-left" => "1px solid #999999",
                               "border-top" => "1px solid #999999",
                               "border-right" => "1px solid #999999",
                               "padding-left" => "5px",
                               "padding-right" => "5px",
                               "text-align" => "center",
                               "white-space" => "nowrap",
                               "font-family" => "arial",
                               "font-size" => "10pt"));

        $this->add_entry(".activetab", ".content",
                         array("border-left" => "1px solid #a1a1a1",
                               "border-right" => "1px solid #a1a1a1",
                               "border-bottom" => "1px solid #a1a1a1",
                               "position" => "relative",
                               "z-index" => "100"));

        $this->add_entry(".activetab", ".content_visible",
                         array("position" => "absolute",
                               "left" => "0px",
                               "top" => "0px",
                               "visibility" => "visible",
                               "z-index" => "50",
                               "padding" => "5px 5px 5px 5px"));

        $this->add_entry(".activetab", ".content_hidden",
                         array("position" => "absolute",
                               "left" => "0px",
                               "top" => "0px",
                               "visibility" => "hidden",
                               "z-index" => "50",
                               "padding" => "5px 5px 5px 5px"));
    }

}
?>
1	jonen	1.1	<?php
2	jonen	1.2	/**
3			* This file contains the ActiveTab class
4			*
5	jonen	1.4	* $Id: ActiveTab.inc,v 1.14 2004/02/04 00:27:12 hemna Exp $
6	jonen	1.2	*
7			* @author Walter A. Boring IV <waboring@buildabetterweb.com>
8			* @package phpHtmlLib
9			*
10			*/
11
12			/**
13			* This class is used for creating a tab panel of content
14			* where the tabs can be switched on the fly w/ JS, thereby
15			* eliminating a page turn to see the other tab's content.
16			*
17			* @author Walter A. Boring IV <waboring@buildabetterweb.com>
18			* @package phpHtmlLib
19			*/
20	jonen	1.1	class ActiveTab extends BaseWidget {
21
22
23	jonen	1.2	/**
24			* We have to code these here instead of
25			* the css because JS is used to change
26			* the colors. JS can't change a color
27			* that is defined in a css class. It only
28			* works on an inline style
29			*/
30
31			/**
32			* The active tab's background color
33			*
34			*/
35			var $_selected_background = "#eeeeee";
36
37			/**
38			* The hidden tab's background color
39			*/
40			var $_hidden_background = "#e0e0e0";
41
42			/**
43			* The default selected tab
44	jonen	1.4	* this is a tab name
45			*
46			* ActiveTab::name("Title of Tab");
47	jonen	1.2	*/
48	jonen	1.4	var $_selected_tab = null;
49	jonen	1.2
50
51			/**
52			* This is the constructor for the ActiveTab
53			* object.
54			*
55			* @param string - the width table
56			* @param string - the height of the tab's contents
57	jonen	1.4	* @param string - the selected tab name.
58			* NOTE: this is set with
59			* ActiveTab::name("Title of Tab");
60			* add_tab() can override this.
61	jonen	1.2	*/
62	jonen	1.4	function ActiveTab($width="100%", $height="300px", $selected_tab=null) {
63	jonen	1.2	$this->set_width( $width );
64			$this->_height = $height;
65			$this->_selected_tab = $selected_tab;
66			}
67
68
69			function render($indent_level=1, $output_debug=0) {
70			$tabs = $this->build_tabs();
71
72			$span = 2 + (count($this->_data) *2 );
73
74			$td = new TDtag(array("colspan" => $span), $this->build_content() );
75			$tabs->add_row( $td );
76			$div = html_div("activetab", $tabs);
77			$div->set_style("width:".$this->get_width());
78			return $div->render($indent_level, $output_debug);
79			}
80
81			/**
82			* This function MUST be called AFTER ALL content
83			* has been added, in order for the js to work properly
84			*
85			* @return string
86			*/
87			function get_javascript() {
88			$function = "function show_activetab(tab) {\n";
89
90			$function .= " var tabs = new Array();\n";
91
92			foreach( $this->_data as $tab ) {
93	jonen	1.4	$function .= " tabs['".$this->name($tab["title"])."'] = 1;\n";
94	jonen	1.2	}
95
96			$function .= " for (title in tabs ) {\n";
97			$function .= " obj = document.getElementById('div_'+title).style.visibility = 'hidden';\n";
98			$function .= " obj = document.getElementById('tab_'+title).style.borderBottom = '1px solid #a1a1a1';\n";
99			$function .= " obj = document.getElementById('tab_'+title).style.fontWeight = '';\n";
100			$function .= " obj = document.getElementById('tab_'+title).style.backgroundColor = '".$this->_hidden_background."';\n";
101			$function .= " }\n";
102
103			$function .= " // show the content of ips\n";
104			$function .= " obj = document.getElementById('div_'+tab).style.visibility = 'visible';\n";
105
106			$function .= " // draw the tab separator line\n";
107			$function .= " obj = document.getElementById('tab_'+tab).style.borderBottom = 'none';\n";
108			$function .= " obj = document.getElementById('tab_'+tab).style.fontWeight = 'bold';\n";
109			$function .= " obj = document.getElementById('tab_'+tab).style.backgroundColor = '".$this->_selected_background."';\n";
110
111			$function .= " // save the last viewed div in a hidden variable (if it's there)\n";
112			$function .= " obj = document.getElementsByName('div_selected');\n";
113	jonen	1.4	$function .= " if (obj[0] != null && obj[0].value) obj[0].value = tab;\n";
114	jonen	1.2	$function .= "}\n";
115			return $function;
116			}
117
118
119			/**
120			* Add a tab
121			*
122			* @param string - the title of the tab
123			* @param mixed - the conetnts for the tab
124			* @param boolean - should this tab be
125			* the default selected tab?
126	jonen	1.4	*
127			* Note: This will override the
128			* selected tab parameter
129			* in the constructor.
130			*
131	jonen	1.2	* @param int - the width of the tab in pixels
132			* defaults to 60
133			*
134			*/
135			function add_tab( $title, $content, $selected=FALSE, $width=NULL) {
136			$this->_data[] = array("title" => $title,
137			"selected" => $selected,
138			"width" => $width,
139			"content" => $content
140			);
141	jonen	1.4	if ($selected) {
142			$this->_selected_tab = $this->name($title);
143			}
144	jonen	1.2	}
145
146
147
148			function build_tabs() {
149			$table = html_table($this->get_width(), 0,0,0, "center");
150
151			$tr = new TRtag;
152
153			//make sure that we have at least the
154			//first tab selected if there is non selected
155	jonen	1.4	if ($this->_selected_tab === null \|\| strcasecmp($this->_selected_tab, "0") == 0) {
156			$this->_selected_tab = $this->name($this->_data[0]["title"]);
157	jonen	1.2	}
158
159			$tr->add( $this->_spacer_td() );
160			foreach( $this->_data as $tab) {
161			$selected = FALSE;
162	jonen	1.4	if (strcasecmp($this->name($tab["title"]),$this->_selected_tab) == 0 \|\|
163	jonen	1.2	$tab["selected"] == TRUE) {
164			$selected = TRUE;
165			}
166			$tr->add( $this->_build_tab_td( $tab["title"],
167			$selected,
168			$tab["width"]) );
169			$tr->add( $this->_spacer_td() );
170			}
171			$tr->add( $this->_end_td() );
172
173			$table->add( $tr );
174			return $table;
175			}
176
177			function build_content() {
178			$div = html_div("content");
179			$div->set_class( "content" );
180			$div->set_style( "height:".$this->_height.";");
181
182
183			foreach ( $this->_data as $tab ) {
184			if ( strcasecmp($this->_tab_name($tab["title"]), $this->_selected_tab) == 0 ) {
185			$class = "content_visible";
186			} else {
187			$class = "content_hidden";
188			}
189			$tab_div = html_div($class, $tab["content"]);
190			$tab_div->set_id( "div_".$this->_tab_name( $tab["title"] ) );
191			$div->add( $tab_div );
192			}
193	jonen	1.1
194	jonen	1.2	return $div;
195			}
196	jonen	1.1
197	jonen	1.2	function _spacer_td() {
198	jonen	1.1	return html_td("spacer", NULL, " ");
199	jonen	1.2	}
200	jonen	1.1
201	jonen	1.2	function _end_td() {
202	jonen	1.1	return html_td("end", NULL, " ");
203	jonen	1.2	}
204	jonen	1.1
205
206	jonen	1.2	function _build_tab_td($title, $selected, $width) {
207			$td_class = "tab";
208			$link_class = "link";
209
210			if ( $width == NULL ) {
211			$width = "60px";
212			}
213
214			if ( !strstr($width, "px") ) {
215			$width .= "px";
216			}
217
218			if ( $selected ) {
219			$td_class .= "selected";
220			} else {
221			$td_class .= "hidden";
222			}
223	jonen	1.4	$func = "show_activetab('".$this->name($title)."');";
224	jonen	1.1	$link = html_a("javascript: ".$func, $title, "link");
225
226	jonen	1.2	$td = html_td($td_class, "", $link);
227	jonen	1.4	$td->set_id("tab_".$this->name($title));
228	jonen	1.2	$td->set_tag_attribute("onclick", "javascript: ".$func);
229			if ( $selected ) {
230			$style = "font-weight: bold;background-color: ".$this->_selected_background.";";
231			} else {
232			$style = "background-color: ".$this->_hidden_background.";";
233			}
234			$td->set_style($style."width:".$width);
235			return $td;
236			}
237
238			/**
239			* Thie method is used to change the selected tab's
240			* background color
241			*/
242			function selected_background( $color ) {
243			$this->_selected_background = $color;
244			}
245
246			/**
247			* Thie method is used to change the hidden tab's
248			* background color
249			*/
250			function hidden_background( $color ) {
251			$this->_hidden_background = $color;
252			}
253
254	jonen	1.4	/**
255			* Build the 'name' of the tab. This can be
256			* called in a static way to set the default
257			* selected tab.
258			*
259			* {@source }
260			* @param string
261			* @return strint
262			*/
263			function name($title) {
264			return str_replace(" ", "_", strtolower($title));
265			}
266	jonen	1.2
267			function _tab_name( $title ) {
268	jonen	1.4	return $this->name($title);
269	jonen	1.2	}
270	jonen	1.4
271	jonen	1.1	}
272
273	jonen	1.2	/**
274			* The CSSBuilder object for the ActiveTab widget
275			*
276			* @package phpHtmlLib
277			*/
278			class ActiveTabCSS extends CSSBuilder {
279			function user_setup() {
280			$this->add_entry(".activetab", "",
281			array("align" => "center") );
282
283			$this->add_entry(".activetab", ".spacer",
284			array("width" => "5px",
285			"border-bottom" => "1px solid #a1a1a1"));
286			$this->add_entry(".activetab", ".end",
287			array("border-bottom" => "1px solid #a1a1a1"));
288
289			$this->add_entry(".activetab", ".link:active,.link:hover,.link:link,.link:visited",
290			array("text-decoration" => "none",
291			"color" => "#000000"));
292
293			$this->add_entry(".activetab", ".tabhidden",
294			array("border" => "1px solid #999999",
295			"padding-left" => "5px",
296			"padding-right" => "5px",
297			"background-color" => "#eeeeee",
298			"text-align" => "center",
299			"white-space" => "nowrap",
300			"font-family" => "arial",
301			"font-size" => "10pt"));
302
303			$this->add_entry(".activetab", ".tabselected",
304			array("border-left" => "1px solid #999999",
305			"border-top" => "1px solid #999999",
306			"border-right" => "1px solid #999999",
307			"padding-left" => "5px",
308			"padding-right" => "5px",
309			"text-align" => "center",
310			"white-space" => "nowrap",
311			"font-family" => "arial",
312			"font-size" => "10pt"));
313
314			$this->add_entry(".activetab", ".content",
315			array("border-left" => "1px solid #a1a1a1",
316			"border-right" => "1px solid #a1a1a1",
317			"border-bottom" => "1px solid #a1a1a1",
318			"position" => "relative",
319			"z-index" => "100"));
320
321			$this->add_entry(".activetab", ".content_visible",
322			array("position" => "absolute",
323			"left" => "0px",
324			"top" => "0px",
325			"visibility" => "visible",
326			"z-index" => "50",
327			"padding" => "5px 5px 5px 5px"));
328
329			$this->add_entry(".activetab", ".content_hidden",
330			array("position" => "absolute",
331			"left" => "0px",
332			"top" => "0px",
333			"visibility" => "hidden",
334			"z-index" => "50",
335			"padding" => "5px 5px 5px 5px"));
336			}
337	jonen	1.1
338			}
339			?>
MailToCvsAdmin">MailToCvsAdmin	ViewVC Help
Powered by ViewVC 1.1.26