<commit_before><template>
<aside class="page-aside right">
    <div class="am-scroller nano">
        <div class="nano-content" style="margin-right: 0px;">
        <div class="content">
            <h2>Tree</h2>
            <div id="treeview" class="tree"></div>
            <hr>

            <div v-if="element.name">
                <h2>{{ element.name }}</h2>
                <br>
                <form role="form">

                    <div class="form-group" v-if="editable.id">
                        <label>ID</label>
                        <input 
                            type="text"
                            class="form-control"
                            name="id"
                            :value="element.id"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group"  v-if="editable.id">
                        <label>Class</label>
                        <input
                            type="text"
                            class="form-control"
                            name="class"
                            :value="element.class"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group"  v-if="editable.href">
                        <label>URL</label>
                        <input
                            type="text"
                            class="form-control"
                            name="href"
                            :value="element.href"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group" v-if="editable.target">
                        <label>Browser Target</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeAttribute($event, 'target', '_top')">Current Tab</a>
                            <a href="#" class="btn btn-primary" @click="changeAttribute($event, 'target', '_blank')">New Tab</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.size">
                        <label>Size</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'xs', 'sizes')">xs</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'sm', 'sizes')">sm</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'md', 'sizes')">md</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'lg', 'sizes')">lg</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.btnWidth">
                        <label>Full Width</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeClass($event, '', 'btnWidth')">No</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'block', 'btnWidth')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.state">
                        <label>State</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeClass($event, '', 'btnState', '')">None</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'active', 'btnState', '')">Active</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'disabled', 'btnState', '')">Disabled</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.stripes">
                        <label>Striped</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeClass($event, '', 'progressBarStripes')">No</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'striped', 'progressBarStripes')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.active">
                        <label>Animated</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" class="btn btn-primary" @click="changeClass($event, '', 'progressBarAnimation', '')">No</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'active', 'progressBarAnimation', '')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.style">
                        <label>Style</label>
                        <div class="btn-group btn-group-vertical">
                            <a href="#" class="btn btn-default" @click="changeClass($event, 'default', 'standard')">None</a>
                            <a href="#" class="btn btn-primary" @click="changeClass($event, 'primary', 'standard')">Primary</a>
                            <a href="#" class="btn btn-success" @click="changeClass($event, 'success', 'standard')">Success</a>
                            <a href="#" class="btn btn-info" @click="changeClass($event, 'info', 'standard')">Info</a>
                            <a href="#" class="btn btn-warning" @click="changeClass($event, 'warning', 'standard')">Warning</a>
                            <a href="#" class="btn btn-danger" @click="changeClass($event, 'danger', 'standard')">Danger</a>
                        </div>
                    </div>

                </form>
            </div>



        </div>
    </div>
    <div class="nano-pane" style="display: none;"><div class="nano-slider" style="height: 902px; transform: translate(0px, 0px);"></div></div></div>
</aside>
</template>
<script>
    export default {
        data() {
            return {
                tree: [],
                elementNode: null,
                element: {
                    name: '',
                    style: '',
                    id: '',
                    class: '',
                    href: '',
                    target: ''
                },
                editable: {
                    id: false,
                    class: false,
                    style: false,
                    href: false,
                    btnWidth: false,
                    size: false,
                    target: false,
                    state: false,
                    stripes: false,
                    active: false
                }
            };
        },
        computed: {
            isOptionSelected() {
                return this.elementNode ? this.elementNode.attr('class') : '';
            }
        },
        watch: {
            elementNode($element) {
                console.log($element);
                const element = this.getElement($element);
                const attributes = ['id','class','href','target'];

                this.element.name = element.name;
                this.element.style = element.style;

                for (let i in attributes) {
                    this.element[attributes[i]] = $element.attr(attributes[i]) || '';
                }

                for (let key in this.editable) {
                    this.editable[key] = element.editable.includes(key)
                }
            },
            tree(tree) {
                console.log(tree);
                let copy = _.clone(tree);
                const element = copy.pop();
                this.elementNode = $(element);
            }
        },
        created() {
            const vm = this;

             Event.$on('update-aside', function ($event) {
                vm.updateTree($event.tree);
            });
        },
        methods: {
            changeAttribute(e, name, value) {
                e.preventDefault();
                this.elementNode.attr(name, value.trim());
                this.updateTree(_.clone(this.tree));
            },
            changeClass(e, chosenStyle, type, style = this.element.style) {
                e.preventDefault();
                const styles = {
                    standard: ['default','primary','success','info','warning','danger'],
                    sizes: ['xs','sm','md','lg'],
                    btnWidth: ['block'],
                    btnState: ['active','disabled'],
                    progressBarAnimation: ['active'],
                    progressBarStripes: ['striped']
                };
                this.updateBootstrapClass(styles[type], style, chosenStyle);
            },
            updateBootstrapClass(classes, bootstrapClass, chosenClass) {
                bootstrapClass = (!_.isEmpty(bootstrapClass)) ? bootstrapClass + '-' : '';
                
                for (let i = 0; i < classes.length; i++) {
                    const className = bootstrapClass + classes[i];
                    this.elementNode.removeClass(className);
                }

                if (!_.isEmpty(chosenClass)){
                    this.elementNode.addClass(bootstrapClass + chosenClass);
                }

                this.updateTree(_.clone(this.tree));
            },
            updateTree(tree) {
                let $tree;
                this.tree = tree;

                for (let i = 0; i < tree.length; i++) {
                    let element = tree[i];<commit_msg>sidebar options are now dynamically checking  the options buttons are active<commit_after><template>
<aside class="page-aside right">
    <div class="am-scroller nano">
        <div class="nano-content" style="margin-right: 0px;">
        <div class="content">
            <h2>Tree</h2>
            <div id="treeview" class="tree"></div>
            <hr>

            <div v-if="element.name">
                <h2>{{ element.name }}</h2>
                <br>
                <form role="form">

                    <div class="form-group" v-if="editable.id">
                        <label>ID</label>
                        <input 
                            type="text"
                            class="form-control"
                            name="id"
                            :value="element.id"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group"  v-if="editable.id">
                        <label>Class</label>
                        <input
                            type="text"
                            class="form-control"
                            name="class"
                            :value="element.class"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group"  v-if="editable.href">
                        <label>URL</label>
                        <input
                            type="text"
                            class="form-control"
                            name="href"
                            :value="element.href"
                            @change="changeAttribute($event, $event.currentTarget.name, $event.currentTarget.value)">
                    </div>

                    <div class="form-group" v-if="editable.target">
                        <label>Browser Target</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasAttribute('btn btn-primary', 'target', '_top')" class="btn btn-primary" @click="changeAttribute($event, 'target', '_top')">Current Tab</a>
                            <a href="#" :class="hasAttribute('btn btn-primary', 'target', '_blank')" @click="changeAttribute($event, 'target', '_blank')">New Tab</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.size">
                        <label>Size</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasClass('btn btn-primary', 'xs')" @click="changeClass($event, 'xs', 'sizes')">xs</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'sm')" @click="changeClass($event, 'sm', 'sizes')">sm</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'md')" @click="changeClass($event, 'md', 'sizes')">md</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'lg')" @click="changeClass($event, 'lg', 'sizes')">lg</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.btnWidth">
                        <label>Full Width</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasClasses('btn btn-primary', ['btn-block'])" @click="changeClass($event, '', 'btnWidth')">No</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'block')" @click="changeClass($event, 'block', 'btnWidth')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.state">
                        <label>State</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasClasses('btn btn-primary', ['active','disabled'])" @click="changeClass($event, '', 'btnState', '')">None</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'active', '')" @click="changeClass($event, 'active', 'btnState', '')">Active</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'disabled', '')" @click="changeClass($event, 'disabled', 'btnState', '')">Disabled</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.stripes">
                        <label>Striped</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasClasses('btn btn-primary', ['progress-bar-striped'])" @click="changeClass($event, '', 'progressBarStripes')">No</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'striped')" class="btn btn-primary" @click="changeClass($event, 'striped', 'progressBarStripes')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.active">
                        <label>Animated</label>
                        <div class="btn-group btn-group-justified">
                            <a href="#" :class="hasClasses('btn btn-primary', ['active'])" @click="changeClass($event, '', 'progressBarAnimation', '')">No</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'active', '')" @click="changeClass($event, 'active', 'progressBarAnimation', '')">Yes</a>
                        </div>
                    </div>

                    <div class="form-group" v-if="editable.style">
                        <label>Style</label>
                        <div class="btn-group btn-group-vertical">
                            <a href="#" :class="hasClass('btn btn-default', 'default')"  @click="changeClass($event, 'default', 'standard')">None</a>
                            <a href="#" :class="hasClass('btn btn-primary', 'primary')"  @click="changeClass($event, 'primary', 'standard')">Primary</a>
                            <a href="#" :class="hasClass('btn btn-success', 'success')"  @click="changeClass($event, 'success', 'standard')">Success</a>
                            <a href="#" :class="hasClass('btn btn-info', 'info')"  @click="changeClass($event, 'info', 'standard')">Info</a>
                            <a href="#" :class="hasClass('btn btn-warning', 'warning')" @click="changeClass($event, 'warning', 'standard')">Warning</a>
                            <a href="#" :class="hasClass('btn btn-danger', 'danger')" @click="changeClass($event, 'danger', 'standard')">Danger</a>
                            
                        </div>
                    </div>

                </form>
            </div>



        </div>
    </div>
    <div class="nano-pane" style="display: none;"><div class="nano-slider" style="height: 902px; transform: translate(0px, 0px);"></div></div></div>
</aside>
</template>
<script>
    export default {
        data() {
            return {
                tree: [],
                elementNode: null,
                element: {
                    name: '',
                    style: '',
                    id: '',
                    class: '',
                    href: '',
                    target: ''
                },
                editable: {
                    id: false,
                    class: false,
                    style: false,
                    href: false,
                    btnWidth: false,
                    size: false,
                    target: false,
                    state: false,
                    stripes: false,
                    active: false
                }
            };
        },
        computed: {
            isOptionSelected() {
                return this.elementNode ? this.elementNode.attr('class') : '';
            }
        },
        watch: {
            elementNode($element) {
                const element = this.getElement($element);
                const attributes = ['id','class','href','target'];

                this.element.name = element.name;
                this.element.style = element.style;

                for (let i in attributes) {
                    this.element[attributes[i]] = $element.attr(attributes[i]) || '';
                }

                for (let key in this.editable) {
                    this.editable[key] = element.editable.includes(key)
                }
            },
            tree(tree) {
                let copy = _.clone(tree);
                const element = copy.pop();
                this.elementNode = $(element);
            }
        },
        created() {
            const vm = this;

             Event.$on('update-aside', function ($event) {
                vm.updateTree($event.tree);
            });
        },
        methods: {
            hasAttribute(style, attribute, value) {
                return style + ((this.elementNode.attr(attribute) === value) ? ' active' : '');
            },
            hasClasses(style, classes) {
                let hasClass = false;

                classes.forEach(className => {
                    if (this.elementNode.hasClass(className)) {
                        hasClass = true;
                    }
                }, this);

                return style + (!hasClass ? ' active' : '');
            },
            hasClass(style, className, baseStyle = this.element.style) {
                const elementClass = baseStyle ? baseStyle + '-' + className : className;
                return style + (this.elementNode.hasClass(elementClass) ? ' active' : '');
            },
            changeAttribute(e, name, value) {
                e.preventDefault();
                this.elementNode.attr(name, value.trim());
                this.updateTree(_.clone(this.tree));
            },
            changeClass(e, chosenStyle, type, style = this.element.style) {
                e.preventDefault();
                const styles = {
                    standard: ['default','primary','success','info','warning','danger'],
                    sizes: ['xs','sm','md','lg'],
                    btnWidth: ['block'],
                    btnState: ['active','disabled'],
                    progressBarAnimation: ['active'],
                    progressBarStripes: ['striped']
                };

                this.updateBootstrapClass(styles[type], style, chosenStyle);
            },
            updateBootstrapClass(classes, bootstrapClass, chosenClass) {
                bootstrapClass = (!_.isEmpty(bootstrapClass)) ? bootstrapClass + '-' : '';
                
                for (let i = 0; i < classes.length; i++) {
                    const className = bootstrapClass + classes[i];
                    this.elementNode.removeClass(className);
                }

                if (!_.isEmpty(chosenClass)){
                    this.elementNode.addClass(bootstrapClass + chosenClass);
                }

                this.updateTree(_.clone(this.tree));
            },
            updateTree(tree) {
                let $tree;
                this.tree = tree;

                for (let i = 0; i < tree.length; i++) {
                    let element = tree[i];
{'fraction_non_alphanumeric': 0.15242786769880365, 'fraction_numerical': 0.0011259676284306826, 'mean_word_length': 1.2999568407423392, 'pattern_counts': {'":': 0, '<': 259, '<?xml version=': 0, '>': 256, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5931248', 'n_tokens_mistral': 5521, 'n_tokens_neox': 5189, 'n_words': 973}