Ticket #6569: 6569.js-only.patch

src/bp-templates/bp-legacy/buddypress-functions.php

@@ -278 +278 @@
                 $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 +308 @@
                         '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() ) ) {
 
@@ -331 +344 @@
 
                 // Star private messages.
                 if ( bp_is_active( 'messages', 'star' ) && bp_is_user_messages() ) {
-                        wp_localize_script( $asset['handle'], 'BP_PM_Star', array(
+                        wp_localize_script( $js['handle'], 'BP_PM_Star', array(
                                 'strings' => array(
                                         'text_unstar'  => __( 'Unstar', 'buddypress' ),
                                         'text_star'    => __( 'Star', 'buddypress' ),

src/bp-templates/bp-legacy/css/buddypress.css

@@ -129 +129 @@
         font-family: inherit;
         font-size: medium;
         height: 20px;
+        overflow: hidden;
         padding: 6px;
+        resize: none;
         width: 98%;
 }
 body.no-js #buddypress form#whats-new-form textarea {
         height: 50px;
+        overflow: auto;
 }
 #buddypress form#whats-new-form #whats-new-options select {
         max-width: 200px;
@@ -143 +146 @@
         float: right;
         margin-top: 12px;
 }
-#buddypress #whats-new-options {
-        overflow: auto;
-        height: 0;
+#buddypress #whats-new-options:after {
+        clear: both;
+        content: '';
+        display: table;
 }
 body.no-js #buddypress #whats-new-options {
         height: auto;
@@ -155 +159 @@
         outline-color: rgba(31, 179, 221, 0.9);
 }
 
+/* Autosize.js hack for IE10-11 - avoids jumpiness */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+        #buddypress form#whats-new-form textarea {
+                padding-bottom: 22px;
+        }
+}
+
 /*--------------------------------------------------------------
 3.1.1 - Activity Listing
 --------------------------------------------------------------*/

new file src/bp-templates/bp-legacy/js/autosize.js

@@ +1 @@
+/*!
+        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

src/bp-templates/bp-legacy/js/buddypress.js

@@ -28 +28 @@
         /* Object filter and scope set. */
         bp_init_objects( objects );
 
+        /* Textarea auto-resize */
+        $whats_new.attr('rows', '1');
+        autosize( $whats_new );
+
         /* @mention Compose Scrolling */
         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-options').slideDown();
 
                 jq.scrollTo( $whats_new, 500, {
                         offset:-125,
@@ -46 +44 @@
                 } );
 
                 $whats_new.val('').focus().val( $member_nicename );
+        } else {
+                jq('#whats-new-options').hide();
         }
 
         /**** Activity Posting ********************************************************/
 
         /* Textarea focus */
         $whats_new.focus( function(){
-                jq('#whats-new-options').animate({
-                        height:'50px'
-                });
-                jq('#whats-new-form textarea').animate({
-                        height:'50px'
-                });
+                jq( '#whats-new-options' ).slideDown();
+
                 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 +80 @@
                 }
         });
 
-        /* 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);
+        /* For the "What's New" form, do the following on focusout. */
+        jq( '#whats-new-form' ).on( 'focusout', function( e ) {
+                var elem = jq( this );
+
+                // Let child hover actions passthrough.
+                // This allows click events to go through without focusout.
+                setTimeout( function () {
+                        if ( ! elem.find(':hover').length ) {
+                                jq( '#whats-new-options' ).slideUp();
+
+                                jq('#aw-whats-new-submit').prop( 'disabled', true );
+
                                 jq( '#whats-new-content' ).removeClass( 'active' );
+                                $whats_new.parent().removeClass( 'active' );
                         }
-                }
-        });
+                }, 0 );
+        } );
 
         /* 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 +161 @@
                         object = jq('#whats-new-post-object').val();
                 }
 
-                jq.post( ajaxurl, {
+                post_data = jq.extend( {
                         action: 'post_update',
                         'cookie': bp_get_cookies(),
                         '_wpnonce_post_update': jq('#_wpnonce_post_update').val(),
@@ -154 +170 @@
                         'item_id': item_id,
                         'since': last_date_recorded,
                         '_bp_as_nonce': jq('#_bp_as_nonce').val() || ''
-                },
-                function(response) {
+                }, inputs );
 
-                        form.children().each( function() {
-                                if ( jq.nodeName(this, 'textarea') || jq.nodeName(this, 'input') ) {
+                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 );
                                 }
                         });
@@ -205 +221 @@
                                 jq('li.new-update').hide().slideDown( 300 );
                                 jq('li.new-update').removeClass( 'new-update' );
                                 jq('#whats-new').val('');
+                                form.get(0).reset();
 
                                 // reset vars to get newest activities
                                 newest_activities = '';
                                 activity_last_recorded  = 0;
                         }
 
-                        jq('#whats-new-options').animate({
-                                height:'0px'
-                        });
+                        jq('#whats-new-options').slideUp();
                         jq('#whats-new-form textarea').animate({
                                 height:'20px'
                         });