Skip to content

Commit

Permalink
Simplify the webNavigation implementation
Browse files Browse the repository at this point in the history 
- Moved settings entirely into popup, leaving the main app for instructions only.
- Removed the communications between the background script and the main app to try and avoid potential crashes/unloads of the background script
  • Loading branch information
@workwithnano
workwithnano committed Jan 18, 2024
1 parent fb38c00 commit 64d7c2b
Show file tree
Hide file tree
Showing 11 changed files with 819 additions and 561 deletions.
15 changes: 8 additions & 7 deletions safari/Universal/Kagi Search (macOS)/Base.lproj/Main.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@
<outlet property="delegate" destination="Voe-Tx-rLC" id="PrD-fu-P6m"/>
</connections>
</application>
<customObject id="Voe-Tx-rLC" customClass="AppDelegate" customModule="Kagi_Search_macOS" customModuleProvider="target"/>
<customObject id="Voe-Tx-rLC" customClass="AppDelegate" customModule="Kagi_Search_for_Safari" customModuleProvider="target"/>
<customObject id="YLy-65-1bz" customClass="NSFontManager"/>
<customObject id="Ady-hI-5gd" userLabel="First Responder" customClass="NSResponder" sceneMemberID="firstResponder"/>
</objects>
Expand All @@ -304,10 +304,11 @@
<objects>
<windowController showSeguePresentationStyle="single" id="B8D-0N-5wS" sceneMemberID="viewController">
<window key="window" title="Kagi Search for Safari" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" frameAutosaveName="KagiSearchForSafariWindowFrame" animationBehavior="default" id="IQv-IB-iLA">
<windowStyleMask key="styleMask" titled="YES" closable="YES"/>
<windowStyleMask key="styleMask" titled="YES" closable="YES" resizable="YES"/>
<windowCollectionBehavior key="collectionBehavior" fullScreenNone="YES"/>
<rect key="contentRect" x="196" y="240" width="425" height="450"/>
<rect key="contentRect" x="196" y="240" width="425" height="560"/>
<rect key="screenRect" x="0.0" y="0.0" width="1680" height="1027"/>
<value key="minSize" type="size" width="425" height="560"/>
<connections>
<outlet property="delegate" destination="B8D-0N-5wS" id="98r-iN-zZc"/>
</connections>
Expand All @@ -323,13 +324,13 @@
<!--View Controller-->
<scene sceneID="hIz-AP-VOD">
<objects>
<viewController id="XfG-lQ-9wD" customClass="ViewController" customModule="Kagi_Search_macOS" customModuleProvider="target" sceneMemberID="viewController">
<viewController id="XfG-lQ-9wD" customClass="ViewController" customModule="Kagi_Search_for_Safari" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" id="m2S-Jp-Qdl">
<rect key="frame" x="0.0" y="0.0" width="425" height="450"/>
<autoresizingMask key="autoresizingMask"/>
<rect key="frame" x="0.0" y="0.0" width="425" height="560"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<wkWebView wantsLayer="YES" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="eOr-cG-IQY">
<rect key="frame" x="0.0" y="0.0" width="425" height="450"/>
<rect key="frame" x="0.0" y="0.0" width="425" height="560"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<wkWebViewConfiguration key="configuration">
<audiovisualMediaTypes key="mediaTypesRequiringUserActionForPlayback" none="YES"/>
Expand Down
4 changes: 2 additions & 2 deletions safari/Universal/MainConfig.xcconfig
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
MARKETING_VERSION = 2.0.2
CURRENT_PROJECT_VERSION = 15 // this needs to be increased with each version change as well (not set to 1 when version is updated)
MARKETING_VERSION = 2.2.0
CURRENT_PROJECT_VERSION = 18 // this needs to be increased with each version change as well (not set to 1 when version is updated)
131 changes: 42 additions & 89 deletions safari/Universal/Shared (App)/Base.lproj/Main.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline' 'self';script-src *; img-src 'self' data:">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" href="../Style.css">
<script src="../basicLightbox.min.js" defer></script>
<script src="../Script.js" defer></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline' 'self';script-src *; img-src 'self' data:">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../Style.css">
<script src="../basicLightbox.min.js" defer></script>
<script src="../Script.js" defer></script>
<title></title>
</head>
<body>
<div id="wrapper">
<img width="128" height="128" alt="Kagi Search for Safari Icon" id="icon">
<!-- <fieldset> -->
<!-- <p class="platform-ios">You can turn on Kagi’s Safari extension in Settings. <a class="open-preferences" href="javascript:;">Open Safari Extension Settings</a>.</p> -->
<!-- <p class="platform-mac state-unknown">You can turn on Kagi Search for Safari’s extension in Safari Extensions preferences.</p> -->
<!-- <p class="platform-mac state-on">Kagi Search for Safari’s extension is currently on. You can turn it off in Safari Extensions preferences.</p> -->
<!-- <p class="platform-mac state-off">Kagi Search for Safari’s extension is currently off. You can turn it on in Safari Extensions preferences.</p> -->
<!-- <button class="platform-mac open-preferences">Open Safari Extensions Preferences…</button> -->
<!-- </fieldset> -->

<h2>Instructions</h2>

<ol id="instructions">
<li><strong>Enable</strong> extension in <a class="open-preferences platform-ios" href="#">Safari Extension Settings</a><span class="open-preferences platform-mac">Safari Extension Settings</span>.
<a href="../enable_extension.png" class="screenshot platform-mac"><object type="image/svg+xml" data="../ScreenshotIcon.svg"></object></a>
<a href="../ios_enable_extension.png" class="screenshot platform-ios"><object type="image/svg+xml" data="../ScreenshotIcon.svg"></object></a>
<fieldset id="open-settings-button" class="platform-mac">
<button class="open-preferences">Open Safari Extension Settings</button>
</fieldset>
</li>
<li><strong>Enable</strong> Kagi in Private Browsing by <span class="platform-mac">checking the "Allow in Private Browsing" checkbox</span><span class="platform-ios">enabling the "Private Browsing" toggle switch</span>.
<a href="../allow_private_browsing.png" class="screenshot platform-mac">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a>
<a href="../ios_private_browsing.png" class="screenshot platform-ios">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a></li>
<li>Go to Safari Settings -> Search and set <strong>default</strong> search engine to one you <strong>never</strong> use. We will use it to redirect searches to Kagi (because of Apple’s limitations).
<a href="../select_safari_engine.png" class="screenshot platform-mac">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a>
<a href="../ios_select_safari_engine.png" class="screenshot platform-ios">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a></li>
<li>Select the <strong>same</strong> search engine in the dropdown here.
<fieldset id="engines">
<!-- <label for="engine-select">Choose a search engine to override with Kagi</label> -->
<select id="engine-select">
<option id="All" value="All">All Search Engines</option>
<option id="Google" value="Google">Google</option>
<option id="Yahoo" value="Yahoo">Yahoo</option>
<option id="Bing" value="Bing">Bing</option>
<option id="DuckDuckGo" value="DuckDuckGo">DuckDuckGo</option>
<option id="Ecosia" value="Ecosia">Ecosia</option>
<option id="Baidu" value="Baidu">Baidu</option>
<option id="Yandex" value="Yandex">Yandex</option>
<option id="Sogou" value="Sogou">Sogou</option>
</select>
</fieldset>
</li>
<li>To search in Private Browsing, set the Kagi private session link in the textbox below after <strong>copying</strong> it from <a href="https://kagi.com/settings?p=user_details#sessionLink" target="_new">your Kagi account settings</a>.
<a href="../private_session_link.png" class="screenshot platform-mac">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a>
<a href="../ios_private_session_link.png" class="screenshot platform-ios">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a>
<fieldset>
<!-- <label for="private-session-link" class=""><strong>Private session link</strong></label> -->
<input type="text" id="private-session-link" placeholder="Paste private session link here" />
</fieldset>
</li>
<li>After your first search, click the Kagi extension icon in Safari toolbar and <strong>select</strong> "Always Allow on This Website".
<a href="../grant_permissions.png" class="screenshot platform-mac">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a>
<a href="../ios_grant_permissions_1.png" class="screenshot platform-ios multi-image" data-images="../ios_grant_permissions_1.png,../ios_grant_permissions_2.png,../ios_grant_permissions_3.png">
<object type="image/svg+xml" data="../ScreenshotIcon.svg"></object>
</a></li>
<li>This completes the setup. You can now search with Kagi.</li>
</ol>

<!-- <fieldset class="platform-mac"> -->
<!-- <button class="sync-with-safari">Save Settings to Safari</button> -->
<!-- <p class="caption sync-with-safari">Syncing will open Safari if not already opened</p> -->
<!-- </fieldset> -->
<hr />
<p>
Sorry that Apple made this so complicated. We even started building an entire WebKit browser called <a href="https://browser.kagi.com/" target="_new">Orion</a> to make it easier to use Kagi on Mac. We’d appreciate if you gave it a try.
</p>
</div>
<div id="wrapper">
<img width="128" height="128" alt="Kagi Search for Safari Icon" id="icon"> <!-- <fieldset> -->
<!-- <p class="platform-ios">You can turn on Kagi’s Safari extension in Settings. <a class="open-preferences" href="javascript:;">Open Safari Extension Settings</a>.</p> -->
<!-- <p class="platform-mac state-unknown">You can turn on Kagi Search for Safari’s extension in Safari Extensions preferences.</p> -->
<!-- <p class="platform-mac state-on">Kagi Search for Safari’s extension is currently on. You can turn it off in Safari Extensions preferences.</p> -->
<!-- <p class="platform-mac state-off">Kagi Search for Safari’s extension is currently off. You can turn it on in Safari Extensions preferences.</p> -->
<!-- <button class="platform-mac open-preferences">Open Safari Extensions Preferences…</button> -->
<!-- </fieldset> -->
<h2>Instructions</h2>
<ol id="instructions">
<li>
<strong>Enable</strong> extension in <a class="open-preferences platform-ios" href="#">Safari Extension Settings</a><span class="open-preferences platform-mac">Safari Extension Settings</span>. <a href="../enable_extension.png" class="screenshot platform-mac"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a> <a href="../ios_enable_extension.png" class="screenshot platform-ios"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a>
<fieldset id="open-settings-button" class="platform-mac">
<button class="open-preferences">Open Safari Extension Settings</button>
</fieldset>
</li>
<li>After your first search, click the Kagi extension icon in Safari toolbar and <strong>select</strong> "Always Allow on This Website". <a href="../grant_permissions.png" class="screenshot platform-mac"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a> <a href="../ios_grant_permissions_1.png" class="screenshot platform-ios multi-image" data-images="../ios_grant_permissions_1.png,../ios_grant_permissions_2.png,../ios_grant_permissions_3.png"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a>
</li>
<li>
<strong>To enable</strong> Kagi in Private Browsing, <span class="platform-mac">check the "Allow in Private Browsing" checkbox</span><span class="platform-ios">enable the "Private Browsing" toggle switch</span>. Then copy your Kagi private session link from <a href="https://kagi.com/settings?p=user_details#sessionLink" target="_new">your Kagi account settings</a> into the extension popup. <a href="../allow_private_browsing.png" class="screenshot platform-mac"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a> <a href="../ios_private_browsing.png" class="screenshot platform-ios"><object type="image/svg+xml" data="../ScreenshotIcon.svg">
</object></a>
</li>
<li>This completes the setup. You can now search with Kagi.</li>
</ol><!-- <fieldset class="platform-mac"> -->
<!-- <button class="sync-with-safari">Save Settings to Safari</button> -->
<!-- <p class="caption sync-with-safari">Syncing will open Safari if not already opened</p> -->
<!-- </fieldset> -->
<hr>
<p>Sorry that Apple made this so complicated. We even started building an entire WebKit browser called <a href="https://browser.kagi.com/" target="_new">Orion</a> to make it easier to use Kagi on Mac. We’d appreciate if you gave it a try.</p>
</div>
</body>
</html>
3 changes: 0 additions & 3 deletions safari/Universal/Shared (App)/Resources/Script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ function updateUIForEngine(newEngine) {
} else {
document.querySelector('#engines').classList.toggle(`allEngines`, false);
}
setTimeout(function(){
updateWindowSizeToMatchWebviewContentSize();
}, 500);
}

function selectCurrentEngine(currentEngine) {
Expand Down
11 changes: 9 additions & 2 deletions safari/Universal/Shared (App)/Resources/Style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ a.screenshot > object {
width: 16px;
height: 14px;
/* fill-opacity: .7;*/
/* transition: fill-opacity 0.1s ease-in-out;*/
/* transition: fill-opacity 00.5s ease-in-out;*/
}
a.screenshot:hover > object {
/* fill-opacity: 1;*/
Expand Down Expand Up @@ -223,7 +223,14 @@ h2 {
.basicLightbox.closing {width:100%;}
.platform-ios .basicLightbox {background:rgba(255,255,255,.8);}
.platform-mac .basicLightbox {background:rgba(0,0,0,.8);}
.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;-webkit-transform:scale(.9);transform:scale(.9);transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:90vh}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{-webkit-transform:scale(1);transform:scale(1);overflow-x:scroll;}.basicLightbox--visible .basicLightbox__placeholder::-webkit-scrollbar{display: none;}
.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;opacity:.01;
transition:opacity 0.5s ease;
z-index:1000;will-change:opacity}
.basicLightbox--visible{opacity:1}
.basicLightbox__placeholder{max-width:100%;-webkit-transform:scale(.9);transform:scale(.9);
transition:transform 0.5s ease;
z-index:1;will-change:transform}
.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:90vh}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{-webkit-transform:scale(1);transform:scale(1);overflow-x:scroll;}.basicLightbox--visible .basicLightbox__placeholder::-webkit-scrollbar{display: none;}
.platform-ios .modal img {
display: inline-block;
}
Expand Down
3 changes: 2 additions & 1 deletion safari/Universal/Shared (App)/ViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,8 @@ class ViewController: PlatformViewController, WKNavigationDelegate, WKScriptMess
}

let newFrame = currentWindow.frame.insetBy(dx: ((currentWindow.frame.width - newWidth)/2), dy: ((currentWindow.frame.height - newHeight)/2))
currentWindow.setFrame(newFrame, display: true, animate: true)
currentWindow.animator().setFrame(newFrame, display: true, animate: true)

#endif
break
case "cache-prescreenshot-size":
Expand Down
Loading

0 comments on commit 64d7c2b

Please sign in to comment.