diff --git src/bp-activity/bp-activity-template.php src/bp-activity/bp-activity-template.php index 4eadba0..d6b8230 100644 --- src/bp-activity/bp-activity-template.php +++ src/bp-activity/bp-activity-template.php @@ -994,6 +994,43 @@ function bp_activity_per_page() { } /** + * Output the activity post form textarea placeholder. + * + * @since 2.4.0 + * + * @uses bp_get_activity_whats_new_placeholder() + */ +function bp_activity_whats_new_placeholder() { + echo bp_get_activity_whats_new_placeholder(); +} + + /** + * Return the activity post form textarea placeholder. + * + * @since 2.4.0 + * + * @uses apply_filters() To call the 'bp_get_activity_per_page' hook. + * + * @return string The activity post form textarea placeholder. + */ + function bp_get_activity_whats_new_placeholder() { + $placeholder = sprintf( __( "What's new, %s?", 'buddypress' ), bp_get_user_firstname( bp_get_loggedin_user_fullname() ) ); + + if ( bp_is_group() ) { + $placeholder = sprintf( __( "What's new in %s, %s?", 'buddypress' ), bp_get_group_name(), bp_get_user_firstname( bp_get_loggedin_user_fullname() ) ); + } + + /** + * Filters the activity post form textarea placeholder. + * + * @since 2.4.0 + * + * @param string $placeholder the activity post form textarea placeholder. + */ + return apply_filters( 'bp_get_activity_whats_new_placeholder', $placeholder ); + } + +/** * Output the activities title. * * @since 1.0.0 diff --git src/bp-templates/bp-legacy/buddypress-functions.php src/bp-templates/bp-legacy/buddypress-functions.php index 28d2c22..041ec92 100644 --- src/bp-templates/bp-legacy/buddypress-functions.php +++ src/bp-templates/bp-legacy/buddypress-functions.php @@ -278,12 +278,12 @@ class BP_Legacy extends BP_Theme_Compat { $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; // Locate the BP JS file. - $asset = $this->locate_asset_in_stack( "buddypress{$min}.js", 'js' ); + $js = $this->locate_asset_in_stack( "buddypress{$min}.js", 'js' ); // Enqueue the global JS, if found - AJAX will not work // without it. - if ( isset( $asset['location'], $asset['handle'] ) ) { - wp_enqueue_script( $asset['handle'], $asset['location'], bp_core_get_js_dependencies(), $this->version ); + if ( isset( $js['location'], $js['handle'] ) ) { + wp_enqueue_script( $js['handle'], $js['location'], bp_core_get_js_dependencies(), $this->version ); } /** @@ -308,13 +308,26 @@ class BP_Legacy extends BP_Theme_Compat { 'unsaved_changes' => __( 'Your profile has unsaved changes. If you leave the page, the changes will be lost.', 'buddypress' ), 'view' => __( 'View', 'buddypress' ), ) ); - wp_localize_script( $asset['handle'], 'BP_DTheme', $params ); + wp_localize_script( $js['handle'], 'BP_DTheme', $params ); // Maybe enqueue comment reply JS. if ( is_singular() && bp_is_blog_page() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } + /** + * Enqueues Autosize 3.0.13. + * + * @link https://github.com/jackmoore/autosize + * @license MIT + */ + if ( bp_is_active( 'activity' ) ) { + // @todo locate_asset_in_stack() should allow us to omit child theme checks... + $asset = $this->locate_asset_in_stack( "autosize{$min}.js", 'js', 'bp-legacy-autosize' ); + + wp_enqueue_script( $asset['handle'], $asset['location'], array( $js['handle'] ), '3.0.13' ); + } + // Maybe enqueue password verify JS (register page or user settings page). if ( bp_is_register_page() || ( function_exists( 'bp_is_user_settings_general' ) && bp_is_user_settings_general() ) ) { diff --git src/bp-templates/bp-legacy/buddypress/activity/post-form.php src/bp-templates/bp-legacy/buddypress/activity/post-form.php index 5632973..5aa93d2 100644 --- src/bp-templates/bp-legacy/buddypress/activity/post-form.php +++ src/bp-templates/bp-legacy/buddypress/activity/post-form.php @@ -25,64 +25,86 @@ -

-
+
- - + placeholder="">@
-
-
- -
+
+ - +
-
+ - : +
- - + - + - + - -
- + - + +
+ - - + - + + - + + +
+ + + do_action( 'bp_activity_post_form_before_submit' ); ?> + +
+ + + -
+ +
+
diff --git src/bp-templates/bp-legacy/css/buddypress.css src/bp-templates/bp-legacy/css/buddypress.css index 77b8e3a..29617ea 100644 --- src/bp-templates/bp-legacy/css/buddypress.css +++ src/bp-templates/bp-legacy/css/buddypress.css @@ -128,12 +128,16 @@ Hello, this is the BuddyPress Legacy stylesheet. color: #555; font-family: inherit; font-size: medium; - height: 20px; padding: 6px; - width: 98%; + width: 97.5%; + height: auto; + resize: none; + overflow: hidden; } body.no-js #buddypress form#whats-new-form textarea { height: 50px; + resize: vertical; + overflow: auto; } #buddypress form#whats-new-form #whats-new-options select { max-width: 200px; @@ -143,10 +147,21 @@ body.no-js #buddypress form#whats-new-form textarea { float: right; margin-top: 12px; } + #buddypress #whats-new-options { overflow: auto; + height: auto; + float:left; +} + +#buddypress #whats-new-content #whats-new-actions { height: 0; } + +#buddypress #whats-new-content.active #whats-new-actions { + width: auto; +} + body.no-js #buddypress #whats-new-options { height: auto; } @@ -155,6 +170,41 @@ body.no-js #buddypress #whats-new-options { outline-color: rgba(31, 179, 221, 0.9); } +#buddypress #whats-new-content, #buddypress #whats-new-actions { + overflow: hidden; +} + +#buddypress #whats-new-textarea { + position: relative; +} + +#buddypress #whats-new-textarea:before, +#buddypress #whats-new-textarea:after { + border-color: transparent; + border-style: solid; + content: ' '; + height: 0; + position: absolute; + right: 99.8%; + width: 0; +} + +#buddypress #whats-new-textarea:before { + border-width: 10px; + border-right-color: #ccc; + top: 8px; +} + +#buddypress #whats-new-textarea:after { + border-width: 9px; + border-right-color: #fff; + top: 9px; +} + +#buddypress #whats-new-textarea.active:before { + border-right-color: rgba(31, 179, 221, 0.9) !important; +} + /*-------------------------------------------------------------- 3.1.1 - Activity Listing --------------------------------------------------------------*/ diff --git src/bp-templates/bp-legacy/js/autosize.js src/bp-templates/bp-legacy/js/autosize.js new file mode 100644 index 0000000..70dd07c --- /dev/null +++ src/bp-templates/bp-legacy/js/autosize.js @@ -0,0 +1,242 @@ +/*! + Autosize 3.0.13 + license: MIT + http://www.jacklmoore.com/autosize +*/ +(function (global, factory) { + if (typeof define === 'function' && define.amd) { + define(['exports', 'module'], factory); + } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') { + factory(exports, module); + } else { + var mod = { + exports: {} + }; + factory(mod.exports, mod); + global.autosize = mod.exports; + } +})(this, function (exports, module) { + 'use strict'; + + var set = typeof Set === 'function' ? new Set() : (function () { + var list = []; + + return { + has: function has(key) { + return Boolean(list.indexOf(key) > -1); + }, + add: function add(key) { + list.push(key); + }, + 'delete': function _delete(key) { + list.splice(list.indexOf(key), 1); + } }; + })(); + + function assign(ta) { + var _ref = arguments[1] === undefined ? {} : arguments[1]; + + var _ref$setOverflowX = _ref.setOverflowX; + var setOverflowX = _ref$setOverflowX === undefined ? true : _ref$setOverflowX; + var _ref$setOverflowY = _ref.setOverflowY; + var setOverflowY = _ref$setOverflowY === undefined ? true : _ref$setOverflowY; + + if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || set.has(ta)) return; + + var heightOffset = null; + var overflowY = null; + var clientWidth = ta.clientWidth; + + function init() { + var style = window.getComputedStyle(ta, null); + + overflowY = style.overflowY; + + if (style.resize === 'vertical') { + ta.style.resize = 'none'; + } else if (style.resize === 'both') { + ta.style.resize = 'horizontal'; + } + + if (style.boxSizing === 'content-box') { + heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); + } else { + heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); + } + // Fix when a textarea is not on document body and heightOffset is Not a Number + if (isNaN(heightOffset)) { + heightOffset = 0; + } + + update(); + } + + function changeOverflow(value) { + { + // Chrome/Safari-specific fix: + // When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space + // made available by removing the scrollbar. The following forces the necessary text reflow. + var width = ta.style.width; + ta.style.width = '0px'; + // Force reflow: + /* jshint ignore:start */ + ta.offsetWidth; + /* jshint ignore:end */ + ta.style.width = width; + } + + overflowY = value; + + if (setOverflowY) { + ta.style.overflowY = value; + } + + resize(); + } + + function resize() { + var htmlTop = window.pageYOffset; + var bodyTop = document.body.scrollTop; + var originalHeight = ta.style.height; + + ta.style.height = 'auto'; + + var endHeight = ta.scrollHeight + heightOffset; + + if (ta.scrollHeight === 0) { + // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM. + ta.style.height = originalHeight; + return; + } + + ta.style.height = endHeight + 'px'; + + // used to check if an update is actually necessary on window.resize + clientWidth = ta.clientWidth; + + // prevents scroll-position jumping + document.documentElement.scrollTop = htmlTop; + document.body.scrollTop = bodyTop; + } + + function update() { + var startHeight = ta.style.height; + + resize(); + + var style = window.getComputedStyle(ta, null); + + if (style.height !== ta.style.height) { + if (overflowY !== 'visible') { + changeOverflow('visible'); + } + } else { + if (overflowY !== 'hidden') { + changeOverflow('hidden'); + } + } + + if (startHeight !== ta.style.height) { + var evt = document.createEvent('Event'); + evt.initEvent('autosize:resized', true, false); + ta.dispatchEvent(evt); + } + } + + var pageResize = function pageResize() { + if (ta.clientWidth !== clientWidth) { + update(); + } + }; + + var destroy = (function (style) { + window.removeEventListener('resize', pageResize); + ta.removeEventListener('input', update); + ta.removeEventListener('keyup', update); + ta.removeEventListener('autosize:destroy', destroy); + set['delete'](ta); + + Object.keys(style).forEach(function (key) { + ta.style[key] = style[key]; + }); + }).bind(ta, { + height: ta.style.height, + resize: ta.style.resize, + overflowY: ta.style.overflowY, + overflowX: ta.style.overflowX, + wordWrap: ta.style.wordWrap }); + + ta.addEventListener('autosize:destroy', destroy); + + // IE9 does not fire onpropertychange or oninput for deletions, + // so binding to onkeyup to catch most of those events. + // There is no way that I know of to detect something like 'cut' in IE9. + if ('onpropertychange' in ta && 'oninput' in ta) { + ta.addEventListener('keyup', update); + } + + window.addEventListener('resize', pageResize); + ta.addEventListener('input', update); + ta.addEventListener('autosize:update', update); + set.add(ta); + + if (setOverflowX) { + ta.style.overflowX = 'hidden'; + ta.style.wordWrap = 'break-word'; + } + + init(); + } + + function destroy(ta) { + if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return; + var evt = document.createEvent('Event'); + evt.initEvent('autosize:destroy', true, false); + ta.dispatchEvent(evt); + } + + function update(ta) { + if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return; + var evt = document.createEvent('Event'); + evt.initEvent('autosize:update', true, false); + ta.dispatchEvent(evt); + } + + var autosize = null; + + // Do nothing in Node.js environment and IE8 (or lower) + if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { + autosize = function (el) { + return el; + }; + autosize.destroy = function (el) { + return el; + }; + autosize.update = function (el) { + return el; + }; + } else { + autosize = function (el, options) { + if (el) { + Array.prototype.forEach.call(el.length ? el : [el], function (x) { + return assign(x, options); + }); + } + return el; + }; + autosize.destroy = function (el) { + if (el) { + Array.prototype.forEach.call(el.length ? el : [el], destroy); + } + return el; + }; + autosize.update = function (el) { + if (el) { + Array.prototype.forEach.call(el.length ? el : [el], update); + } + return el; + }; + } + + module.exports = autosize; +}); \ No newline at end of file diff --git src/bp-templates/bp-legacy/js/buddypress.js src/bp-templates/bp-legacy/js/buddypress.js index d0eb3d2..a79fc82 100644 --- src/bp-templates/bp-legacy/js/buddypress.js +++ src/bp-templates/bp-legacy/js/buddypress.js @@ -32,12 +32,8 @@ jq(document).ready( function() { if ( $whats_new.length && bp_get_querystring('r') ) { var $member_nicename = $whats_new.val(); - jq('#whats-new-options').animate({ - height:'50px' - }); - - $whats_new.animate({ - height:'50px' + jq('#whats-new-actions').animate({ + height:'100%' }); jq.scrollTo( $whats_new, 500, { @@ -52,14 +48,13 @@ jq(document).ready( function() { /* Textarea focus */ $whats_new.focus( function(){ - jq('#whats-new-options').animate({ - height:'50px' - }); - jq('#whats-new-form textarea').animate({ - height:'50px' + jq('#whats-new-actions').animate({ + height:'100%' }); + jq('#aw-whats-new-submit').prop('disabled', false); + jq( this ).parent().addClass( 'active' ); jq( '#whats-new-content' ).addClass( 'active' ); var $whats_new_form = jq('form#whats-new-form'), @@ -83,34 +78,60 @@ jq(document).ready( function() { } }); - /* On blur, shrink if it's empty */ - $whats_new.blur( function(){ - if ( document.activeElement !== this ) { - if (!this.value.match(/\S+/)) { - this.value = ''; - jq('#whats-new-options').animate({ - height:'0' - }); - jq('form#whats-new-form textarea').animate({ - height:'20px' - }); - jq('#aw-whats-new-submit').prop('disabled', true); - jq( '#whats-new-content' ).removeClass( 'active' ); - } + /* For the "What's New" form, do something on reset or focusout. */ + jq( '#whats-new-form' ).on( 'reset focusout', function( e ) { + // Reset only + if ( 'reset' === e.type ) { + // Make sure the textarea has been emptied + // When ?r=@username it's not the case + jq( '#whats-new-form textarea').text( '' ); + + jq( '#whats-new-actions' ).animate( { + height:'0' + } ); + + jq( '#whats-new-form textarea').css( { + height:'auto' + } ); + + jq( '#aw-whats-new-submit').prop( 'disabled', true ); } - }); + jq( '#whats-new-content' ).removeClass( 'active' ); + $whats_new.parent().removeClass( 'active' ); + } ); + + /* Texarea auto-resize */ + autosize( $whats_new ); /* New posts */ jq('#aw-whats-new-submit').on( 'click', function() { var last_date_recorded = 0, button = jq(this), - form = button.closest('form#whats-new-form'); + form = button.closest('form#whats-new-form'), + inputs = {}, post_data; + + // Get all inputs and organize them into an object {name: value} + jq.each( form.serializeArray(), function( key, input ) { + // Only include public extra data + if ( '_' !== input.name.substr( 0, 1 ) && 'whats-new' !== input.name.substr( 0, 9 ) ) { + if ( ! inputs[ input.name ] ) { + inputs[ input.name ] = input.value; + } else { + // Checkboxes/dropdown list can have multiple selected value + if ( ! jq.isArray( inputs[ input.name ] ) ) { + inputs[ input.name ] = new Array( inputs[ input.name ], input.value ); + } else { + inputs[ input.name ].push( input.value ); + } + } + } + } ); - form.children().each( function() { - if ( jq.nodeName(this, 'textarea') || jq.nodeName(this, 'input') ) { + form.find( '*' ).each( function() { + if ( jq.nodeName( this, 'textarea') || jq.nodeName( this, 'input' ) ) { jq(this).prop( 'disabled', true ); } - }); + } ); /* Remove any errors */ jq('div.error').remove(); @@ -145,23 +166,25 @@ jq(document).ready( function() { object = jq('#whats-new-post-object').val(); } - jq.post( ajaxurl, { - action: 'post_update', - 'cookie': bp_get_cookies(), - '_wpnonce_post_update': jq('#_wpnonce_post_update').val(), - 'content': content, - 'object': object, - 'item_id': item_id, - 'since': last_date_recorded, - '_bp_as_nonce': jq('#_bp_as_nonce').val() || '' - }, - function(response) { + // Include the public data to the post data + post_data = jq.extend( { + action : 'post_update', + 'cookie' : bp_get_cookies(), + '_wpnonce_post_update' : jq('#_wpnonce_post_update').val(), + 'content' : content, + 'object' : object, + 'item_id' : item_id, + 'since' : last_date_recorded, + '_bp_as_nonce' : jq('#_bp_as_nonce').val() || '', + }, inputs ); - form.children().each( function() { - if ( jq.nodeName(this, 'textarea') || jq.nodeName(this, 'input') ) { - jq(this).prop( 'disabled', false ); + jq.post( ajaxurl, post_data, function( response ) { + + form.find( '*' ).each( function() { + if ( jq.nodeName( this, 'textarea') || jq.nodeName( this, 'input' ) ) { + jq( this ).prop( 'disabled', false ); } - }); + } ); /* Check for errors and append if found. */ if ( response[0] + response[1] === '-1' ) { @@ -204,22 +227,22 @@ jq(document).ready( function() { jq('li.new-update').hide().slideDown( 300 ); jq('li.new-update').removeClass( 'new-update' ); - jq('#whats-new').val(''); + + // Reset the form + form.get(0).reset(); // reset vars to get newest activities newest_activities = ''; activity_last_recorded = 0; } - jq('#whats-new-options').animate({ + jq('#whats-new-actions').animate({ height:'0px' }); - jq('#whats-new-form textarea').animate({ - height:'20px' - }); + jq('#aw-whats-new-submit').prop('disabled', true).removeClass('loading'); jq( '#whats-new-content' ).removeClass( 'active' ); - }); + } ); return false; });