Skip to content

Instantly share code, notes, and snippets.

@tcaddy

tcaddy/hpu-sharepoint.css

Last active August 29, 2015 14:27
Show Gist options
  • Save tcaddy/e348af6a9e8dc66a83af to your computer and use it in GitHub Desktop.
Save tcaddy/e348af6a9e8dc66a83af to your computer and use it in GitHub Desktop.
Download ZIP
This is a place to hold some custom javascript and css code for HPU's implementation of the Ellucian Sharepoint Portal
Raw
hpu-sharepoint.css
/* Hide all like links on IT pages */
form[action^='/admin-services/it'] [id^='likesElement-'],
form[action^='/administrative-services/information-technology'] [id^='likesElement-'], {
display: none;
}
/* Hide all 'Email a link' links on IT pages */
form[action^='/admin-services/it'] li[id*='share'] a[title='Email a link'],
form[action^='/administrative-services/information-technology'] li[id*='share'] a[title='Email a link'] {
display: none;
}
/* Hide all ellipsis links on IT Tips and Tricks pages */
form[action^='/admin-services/it/tipsandtricks'] .ms-blog-commandSpace > [id^='commandBar']
form[action^='/administrative-services/information-technology'] .ms-blog-commandSpace > [id^='commandBar'] {
display: none;
}
Raw
hpu-sharepoint.js
/*
* The HPU object which should live in the global scope.
*/
var HPU = window.HPU || {}; // use HPU namespace to hold all our custom stuff
HPU.log_actions = true; // set to true to console log our actions, useful for debugging
/*
* Begin to merge in Lucus' custom javascript code here
*/
HPU._initialized = false; // Set to true after initialization.
// An array of HPU methods to execute on initialization.
// Add to this array using HPU.OnInit(object);
HPU._onInit = [];
/*
* the rest of Lucas' code is in the function below...
*/
window.jQuery(function(){ // jQuery way to run things when page has loaded
(function ($,undefined) { // wrap our function so we can (safely) use '$' instead of 'jQuery'; redefine undefined as undefined
HPU.after_load_or_ajax = function() { // things that happen on page load or refresh after Ajax should go in this function
/*if (!HPU.is_logged_in()) {
HPU.hide_like_elements();
}*/
HPU.modify_empty_list_messages();
HPU.ellipsify_did_you_know();
HPU.hide_oit_workshop_meta_info(); // Lucas stuff...
HPU.run_things_to_extend_HPU(); // Lucas stuff...
HPU.hide_secondary_command_link(); // Lucas stuff...
HPU.run_things_for_onInit(); // Lucas stuff...
// Initialize the HPU object 2nd to last
HPU.init(); // Lucas stuff...
// do the force CSS reflow last...
HPU.force_reflow($("body")[0]);
};
HPU.is_logged_in = function() { // function to determine if a user is logged in
var logged_in = false;
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
if (web.get_currentUser()) {
logged_in = true;
}
} catch(e) {}
if (HPU.log_actions) {
console.log('logged in?: '+(logged_in ? 'Yes' : 'No'));
}
return logged_in;
};
HPU.hide_like_elements = function() {
// hides the link links
var sel = $("[id^='likesElement-']");
if (sel.length>0) {
sel.hide();
if (HPU.log_actions) {
console.log(sel.length+' like element(s) hidden.');
}
}
}
HPU.modify_empty_list_messages = function() {
// change message on IT homepage
var sel = $('td.ms-vb:contains(There are no items to show in this view of the "OIT Workshops" list.)');
if (sel.length>0) {
sel.text('There are currently no workshops scheduled.');
if (HPU.log_actions) {
console.log('replaced text of an empty list message');
}
}
}
HPU.ellipsify_did_you_know = function() {
// replaces "Did You Know?" with "Did You Know..."
// This won't work on page load, but if you run it from the
// console, it will work. It is because some other javascript is
// changing the form[action] attribute that we use to know that we are
// on an IT webpage.
var sel_string = "form[action^='/admin-services/it'] .hpu-did-you-knows > *:contains(Did You Know?)"+
", form[action^='/administrative-services/information-technology'] .hpu-did-you-knows > *:contains(Did You Know?)";
var sel = $(sel_string);
if (sel.length===0) {
// we might still be on an IT webpage, let's check another way
var sel2_string = "head title:contains(OIT), head title:contains(Information Technology)";
var sel2 = $(sel2_string);
if (sel2.length>0) {
sel_string = ".hpu-did-you-knows > *:contains(Did You Know?)";
sel = $(sel_string);
}
}
if (sel.length>0) {
sel.text('Did You Know...');
if (HPU.log_actions) {
console.log('replaced question mark with ellipsis in "Did you know" text');
console.log('this is our select string for ellisification: '+sel_string);
}
}
}
HPU.force_reflow = function(element) {
// things that force a reflow: http://stackoverflow.com/a/27637245
// this solution is based on: http://stackoverflow.com/a/21665117
if ('offsetHeight' in element) {
var offset = element.offsetHeight;
if (HPU.log_actions) {
console.log('forced a CSS reflow');
}
}
}
/*
* begin Lucus' functions...
*/
HPU.extendHPU = function(object, init, force) {
// Set default value for force.
if ( typeof(force) === 'undefined' ) {
force = false;
}
var i;
// Add each given method/property to this object (HPU).
for (i in object) {
if ( force === true || typeof(this[i]) === 'undefined' ) {
this[i] = object[i];
}
}
}
HPU.init = function() {
// Initialization this object and what ever was given to this.onInit to be initialized.
// Foreach method we need to initialize.
_.each(_.sortBy(this._onInit, 'priority'), function(onInit, index) {
this.initOther(onInit);
}, this);
this._initialized = true;
}
HPU.initOther = function(onInit) {
// Execute a given method on init.
// If the given method is a function
if ( typeof this[onInit.method] === 'function' ) {
// Execute HPU.fooBar()
this[onInit.method]();
} else {
if ( (typeof(this[onInit.method]) !== 'undefined') && (typeof(this[onInit.method].init) === 'function') ) {
// Execute HPU.fooBar.init()
this[onInit.method].init();
}
}
}
HPU.onInit = function(initParams) {
// Add methods to be run on init.
// If we weren't given an object or initParams.method isn't defined.
if ( typeof(initParams) === 'undefined' || typeof(initParams.method) === 'undefined' ) {
return false;
}
// Default values.
var defaults = {
priority: 10
};
initParams = _.extend(defaults, initParams);
// Add to init queu.
this._onInit.push(initParams);
// If initialization has already happend go ahead and run it.
if ( this._initialized === true ) {
this.initOther(initParams);
}
}
HPU.hide_oit_workshop_meta_info = function() {
$('#ctl00_ctl45_g_02183396_7966_4c18_8d77_480e45c99d95_ctl00_ctl10_ctl00_InitContentType').closest('td').hide();
}
HPU.run_things_to_extend_HPU = function() {
HPU.extendHPU({
// Hide recent links in the left side nav.
hideRecent: function() {
$(".ms-core-listMenu-item:contains('Recent')").parent().hide();
}
});
HPU.extendHPU({
// Submit the login form to the TMG.
formBase: {
/* - - Methods/properties that need to be supplied. - - */
// Form action URL.
// Must be provided when extended.
// action: null,
// Form method.
// Must be provided when extended.
// method: 'post',
// Source Form element.
// Must be provided when extended.
// el: $('#LoginForm'),
// DOM events to watch
// Must be provided when extended.
// events: [
// The following entries should be provided to submit the form.
// ['.misc-input-selector', 'keypress', 'watchForEnter'],
// ['.submit-button-selector', 'click', 'userSubmit']
// These would be optional custom events.
// ['Some Selector', 'Some Event', 'Some Method of your object'],
// ['.myInput', 'focus', 'myMethod'],
// ],
// Fields to submit
// Must be provided when extended.
// fields: {
// field1: 'A static value',
// field2: function() { return "Some value"; },
// field3: function() { return $.proxy(this.someMethod, this); },
// },
// User fields to validate
// Must be provided when extended.
// validate: {
// field1: {
// el: $('.some-selector'),
// errorMsg: 'Please provide field 1.',
// required: true,
// value: function() { return this.el.val(); },
// },
// field2: {
// el: $('.another-selector'),
// errorMsg: 'This field is not required so this message won't be seen.',
// required: false,
// value: function() { return this.el.val(); }
// }
// },
/* - - Methods/properties that shouldn't need to be overridden. - - */
// Error log.
errors: [],
// The form element.
form: $('<form>'),
// Initialize class.
init: function() {
// If the login form isn't present.
if ( this.el.length === 0 ) {
return false;
}
// Initiate events.
this.initEvents();
return true;
},
// Initiate events.
initEvents: function() {
_.each(this.events, function(event) {
$(event[0]).on(event[1], $.proxy(this[event[2]], this));
}, this);
},
// Append given input to the form.
appendInput: function(name, value) {
if ( typeof value === 'function' ) {
value = value();
}
return $('<input>')
.attr('type', 'hidden')
.attr('name', name)
.val(value)
.appendTo(this.form);
},
// Display an error.
error: function() {
// Get error container.
var div = this.errorContainer();
// If there are no errors to display
if ( this.errors.length === 0 ) {
return false;
}
// Foreach error.
for (var i = 0; i < this.errors.length; i++) {
$('<p>')
.html(this.errors[i])
.appendTo(div);
}
// Display errors.
div.show();
// Clear errors.
this.errors = [];
return true;
},
// Get/create/empty the error container.
errorContainer: function() {
// Create error div.
if ( this.el.find('.error').length === 0 ) {
return $('<div>')
.addClass('error')
.css('display', 'none')
.appendTo(this.el);
}
// Get error div.
else {
return this.el.find('.error')
.hide()
.empty();
}
},
// User submits the form.
userSubmit: function(event) {
// Prevent any default form behavior.
if ( event !== undefined ) {
event.preventDefault();
}
// Validate user input.
for ( var key in this.validate ) {
if ( this.validate.hasOwnProperty(key) ) {
var field = this.validate[key];
if ( field.required && field.value() === '' ) {
this.errors.push(field.errorMsg);
}
}
}
// If there where errors display them and stop
if ( this.errors.length > 0 ) {
this.error();
return false;
}
// Submit the form!
this.submit();
},
// Submit the form.
submit: function() {
// Setup the form element.
this.form
.attr('action', this.action)
.attr('method', this.method)
.css('display', 'none');
// Add each field to the form.
for ( var key in this.fields ) {
if ( this.fields.hasOwnProperty(key) ) {
// Append input for the field.
if ( typeof this.fields[key] === 'function' ) {
this.appendInput(key, $.proxy(this.fields[key], this));
} else {
this.appendInput(key, this.fields[key]);
}
}
}
// Append form to the body tag.
this.form
.appendTo($('body'))
.submit();
},
// Watch for user to press enter to submit the form
watchForEnter: function( event ) {
if ( event.keyCode != keyCodes.enter ) {
return;
}
event.preventDefault();
this.userSubmit();
return;
}
}
});
HPU.extendHPU({
/*
* Get the tallest half width ticket's height and set
* all the set all ticket's height to match.
*/
setTicketsHeight: function() {
// For storing the tallest ticket height.
var tallestTicket = 0;
// For storing tickets in the current row.
var ticketRow = $([]);
$('.ticket.half').height('auto');
$('.ticket.half').each(function(){
// Add ticket to current row reference.
ticketRow = ticketRow.add(this);
// Get the current ticket height.
var height = $(this).outerHeight();
// See if this is the tallest ticket thus far.
if ( height > tallestTicket )
tallestTicket = height;
// If this isn't the last ticket in the row.
if ( ! $(this).hasClass('last') )
return;
// Set all tickets in this row to match the tallest tickets height.
ticketRow.height(tallestTicket + "px");
// Reset the tallest ticket.
tallestTicket = 0;
// Reset the current row.
ticketRow = $([]);
});
return true;
},
initTickets: function() {
this.setTicketsHeight();
// TODO: Make this resize work.
$(window).resize( $.proxy(this.setTicketsHeight(), this) );
}
});
HPU.extendHPU({
// JS for the global menu on mobile devices.
globalMobileMenu: {
$toggle: $('.mobile-menu-toggle-global'),
$el: $('.main-menu'),
menuStyle: null,
// DOM events to watch
events: [
['.mobile-menu-toggle-global', 'click', 'toggle'],
['.main-menu .toggle-submenu', 'click', 'toggleSubmenu'],
[window, 'resize', 'resize']
],
// Initialize class.
init: function() {
this.addIcons();
this.resize();
this.initEvents();
},
// Initiate events.
initEvents: function() {
_.each(this.events, function(event) {
$(event[0]).on(event[1], $.proxy(this[event[2]], this));
}, this);
},
toggle: function() {
if ( this.$el.is(':visible') ) {
this.hide();
} else {
this.display();
}
},
display: function() {
this.$el.show();
this.$toggle.addClass('open');
},
hide: function() {
this.$el.hide();
this.$toggle.removeClass('open');
},
addIcons: function() {
console.log('globalMobileMenu.addIcons()');
var links = this.$el.find('a');
for (var i = 0, n = links.length; i < n; i++) {
if ( $(links[i]).siblings('ul').length === 0 ) {
continue;
}
this.addIcon( $(links[i]) );
}
},
addIcon: function( $el ) {
console.log('globalMobileMenu.addIcon()');
if ( $el.hasClass('selected') ) {
$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open-grey"></span></a>');
} else {
$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed-grey"></span></a>');
}
},
toggleSubmenu: function( e ) {
e.preventDefault();
var $target = $(e.target);
var $icon = this.getIcon( $target );
var $submenu = this.getSubMenu( $target );
if ( $submenu.is(':visible') ) {
this.hideSubMenu( $icon, $submenu );
} else {
this.displaySubMenu( $icon, $submenu );
}
},
getIcon: function( $el ) {
if ( $el.hasClass('toggle-submenu') ) {
return $el.find('.icon');
}
return $el;
},
getSubMenu: function( $el ) {
var $submenu = $el.siblings('ul');
if ( $submenu.length === 0 ) {
return this.getSubMenu( $el.parent() );
}
return $submenu;
},
displaySubMenu: function( $icon, $submenu ) {
$submenu.show();
$icon
.removeClass('icons-menu-closed-grey')
.addClass('icons-menu-open-grey');
},
hideSubMenu: function( $icon, $submenu ) {
$submenu.hide();
$icon
.removeClass('icons-menu-open-grey')
.addClass('icons-menu-closed-grey');
},
/*
* When the window is resized.
*/
resize: function() {
// Get the new window size.
var width = $(window).width();
var menuStyle;
// Mobile screen size.
if ( width < 667 ) {
menuStyle = 'mobile';
}
// All other devices.
else {
menuStyle = 'desktop';
}
// If menu style didn't change.
if ( this.menuStyle == menuStyle ) {
return;
}
// Update current menu style.
this.menuStyle = menuStyle;
}
},
// JS for collapsible side nav.
collapsibleSideNav: {
$toggle: $('.mobile-menu-toggle-sidenav'),
$el: $('.sideNav-menu'),
// DOM events to watch
events: [
['.mobile-menu-toggle-sidenav', 'click', 'toggle'],
['.sideNav .toggle-submenu', 'click', 'toggleSubmenu'],
[window, 'resize', 'resize']
],
// Initialize class.
init: function() {
// Initiate events.
this.displayActive();
this.addIcons();
this.initEvents();
this.resize();
},
displayActive: function() {
var $submenus = this.$el.find('ul ul');
for (var i = 0, n = $submenus.length; i < n; i++) {
if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
$($submenus[i]).siblings('a').addClass('selected');
$($submenus[i]).parent().addClass('selected');
}
};
// var $submenus = this.$el.find('ul ul');
// for (var i = 0, n = $submenus.length; i < n; i++) {
// if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
// this.displaySubMenu( $($submenus[i]).siblings('.toggle-submenu'), $($submenus[i]) );
// }
// };
},
// Initiate events.
initEvents: function() {
_.each(this.events, function(event) {
$(event[0]).on(event[1], $.proxy(this[event[2]], this));
}, this);
},
toggle: function() {
if ( this.$el.is(':visible') ) {
this.hide();
} else {
this.display();
}
},
toggleSubmenu: function( e ) {
e.preventDefault();
var $target = $(e.target);
var $icon = this.getIcon( $target );
var $submenu = this.getSubMenu( $target );
if ( $submenu.is(':visible') ) {
this.hideSubMenu( $icon, $submenu );
} else {
this.displaySubMenu( $icon, $submenu );
}
},
display: function() {
this.$el.show();
this.$toggle.addClass('open');
this.$toggle.children('.icon')
.removeClass('icons-plus-20')
.addClass('icons-minus-20');
},
hide: function() {
this.$el.hide();
this.$toggle.removeClass('open');
this.$toggle.children('.icon')
.removeClass('icons-minus-20')
.addClass('icons-plus-20');
},
getIcon: function( $el ) {
if ( $el.hasClass('toggle-submenu') ) {
return $el.find('.icon');
}
return $el;
},
getSubMenu: function( $el ) {
var $submenu = $el.siblings('ul');
if ( $submenu.length === 0 ) {
return this.getSubMenu( $el.parent() );
}
return $submenu;
},
displaySubMenu: function( $icon, $submenu ) {
$submenu.show();
$icon
.removeClass('icons-menu-closed')
.addClass('icons-menu-open');
},
hideSubMenu: function( $icon, $submenu ) {
$submenu.hide();
$icon
.removeClass('icons-menu-open')
.addClass('icons-menu-closed');
},
addIcons: function() {
var links = this.$el.find('a');
for (var i = 0, n = links.length; i < n; i++) {
if ( $(links[i]).siblings('ul').length === 0 ) {
continue;
}
this.addIcon( $(links[i]) );
}
},
addIcon: function( $el ) {
if ( $el.hasClass('selected') ) {
$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open"></span></a>');
} else {
$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed"></span></a>');
}
},
/*
* When the window is resized.
*/
resize: function() {
// Get the new window size.
var width = $(window).width();
var menuStyle;
// Mobile screen size.
if ( width < 667 ) {
this.hide();
}
// All other devices.
else {
this.display();
}
}
}
});
}
HPU.run_things_for_onInit = function() {
// Add login form initialization.
HPU.onInit({
method: 'hideRecent',
priority: 0
});
// Initialize globalMobileMenu.
HPU.onInit({
method: 'globalMobileMenu',
priority: 0
});
// Initialize collapsibleSideNav.
HPU.onInit({
method: 'collapsibleSideNav',
priority: 0
});
// Add login form initialization.
HPU.onInit({
method: 'initTickets',
priority: 0
});
}
HPU.hide_secondary_command_link = function() {
$(".ms-secondaryCommandLink").hide();
}
/*
* end Lucus' functions...
*/
HPU.after_load_or_ajax(); // run our stuff...
})(window.jQuery);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment