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.
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.