Skip to content

Commit

Permalink
Merge pull request #93 from nwittwer/issue-84
Browse files Browse the repository at this point in the history 
Issue 84 - (unsolved) Bug: Page doesn't change after selecting a recent URL
  • Loading branch information
@nwittwer
nwittwer authored Oct 6, 2018
2 parents c7312e4 + 31a3d40 commit 22c1d12
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 74 deletions.
10 changes: 9 additions & 1 deletion src/js/features/toolbar/toolbar-recent-urls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,16 @@ app.toolbar.recentURLs = {
app.toolbar.recentURLs.show();

// Listen for clicks on the dropdown items
$(".toolbar__url-li").on('click', function (e) {
// Note, these will be cached
$(document).on('click', '.toolbar__url-li', function (e) {
if (app.environment == "dev") {
console.log($(e.target), $(e.target).text());
}

// Set the value based on the clicked target
$("#toolbar__url").val($(e.target).text());

// Update the URL in the iframes
app.toolbar.updateURL();
});

Expand Down
80 changes: 38 additions & 42 deletions src/js/features/toolbar/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,10 @@ app.toolbar = {
$(this).attr("src", url_val);

// Show loading spinner
$(this).on("loadstart", function () {
app.toolbar.isLoading(true, url_val)
});
app.toolbar.isLoading(true, url_val);

// Site is loaded
$(this).on("loadstop", function () {
$(this).on("load", function () {
// Hide loading spinner
app.toolbar.isLoading(false, url_val);
// Unregister the load event of any previous artboardInnerFrames
Expand All @@ -75,51 +73,49 @@ app.toolbar = {
console.log('Finished Loading: ' + url);
}
loading_el.removeClass('is-loading');
} else {
// No action
}
},

handleartboardInnerFrameChild: function ($el) {
// Run on trigger
app.toolbar.injectartboardInnerFrameChildScript($el);

// Listen for events
window.addEventListener('message', function (e) {
if (app.environment == "dev") {
console.log("Returned message:" + e.data);
}

// Inject the script again
app.toolbar.updateURL();
});

// Send a message to establish connection
try {
$el.contentWindow.postMessage('hi', '*');
if (app.environment == "dev") {
console.log("message sent to artboardInnerFrame");
}
} catch (e) {
if (app.environment == "dev") {
console.log('message to artboardInnerFrame failed');
}
}
// // Run on trigger
// app.toolbar.injectartboardInnerFrameChildScript($el);

// // Listen for events
// window.addEventListener('message', function (e) {
// if (app.environment == "dev") {
// console.log("Returned message:" + e.data);
// }

// // Inject the script again
// app.toolbar.updateURL();
// });

// // Send a message to establish connection
// try {
// $el.contentWindow.postMessage('hi', '*');
// if (app.environment == "dev") {
// console.log("message sent to artboardInnerFrame");
// }
// } catch (e) {
// if (app.environment == "dev") {
// console.log('message to artboardInnerFrame failed');
// }
// }
},

injectartboardInnerFrameChildScript: function ($el) {
if (app.environment == "dev") {
console.log('Link click script injected');
}
// if (app.environment == "dev") {
// console.log('Link click script injected');
// }

// Inject a script into the artboardInnerFrame to track click events and propagate it to the parent
// Make sure to run this function again after click (re-inject)
var injection_code = `
window.addEventListener('message', function (e) {
document.querySelector("a").onclick = function (r) {
e.source.postMessage("hello there", "*");
}
})`;
// var injection_code = `
// window.addEventListener('message', function (e) {
// document.querySelector("a").onclick = function (r) {
// e.source.postMessage("hello there", "*");
// }
// })`;

// $el.addContentScripts([{
// name: 'myRule',
Expand All @@ -131,9 +127,9 @@ app.toolbar = {
// }]);

// Inject click handler
$el.executeScript({
code: injection_code
});
// $el.executeScript({
// code: injection_code
// });
}

}
10 changes: 5 additions & 5 deletions src/partials/artboard.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
W: <span class="artboard__width">{{width}}</span>
H: <span class="artboard__height">{{height}}</span>
</div>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<div class="artboard__loader">
<div class="content">
<div class="lds-ripple">
Expand All @@ -16,7 +12,11 @@
</div>
</div>
</div>
<iframe src="" frameborder="0"></iframe>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<iframe src="" nwfaketop frameborder="0"></iframe>
{{!-- <webview partition=”trusted”></webview> --}}
<div class="artboard__handles">
<div class="handle__bottom"></div>
Expand Down
23 changes: 12 additions & 11 deletions src/scss/partials/_artboards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ $artboard-handle-height: 1rem;
position: relative;
border: 1px solid white;
box-sizing: border-box;
background: darken(#3c4046, 10%);

webview,
iframe {
Expand Down Expand Up @@ -134,22 +135,22 @@ $artboard-handle-height: 1rem;
}
}

&__loader {
& .artboard__loader {
position: absolute; // left: 50%;
top: 0;
left: 0;
height: 100%;
width: 100%;
right: 0;
display: none;
background: rgba($body-bg, 0.95);
// height: 100%;
// width: 100%;
// background: rgba($body-bg, 0.95);

.content {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// top: 50%;
transform: translateX(-50%);
color: white;
position: absolute;
font-size: 2rem;
}

&.is-loading {
Expand Down Expand Up @@ -177,8 +178,8 @@ $artboard-handle-height: 1rem;

@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
top: 20px;
left: 20px;
width: 0;
height: 0;
opacity: 1;
Expand All @@ -187,8 +188,8 @@ $artboard-handle-height: 1rem;
100% {
top: -1px;
left: -1px;
width: 80px;
height: 80px;
width: 42px;
height: 42px;
opacity: 0;
}
}
Expand Down
30 changes: 15 additions & 15 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,6 @@ <h1>Settings</h1>
W: <span class="artboard__width">1440</span>
H: <span class="artboard__height">1024</span>
</div>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<div class="artboard__loader">
<div class="content">
<div class="lds-ripple">
Expand All @@ -102,7 +98,11 @@ <h1>Settings</h1>
</div>
</div>
</div>
<iframe src="" frameborder="0"></iframe>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<iframe src="" nwfaketop frameborder="0"></iframe>
<div class="artboard__handles">
<div class="handle__bottom"></div>
</div>
Expand All @@ -114,10 +114,6 @@ <h1>Settings</h1>
W: <span class="artboard__width">768</span>
H: <span class="artboard__height">1024</span>
</div>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<div class="artboard__loader">
<div class="content">
<div class="lds-ripple">
Expand All @@ -126,7 +122,11 @@ <h1>Settings</h1>
</div>
</div>
</div>
<iframe src="" frameborder="0"></iframe>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<iframe src="" nwfaketop frameborder="0"></iframe>
<div class="artboard__handles">
<div class="handle__bottom"></div>
</div>
Expand All @@ -138,10 +138,6 @@ <h1>Settings</h1>
W: <span class="artboard__width">320</span>
H: <span class="artboard__height">1024</span>
</div>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<div class="artboard__loader">
<div class="content">
<div class="lds-ripple">
Expand All @@ -150,7 +146,11 @@ <h1>Settings</h1>
</div>
</div>
</div>
<iframe src="" frameborder="0"></iframe>
<button class="button button--small artboard__delete-button" onclick="app.artboard.delete(event)">Delete</button>
</div>
<div class="artboard__keypoints"></div>
<div class="artboard__content">
<iframe src="" nwfaketop frameborder="0"></iframe>
<div class="artboard__handles">
<div class="handle__bottom"></div>
</div>
Expand Down

0 comments on commit 22c1d12

Please sign in to comment.