هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن شروحات الزين فورو XENFORO (https://www.helpernt.com/vb/forumdisplay.php?f=94)
-   -   [XF 2.x] : اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى (https://www.helpernt.com/vb/showthread.php?t=6955)

abo-karim 02-17-2018 05:00 PM

اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى
 
السلام عليكم ورحمه الله وبركاته
حاصية جديد وطريقة جديدة يتم اضافتها على الاسكريبت الاكثر من رائعه وهى خاصية Collapsible Node Categories والتى تتيح لم ولاعضاء منتداك او الزوار بتقليص او اخفاء اقسام المنتدى بالصفحة الرئيسية كما هو الحال فى منتديات الفى بى VB واليوم اقوم بطرحها لكم داعين المولى عز وجل ان يوفقنا جميعا الى ما هو خير لنا.
اسم الدرس : Collapsible Node Categories
التوافق الدرس : مع الجيل الثانى XF 2.0
صورة من العمل ونتيجته


الشرح
1- ادخل الى لوحة تحكم المنتدى >> المظهر >> البحث عن القوالب >> ابحث عن قالب اسمه node_list_category بداخله ابحث عن هذا الكود.
كود:

<div class="block block--category block--category{$node.node_id}">
استبداله بـــ
كود:

<div class="block block--category block--category{$node.node_id} collapsible-nodes">
2- فى نفس القالب ابحث عن
كود:

<h2 class="block-header">
اسفله ضع هذا الكود
كود:

<div class="block-header--left">
3- ثم ابحث داخل نفس القالب عن
كود:

<div class="block-desc">{$node.description|raw}</div></xf:if>
ضع بعدها
كود:

</div>
4- ثم ابحث عن
كود:

</h2>
ضع قبلها مباشره هذا الكود
كود:

<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
5- ثم قم بالبحث عن
كود:

<div class="block-body">
استبداله بـــ
كود:

<div class="block-body block-body--collapsible is-active">
ثم قم بالحفظ

6 - توجه الان الى قالب اسمه extra.less ضع فيه هذا لكود.
كود:

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
   
    .block-body
    {
        transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        -webkit-transition-property: all, -xf-opacity;
        transition-property: all, -xf-opacity;
        overflow-y: hidden;
        height: 0;
        -webkit-transition-property: all, -xf-height;
        transition-property: all, -xf-height;
        &.is-active
        {
            height: auto;
        }
    }
}

/* Node Collapse end */

ثم احفظ
انتهى


من منكم احس الموضوع صعب ليها فقط باستبدال قالب node_list_category بالكامل بهذا القالب.
كود:

<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id} collapsible-nodes">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
            <div class="block-header--left">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
            </h2>
            <div class="block-body block-body--collapsible is-active">
                <xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
        <div class="node-body">
            <span class="node-icon" aria-hidden="true"><i></i></span>
            <div class="node-main js-nodeMain">
                <xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
                <h3 class="node-title">
                    <a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
                </h3>
                <xf:if is="$descriptionDisplay != 'none' && $node.description">
                    <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                </xf:if>

                <div class="node-meta">
                    <xf:if is="!{$extras.privateInfo}">
                        <div class="node-statsMeta">
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('threads') }}</dt>
                                <dd>{$extras.discussion_count|number}</dd>
                            </dl>
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('messages') }}</dt>
                                <dd>{$extras.message_count|number}</dd>
                            </dl>
                        </div>
                    </xf:if>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                        <xf:macro template="forum_list" name="sub_nodes_menu"
                            arg-children="{$children}"
                            arg-childExtras="{$childExtras}"
                            arg-depth="{{ $depth + 1 }}" />
                    </xf:if>
                </div>

                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro template="forum_list" name="sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
            </div>

            <xf:if is="!{$extras.privateInfo}">
                <div class="node-stats">
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('threads') }}</dt>
                        <dd>{$extras.discussion_count|number}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number}</dd>
                    </dl>
                </div>
            </xf:if>

            <div class="node-extra">
                <xf:if is="{$extras.privateInfo}">
                    <span class="node-extra-placeholder">{{ phrase('private') }}</span>
                <xf:elseif is="{$extras.last_post_date}" />
                    <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                    <div class="node-extra-row">
                        <ul class="listInline listInline--bullet">
                            <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                            <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                            <xf:else />
                                <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <li>
        <a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
        <xf:macro template="forum_list" name="sub_node_list"
            arg-children="{$children}"
            arg-childExtras="{$childExtras}"
            arg-depth="{{ $depth + 1 }}" />
    </li>
</xf:macro>


abo-karim 02-17-2018 05:05 PM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
 
شباب للمزيد و اصل الموضوع
ستجدوه هنا
كود:

https://xenforo.com/community/resources/collapsible-user-extras.6180/

طيور الظلام 02-17-2018 11:52 PM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
 
مشاء الله

شرح مهم وكنت منتظره للجيل الاول

شكرا لك على الطرح

legend 03-18-2018 07:39 AM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
 
شرح كافي ووافي. شكرا لك على هذه الاضافه.

Araby5050 03-02-2019 08:13 PM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
 
جزاك الله خيرا اخى ابوكريم

الطريقه تعمل ايضا للنسخه 2.1 ياغالى وتم التجربه وتعمل بنجاح

ولكن كنت قد عملت توسيط لاسم القسم ووجدت ان اسم القسم اصبح بالجهه اليمنى بعد تطبيق الدرس

فهل من طريقه لتوسيط اسم القسم مع الحفاظ على شكل هذه الطريقه

بانتظارك ياغالى

هيلبرنت 05-21-2020 01:13 AM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصف
 
يعطيك الف عافية ابو كريم

maaidni 05-21-2020 04:36 AM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصف
 
بارك الله فيك اخي الكريم على الموضوع الرائع

هاوي برمجة 07-12-2021 04:25 PM

رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصف
 
جزاك الله خيرا اخى


الساعة الآن 12:59 PM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir