CODEWITHSUNDEEP
javascriptobjective-cmacoscocoawebview
Gabor
Gabor

Reputation: 7572

Cocoa webview and transparent window troubles

I have made a simple app here: https://github.com/ber4444/easycountdown for New Year's Eve - my first Cocoa app.

The first problem is that the midnight counter (really, a webview) is not properly zooming. You can load the project to Xcode and try to zoom back and forth with Cmd+Shift+Plus/Minus. It zooms only one step in (via the JavaScript zoom() called from AppWindow.m), too fast and not able to zoom out. I don't understand why, any ideas?

A second problem is that when you drag around the webview with the mouse it is very easy to click through it -- sending the whole window to the background -- whenever the user accidentally clicks in between characters. It is due to [window setOpaque:NO] which is needed for transparency. I want the window to always catch mouse drag events, how do I do that?

Upvotes: 2

Views: 170

Answers (1)

Daij-Djan
Daij-Djan

Reputation: 50129

concerning click troubles in transparent window

default behaviour: the window manager lets clicks through transparent parts => bad for us! :D

so we have to cheat him into seeing non-transparent stuff:

1 step

modify the contentView to have a CALayer (Do this in InterfaceBuilder) enable layer

2 step

don't set mainView as your content view but make main view a subview of the content view

[[window contentView] addSubview:mainView];//was setContentView call

3 step

since the mainView is no longer the windows contentView, the access to the view in AppWindow.m fails.

to fix 

id mainView = [[self.contentView subviews] lastObject];
NoClickWebView *aWebView = [[mainView subviews] lastObject];//used contentView subviews

concerning the bad zooming.

The Problem that bites us here is that javascript has no typing: the call zoom += percent is treated as a concatenation of string resulting in ~30.1 or 3-0.1 :P

to fix it, force JS to treat it as float all the way:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <style type='text/css'>
                #slider-full-width{
                        text-align: center;
                    }
                #slider-full-width h2 {
                    color: #0000CC;
                    text-shadow: 1px 1px 1px #FFF;
                }
                </style>
                <script type='text/javascript'>//<![CDATA[
                function dummy(text) {
                    document.getElementById("counter").innerHTML = text;
                }
                function zoom(percent) {
                    var zoomText = document.getElementById("counter").style.zoom;
                    var zoom = parseFloat(zoomText);
                    zoom += parseFloat(percent);

                    document.getElementById("counter").style.zoom = zoom;
                }
                //]]>
                </script>
        </meta>
    </head>
    <body>
        <div id="slider-full-width">
            <h2 id="counter" style="zoom: 3.0"></h2>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions