gpDojoPortfolio: A Dojo Portfolio Widget

I’m working on a new project that uses Dojo Toolkit and DJango. I haven’t started on the DJango back-end yet because I first need to create a few Dojo widgets. The first widget that I created is gpDojoPortfolio. As the name suggests, this widget will display a portfolio. Each item in the portfolio slides into view using the dojo.fx module.

gpDojoPortfolio Container

To provide content for the widget, you must first create a container. You must provide an id for the container. You can optionally provide a class.

Note: I created the widget so that multiple portfolio’s can be displayed on a page. If you plan to display multiple portfolio’s, then I suggest that you create a class for the container.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
 
</div>

Portfolio Title

If you want a title to be displayed on top of the portfolio, you must use an h1 tag.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
</div>

Portfolio Items

Each portfolio item is contained within a div. You must provide a class name for this div. In the example below, I named the div gpPortfolioItem.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="gpPortfolioItem">
 
        </div>
        <div class="gpPortfolioItem">
 
        </div>
</div>

Each portfolio item contains two display segments – a left display and a right display. For instance, I may want to display an image in the left display and a description in the right display. You must wrap each display segment with li tags. The widget will convert these into the left and right display – the first li will be on the left and the second will be on the right.

<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="gpPortfolioItem">
                <ul>
			<li>
				<a href="http://web2.digitalvilliage.com" target="_blank"><img src="images/portfolio/dvilliage.jpg" width="355px" height="200px" /></a>
			</li>
			<li>
				<h3>DigitalVillage.com</h3>
				<p>DigitalVilliage.com is one of our sites. The site has two subdomains (web20 and galleries). The web20 site will generate web 2.0 domain names (and search for availability). </p>
				<p>You can also generate color harmonies from a Web 2.0 pallette, a Web216 pallette, or a selected image (or random Flickr image). </p>
				<p>The galleries site displays a free Flash/XML photo gallery. <br/>We developed this site using CakePHP, JQuery and Flash/AS3.</p>
				<p>Click <a href="http://web2.digitalvilliage.com" target="_blank">here</a> to view the site.</p>
			</li>
		</ul>
        </div>
        <div class="gpPortfolioItem">
                <ul>
			<li>
				<a href="http://grasshopperpebbles.com" target="_blank"><img src="images/portfolio/gpebbles.jpg" width="350px" height="200px" /></a>
			</li>
			<li>
				<h3>GrasshopperPebbles.com</h3>
				<p>Grasshopperpebbles.com is our blog site. This blog focuses on Ajax Frameworks such as jQuery, YUI, and Dojo, but I also discuss other web technologies such as PHP, CSS, Flash, etc. </p>
				<p>We developed this site using Wordpress and jQuery. We developed the demos section of the site using CodeIgniter.</p>
				<p>Click <a href="http://grasshopperpebbles.com" target="_blank">here</a> to view the site.</p>
			</li>
		</ul>
        </div>
</div>

Setting Up the gpDojoPortfolio Widget

<link rel="stylesheet" type="text/css" href="js/gpWidgets/gpDojoPortfolio/css/styles.css">
<link rel="stylesheet" type="text/css" href="demo.css">
 
<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true, modulePaths:{'gp':'../gpWidgets/gpDojoPortfolio'}"></script>
 
<script type="text/javascript">
	dojo.require("gp.gpDojoPortfolio");
 
	dojo.addOnLoad(function() {
		var ga = new gp.gpDojoPortfolio({},'gpPortfolioCntnr');
	});
</script>

Note: When setting up the widget, you should not make changes to the widget’s CSS file, instead, you should provide a separate CSS file. In the example above, I created a file named demo.css. More on this later in the post.

Widget Options

The gpDojoPortfolio widget only has a few options:

portfolio_items: This option is the class name of the portfolio items. The class name is not used in the construction of the widget, so there is really no need to change it.

?View Code JAVASCRIPT
dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({portfolio_items: '.myItems'},'gpPortfolioCntnr');
});
<div id="gpPortfolioCntnr" class="gpPortfolioCntnr">
        <h1>This is my portfolio</h1>
        <div class="myItems">
 
        </div>
        <div class="myItems">
 
        </div>
</div>

title_class: I created this option for those who plan to create multiple portfolio’s on page and want to style each title (h1) tag differently. The default value is gpPortfolio-Title.

?View Code JAVASCRIPT
dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({},'gpPortfolioCntnr');
        var ga2 = new gp.gpDojoPortfolio({title_class: 'blueTitle'},'gpPortfolioCntnr2');
});

show_side_nav: Use this option to show/hide the side navigation. The default is true.

?View Code JAVASCRIPT
dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({show_side_nav: false},'gpPortfolioCntnr');
});

interval: Use this option to have portfolio automatically slide to the next portfolio item. This value is in milliseconds. When using this option, I usually hide the side navigation.

?View Code JAVASCRIPT
dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({interval: 6000, show_side_nav: false},'gpPortfolioCntnr');
});

anim_duration: How long, in milliseconds, the slide animation will occur (when sliding to the next portfolio item). The default is 1000.
anim_easing: The easing function to be applied to the animation. The default is elasticOut. For more options, see dojo.fx.easing.

?View Code JAVASCRIPT
dojo.addOnLoad(function() {
	var ga = new gp.gpDojoPortfolio({anim_duration: 2000, anim_easing: 'quadIn'},'gpPortfolioCntnr');
});

Styling the Widget

You should create a separate CSS file to style the widget so that there will be no confusion if I ever create a new version.

To change the overall dimensions of the widget, update the following styles:

#gpPortfolioCntnr {
	width:900px;
}
.gpPortfolio-SlideCntnr {
       /* The container width - the width of the navigation (x 2) */
	width:820px;
}
.gpPortfolio-DisplayCntnr {
        /* The container width - the width of the navigation (x 2) */
	width:820px;
}

The container that does the actual sliding has a default width of 5000px. Depending upon the number of display items, you may want to increase this value:

.gpPortfolio-Slider {
	width:10000px;
}

The following is the default styling of the left and right display:

.gpPortfolio-LeftItem, .gpPortfolio-RightItem {
	float:left;
	margin:10px;
	width:390px;
	height:360px;
}

The following is the default styling for the side navigation container and images:

.gpPortfolio-Side-Nav {
	float:left;
	width:40px;
	height:425px;
	text-align:center;
	display:none;
}
.gpPortfolio-PrevBtn, .gpPortfolio-NextBtn {
	float:left;
	width:32px;
	height:32px;
	cursor:pointer;
	background:url(../images/previous.png) no-repeat;
	margin-top:120px;
}
.gpPortfolio-NextBtn {
	background:url(../images/next.png) no-repeat;
}

The top navigation (circle navigation) can be changed as well. The default images are grey.

.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li {
	float:left;
	display:block;
	background-image: url("../images/dot-nav-grey.gif");
	cursor:pointer;
	height:9px;
	width:9px;
	margin-left:5px;
}
 
.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li span {
	display:block;
	background-image: url("../images/dot-nav-grey.gif");
	background-position: -9px 0;
	height:9px;
	width:9px;
}

I have provided a number of other colors (black&white, blue, green, orange, and red), but you can also create your own.

.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li {
	background-image: url("../images/dot-nav-blue.gif");
}
 
.gpPortfolioCntnr h1 ul.gpPortfolio-Top-Nav li span {
	background-image: url("../images/dot-nav-blue.gif");
}

The following is the CSS file that I created for the gpDojoPortfolio demo – much of the styling changes will occur in the left and right displays.

.gpPortfolio-LeftItem IMG {
	margin-top:20px;
}
 
.gpPortfolio-RightItem h3 {
	color:#0239a4;
}
 
.gpPortfolioCntnr h1.gpPortfolio-Title {
	color:#0239a4;
	font-family:Arial, Helvetica, sans-serif;
	border-bottom-color: #0239a4;	
}

That’s it. The gpDojoPortfolio widget is fairly easy to use. You can view a demo in the dojo demo section of my site. You can download the widget from GitHub.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks