From 8d22831143a7969c0839eb55f868dab334d9106d Mon Sep 17 00:00:00 2001 From: El P Date: Thu, 4 Aug 2022 18:32:53 -0700 Subject: [PATCH] fix: Default view.jump() to launch external links in new windows #26 --- docs/advanced.md | 38 +++++++++++++++++----------------- py/pkg/docs/advanced_layout.py | 30 +++++++++++++-------------- web/src/client.ts | 8 +++---- web/src/core.ts | 1 + 4 files changed, 38 insertions(+), 39 deletions(-) diff --git a/docs/advanced.md b/docs/advanced.md index 4b081528..99518821 100644 --- a/docs/advanced.md +++ b/docs/advanced.md @@ -15,60 +15,60 @@ view(box(mode='web', path='https://example.com')) ![Screenshot](assets/screenshots/embed_iframe.png) -## Open web pages in the current view +## Open web pages in a new view -Pass a URL to `view.jump()` to open web pages in the current view. +Pass a URL to `view.jump()` with `target='_blank'` to open web pages in a new view. ```py -view('Click Continue to open https://example.com in the current view.') +view('Click Continue to open https://example.com in a new view.') view.jump('https://example.com') ``` -![Screenshot](assets/screenshots/open_web_page.png) +![Screenshot](assets/screenshots/open_web_page_blank.png) -## Open web pages in the top level view +## Open web pages in a popup -Pass a URL to `view.jump()` with `target='_top'` to open web pages in the top level view. +URLs can be opened in popup windows by passing `popup=1`. ```py -view('Click Continue to open https://example.com in the top level view.') -view.jump('https://example.com', target='_top') +view('Click Continue to open https://example.com in a new view.') +view.jump('https://example.com', popup=1, width=400, height=300, left=100, top=100) ``` -![Screenshot](assets/screenshots/open_web_page_top.png) +![Screenshot](assets/screenshots/open_web_page_popup.png) -## Open web pages in a new view +## Open web pages in the current view -Pass a URL to `view.jump()` with `target='_blank'` to open web pages in a new view. +Pass a URL to `view.jump()` to open web pages in the current view. ```py -view('Click Continue to open https://example.com in a new view.') -view.jump('https://example.com', target='_blank') +view('Click Continue to open https://example.com in the current view.') +view.jump('https://example.com', target='_self') ``` -![Screenshot](assets/screenshots/open_web_page_blank.png) +![Screenshot](assets/screenshots/open_web_page.png) -## Open web pages in a popup +## Open web pages in the top level view -URLs can be opened in popup windows by passing `popup=1`. +Pass a URL to `view.jump()` with `target='_top'` to open web pages in the top level view. ```py -view('Click Continue to open https://example.com in a new view.') -view.jump('https://example.com', target='_blank', popup=1, width=400, height=300, left=100, top=100) +view('Click Continue to open https://example.com in the top level view.') +view.jump('https://example.com', target='_top') ``` -![Screenshot](assets/screenshots/open_web_page_popup.png) +![Screenshot](assets/screenshots/open_web_page_top.png) ## An Album diff --git a/py/pkg/docs/advanced_layout.py b/py/pkg/docs/advanced_layout.py index 6f851f42..82caa61d 100644 --- a/py/pkg/docs/advanced_layout.py +++ b/py/pkg/docs/advanced_layout.py @@ -24,11 +24,25 @@ def embed_iframe(view: View): view(box(mode='web', path='https://example.com')) +# ## Open web pages in a new view +# Pass a URL to `view.jump()` with `target='_blank'` to open web pages in a new view. +def open_web_page_blank(view: View): # height 2 + view('Click Continue to open https://example.com in a new view.') + view.jump('https://example.com') + + +# ## Open web pages in a popup +# URLs can be opened in popup windows by passing `popup=1`. +def open_web_page_popup(view: View): # height 2 + view('Click Continue to open https://example.com in a new view.') + view.jump('https://example.com', popup=1, width=400, height=300, left=100, top=100) + + # ## Open web pages in the current view # Pass a URL to `view.jump()` to open web pages in the current view. def open_web_page(view: View): # height 4 view('Click Continue to open https://example.com in the current view.') - view.jump('https://example.com') + view.jump('https://example.com', target='_self') # ## Open web pages in the top level view @@ -38,20 +52,6 @@ def open_web_page_top(view: View): # height 2 view.jump('https://example.com', target='_top') -# ## Open web pages in a new view -# Pass a URL to `view.jump()` with `target='_blank'` to open web pages in a new view. -def open_web_page_blank(view: View): # height 2 - view('Click Continue to open https://example.com in a new view.') - view.jump('https://example.com', target='_blank') - - -# ## Open web pages in a popup -# URLs can be opened in popup windows by passing `popup=1`. -def open_web_page_popup(view: View): # height 2 - view('Click Continue to open https://example.com in a new view.') - view.jump('https://example.com', target='_blank', popup=1, width=400, height=300, left=100, top=100) - - # ## An Album # A simple layout for photo galleries or portfolios. # diff --git a/web/src/client.ts b/web/src/client.ts index 50dba91f..f0f613c7 100644 --- a/web/src/client.ts +++ b/web/src/client.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Dict, isS, newIncr, on, S, Signal, signal, U, V } from './core'; +import { Dict, isS, isURL, newIncr, on, S, Signal, signal, U, V } from './core'; import { css } from './css'; import { reIndex, sanitizeBox, sanitizeOptions } from './heuristics'; import { installPlugins } from './plugin'; @@ -186,17 +186,15 @@ export const newClient = (server: Server) => { server.connect(handleEvent) }, jump = (v: V, params?: Dict) => { - if (isS(v) && /^http[s]*:\/\//.test(v)) { + if (isS(v) && isURL(v)) { const p = params ?? {}, - target = p['target'] ?? '_self', + target = p['target'] ?? '_blank', features: S[] = [] for (const k in p) if (k !== 'target') features.push(`${k}=${p[k]}`) if (features.length) { - console.log(v, target, features) window.open(v, target, features.join(',')) } else { - console.log(v, target) window.open(v, target) } return diff --git a/web/src/core.ts b/web/src/core.ts index 9f4154bd..ace99c01 100644 --- a/web/src/core.ts +++ b/web/src/core.ts @@ -203,6 +203,7 @@ export const splitLines = (x: S) => x.split(/\r?\n/) export const words = (x: S) => x.trim().split(/\s+/g) export const snakeToCamelCase = (s: S): S => s.replace(/(_\w)/g, m => m[1].toUpperCase()) export const kebabToPascalCase = (s: S): S => s.replace(/(-\w)/g, m => m[1].toUpperCase()).replace(/^./, m => m.toUpperCase()) +export const isURL = (x: S) => /^http[s]*:\/\//.test(x) export const valueFromRange = (value: any, min: any, max: any, step: any): N | undefined => { if (isN(value)) return value if (isN(min)) return Math.max(0, min)