{"size": 4680, "ext": "js", "max_stars_repo_path": "js/objects/views/BrowserView.js", "max_stars_repo_name": "dkrasner/Simpletalk", "max_stars_repo_stars_event_min_datetime": "2021-06-07T19:11:18.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-22T19:46:39.000Z", "max_issues_repo_path": "js/objects/views/BrowserView.js", "max_issues_repo_name": "jthodge/Simpletalk", "max_issues_repo_issues_event_min_datetime": "2021-05-13T12:09:28.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-02T12:52:46.000Z", "max_forks_repo_path": "js/objects/views/BrowserView.js", "max_forks_repo_name": "jthodge/Simpletalk", "max_forks_repo_forks_event_min_datetime": "2021-12-21T01:10:59.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-06T16:02:33.000Z"}
{"max_stars_count": 21, "max_issues_count": 95, "max_forks_count": 2, "avg_line_length": 31.4093959732, "max_line_length": 223, "alphanum_fraction": 0.5485042735}
import PartView from './PartView.js';

const linkIcon = `
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
  <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
</svg>
`;

const templateString = `
<style>
:host {
    box-sizing: border-box;
    display: block;
    position: absolute;
    padding: 1px;
    user-select: none;
    cursor: pointer;
}
iframe {
    width: 100%;
    height: 100%;
}
</style>
<iframe frameborder="0" allowfullscreen></iframe>
`;

class BrowserView extends PartView {
    constructor(){
        super();

        // Setup template and shadow dom
        this.template = document.createElement('template');
        this.template.innerHTML = templateString;
        this._shadowRoot = this.attachShadow({mode: 'open'});
        this._shadowRoot.appendChild(this.template.content.cloneNode(true));

        // Bind component methods
        this.onClick = this.onClick.bind(this);
        this.initCustomHaloButton = this.initCustomHaloButton.bind(this);
        this.updateBrowserLink = this.updateBrowserLink.bind(this);
    }

    afterConnected(){
        if(!this.haloButton){
            this.initCustomHaloButton();
        }
    }

    afterDisconnected(){
    }

    afterModelSet(){
        let iframe = this._shadowRoot.querySelector("iframe");
        let src = this.model.partProperties.getPropertyNamed(this.model, "src");
        if(src){
            iframe.src = src;
        }
        this.onPropChange("src", (url) => {
            try{
                // resource load is auto-loaded by the <browser> element
                iframe.src = url;
            } catch(error){
                let errorMsg = {
                    type: "error",
                    name: "ResourceNotFound",
                    resourceType: "browser",
                    partId: this.model.id,
                    details: {source: url, type: "url"}

                };
                this.model.sendMessage({errorMsg}, this.model);
            }
        });
    }

    onClick(event){
        if(event.button == 0){
            if(event.shiftKey){
                // prevent triggering the on click message
                event.preventDefault();
                if(this.hasOpenHalo){
                    this.model.partProperties.setPropertyNamed(this.model, "halo-open", false);
                } else {
                    this.model.partProperties.setPropertyNamed(this.model, "halo-open", true);
                }
            } else if(!this.hasOpenHalo){
                // Send the click command message to self
                this.model.sendMessage({
                    type: 'command',
                    commandName: 'click',
                    args: [],
                    shouldIgnore: true // Should ignore if System DNU
                }, this.model);
            }
        }
    }

    openHalo(){
        // Override default. Here we add a custom button
        // when showing.
        let foundHalo = this.shadowRoot.querySelector('st-halo');
        if(!foundHalo){
            foundHalo = document.createElement('st-halo');
            this.shadowRoot.appendChild(foundHalo);
        }
        foundHalo.append(this.haloButton);
    }

    initCustomHaloButton(){
        this.haloButton = document.createElement('div');
        this.haloButton.id = 'halo-browser-link';
        this.haloButton.classList.add('halo-button');
        this.haloButton.innerHTML = linkIcon;
        this.haloButton.style.marginTop = "6px";
        this.haloButton.setAttribute('slot', 'right-column');
        this.haloButton.setAttribute('title', 'Edit link for browser source');
        this.haloButton.addEventListener('click', this.updateBrowserLink);
    }

    updateBrowserLink(event){
        // Tells the model to update its
        // src link for the browser
        let currentSrc = this.model.partProperties.getPropertyNamed(
            this.model,
            'src'
        );
        let result = window.prompt("Edit URL for browser:", currentSrc);
        if(result && result !== '' && result !== currentSrc){
            this.sendMessage(
                {
                    type: 'command',
                    commandName: 'setURLTo',
                    args: [ result ]
                },
                this.model
            );
        }
    }


};

export {
    BrowserView,
    BrowserView as default
};
