텍스트를 강조 표시 한 다음 팝업 위젯에 보냅니다. javascript

Question

EmberJS에서 이와 같은 작업을 수행하려고합니다. 당신이 볼 수 위의 이미지에서

는, 사용자가 텍스트와 mouseup 이벤트에 강조 표시 할 수있는 위젯은 몇 가지 아이콘이 나타납니다. 강조 표시된 텍스트를 표시하는 위젯을 사용하여 동일한 결과를 얻고 싶습니다. 나는 highlighted text와 콘솔을 로그 얻을 수있어

export default Component.extend({ 
    classNames: ['widgetText'], 
    didDrag: false, 
    startDragPosition: null, 
    endDragPosition: null, 

    getSelected() { 
    if (window.getSelection) { 
     return window.getSelection().toString(); 
    } else if (document.selection) { 
     return document.selection.createRange().text; 
    } 
    return ''; 
    }, 

    mouseUp(e) { 
    if (this.get('startDragPosition') && this.get('didDrag')) { 
     this.set('endDragPosition', { left: e.pageX, top: e.pageY }); 
     const selection = this.getSelected(); 
     console.log(selection); //I'm able to print my selection, I want this to be sent to a widget and position the widget...? 
    } 
    this.setProperties({ didDrag: false, startDragPosition: null, endDragPosition: null }); 
    }, 

    mouseMove() { 
    this.set('didDrag', true); 
    }, 

    mouseDown(e) { 
    this.set('startDragPosition', { left: e.pageX, top: e.pageY }); 
    }, 

,하지만 난 위젯을 열고 올바르게에 위치하는 방법에 붙어 :

이

은 내가 지금까지 무엇을 가지고 있습니다 중간 어딘가에 있고 그 위젯 안에 선택된 텍스트를 표시 할 수 있습니다.

Answer 1

당신이 원하는대로 당신은 강조 표시된 텍스트의 내용을 CONSOLE.LOG 수 있다면, 당신은이 같은 변수를 조회 할 수 있습니다, 팝업 관리 엠버 구성 요소를 사용할 수 있습니다

isShowing():{ 
    this.togglePropety('isShowingComponent'); 
} 

이 관찰됩니다 당신이 당신의 .hbs

{{#if isShowingComponent}} 
    {{social-buttons close="isShowing"}} 
{{/if}} 

유일한 것은이 같은 처리 할 수 ​​있도록 isShowingComponent 변수는 그렇게 displayin의 스타일, 그리고 당신이 뭔가를 할 텍스트를 보내려면이처럼 그것을 할 수 있습니다 왼쪽 :

희망이 도움이 될 것입니다.