テキストをハイライトしてポップアップウィジェットに送信します。

Question

EmberJSでこれを達成しようとしています。あなたが見ることができるように上記の画像で

、ユーザーは、いくつかのテキストをハイライト表示することができ、mouseupイベント時に、ウィジェットは、いくつかのアイコンがポップアップ表示されます。私はハイライトされたテキストを表示するウィジェットで同じことを達成したい。

これは私がこれまでに得たものである：

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 }); 
    }, 

私はhighlighted textを取得し、それをログ慰めることができるんだけど、私はウィジェットを開き、正確にそれを配置する方法についてこだわっています選択したテキストをそのウィジェット内に表示します。

Answer 1

あなたが望むようあなたが強調表示されたテキストの内容をCONSOLE.LOGことができればあなたは、あなたがこのような変数を検索することができ、ポップアップを管理エンバーコンポーネントを使用することができます。

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

これは、観察するあなたのあなたは.hbs

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

唯一のもので、次のように扱うことができるので、isShowingComponent変数は、それがそのようdisplayinのスタイルだし、あなたはそれで何かをするためにテキストを送信したい場合はこのようにそれを行うことができます左：

{{#if isShowingComponent}} 
    {{social-buttons close="isShowing" text='the text you already can console.log'}} 
{{/if}} 

希望します。