Skip to content

Instantly share code, notes, and snippets.

@mohamedali-s-4725

mohamedali-s-4725/controllers.application\.js

Last active February 2, 2022 05:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mohamedali-s-4725/68cd2d59950eb5e1e0931812a8351835 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mohamedali-s-4725/68cd2d59950eb5e1e0931812a8351835 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mohamedali-s-4725 revised this gist Feb 2, 2022. No changes.
  2. mohamedali-s-4725 revised this gist Feb 2, 2022. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -68,8 +68,8 @@ export default Controller.extend({
    } else {
    endIndex += 30;
    }
    if (startIndex >= 0) {

    if (startIndex >= 0) {
    for(let i=startIndex; i<endIndex; i++){
    set(listItems[i], 'canShowItem', status);
    }
    @@ -80,6 +80,8 @@ export default Controller.extend({

    if (hiddenListIndices >=0 ){
    set(self, 'virtualElementHeight', (itemHeight*hiddenListIndices)+'px');
    } else {
    set(self, 'virtualElementHeight', '0px');
    }

    }
  3. mohamedali-s-4725 revised this gist Feb 2, 2022. 1 changed file with 1 addition and 7 deletions.
    8 changes: 1 addition & 7 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ export default Controller.extend({

    for (let i=0; i<self.totalCount; i++){

    listItems.pushObject(object.create({'name': i+1, 'canShowItem': false}));
    listItems.pushObject(object.create({'name': i+1, 'canShowItem': true}));
    }

    set(self, 'listItems', listItems);
    @@ -103,12 +103,6 @@ scollListElement = $(scollListElement.target)[0];
    if (this.showList){
    self.unbindScroll('.list-wrapper', null);
    set(this, 'scrollBinded', false);
    } else {
    for(let i=0; i<30; i++){
    set(listItems[i], 'canShowItem', true);
    }

    set(self, 'virtualBElementHeight', '200px');
    }

    set(this, 'showList', !this.showList);
  4. mohamedali-s-4725 revised this gist Feb 1, 2022. 2 changed files with 2 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -108,7 +108,7 @@ scollListElement = $(scollListElement.target)[0];
    set(listItems[i], 'canShowItem', true);
    }

    set(self, 'virtualElementHeight', '200px');
    set(self, 'virtualBElementHeight', '200px');
    }

    set(this, 'showList', !this.showList);
    3 changes: 1 addition & 2 deletions templates.application\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -26,10 +26,9 @@
    <b> {{item.name}} :: {{index}} </b>
    </center>
    </li>
    <li class='def-list-item' style="border: solid 0.1px lightgrey; height:{{virtualBElementHeight}}"></li>
    {{/if}}
    {{/each}}

    <li class='def-list-item' style="border: solid 0.1px lightgrey; height:{{virtualBElementHeight}}"></li>
    </ul>
    </div>

  5. mohamedali-s-4725 revised this gist Feb 1, 2022. 2 changed files with 3 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -107,6 +107,8 @@ scollListElement = $(scollListElement.target)[0];
    for(let i=0; i<30; i++){
    set(listItems[i], 'canShowItem', true);
    }

    set(self, 'virtualElementHeight', '200px');
    }

    set(this, 'showList', !this.showList);
    1 change: 1 addition & 0 deletions templates.application\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,7 @@
    <b> {{item.name}} :: {{index}} </b>
    </center>
    </li>
    <li class='def-list-item' style="border: solid 0.1px lightgrey; height:{{virtualBElementHeight}}"></li>
    {{/if}}
    {{/each}}

  6. mohamedali-s-4725 revised this gist Feb 1, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ export default Controller.extend({

    for (let i=0; i<self.totalCount; i++){

    listItems.pushObject(object.create({'name': i+1, 'canShowItem': true}));
    listItems.pushObject(object.create({'name': i+1, 'canShowItem': false}));
    }

    set(self, 'listItems', listItems);
  7. mohamedali-s-4725 revised this gist Feb 1, 2022. 1 changed file with 8 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -89,7 +89,8 @@ export default Controller.extend({

    toggleList(enablePaginate){

    let self = this;
    let self = this,
    listItems = self.listItems;
    if(!this.scrollBinded){

    self.bindScroll('.list-wrapper', null, function(scollListElement){
    @@ -102,7 +103,12 @@ scollListElement = $(scollListElement.target)[0];
    if (this.showList){
    self.unbindScroll('.list-wrapper', null);
    set(this, 'scrollBinded', false);
    }
    } else {
    for(let i=0; i<30; i++){
    set(listItems[i], 'canShowItem', true);
    }
    }

    set(this, 'showList', !this.showList);
    }
    }
  8. mohamedali-s-4725 revised this gist Feb 1, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ export default Controller.extend({

    showList: false,

    scrollBinded: false,
    scrollBinded: false,

    VDArgs: '',

  9. mohamedali-s-4725 revised this gist Feb 1, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ export default Controller.extend({

    showList: false,

    scrollBinded: false,
    scrollBinded: false,

    VDArgs: '',

  10. mohamedali-s-4725 created this gist Feb 1, 2022.
    109 changes: 109 additions & 0 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    import Controller from '@ember/controller';

    import $ from 'jquery';
    import { A } from '@ember/array';
    import object, { action, set } from '@ember/object';

    export default Controller.extend({

    totalCount: 1000,

    listItems: A(),

    showList: false,

    scrollBinded: false,

    VDArgs: '',

    virtualElementHeight: 0,

    init(){

    this._super(...arguments);

    let self = this,
    listItems = A();

    for (let i=0; i<self.totalCount; i++){

    listItems.pushObject(object.create({'name': i+1, 'canShowItem': true}));
    }

    set(self, 'listItems', listItems);
    },

    bindScroll(selector, namespace, scroll_function) {

    let onScroll;

    set(this, 'scrollBinded', true);
    onScroll = function(event) {
    return scroll_function(event);
    };

    let eventName = namespace ? 'scroll.' + namespace : 'scroll';
    setTimeout(function(){
    $(selector).on(eventName, onScroll)
    },200);
    },

    unbindScroll(selector, namespace) {

    set(this, 'scrollBinded', false);

    let eventName = namespace ? 'scroll.' + namespace : 'scroll';
    $(selector).off(eventName);
    },

    toggleItems: action(function(hiddenListIndices, status, itemHeight){
    let self = this,
    startIndex = hiddenListIndices,
    endIndex = hiddenListIndices,
    listItems = self.listItems,
    tagClassName = self.VDArgs.itemClassName;

    if (!status) {
    startIndex = hiddenListIndices-30;
    } else {
    endIndex += 30;
    }

    if (startIndex >= 0) {
    for(let i=startIndex; i<endIndex; i++){
    set(listItems[i], 'canShowItem', status);
    }

    if (status) {
    hiddenListIndices -= 30;
    }

    if (hiddenListIndices >=0 ){
    set(self, 'virtualElementHeight', (itemHeight*hiddenListIndices)+'px');
    }

    }
    }),

    actions:{

    toggleList(enablePaginate){

    let self = this;
    if(!this.scrollBinded){

    self.bindScroll('.list-wrapper', null, function(scollListElement){
    scollListElement = $(scollListElement.target)[0];

    set(self, 'VDArgs', {scrolledPos: scollListElement.scrollTop, itemClassName: 'vd-item'});
    });
    }

    if (this.showList){
    self.unbindScroll('.list-wrapper', null);
    set(this, 'scrollBinded', false);
    }
    set(this, 'showList', !this.showList);
    }
    }
    });
    48 changes: 48 additions & 0 deletions modifiers.virtual-dom-element\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    import Modifier from 'ember-modifier';
    import { action, set } from '@ember/object';

    export default class virtualDomElement extends Modifier {

    virtualElementCount = 0;

    prevScrolledPos = 0;

    didReceiveArguments(){

    let self = this,
    [handler] = self.args.positional,
    virtualElementCount = self.virtualElementCount;

    if (handler.scrolledPos < 10){
    set(self, 'prevScrolledPos', 0);
    set(self, 'virtualElementCount', 0);
    }

    if($('.'+handler.itemClassName+virtualElementCount).length){

    let scrolledPos = handler.scrolledPos,
    itemHeight = $('.'+handler.itemClassName+virtualElementCount)[0].offsetHeight;

    if(scrolledPos < self.prevScrolledPos){

    if (itemHeight*(virtualElementCount) >= scrolledPos){
    console.log(virtualElementCount, 'Prev');
    virtualElementCount = virtualElementCount - 30;
    this.args.named.callback(virtualElementCount, true, itemHeight);
    }
    } else {

    if (itemHeight*(virtualElementCount + 30) <= scrolledPos){

    virtualElementCount = virtualElementCount + 30
    this.args.named.callback(virtualElementCount, false, itemHeight);

    set(self, 'prevScrolledPos', scrolledPos);
    console.log(virtualElementCount, 'Reached');
    }
    }

    set(self, 'virtualElementCount', virtualElementCount);
    }
    };
    };
    35 changes: 35 additions & 0 deletions templates.application\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <h2><u>Virtual DOM - toggle 30 items</u></h2>

    {{outlet}}
    <br>

    :: Total items : {{input value=totalCount}} &nbsp;
    <button {{action 'toggleList' true}}>
    {{#if showList}}
    Hide
    {{else}}
    Show
    {{/if}} list
    </button>

    <br><br>
    {{#if showList}}

    <div class='list-wrapper' style='max-height:430px;overflow-y:auto;border:ridge 1px;background:aliceblue;'>
    <ul style="list-style-type: none;margin:0;" {{virtual-dom-element VDArgs callback=toggleItems}}>
    <li class='def-list-item' style="border: solid 0.1px lightgrey; height:{{virtualElementHeight}}"></li>

    {{#each listItems as |item index|}}
    {{#if item.canShowItem}}
    <li class='list-item {{concat 'vd-item' index}}' style="border: solid 0.1px lightgrey;padding: 10px;">
    <center>
    <b> {{item.name}} :: {{index}} </b>
    </center>
    </li>
    {{/if}}
    {{/each}}

    </ul>
    </div>

    {{/if}}
    23 changes: 23 additions & 0 deletions twiddle\.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    {
    "version": "0.17.1",
    "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
    },
    "options": {
    "use_pods": false,
    "enable-testing": false
    },
    "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
    },
    "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "1.0.5"
    }
    }