Code Monkey home page Code Monkey logo

Comments (4)

benbabics avatar benbabics commented on June 15, 2024 1

Hello,

I ran into this issue with iframes as well and ended up creating my own custom InterruptSource based on DocumentInterruptSource except instead of having the first argument hard-coded as document.documentElement, it accepts an element in the constructor to accept an iframe's contentDocument property (e.g. this.myIframe.nativeElement.contentDocument).

While not the official way of doing this, something like this should work:

app.component.ts

import { Idle, DEFAULT_INTERRUPTSOURCES } from "@ng-idle/core";

export class AppComponent {
  ...

  loadFrame() {
    this.myPageIFrame.nativeElement.addEventListener('load', () => {
      const el = this.myPageIFrame.nativeElement.contentDocument;
      this.setInterruptSource(el);
    });
  }

  unloadFrame() {
    // clean-up iframe
    this.setInterruptSource(); // resets back to initial interrupt(s) without the custom interrupt for the iframe
  }

  setInterruptSource(elementForInterrupt?: ElementRef): void {
    const interrupts = [ ...DEFAULT_INTERRUPTSOURCES ];

    if (elementForInterrupt) {
      const interrupt = new CustomDocumentInterruptSource(elementForInterrupt);
      interrupts.push(interrupt);
    }

    this.idle.stop(); // stop watchers
    this.idle.setInterrupts(interrupts);
    this.idle.watch(); // restart watchers with new interrupt(s)
  }
}

This will create an instance of CustomDocumentInterruptSource with the iframe's contentDocument. It will stop the idle watchers, set the interrupts (including new interrupt(s), and then restart the watchers (I'm not clear if you have to stop and then start, or just re-call start).

CustomDocumentInterruptSource.ts

import { EventTargetInterruptSource, EventTargetInterruptOptions } from "@ng-idle/core";
import { ElementRef } from "@angular/core";

/*
 * Custom interrupt source that uses events on the document element (html tag).
 *
 * This has been modeled after DocumentInterruptSource that hardocdes `document.documentElement`
 * as the first argument. We may need to create a custom interrupt from the document of another frame
 * other than the document on window.
 * 
 * Original source for DocumentInterruptSource: https://github.com/HackedByChinese/ng2-idle/blob/master/modules/core/src/documentinterruptsource.ts
 */
class CustomDocumentInterruptSource extends EventTargetInterruptSource {
  constructor(el: ElementRef, events: string = DEFAULT_EVENTS, options?: number | EventTargetInterruptOptions) {
    super(el, events, options);
  }

  /*
   * Checks to see if the event should be filtered.
   * @param event - The original event object.
   * @return True if the event should be filtered (don't cause an interrupt); otherwise, false.
   */
  filterEvent(event: any): boolean {
    // some browser bad input hacks
    if (event.type === 'mousemove'
      // fix for Chrome destop notifications
      && ((event.originalEvent && event.originalEvent.movementX === 0 &&
        event.originalEvent.movementY === 0)
        // fix for webkit fake mousemove
        || (event.movementX !== void 0 && !event.movementX || !event.movementY))) {
      return true;
    }

    return false;
  }
}

const DEFAULT_EVENTS: string = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll';
export default CustomDocumentInterruptSource;

from ng2-idle.

moribvndvs avatar moribvndvs commented on June 15, 2024

It looks like CKEditor uses IFRAMEs. @ng-idle will not be able to attach to those and listen for your input events because they are on a separate document. You'll likely need to create your own component or directive that takes in Idle service as a dependency, and - after the CKEditor is initialized - uses the CKEditor/DOM to listen to the desired events and call Idle.interrupt().

from ng2-idle.

sdvivas avatar sdvivas commented on June 15, 2024

Hi, I'm just beginning
So do you have the main code for this example??
I wanna to use IDLE with Iframes

from ng2-idle.

npandu avatar npandu commented on June 15, 2024

I tried with @benbabics solution. It's adding the the custom source into exiting one. But it's not working. I think some small changes have to be made.

from ng2-idle.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.