How to use shouldAutoScroll method in devicefarmer-stf

Best JavaScript code snippet using devicefarmer-stf

InfiniteMessages.js

Source:InfiniteMessages.js

1import React, { Component } from 'react';2import Button from 'components/Buttons/Button.js';3import './InfiniteMessages.scss';4export default class InfiniteMessages extends Component {5  constructor(props) {6    super(props);7    window.test = this;8    this.init(props);9    this.onScroll = this.onScroll.bind(this);10    this.onUpdate = this.onUpdate.bind(this);11  }12  init(props) {13    props = props || this.props;14    this.on_load_min = {};15    if (props.messages.length > 60) {16      this.on_load_min = props.messages.slice(props.messages.length - 60, props.messages.length)[0];17    } else {18      this.on_load_min = props.messages[0] || {};19    }20    this.state = {21      messages: props.messages.filter(m => this.compare(m, this.on_load_min) >= 0),22    };23    this.shouldAutoScroll = true;24    this.messages_min = this.state.messages[0] || {};25    this.messages_med = this.state.messages[this.state.messages.length - 1] || {};26    this.messages_max = this.state.messages[this.state.messages.length - 1] || {};27    this.bloc_top_height = 0;28    this.did_update_messages_data = {};29    this.dom_messages = {};30    this.max_known = this.messages_max;31  }32  componentDidMount() {33    this.did_update_messages = true;34    this.did_update_messages_data = {35      direction: 'bottom_auto_add',36      bloc_top_height: this.dom_visualized_messages_top.clientHeight,37      bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,38      scroll_top: this.dom_infinite_messages.scrollTop,39      scroll_height: this.dom_infinite_messages.scrollHeight,40    };41    //    this.dom_infinite_messages.addEventListener("scroll", this.onScroll);42    window.addEventListener('resize', this.onUpdate);43    this.onUpdate();44  }45  componentWillUnmount() {46    window.removeEventListener('resize', this.onUpdate);47    //    this.dom_infinite_messages.removeEventListener("scroll", this.onScroll);48  }49  componentWillUpdate(nextProps, nextState) {50    this.scroll_distance_from_bottom =51      this.dom_infinite_messages.scrollHeight -52      this.dom_infinite_messages.clientHeight -53      this.dom_infinite_messages.scrollTop;54    if (nextProps.messages.length) {55      if (nextProps.messages[nextProps.messages.length - 1].id) {56        if (this.messages_med.id == this.max_known.id) {57          this.messages_med = nextProps.messages[nextProps.messages.length - 1];58          this.messages_max = nextProps.messages[nextProps.messages.length - 1];59        }60        this.max_known = nextProps.messages[nextProps.messages.length - 1];61      }62    }63    if (this.max_known.id == this.messages_med.id) {64      nextState.messages = nextProps.messages.filter(m => {65        return !m.id || this.compare(m, this.on_load_min) >= 0;66      });67      this.did_update_messages = true;68      this.did_update_messages_data = {69        direction: 'bottom_auto_add',70        bloc_top_height: this.dom_visualized_messages_top.clientHeight,71        bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,72        scroll_top: this.dom_infinite_messages.scrollTop,73        scroll_height: this.dom_infinite_messages.scrollHeight,74      };75    }76  }77  componentDidUpdate() {78    this.onUpdate();79  }80  onUpdate() {81    this.did_auto_scroll = new Date();82    this.scrollToBottom();83    var dom_fake_separator_top_visible = Math.max(84      0,85      this.dom_infinite_messages.clientHeight - this.dom_visualized_messages_top.clientHeight,86    );87    if (dom_fake_separator_top_visible == 0) {88      this.dom_fake_separator_top.style.display = 'none';89    } else {90      this.dom_fake_separator_top.style.display = 'block';91    }92    if (this.did_update_messages) {93      this.did_update_messages = false;94      this.bloc_top_height = this.dom_visualized_messages_top.clientHeight;95      this.bloc_bottom_height = this.dom_visualized_messages_bottom.clientHeight;96      if (this.did_update_messages_data.direction == 'bottom') {97        this.scrollToPosition(98          this.dom_anything_on_top.clientHeight +99            (this.did_update_messages_data.bloc_bottom_height -100              (this.did_update_messages_data.scroll_height -101                this.did_update_messages_data.scroll_top)),102        );103      } else if (this.did_update_messages_data.direction == 'bottom_auto_add') {104        //Nothing105      } else {106        this.scrollToPosition(this.bloc_top_height + this.did_update_messages_data.scroll_top);107      }108      this.getVisibleMessages();109    }110  }111  onScroll(evt) {112    if (new Date() - this.did_auto_scroll < 100) {113      return;114    }115    if (116      this.dom_infinite_messages.scrollHeight != this.last_scrollHeight &&117      this.shouldAutoScroll118    ) {119      this.last_scrollHeight = this.dom_infinite_messages.scrollHeight;120      this.scrollToBottom();121    } else {122      var shouldAutoScroll = this.shouldAutoScroll;123      this.shouldAutoScroll = false;124      if (this.props.onAutoScrollChange && shouldAutoScroll) this.props.onAutoScrollChange(false);125    }126    if (this.dom_infinite_messages.scrollTop <= this.dom_infinite_messages.scrollHeight / 8) {127      this.onScrollTop();128    }129    var dist_from_bottom =130      this.dom_infinite_messages.scrollHeight -131      this.dom_infinite_messages.scrollTop -132      this.dom_infinite_messages.clientHeight;133    if (dist_from_bottom <= Math.max(10, this.dom_infinite_messages.scrollHeight / 8)) {134      if (135        dist_from_bottom <= 10 &&136        (this.shouldAutoScroll ||137          this.max_known.id == this.state.messages[this.state.messages.length - 1].id)138      ) {139        var shouldAutoScroll = this.shouldAutoScroll;140        this.shouldAutoScroll = true;141        if (this.props.onAutoScrollChange && !shouldAutoScroll) this.props.onAutoScrollChange(true);142      } else if (dist_from_bottom <= 10 || this.max_known.id != this.messages_med.id) {143        this.onScrollBottom();144      }145    }146    this.getVisibleMessages();147  }148  getVisibleMessages() {149    if (150      this.last_get &&151      Math.abs(this.last_get.scroll_top - this.dom_infinite_messages.scrollTop) < 40152    ) {153      return [this.last_get.first];154    }155    var first = null;156    var frame = window.getBoundingClientRect(this.dom_infinite_messages);157    frame.x = frame.x || frame.left;158    frame.y = frame.y || frame.top;159    frame.scrollTop = this.dom_infinite_messages.scrollTop;160    Object.keys(this.dom_messages).every(i => {161      var item = this.dom_messages[i];162      if (item.node && item.scrollTop === undefined) {163        item.scrollTop = window.getBoundingClientRect(item.node).top + frame.scrollTop - frame.y;164      }165      if (item.node) {166        if (!first && item.scrollTop > frame.scrollTop) {167          first = item.message;168          return false;169        }170      }171      return true;172    });173    var first_date = new Date((first || {}).creation_date * 1000).setHours(0, 0, 0, 0);174    if (first_date != (this.last_get || {}).first_date) {175      if (this.props.onFirstDateChange) this.props.onFirstDateChange(first_date);176    }177    this.last_get = {178      scroll_top: frame.scrollTop,179      first: first,180      first_date: first_date,181    };182    return [this.last_get.first];183  }184  scrollToBottom(force) {185    if (this.shouldAutoScroll || force) {186      //Make sure we display the last bloc !187      if (188        this.messages_med.id != this.messages_min.id &&189        this.messages_med.id != this.messages_max.id190      ) {191        this.init();192        this.did_update_messages = true;193        this.did_update_messages_data = {194          direction: 'bottom_auto_add',195          bloc_top_height: this.dom_visualized_messages_top.clientHeight,196          bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,197          scroll_top: this.dom_infinite_messages.scrollTop,198          scroll_height: this.dom_infinite_messages.scrollHeight,199        };200        this.onUpdate();201      }202      var old_position = this.dom_infinite_messages.scrollTop;203      this.dom_infinite_messages.scrollTop = this.dom_infinite_messages.scrollHeight;204      if (old_position != this.dom_infinite_messages.scrollTop) {205        this.did_auto_scroll = new Date();206      }207      var shouldAutoScroll = this.shouldAutoScroll;208      this.shouldAutoScroll = true;209      if (this.props.onAutoScrollChange && !shouldAutoScroll) this.props.onAutoScrollChange(true);210    }211  }212  scrollToPosition(scrollTop) {213    var old_position = this.dom_infinite_messages.scrollTop;214    this.dom_infinite_messages.scrollTop = scrollTop;215    this.did_auto_scroll = new Date();216  }217  onScrollTop() {218    if (this.is_getting_top_messages) {219      return;220    }221    if (this.no_more_before && this.messages_min.id == this.no_more_before.id) {222      return;223    }224    console.log(225      'get previous messages before ',226      this.messages_min.id,227      ' min was ',228      (this.no_more_before || {}).id,229    );230    this.number_of_messages_to_load = 2 * (this.dom_infinite_messages.clientHeight / 20);231    this.is_getting_top_messages = true;232    this.props.getMessages(this.messages_min.id, parseInt(this.number_of_messages_to_load), res => {233      if (res.length == 0) {234        this.is_getting_top_messages = false;235        this.no_more_before = this.messages_min;236        return;237      }238      var top_list = this.state.messages.filter(239        m => this.compare(m, this.messages_min) >= 0 && this.compare(m, this.messages_med) <= 0,240      );241      top_list = res.concat(top_list);242      this.messages_med = res[res.length - 1];243      console.log('set min to ', res[0]);244      this.messages_min = res[0];245      this.messages_max = top_list[top_list.length - 1];246      this.did_update_messages = true;247      this.did_update_messages_data = {248        direction: 'top',249        bloc_top_height: this.dom_visualized_messages_top.clientHeight,250        bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,251        scroll_top: this.dom_infinite_messages.scrollTop,252        scroll_height: this.dom_infinite_messages.scrollHeight,253      };254      this.dom_messages = {};255      this.setState({ messages: top_list });256      this.is_getting_top_messages = false;257    });258  }259  onScrollBottom() {260    if (this.is_getting_bottom_messages) {261      return;262    }263    this.number_of_messages_to_load = 2 * (this.dom_infinite_messages.clientHeight / 20);264    console.log('get previous messages after ', this.messages_max.id);265    this.is_getting_bottom_messages = true;266    this.props.getMessages(267      this.messages_max.id,268      -parseInt(this.number_of_messages_to_load),269      res => {270        if (res.length == 0) {271          this.is_getting_bottom_messages = false;272          var shouldAutoScroll = this.shouldAutoScroll;273          this.shouldAutoScroll = true;274          if (this.props.onAutoScrollChange && !shouldAutoScroll)275            this.props.onAutoScrollChange(true);276          this.max_known = this.state.messages[this.state.messages.length - 1];277          this.messages_min = this.state.messages[0];278          this.messages_max = this.state.messages[this.state.messages.length - 1];279          this.messages_med = this.messages_max;280          return;281        }282        if (this.compare(res[res.length - 1], this.on_load_min) >= 0) {283          var top_list = this.state.messages.filter(m => this.compare(m, res[res.length - 1]) >= 0);284          top_list = top_list.concat(res);285          this.state.messages = this.props.messages.filter(286            m => this.compare(m, this.on_load_min) > 0,287          );288          this.max_known = this.state.messages[this.state.messages.length - 1];289          this.messages_min = this.state.messages[0];290          this.messages_max = this.state.messages[this.state.messages.length - 1];291          this.messages_med = this.messages_max;292          this.did_update_messages = true;293          this.did_update_messages_data = {294            direction: 'bottom_auto_add',295            bloc_top_height: this.dom_visualized_messages_top.clientHeight,296            bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,297            scroll_top: this.dom_infinite_messages.scrollTop,298            scroll_height: this.dom_infinite_messages.scrollHeight,299          };300          this.dom_messages = {};301          this.setState({ messages: this.state.messages });302        } else {303          var top_list = this.state.messages.filter(304            m => this.compare(m, this.messages_med) > 0 && this.compare(m, this.messages_max) <= 0,305          );306          top_list = top_list.concat(res);307          this.messages_min = top_list[0];308          this.messages_med = this.messages_max;309          this.messages_max = top_list[top_list.length - 1];310          this.did_update_messages = true;311          this.did_update_messages_data = {312            direction: 'bottom',313            bloc_top_height: this.dom_visualized_messages_top.clientHeight,314            bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,315            scroll_top: this.dom_infinite_messages.scrollTop,316            scroll_height: this.dom_infinite_messages.scrollHeight,317          };318          this.dom_messages = {};319          this.setState({ messages: top_list });320        }321        this.is_getting_bottom_messages = false;322      },323    );324  }325  measure(message) {326    if (this.dom_infinite_messages) {327      this.scrollToBottom();328    }329  }330  //Returns a-b as int331  compare(a, b) {332    if (this.props.compare) {333      return this.props.compare(a, b);334    }335    return a.id - b.id;336  }337  render() {338    var previous_message = null;339    return (340      <div className="infinite_messages" ref={node => (this.dom_infinite_messages = node)}>341        <div ref={node => (this.dom_anything_on_top = node)}>342          {this.props.top || ''}343          {!this.no_more_before && (344            <div style={{ textAlign: 'center' }}>345              <Button346                className="small primary"347                onClick={() => {348                  this.onScrollTop();349                }}350              >351                Load more messages352              </Button>353            </div>354          )}355        </div>356        <div className="fake_separator_top" ref={node => (this.dom_fake_separator_top = node)} />357        <div358          className="visualized_messages top"359          ref={node => (this.dom_visualized_messages_top = node)}360        >361          {this.state.messages.map((message, _i) => {362            if (this.compare(message, this.messages_med) <= 0) {363              var tmp = previous_message;364              previous_message = message;365              var i = _i;366              return (367                <div368                  key={message.id}369                  ref={node =>370                    (this.dom_messages[i] = {371                      node: node,372                      message: message,373                      scrollTop: (this.dom_messages[i] || {}).scrollTop,374                    })375                  }376                >377                  {this.props.renderMessage(message, tmp, () => this.measure(message))}378                </div>379              );380            }381          })}382        </div>383        <div384          className="visualized_messages"385          ref={node => (this.dom_visualized_messages_bottom = node)}386        >387          {this.state.messages.map((message, _i) => {388            if (this.compare(message, this.messages_med) > 0) {389              var tmp = previous_message;390              previous_message = message;391              var i = _i;392              return (393                <div394                  key={message.id}395                  ref={node =>396                    (this.dom_messages[i] = {397                      node: node,398                      message: message,399                      scrollTop: (this.dom_messages[i] || {}).scrollTop,400                    })401                  }402                >403                  {this.props.renderMessage(message, tmp, () => this.measure(message))}404                </div>405              );406            }407          })}408        </div>409      </div>410    );411  }...

infinite-messages.js

Source:infinite-messages.js

1import React, { Component } from 'react';2import Button from 'components/buttons/button.js';3import './infinite-messages.scss';4export default class InfiniteMessages extends Component {5  constructor(props) {6    super(props);7    window.test = this;8    this.init(props);9    this.onScroll = this.onScroll.bind(this);10    this.onUpdate = this.onUpdate.bind(this);11  }12  init(props) {13    props = props || this.props;14    this.on_load_min = {};15    if (props.messages.length > 60) {16      this.on_load_min = props.messages.slice(props.messages.length - 60, props.messages.length)[0];17    } else {18      this.on_load_min = props.messages[0] || {};19    }20    this.state = {21      messages: props.messages.filter(m => this.compare(m, this.on_load_min) >= 0),22    };23    this.shouldAutoScroll = true;24    this.messages_min = this.state.messages[0] || {};25    this.messages_med = this.state.messages[this.state.messages.length - 1] || {};26    this.messages_max = this.state.messages[this.state.messages.length - 1] || {};27    this.bloc_top_height = 0;28    this.did_update_messages_data = {};29    this.dom_messages = {};30    this.max_known = this.messages_max;31  }32  componentDidMount() {33    this.did_update_messages = true;34    this.did_update_messages_data = {35      direction: 'bottom_auto_add',36      bloc_top_height: this.dom_visualized_messages_top.clientHeight,37      bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,38      scroll_top: this.dom_infinite_messages.scrollTop,39      scroll_height: this.dom_infinite_messages.scrollHeight,40    };41    //    this.dom_infinite_messages.addEventListener("scroll", this.onScroll);42    window.addEventListener('resize', this.onUpdate);43    this.onUpdate();44  }45  componentWillUnmount() {46    window.removeEventListener('resize', this.onUpdate);47    //    this.dom_infinite_messages.removeEventListener("scroll", this.onScroll);48  }49  componentWillUpdate(nextProps, nextState) {50    this.scroll_distance_from_bottom =51      this.dom_infinite_messages.scrollHeight -52      this.dom_infinite_messages.clientHeight -53      this.dom_infinite_messages.scrollTop;54    if (nextProps.messages.length) {55      if (nextProps.messages[nextProps.messages.length - 1].id) {56        if (this.messages_med.id == this.max_known.id) {57          this.messages_med = nextProps.messages[nextProps.messages.length - 1];58          this.messages_max = nextProps.messages[nextProps.messages.length - 1];59        }60        this.max_known = nextProps.messages[nextProps.messages.length - 1];61      }62    }63    if (this.max_known.id == this.messages_med.id) {64      nextState.messages = nextProps.messages.filter(m => {65        return !m.id || this.compare(m, this.on_load_min) >= 0;66      });67      this.did_update_messages = true;68      this.did_update_messages_data = {69        direction: 'bottom_auto_add',70        bloc_top_height: this.dom_visualized_messages_top.clientHeight,71        bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,72        scroll_top: this.dom_infinite_messages.scrollTop,73        scroll_height: this.dom_infinite_messages.scrollHeight,74      };75    }76  }77  componentDidUpdate() {78    this.onUpdate();79  }80  onUpdate() {81    this.did_auto_scroll = new Date();82    this.scrollToBottom();83    var dom_fake_separator_top_visible = Math.max(84      0,85      this.dom_infinite_messages.clientHeight - this.dom_visualized_messages_top.clientHeight,86    );87    if (dom_fake_separator_top_visible == 0) {88      this.dom_fake_separator_top.style.display = 'none';89    } else {90      this.dom_fake_separator_top.style.display = 'block';91    }92    if (this.did_update_messages) {93      this.did_update_messages = false;94      this.bloc_top_height = this.dom_visualized_messages_top.clientHeight;95      this.bloc_bottom_height = this.dom_visualized_messages_bottom.clientHeight;96      if (this.did_update_messages_data.direction == 'bottom') {97        this.scrollToPosition(98          this.dom_anything_on_top.clientHeight +99            (this.did_update_messages_data.bloc_bottom_height -100              (this.did_update_messages_data.scroll_height -101                this.did_update_messages_data.scroll_top)),102        );103      } else if (this.did_update_messages_data.direction == 'bottom_auto_add') {104        //Nothing105      } else {106        this.scrollToPosition(this.bloc_top_height + this.did_update_messages_data.scroll_top);107      }108      this.getVisibleMessages();109    }110  }111  onScroll(evt) {112    if (new Date() - this.did_auto_scroll < 100) {113      return;114    }115    if (116      this.dom_infinite_messages.scrollHeight != this.last_scrollHeight &&117      this.shouldAutoScroll118    ) {119      this.last_scrollHeight = this.dom_infinite_messages.scrollHeight;120      this.scrollToBottom();121    } else {122      var shouldAutoScroll = this.shouldAutoScroll;123      this.shouldAutoScroll = false;124      if (this.props.onAutoScrollChange && shouldAutoScroll) this.props.onAutoScrollChange(false);125    }126    if (this.dom_infinite_messages.scrollTop <= this.dom_infinite_messages.scrollHeight / 8) {127      this.onScrollTop();128    }129    var dist_from_bottom =130      this.dom_infinite_messages.scrollHeight -131      this.dom_infinite_messages.scrollTop -132      this.dom_infinite_messages.clientHeight;133    if (dist_from_bottom <= Math.max(10, this.dom_infinite_messages.scrollHeight / 8)) {134      if (135        dist_from_bottom <= 10 &&136        (this.shouldAutoScroll ||137          this.max_known.id == this.state.messages[this.state.messages.length - 1].id)138      ) {139        var shouldAutoScroll = this.shouldAutoScroll;140        this.shouldAutoScroll = true;141        if (this.props.onAutoScrollChange && !shouldAutoScroll) this.props.onAutoScrollChange(true);142      } else if (dist_from_bottom <= 10 || this.max_known.id != this.messages_med.id) {143        this.onScrollBottom();144      }145    }146    this.getVisibleMessages();147  }148  getVisibleMessages() {149    if (150      this.last_get &&151      Math.abs(this.last_get.scroll_top - this.dom_infinite_messages.scrollTop) < 40152    ) {153      return [this.last_get.first];154    }155    var first = null;156    var frame = window.getBoundingClientRect(this.dom_infinite_messages);157    frame.x = frame.x || frame.left;158    frame.y = frame.y || frame.top;159    frame.scrollTop = this.dom_infinite_messages.scrollTop;160    Object.keys(this.dom_messages).every(i => {161      var item = this.dom_messages[i];162      if (item.node && item.scrollTop === undefined) {163        item.scrollTop = window.getBoundingClientRect(item.node).top + frame.scrollTop - frame.y;164      }165      if (item.node) {166        if (!first && item.scrollTop > frame.scrollTop) {167          first = item.message;168          return false;169        }170      }171      return true;172    });173    var first_date = new Date((first || {}).creation_date * 1000).setHours(0, 0, 0, 0);174    if (first_date != (this.last_get || {}).first_date) {175      if (this.props.onFirstDateChange) this.props.onFirstDateChange(first_date);176    }177    this.last_get = {178      scroll_top: frame.scrollTop,179      first: first,180      first_date: first_date,181    };182    return [this.last_get.first];183  }184  scrollToBottom(force) {185    if (this.shouldAutoScroll || force) {186      //Make sure we display the last bloc !187      if (188        this.messages_med.id != this.messages_min.id &&189        this.messages_med.id != this.messages_max.id190      ) {191        this.init();192        this.did_update_messages = true;193        this.did_update_messages_data = {194          direction: 'bottom_auto_add',195          bloc_top_height: this.dom_visualized_messages_top.clientHeight,196          bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,197          scroll_top: this.dom_infinite_messages.scrollTop,198          scroll_height: this.dom_infinite_messages.scrollHeight,199        };200        this.onUpdate();201      }202      var old_position = this.dom_infinite_messages.scrollTop;203      this.dom_infinite_messages.scrollTop = this.dom_infinite_messages.scrollHeight;204      if (old_position != this.dom_infinite_messages.scrollTop) {205        this.did_auto_scroll = new Date();206      }207      var shouldAutoScroll = this.shouldAutoScroll;208      this.shouldAutoScroll = true;209      if (this.props.onAutoScrollChange && !shouldAutoScroll) this.props.onAutoScrollChange(true);210    }211  }212  scrollToPosition(scrollTop) {213    var old_position = this.dom_infinite_messages.scrollTop;214    this.dom_infinite_messages.scrollTop = scrollTop;215    this.did_auto_scroll = new Date();216  }217  onScrollTop() {218    if (this.is_getting_top_messages) {219      return;220    }221    if (this.no_more_before && this.messages_min.id == this.no_more_before.id) {222      return;223    }224    this.number_of_messages_to_load = 2 * (this.dom_infinite_messages.clientHeight / 20);225    this.is_getting_top_messages = true;226    this.props.getMessages(this.messages_min.id, parseInt(this.number_of_messages_to_load), res => {227      if (res.length == 0) {228        this.is_getting_top_messages = false;229        this.no_more_before = this.messages_min;230        return;231      }232      var top_list = this.state.messages.filter(233        m => this.compare(m, this.messages_min) >= 0 && this.compare(m, this.messages_med) <= 0,234      );235      top_list = res.concat(top_list);236      this.messages_med = res[res.length - 1];237      this.messages_min = res[0];238      this.messages_max = top_list[top_list.length - 1];239      this.did_update_messages = true;240      this.did_update_messages_data = {241        direction: 'top',242        bloc_top_height: this.dom_visualized_messages_top.clientHeight,243        bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,244        scroll_top: this.dom_infinite_messages.scrollTop,245        scroll_height: this.dom_infinite_messages.scrollHeight,246      };247      this.dom_messages = {};248      this.setState({ messages: top_list });249      this.is_getting_top_messages = false;250    });251  }252  onScrollBottom() {253    if (this.is_getting_bottom_messages) {254      return;255    }256    this.number_of_messages_to_load = 2 * (this.dom_infinite_messages.clientHeight / 20);257    this.is_getting_bottom_messages = true;258    this.props.getMessages(259      this.messages_max.id,260      -parseInt(this.number_of_messages_to_load),261      res => {262        if (res.length == 0) {263          this.is_getting_bottom_messages = false;264          var shouldAutoScroll = this.shouldAutoScroll;265          this.shouldAutoScroll = true;266          if (this.props.onAutoScrollChange && !shouldAutoScroll)267            this.props.onAutoScrollChange(true);268          this.max_known = this.state.messages[this.state.messages.length - 1];269          this.messages_min = this.state.messages[0];270          this.messages_max = this.state.messages[this.state.messages.length - 1];271          this.messages_med = this.messages_max;272          return;273        }274        if (this.compare(res[res.length - 1], this.on_load_min) >= 0) {275          var top_list = this.state.messages.filter(m => this.compare(m, res[res.length - 1]) >= 0);276          top_list = top_list.concat(res);277          this.state.messages = this.props.messages.filter(278            m => this.compare(m, this.on_load_min) > 0,279          );280          this.max_known = this.state.messages[this.state.messages.length - 1];281          this.messages_min = this.state.messages[0];282          this.messages_max = this.state.messages[this.state.messages.length - 1];283          this.messages_med = this.messages_max;284          this.did_update_messages = true;285          this.did_update_messages_data = {286            direction: 'bottom_auto_add',287            bloc_top_height: this.dom_visualized_messages_top.clientHeight,288            bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,289            scroll_top: this.dom_infinite_messages.scrollTop,290            scroll_height: this.dom_infinite_messages.scrollHeight,291          };292          this.dom_messages = {};293          this.setState({ messages: this.state.messages });294        } else {295          var top_list = this.state.messages.filter(296            m => this.compare(m, this.messages_med) > 0 && this.compare(m, this.messages_max) <= 0,297          );298          top_list = top_list.concat(res);299          this.messages_min = top_list[0];300          this.messages_med = this.messages_max;301          this.messages_max = top_list[top_list.length - 1];302          this.did_update_messages = true;303          this.did_update_messages_data = {304            direction: 'bottom',305            bloc_top_height: this.dom_visualized_messages_top.clientHeight,306            bloc_bottom_height: this.dom_visualized_messages_bottom.clientHeight,307            scroll_top: this.dom_infinite_messages.scrollTop,308            scroll_height: this.dom_infinite_messages.scrollHeight,309          };310          this.dom_messages = {};311          this.setState({ messages: top_list });312        }313        this.is_getting_bottom_messages = false;314      },315    );316  }317  measure(message) {318    if (this.dom_infinite_messages) {319      this.scrollToBottom();320    }321  }322  //Returns a-b as int323  compare(a, b) {324    if (this.props.compare) {325      return this.props.compare(a, b);326    }327    return a.id - b.id;328  }329  render() {330    var previous_message = null;331    return (332      <div className="infinite_messages" ref={node => (this.dom_infinite_messages = node)}>333        <div ref={node => (this.dom_anything_on_top = node)}>334          {this.props.top || ''}335          {!this.no_more_before && (336            <div style={{ textAlign: 'center' }}>337              <Button338                className="small primary"339                onClick={() => {340                  this.onScrollTop();341                }}342              >343                Load more messages344              </Button>345            </div>346          )}347        </div>348        <div className="fake_separator_top" ref={node => (this.dom_fake_separator_top = node)} />349        <div350          className="visualized_messages top"351          ref={node => (this.dom_visualized_messages_top = node)}352        >353          {this.state.messages.map((message, _i) => {354            if (this.compare(message, this.messages_med) <= 0) {355              var tmp = previous_message;356              previous_message = message;357              var i = _i;358              return (359                <div360                  key={message.id}361                  ref={node =>362                    (this.dom_messages[i] = {363                      node: node,364                      message: message,365                      scrollTop: (this.dom_messages[i] || {}).scrollTop,366                    })367                  }368                >369                  {this.props.renderMessage(message, tmp, () => this.measure(message))}370                </div>371              );372            }373          })}374        </div>375        <div376          className="visualized_messages"377          ref={node => (this.dom_visualized_messages_bottom = node)}378        >379          {this.state.messages.map((message, _i) => {380            if (this.compare(message, this.messages_med) > 0) {381              var tmp = previous_message;382              previous_message = message;383              var i = _i;384              return (385                <div386                  key={message.id}387                  ref={node =>388                    (this.dom_messages[i] = {389                      node: node,390                      message: message,391                      scrollTop: (this.dom_messages[i] || {}).scrollTop,392                    })393                  }394                >395                  {this.props.renderMessage(message, tmp, () => this.measure(message))}396                </div>397              );398            }399          })}400        </div>401      </div>402    );403  }...

Column.js

Source:Column.js

1var $ = require('jquery');2$.fn.shuffle = function(){3    for(var j, x, i = this.length; i; j = Math.floor(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);4    return this;5};6var id = 0;7var Column = function( _ele, _autoAmount, _shuffle, _duplicate ){8	this.id = id++;9	console.log( 'constructed column', this.id );10	this.$ele = $(_ele);11	this.autoAmount = _autoAmount;12	this.shuffle = !!_shuffle;13	this.duplicate = !!_duplicate;14	this.$inner = this.$ele.children('.column--inner');15	if( this.shuffle && this.duplicate){16		this.$inner.append( this.$inner.children().clone().shuffle() );17		this.$inner.append( this.$inner.children().clone().shuffle() );18	} else if( this.duplicate ){19		this.$inner.append( this.$inner.children().clone() );20		this.$inner.append( this.$inner.children().clone() );21	}22	this.setValues();23	this.setupEvents();24	this.setInitial();25}26var proto = Column.prototype;27proto.setupEvents = function(){28	var that = this;29	this.$ele.on('scroll', function(){30		if( !that.shouldAutoScroll ){31			that.scrollCallback();32		}33	});34	this.$ele.on('mouseover',function(){35		that.shouldAutoScroll = false;36	});37	this.$ele.on('mouseout',function(){38		that.shouldAutoScroll = true;39	});40}41proto.setInitial = function(){42	if( this.shouldAutoScroll && this.autoAmount < 0 ){43		this.setScroll( this.scrollThreshMax );44	} else{45		this.setScroll( this.scrollThreshMin );46	}47}48proto.setValues = function(){49	//this.scrollHeight = this.$inner[0].scrollHeight;50	this.scrollHeight = this.$ele[0].scrollHeight;51	this.height = $(window).height();52	this.scrollMax = this.scrollHeight - this.height;53	// console.log(this.id, 'scrollH', this.scrollHeight, 'H', this.height, 'Max', this.scrollMax );54	this.scrollThreshMin = 20;55	this.scrollThreshMax = (this.scrollHeight- this.height - this.scrollThreshMin) *0.9;56	this.scrollPos = 0;57	this.shouldAutoScroll = (typeof this.autoAmount !== 'undefined' ) ? true : false;58}59proto.autoScroll = function(){60	if( this.shouldAutoScroll ){61		this.changeScrollBy( this.autoAmount );62		this.infiniteScroll();63		this._onScroll();64	}65}66proto.changeScrollBy = function( by ){67	var newScroll = this.scrollPos + by;68	this.setScroll( newScroll );69}70proto.setScroll = function( to ){71	this.scrollPos = to;72	if( to > this.scrollThreshMax ){73		to = this.scrollThreshMax;74	}75	this.$ele.scrollTop( to )76}77proto.infiniteScroll = function(){	78	//this.setValues();79	if( this.scrollPos > this.scrollThreshMax ){80		this.setScroll( this.scrollThreshMin + 1 );81	} else if( this.scrollPos < this.scrollThreshMin  ){82		this.setScroll( this.scrollThreshMax - 1 );83	}84}85proto._onScroll = function(){86	if( typeof this.onScroll === 'function' ){87		this.onScroll();88	}89}90proto.scrollCallback = function(){91	var that = this;92	clearTimeout( this.extraCheck );93	this.extraCheck = setTimeout(function(){94		that.scrollPos = that.$ele.scrollTop();95		that.infiniteScroll();96		that._onScroll();97	}, 100)98	this.scrollPos = this.$ele.scrollTop();99	this.infiniteScroll();100	this._onScroll();101}...

Using AI Code Generation

1var shouldAutoScroll = require('devicefarmer-stf').util.shouldAutoScroll;2var element = {3};4var viewport = {5};6console.log(shouldAutoScroll(element, viewport));7var autoScroll = require('devicefarmer-stf').util.autoScroll;8var element = {9};10var viewport = {11};12var scroll = autoScroll(element, viewport);13console.log('x: ' + scroll.x + ', y: ' + scroll.y);14var autoScroll = require('devicefarmer-stf').util.autoScroll;15var element = {16};17var viewport = {18};19var scroll = autoScroll(element, viewport);20console.log('x: ' + scroll.x + ', y: ' + scroll.y);21var autoScroll = require('devicefarmer-stf').util.autoScroll;22var element = {23};24var viewport = {25};26var scroll = autoScroll(element, viewport);27console.log('x: ' + scroll.x + ', y: ' + scroll.y);28var autoScroll = require('devicefarmer-stf').util.autoScroll;29var element = {

Using AI Code Generation

1var shouldAutoScroll = require('devicefarmer-stf-provider/lib/util/shouldAutoScroll')2var shouldScroll = shouldAutoScroll({width: 360, height: 640}, {width: 360, height: 640}, {x: 0, y: 0}, {x: 0, y: 0})3console.log(shouldScroll)4var shouldAutoScroll = require('devicefarmer-stf-provider/lib/util/shouldAutoScroll')5var shouldScroll = shouldAutoScroll({width: 360, height: 640}, {width: 360, height: 640}, {x: 0, y: 0}, {x: 0, y: 100})6console.log(shouldScroll)7var shouldAutoScroll = require('devicefarmer-stf-provider/lib/util/shouldAutoScroll')8var shouldScroll = shouldAutoScroll({width: 360, height: 640}, {width: 360, height: 640}, {x: 0, y: 0}, {x: 0, y: 1000})9console.log(shouldScroll)10var shouldAutoScroll = require('devicefarmer-stf-provider/lib/util/shouldAutoScroll')11var shouldScroll = shouldAutoScroll({width: 360, height: 640}, {width: 360, height: 640}, {x: 0, y: 0}, {x: 0, y: 2000})12console.log(shouldScroll)13var shouldAutoScroll = require('devicefarmer-stf-provider/lib/util/shouldAutoScroll')14var shouldScroll = shouldAutoScroll({width: 360, height: 640}, {width: 360, height: 640}, {x: 0, y: 0}, {x: 0, y: 3000})15console.log(shouldScroll)

Using AI Code Generation

1var stf = require('devicefarmer-stf');2var shouldAutoScroll = stf.shouldAutoScroll;3var scroll = stf.scroll;4var element = {5  location: {6  },7  size: {8  }9};10var viewport = {11};12var result = shouldAutoScroll(element, viewport);13console.log(result);14var stf = require('devicefarmer-stf');15var shouldAutoScroll = stf.shouldAutoScroll;16var scroll = stf.scroll;17var element = {18  location: {19  },20  size: {21  }22};23var viewport = {24};25var result = scroll(element, viewport);26console.log(result);27var stf = require('devicefarmer-stf');28var shouldAutoScroll = stf.shouldAutoScroll;29var scroll = stf.scroll;30var webdriver = require('selenium-webdriver');31var driver = new webdriver.Builder()32  .forBrowser('chrome')33  .build();34driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');35driver.findElement(webdriver.By.name('btnG')).click();36driver.wait(function() {37  return driver.getTitle().then(function(title) {38    return title === 'webdriver - Google Search';39  });40}, 1000);41driver.findElements(webdriver.By.css('div.rc')).then(function(elements) {42  var element = elements[0];43  var viewport = {44  };45  var should = shouldAutoScroll(element, viewport);46  if (should) {47    scroll(element, viewport);48  }49});50var stf = require('devicefarmer-stf');51var shouldAutoScroll = stf.shouldAutoScroll;52var scroll = stf.scroll;53var webdriver = require('selenium-webdriver');54var driver = new webdriver.Builder()55  .forBrowser('chrome')56  .build();

Using AI Code Generation

1if (device.shouldAutoScroll()) {2} else {3}4if (device.shouldAutoScroll()) {5} else {6}7if (device.shouldAutoScroll()) {8} else {9}10if (device.shouldAutoScroll()) {11} else {12}13if (device.shouldAutoScroll()) {14} else {15}16if (device.shouldAutoScroll()) {17} else {18}19if (device.shouldAutoScroll()) {20} else {21}22if (device.shouldAutoScroll()) {23} else {24}25if (device.shouldAutoScroll()) {26} else {27}28if (device.shouldAutoScroll()) {29} else {30}31if (device.shouldAutoScroll()) {32} else {33}34if (device.shouldAutoScroll()) {35} else {36}

Using AI Code Generation

1var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;2var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);3console.log(shouldAutoScroll);4var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;5var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);6console.log(shouldAutoScroll);7var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;8var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);9console.log(shouldAutoScroll);10var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;11var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);12console.log(shouldAutoScroll);13var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;14var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);15console.log(shouldAutoScroll);16var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;17var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);18console.log(shouldAutoScroll);19var shouldAutoScroll = require('devicefarmer-stf-client').shouldAutoScroll;20var shouldAutoScroll = shouldAutoScroll(100, 100, 200, 200);21console.log(shouldAutoScroll);

Using AI Code Generation

1var devicefarmer = require('devicefarmer-stf');2    if (err) {3        console.log(err);4    } else {5        console.log(result);6    }7});8{ shouldAutoScroll: true }9shouldAutoScroll = (viewportHeight / contentHeight) > 1

Using AI Code Generation

1var stf = require('devicefarmer-stf');2stf.shouldAutoScroll(function(err, data) {3    if (err) {4        console.log("error");5    } else {6        console.log("data", data);7    }8});9var stf = require('devicefarmer-stf');10stf.getDeviceList(function(err, data) {11    if (err) {12        console.log("error");13    } else {14        console.log("data", data);15    }16});17var stf = require('devicefarmer-stf');18stf.getDeviceList(function(err, data) {19    if (err) {20        console.log("error");21    } else {22        console.log("data", data);23    }24});25var stf = require('devicefarmer-stf');26stf.getDeviceList(function(err, data) {27    if (err) {28        console.log("error");29    } else {30        console.log("data", data);31    }32});33var stf = require('devicefarmer-stf');34stf.getDeviceList(function(err, data) {35    if (err) {36        console.log("error");37    } else {38        console.log("data", data);39    }40});41var stf = require('devicefarmer-stf');42stf.getDeviceList(function(err, data) {43    if (err) {44        console.log("error");45    } else {46        console.log("data", data);47    }48});49var stf = require('devicefarmer-stf');50stf.getDeviceList(function(err, data) {51    if (err) {52        console.log("error");53    } else {54        console.log("data", data);55    }56});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.