Archive for January, 2008

YUI charts, RTE YouTube and Yahoo Maps plugin

Saturday, January 19th, 2008

WeGoAll is always trying to improve and enhance the user experience on our clients’ websites. That’s why we’ve been using the Yahoo! User Interface (YUI) to improve our clients’ websites and allow for more intuitive viewing and administrator controls. We recently implemented one of the newest controls from the YUI team: Charts. The charts control allows us to easily visualize tabular data in several different formats, including a pie chart. We implemented the pie chart feature to more graphically and understandably display the votes to member polls.

Polls and YUI charts

Rich Text Editor - YouTube plugin

We also have been using another great feature from the YUI team, the Rich Text Editor. The rich text editor allows our clients to easily create and style content, and does not require users to know or understand HTML code.

Here is a plugin WeGoAll created so that our clients could easily insert YouTube videos into their websites using the Rich Text Editor from the Yahoo User Interface.

View a demonstration

<style type="text/css">
  .yui-skin-sam .yui-toolbar-container .yui-toolbar-youTube span.yui-toolbar-icon {
    background-image: url(http://www.wegoall.com/themes/default/images/shared/icons/youtube_icon.gif);
    background-position: 1px 0px;
  }
</style>

...

var myEditor = new YAHOO.widget.Editor('full_editor', {
  height: '300px', width: '530px', dompath: true
});

myEditor.on('toolbarLoaded', function() {
    var youTubeMovie = {
    	showDlg : false,
    	dlg : null,
    	dialog_config : { width: '400px', height: 'auto', fixedcenter: true, constraintoviewport: true, visible: false, draggable: false, modal: true },
    	handleCancel : function() {
    		this.cancel();
    		youTubeMovie.showDlg = false;
    	},
    	handleSubmit : function() {
    		if (!this.getData().ymovie) return false;
    		youTubeMovie.showDlg = false;
    		var fl_url = this.getData().ymovie.match(/(youtube).*(v=)([^&]*)/);
		    fl_url = fl_url[3];
		    fl_url = "http://www.youtube.com/v/" + fl_url;
		    var html = '<br><br><div style="margin: auto; text-align: center; background: #eee; width: 425px; height: 350px;"><object width="425" height="350"><param name="movie" value="' + fl_url + '"></param><param name="wmode" value="transparent"></param><embed src="' + fl_url + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div><br><br>';
		    myEditor.execCommand('inserthtml', html);
		    this.cancel();
    	},
    	createDialog: function() {
    		var youtubeEle = document.createElement('div');
    		youtubeEle.setAttribute('id', 'youTubeDlg');
    		youtubeEle.innerHTML = '<div class="hd">Insert YouTube Movie</div><divclass="bd"><form name="youTubeForm" class="text"><br/>YouTube Movie URL: <input type="text" name="ymovie" size="30"/><br /></form></div>';
    		YAHOO.util.Dom.setStyle(youtubeEle, 'visibility', 'hidden');
    		document.body.appendChild(youtubeEle);
    		youTubeMovie.dlg = new YAHOO.widget.Dialog(youtubeEle, youTubeMovie.dialog_config);
    		youTubeMovie.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:youTubeMovie.handleSubmit, isDefault:true }, { text:"Cancel", handler:youTubeMovie.handleCancel } ]);
    		youTubeMovie.dlg.render(document.body);
    	},
    	toggle : function() {
    		youTubeMovie.showDlg = !youTubeMovie.showDlg;
    		if (youTubeMovie.showDlg) {
    			youTubeMovie.dlg.show();
    		} else {
    			youTubeMovie.dlg.hide();
    		}
    	}
    };    

    myEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Insert YouTube movie', value: 'youTube' }, 'insertitem');				    

    myEditor.toolbar.on('youTubeClick', function() {
        youTubeMovie.toggle();
    });    

    youTubeMovie.createDialog();  

});

Rich Text Editor - Yahoo Maps plugin

Here is a plugin WeGoAll created so that our clients could easily insert Yahoo Maps into their websites.

View a demonstration

var yahooMapsScan = function(e) {
	var mapEle = YAHOO.util.Dom.getElementsByClassName('yahooMap'), mapElement;
	if (mapEle) {
		for (var i = 0; i < mapEle.length; ++i) {
			mapElement = mapEle[i];
			var map = new YMap(mapElement), address = mapElement.getAttribute('address'), zoom = mapElement.getAttribute('zoom');
			map.addTypeControl();
			map.addZoomLong();
			map.setMapType(YAHOO_MAP_REG);
			map.drawZoomAndCenter(address, zoom);
			YEvent.Capture(map, EventsList.onEndGeoCode, function() { map.addMarker(map.getCenterLatLon()); });
		}
	}
};

myEditor.on('toolbarLoaded', function() {
    var yahooMaps = {
    	showDlg : false, dlg : null,
    	dialog_config : { width: '300px', height: 'auto', fixedcenter: true, constraintoviewport: true, visible: false, draggable: false, modal: true },
    	handleCancel : function() {
    		// If the user clicked cancel in the dialog, then hide the dialog
    		this.cancel();
    		yahooMaps.showDlg = false;
    	},
    	handleSubmit : function() {
    		// If the user clicked submit, then insert the YouTube HTML into the editor
    		if (!this.getData().street && !this.getData().city && !this.getData().state && !this.getData().zip && !this.getData().country) return false;
    		yahooMaps.showDlg = false;

    		var street = this.getData().street,
    			city = this.getData().city,
    			state = this.getData().state,
    			zip = this.getData().zip,
    			country = this.getData().country,
    			address = '';

    		if (street) address += street;
    		if (city) address += ',' + city;
    		if (state) address += ',' + state;
    		if (zip) address += ',' + zip;
    		if (country) address += ',' + country;

		    // Create the HTML code to insert the map into the editor
		    var html = '<br><br><div class="yahooMap" address="' + address + '" zoom="3" style="margin: auto; text-align: center; background: #eee; width: 425px; height: 350px;"> </div><br><br>';
		    // Insert the html into the editor
		    myEditor.execCommand('inserthtml', html);
		    // Hide the dialog
		    this.cancel();
    	},
    	createDialog: function() {
    		// Create the container element for the dialog
    		var yahoomapsEle = document.createElement('div');
    		yahoomapsEle.setAttribute('id', 'youTubeDlg');
    		yahoomapsEle.innerHTML = '<div class="hd">Insert Yahoo Map</div><div class="bd"><form name="mapForm" class="text"><table><tr><td>Street</td><td><input type="text" name="street" /></td></tr><tr><td>City</td><td><input type="text" name="city" /></td></tr><tr><td>State</td><td><input type="text" name="state" /></td></tr><tr><td>Zip</td><td><input type="text" name="zip" /></td></tr><tr><td>Country</td><td><input type="text" name="country" /></td></tr></table></form></div>';
    		YAHOO.util.Dom.setStyle(yahoomapsEle, 'visibility', 'hidden');
    		document.body.appendChild(yahoomapsEle);
    		// Create the dialog
    		yahooMaps.dlg = new YAHOO.widget.Dialog(yahoomapsEle, yahooMaps.dialog_config);
    		yahooMaps.dlg.cfg.queueProperty("buttons", [ { text:"Submit", handler:yahooMaps.handleSubmit, isDefault:true }, { text:"Cancel", handler:yahooMaps.handleCancel } ]);
    		yahooMaps.dlg.render(document.body);
    	},
    	toggle : function() {
    		// Show/Hide the YouTube dialog
    		yahooMaps.showDlg = !yahooMaps.showDlg;
    		if (yahooMaps.showDlg) {
    			yahooMaps.dlg.show();
    		} else {
    			yahooMaps.dlg.hide();
    		}
    	}
    };
    // Add the Yahoo Maps button to the editor's toolbar in the Insert Item group
    myEditor.toolbar.addButtonToGroup({ type: 'push', label: 'Insert Yahoo Map', value: 'yahooMaps' }, 'insertitem');
    // When the user clicks the button, then run this function
    myEditor.toolbar.on('yahooMapsClick', function() {
        yahooMaps.toggle();
    });
    // Create the dialog that allows the user to enter the map address
    yahooMaps.createDialog();
});

About WeGoAll

WeGoAll creates interactive fraternity and sorority websites and database management tools that will professionally present chapters online, help to facilitate internal chapter communication between members and alumni, help improve communication with potential new members, and improve alumni donations.

WeGoAll - Enhanced communication

Friday, January 11th, 2008

We have been very busy these last few months signing new organizations and improving the features of your chapter’s website.

With the growing interest in WeGoAll, we had to find a better way to communicate with potential clients and give support to our current clients, while still finding time to constantly improve our websites’ features. WeGoAll recently started using a free service called the Zoho CRM that not only allows us to streamline our sales process to potential clients, but it also helps us to provide top-notch support to our current clients.

Zoho CRM

If you ever have a question for our staff or you are running into a problem on your website, simply click the “Help” link in your site’s control panel .  Next click the link at the top of the window labeled “Have a problem or need help?” From there you will be able to contact our staff and let us know what you need. After the contact form is submitted, the information is sent via email to all WeGoAll staff members and added into the Zoho CRM case manager.

We have also been hard at work helping our clients to communicate more easily. Text-messaging has been possible with our websites since last year, but we recently lowered the price of each text-message considerably. Text-messaging members provides a way for any chapter to communicate more effectively.

We also recently improved the “Automatic Newsletter” feature with fully customizable information and images.  The automatic newsletter feature allows organizations to automatically send out newsletters on the first day of every month.  The newsletters can be sent to any or all members and contains the latest news, upcoming events for the month, and other organizational information.

The message board, private messaging system, file sharing, and job listing features have also been completely redesigned.

Does your fraternity or sorority need a WeGoAll website to enhance chapter communication?