CODEWITHSUNDEEP
tidesdk
Métal Chouchen
Métal Chouchen

Reputation: 55

Make a draggable transparent window with tidesdk

Using TideSDK, how can I have a window with no Windows style border, and keep it draggable ?

I try two things :

First config my tiapp.xml like this 

<width>3000</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>1280</height>
<max-height>1280</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<transparency >1.0</transparency >
<transparent-background>true</transparent-background>

And contains my application in a div like this :

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #draggable { width: 150px; height: 150px; left: 10px}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div> 
</body>
</html>

It's cool cause I have my full css customizable window draggable, BUT if I want it's work in dual screen I have to set the maximum width to ~4000 and it's look limited to 3000 max. (even if I set a greater value inside the tiapp.xml file ). Notice, if I'm not setting a huge widht and height, when my application (div) is near from the limit, a scroll bar appear in my desktop.

I trying a quick other thing to add the tag

<chrome>false</chrome>

It's look a better method but, I loose the draggable control on my windows. And I don't know how can drag the tidesdk windows with javascript. May be there is solution to create my own "chrome" ?

Upvotes: 3

Views: 1071

Answers (1)

Daryn
Daryn

Reputation: 5097

Gold mine for this question are the answers posted on this tidesdk google groups thread: https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc

First, you need to provide your own way to let the user move the window around—your own version of something like a Windows 8 Metro style top-is-draggable-where-the-title-bar-used-to-be. For the sake of example (not worrying about styling), e.g.

  <div id="windowTitleBar">
    <button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
    <button id="windowClose" class="windowMaxMinButtons">[X]</button>
  </div>

Second, in your javascript you provide your own drag handling, taking advantage of the Ti.UI API. Here's a sample from a proof of concept I did.
(Note in the following, the minimize function has a little hack (?) to make the window work after being restored. If you find a better way, please add your fix so everyone can benefit!)

$(document).ready(function() {
    /*
     * WINDOW HIDE
     */
    $("#windowMinimize").click(function()
    {
        event.preventDefault();
        // From http://developer.appcelerator.com/question/131596/minimize-unminimize-under-windows-7
        // One user found if we follow this magical sequence (max-unmax-min), the
        // window will be responsive after restore. Confirmed on my Win 7
        Ti.UI.getMainWindow().maximize();
        Ti.UI.getMainWindow().unmaximize();
        Ti.UI.getMainWindow().minimize();
    });

    $(".maximize").click(function() {
        event.preventDefault();
        if(!Ti.UI.getMainWindow().isMaximized())
        {
            Ti.UI.getMainWindow().maximize();
        } else {
            Ti.UI.getMainWindow().unmaximize();
        }
    });

    /*
    * WINDOW CLOSE
    */


    $("#windowClose").click(function()
    {
        event.preventDefault();
        Ti.UI.getMainWindow().close();
        //system.window.target.hide();
        Ti.App.exit();
    });

    /*
     * WINDOW "Title Bar"
    */

    $("#windowTitleBar").mousedown ( function ( event )
    {
        event.preventDefault();
        if(!Ti.UI.getMainWindow().isMaximized())
        {
            var diffX = event.pageX;
            var diffY = event.pageY;

            $(document).mousemove ( function ( event )
            {
                event.preventDefault();
                if (event.screenY - diffY < screen.height-100)
                Ti.UI.getMainWindow().moveTo(event.screenX - diffX, event.screenY - diffY);
            });
        }
    });

    $(document).mouseup ( function ( event )
    {
        event.preventDefault();
        $(document).unbind('mousemove');
    });

    $("#windowTitleBar").dblclick ( function ( event )
    {
        event.preventDefault();
        if (!Ti.UI.getMainWindow().isMaximized())
            Ti.UI.getMainWindow().maximize();
        else
            Ti.UI.getMainWindow().unmaximize();
    });
});

Upvotes: 4

Related Questions