Skip to:
Content

BuddyPress.org

Changeset 10155


Ignore:
Timestamp:
09/29/2015 10:42:56 PM (9 years ago)
Author:
imath
Message:

Introduce functions to register and enqueue the Cover Images Javascript and Css

  • Add the cover-image.js Javascript and register it inside Core Common Scripts
  • Make sure to enqueue Cover Images script only when needed ("change-cover-image" screens)
  • Create a new function to attach an the inline css specified inside the Cover Image feature settings
  • Create the inline css for BP Legacy.
  • Adjust our main css file (buddypress.css) and the companion stylesheets
  • Add the Cover Images Backbone template into bp-legacy/buddypress/assets/_attachments

Props r-a-y

See #6570

Location:
trunk/src
Files:
3 added
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-core/bp-core-cssjs.php

    r10108 r10155  
    4343        'bp-avatar'   => array( 'file' => "{$url}avatar{$min}.js", 'dependencies' => array( 'jcrop' ), 'footer' => true ),
    4444        'bp-webcam'   => array( 'file' => "{$url}webcam{$min}.js", 'dependencies' => array( 'bp-avatar' ), 'footer' => true ),
     45
     46        // 2.4
     47        'bp-cover-image' => array( 'file' => "{$url}cover-image{$min}.js", 'dependencies' => array(), 'footer' => true ),
    4548
    4649    ) );
    … …  
    141144
    142145/**
     146 * Enqueues the css and js required by the Cover Image UI.
     147 *
     148 * @since  2.4.0
     149 */
     150function bp_core_cover_image_scripts() {
     151    if ( ! bp_attachments_cover_image_is_edit() ) {
     152        return false;
     153    }
     154
     155    // Enqueue the Attachments scripts for the Cover Image UI
     156    bp_attachments_enqueue_scripts( 'BP_Attachment_Cover_Image' );
     157}
     158add_action( 'bp_enqueue_scripts', 'bp_core_cover_image_scripts' );
     159
     160/**
    143161 * Enqueues jCrop library and hooks BP's custom cropper JS.
    144162 */
    … …  
    338356    ) );
    339357}
     358
     359/**
     360 * Add inline css to display the component's single item cover image
     361 *
     362 * @since 2.4.0
     363 *
     364 * @param  bool $return true to get the inline css
     365 * @return string|array the inline css or an associative array containing
     366 *                      the css rules and the style handle
     367 */
     368function bp_add_cover_image_inline_css( $return = false ) {
     369    $bp = buddypress();
     370
     371    // Find the component of the current item
     372    if ( bp_is_user() ) {
     373
     374        // User is not allowed to upload cover images
     375        // no need to carry on
     376        if ( bp_disable_cover_image_uploads() ) {
     377            return;
     378        }
     379
     380        $cover_image_object = array(
     381            'component' => 'xprofile',
     382            'object' => $bp->displayed_user
     383        );
     384    } elseif ( bp_is_group() ) {
     385
     386        // Users are not allowed to upload cover images for their groups
     387        // no need to carry on
     388        if ( bp_disable_group_cover_image_uploads() ) {
     389            return;
     390        }
     391
     392        $cover_image_object = array(
     393            'component' =>'groups',
     394            'object' => $bp->groups->current_group
     395        );
     396    } else {
     397        $cover_image_object = apply_filters( 'bp_current_cover_image_object_inline_css', array() );
     398    }
     399
     400    // Bail if no component were found.
     401    if ( empty( $cover_image_object['component'] ) || empty( $cover_image_object['object'] ) || ! bp_is_active( $cover_image_object['component'], 'cover_image' ) ) {
     402        return;
     403    }
     404
     405    // Get the settings of the cover image feature for the current component
     406    $params = bp_attachments_get_cover_image_settings( $cover_image_object['component'] );
     407
     408    // Bail if no params.
     409    if ( empty( $params ) ) {
     410        return;
     411    }
     412
     413    // Try to call the callback
     414    if ( is_callable( $params['callback'] ) ) {
     415
     416        $object_dir = $cover_image_object['component'];
     417
     418        if ( 'xprofile' === $object_dir ) {
     419            $object_dir = 'members';
     420        }
     421
     422        $cover_image = bp_attachments_get_attachment( 'url', array(
     423            'object_dir' => $object_dir,
     424            'item_id'    => $cover_image_object['object']->id,
     425        ) );
     426
     427        if ( empty( $cover_image ) ) {
     428            if ( ! empty( $params['default_cover'] ) ) {
     429                $cover_image = $params['default_cover'];
     430            }
     431        }
     432
     433        $inline_css = call_user_func_array( $params['callback'], array( array(
     434            'cover_image' => esc_url( $cover_image ),
     435            'component'   => sanitize_key( $cover_image_object['component'] ),
     436            'object_id'   => (int) $cover_image_object['object']->id,
     437            'width'       => (int) $params['width'],
     438            'height'      => (int) $params['height'],
     439        ) ) );
     440
     441        // Finally add the inline css to the handle
     442        if ( ! empty( $inline_css ) ) {
     443
     444            // Used to get the css when Ajax setting the cover image
     445            if ( true === $return ) {
     446                return array(
     447                    'css_rules' => '<style type="text/css">' . "\n" . $inline_css . "\n" . '</style>',
     448                    'handle'    => $params['theme_handle'],
     449                );
     450            }
     451
     452            wp_add_inline_style( $params['theme_handle'], $inline_css );
     453        } else {
     454            return false;
     455        }
     456    }
     457}
     458add_action( 'bp_enqueue_scripts', 'bp_add_cover_image_inline_css', 11 );

  • trunk/src/bp-core/css/avatar-rtl.css

    r10050 r10155  
    1 div.bp-avatar-status {
     1div.bp-avatar-status,
     2div.bp-cover-image-status {
    23    clear: both;
    34    margin: 1em 0;
    45}
    56
    6 div.bp-avatar-status p.updated {
     7div.bp-avatar-status p.updated,
     8div.bp-cover-image-status p.updated {
    79    display: block;
    810    padding: 10px 15px;
    911}
    1012
    11 div.bp-avatar-status p.success {
     13div.bp-avatar-status p.success,
     14div.bp-cover-image-status p.success {
    1215    background-color: #efc;
    1316    border: 1px solid #591;
    … …  
    1518}
    1619
    17 div.bp-avatar-status p.error {
     20div.bp-avatar-status p.error,
     21div.bp-cover-image-status p.error {
    1822    background-color: #fdc;
    1923    border: 1px solid #a00;
    … …  
    2125}
    2226
    23 div.bp-avatar-status .bp-progress {
     27div.bp-avatar-status .bp-progress,
     28div.bp-cover-image-status .bp-progress {
    2429    background: none;
    2530    border: 1px solid #d1d1d1;
    … …  
    3439}
    3540
    36 div.bp-avatar-status .bp-bar {
     41div.bp-avatar-status .bp-bar,
     42div.bp-cover-image-status .bp-bar {
    3743    background-color: #c3ff88;
    3844    width: 0;

  • trunk/src/bp-core/css/avatar.css

    r10050 r10155  
    1 div.bp-avatar-status {
     1div.bp-avatar-status,
     2div.bp-cover-image-status {
    23    clear: both;
    34    margin: 1em 0;
    45}
    56
    6 div.bp-avatar-status p.updated {
     7div.bp-avatar-status p.updated,
     8div.bp-cover-image-status p.updated {
    79    display: block;
    810    padding: 10px 15px;
    911}
    1012
    11 div.bp-avatar-status p.success {
     13div.bp-avatar-status p.success,
     14div.bp-cover-image-status p.success {
    1215    background-color: #efc;
    1316    border: 1px solid #591;
    … …  
    1518}
    1619
    17 div.bp-avatar-status p.error {
     20div.bp-avatar-status p.error,
     21div.bp-cover-image-status p.error {
    1822    background-color: #fdc;
    1923    border: 1px solid #a00;
    … …  
    2125}
    2226
    23 div.bp-avatar-status .bp-progress {
     27div.bp-avatar-status .bp-progress,
     28div.bp-cover-image-status .bp-progress {
    2429    background: none;
    2530    border: 1px solid #d1d1d1;
    … …  
    3439}
    3540
    36 div.bp-avatar-status .bp-bar {
     41div.bp-avatar-status .bp-bar,
     42div.bp-cover-image-status .bp-bar {
    3743    background-color: #c3ff88;
    3844    width: 0;

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

    r10150 r10155  
    17181718    die();
    17191719}
     1720
     1721/**
     1722 * BP Legacy's callback for the cover image feature
     1723 *
     1724 * @since  2.4.0
     1725 *
     1726 * @param  array  $params the current component's feature parameters
     1727 * @return array          an array to inform about the css handle to attach the css rules to
     1728 */
     1729function bp_legacy_theme_cover_image( $params = array() ) {
     1730    if ( empty( $params ) ) {
     1731        return;
     1732    }
     1733
     1734    // avatar height - padding - 1/2 avatar height
     1735    $avatar_offset = $params['height'] - 5 - round( (int) bp_core_avatar_full_height() / 2 );
     1736
     1737    // header content offset + spacing
     1738    $top_offset  = bp_core_avatar_full_height() - 10;
     1739    $left_offset = bp_core_avatar_full_width() + 20;
     1740
     1741    $cover_image = isset( $params['cover_image'] ) ? 'background-image: url(' . $params['cover_image'] . ');' : '';
     1742
     1743    $hide_avatar_style = '';
     1744
     1745    // Adjust the cover image header, in case avatars are completely disabled
     1746    if ( ! buddypress()->avatar->show_avatars ) {
     1747        $hide_avatar_style = '
     1748            #buddypress #item-header-cover-image #item-header-avatar {
     1749                display:  none;
     1750            }
     1751        ';
     1752
     1753        if ( bp_is_user() ) {
     1754            $hide_avatar_style = '
     1755                #buddypress #item-header-cover-image #item-header-avatar a {
     1756                    display: block;
     1757                    height: ' . $top_offset . 'px;
     1758                    margin: 0 15px 19px 0;
     1759                }
     1760
     1761                #buddypress div#item-header #item-header-cover-image #item-header-content {
     1762                    margin-left:auto;
     1763                }
     1764            ';
     1765        }
     1766    }
     1767
     1768    return '
     1769        /* Cover image */
     1770        #buddypress #header-cover-image {
     1771            height: ' . $params["height"] . 'px;
     1772            ' . $cover_image . '
     1773        }
     1774
     1775        #buddypress #create-group-form #header-cover-image {
     1776            position: relative;
     1777            margin: 1em 0;
     1778        }
     1779
     1780        .bp-user #buddypress #item-header {
     1781            padding-top: 0;
     1782        }
     1783
     1784        #buddypress #item-header-cover-image #item-header-avatar {
     1785            margin-top: '. $avatar_offset .'px;
     1786            float: left;
     1787            overflow: visible;
     1788            width:auto;
     1789        }
     1790
     1791        #buddypress div#item-header #item-header-cover-image #item-header-content {
     1792            clear: both;
     1793            float: left;
     1794            margin-left: ' . $left_offset . 'px;
     1795            margin-top: -' . $top_offset . 'px;
     1796            width:auto;
     1797        }
     1798
     1799        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
     1800        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     1801            margin-top: ' . $params["height"] . 'px;
     1802            margin-left: 0;
     1803            clear: none;
     1804            max-width: 50%;
     1805        }
     1806
     1807        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     1808            padding-top: 20px;
     1809            max-width: 20%;
     1810        }
     1811
     1812        ' . $hide_avatar_style . '
     1813
     1814        #buddypress div#item-header-cover-image h2 a,
     1815        #buddypress div#item-header-cover-image h2 {
     1816            color: #FFF;
     1817            text-rendering: optimizelegibility;
     1818            text-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.8 );
     1819            margin: 0;
     1820            font-size:200%;
     1821        }
     1822
     1823        #buddypress #item-header-cover-image #item-header-avatar img.avatar {
     1824            border: solid 2px #FFF;
     1825            background: rgba( 255, 255, 255, 0.8 );
     1826        }
     1827
     1828        #buddypress #item-header-cover-image #item-header-avatar a {
     1829            border: none;
     1830            text-decoration: none;
     1831        }
     1832
     1833        #buddypress #item-header-cover-image #item-buttons {
     1834            overflow:hidden;
     1835            margin: 20px 0 10px;
     1836            padding: 0 0 5px;
     1837        }
     1838
     1839        #buddypress #item-header-cover-image #item-buttons:before {
     1840            content:"\00a0";
     1841        }
     1842
     1843        @media screen and (max-width: 782px) {
     1844            #buddypress #item-header-cover-image #item-header-avatar,
     1845            .bp-user #buddypress #item-header #item-header-cover-image #item-header-avatar,
     1846            #buddypress div#item-header #item-header-cover-image #item-header-content {
     1847                width:100%;
     1848                text-align:center;
     1849            }
     1850
     1851            #buddypress #item-header-cover-image #item-header-avatar a {
     1852                display:inline-block;
     1853            }
     1854
     1855            #buddypress #item-header-cover-image #item-header-avatar img {
     1856                margin:0;
     1857            }
     1858
     1859            #buddypress div#item-header #item-header-cover-image #item-header-content,
     1860            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
     1861            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     1862                margin:0;
     1863            }
     1864
     1865            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
     1866            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
     1867                max-width: 100%;
     1868            }
     1869
     1870            #buddypress div#item-header-cover-image h2 a,
     1871            #buddypress div#item-header-cover-image h2 {
     1872                color: inherit;
     1873                text-shadow: none;
     1874                margin:25px 0 0;
     1875                font-size:200%;
     1876            }
     1877
     1878            #buddypress #item-header-cover-image #item-buttons div {
     1879                float:none;
     1880                display:inline-block;
     1881            }
     1882
     1883            #buddypress #item-header-cover-image #item-buttons:before {
     1884                content:"";
     1885            }
     1886
     1887            #buddypress #item-header-cover-image #item-buttons {
     1888                margin: 5px 0;
     1889            }
     1890        }
     1891    ';
     1892}

  • trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css

    r10086 r10155  
    2020    3.7 - Topics and Tables - Forums and General
    2121    3.8 - Headers, Lists and Tabs - Activity, Groups, Blogs, Forums
     22        3.8.1 - Cover Image
    2223    3.9 - Private Messaging Threads
    2324    3.10 - Extended Profiles
    … …  
    846847    cursor: default;
    847848    opacity: .4;
    848  }
     849}
     850
    849851.bp-screen-reader-text {
    850852    position: absolute;
    … …  
    11731175#buddypress div#item-header {
    11741176    overflow: hidden;
     1177    position: relative;
    11751178}
    11761179#buddypress div#item-header div#item-header-content {
    … …  
    12521255    float: right;
    12531256    margin: 10px 0 0 10px;
     1257}
     1258body.no-js #buddypress div#item-header .js-self-profile-button {
     1259    display:none;
    12541260}
    12551261#buddypress div#item-header div#message.info {
    … …  
    13981404}
    13991405
     1406/*--------------------------------------------------------------
     14073.8.1 - Cover Image
     1408--------------------------------------------------------------*/
     1409
     1410#buddypress #header-cover-image {
     1411    background-color: #c5c5c5;
     1412    background-position: center top;
     1413    background-repeat: no-repeat;
     1414    background-size: cover;
     1415    border: 0;
     1416    display: block;
     1417    right: 0;
     1418    margin: 0;
     1419    padding: 0;
     1420    position: absolute;
     1421    top: 0;
     1422    width: 100%;
     1423    z-index: 1;
     1424}
     1425
     1426#buddypress #item-header-cover-image {
     1427    padding: 0 1em;
     1428    position: relative;
     1429    z-index: 999;
     1430}
    14001431
    14011432/*--------------------------------------------------------------

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

    r10086 r10155  
    2020    3.7 - Topics and Tables - Forums and General
    2121    3.8 - Headers, Lists and Tabs - Activity, Groups, Blogs, Forums
     22        3.8.1 - Cover Image
    2223    3.9 - Private Messaging Threads
    2324    3.10 - Extended Profiles
    … …  
    846847    cursor: default;
    847848    opacity: .4;
    848  }
     849}
     850
    849851.bp-screen-reader-text {
    850852    position: absolute;
    … …  
    11731175#buddypress div#item-header {
    11741176    overflow: hidden;
     1177    position: relative;
    11751178}
    11761179#buddypress div#item-header div#item-header-content {
    … …  
    12521255    float: left;
    12531256    margin: 10px 10px 0 0;
     1257}
     1258body.no-js #buddypress div#item-header .js-self-profile-button {
     1259    display:none;
    12541260}
    12551261#buddypress div#item-header div#message.info {
    … …  
    13981404}
    13991405
     1406/*--------------------------------------------------------------
     14073.8.1 - Cover Image
     1408--------------------------------------------------------------*/
     1409
     1410#buddypress #header-cover-image {
     1411    background-color: #c5c5c5;
     1412    background-position: center top;
     1413    background-repeat: no-repeat;
     1414    background-size: cover;
     1415    border: 0;
     1416    display: block;
     1417    left: 0;
     1418    margin: 0;
     1419    padding: 0;
     1420    position: absolute;
     1421    top: 0;
     1422    width: 100%;
     1423    z-index: 1;
     1424}
     1425
     1426#buddypress #item-header-cover-image {
     1427    padding: 0 1em;
     1428    position: relative;
     1429    z-index: 999;
     1430}
    14001431
    14011432/*--------------------------------------------------------------

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css

    r9905 r10155  
    956956}
    957957
    958 .bp-user #buddypress #item-header #item-header-avatar img.avatar,
    959958.bp-user #buddypress #item-header #item-header-avatar a {
    960959    border-bottom: 0;

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css

    r9905 r10155  
    956956}
    957957
    958 .bp-user #buddypress #item-header #item-header-avatar img.avatar,
    959958.bp-user #buddypress #item-header #item-header-avatar a {
    960959    border-bottom: 0;

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss

    r9933 r10155  
    12001200                width: 100%;
    12011201
    1202                 img.avatar,
    12031202                a {
    12041203                    border-bottom: 0;

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css

    r9905 r10155  
    783783        width: 20%;
    784784    }
    785     .bp-user #buddypress #item-header #item-header-avatar img {
    786         margin: 0;
    787     }
    788785    .bp-user #buddypress #item-header #item-header-content {
    789786        float: left;

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.css

    r9905 r10155  
    783783        width: 20%;
    784784    }
    785     .bp-user #buddypress #item-header #item-header-avatar img {
    786         margin: 0;
    787     }
    788785    .bp-user #buddypress #item-header #item-header-content {
    789786        float: right;

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss

    r9933 r10155  
    11011101                text-align: left;
    11021102                width: 20%;
    1103 
    1104                 img {margin: 0;}
    11051103            }
    11061104

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen-rtl.css

    r9973 r10155  
    954954        width: 20%;
    955955    }
    956     .bp-user #buddypress #item-header #item-header-avatar img.avatar,
    957956    .bp-user #buddypress #item-header #item-header-avatar a {
    958957        float: right;
    959         width: 100%;
    960958    }
    961959    .bp-user #buddypress #item-header #item-header-content {

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.css

    r9973 r10155  
    954954        width: 20%;
    955955    }
    956     .bp-user #buddypress #item-header #item-header-avatar img.avatar,
    957956    .bp-user #buddypress #item-header #item-header-avatar a {
    958957        float: left;
    959         width: 100%;
    960958    }
    961959    .bp-user #buddypress #item-header #item-header-content {

  • trunk/src/bp-templates/bp-legacy/css/twentythirteen.scss

    r9972 r10155  
    12681268                    width: 20%;
    12691269
    1270                     img.avatar,
    12711270                    a {
    12721271                        float: left;
    1273                         width: 100%;
    12741272                    }
    12751273                }
Note: See TracChangeset for help on using the changeset viewer.