|
|
@@ -1,199 +0,0 @@
|
|
|
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
|
|
|
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
|
-<head>
|
|
|
- <title>Converse.js Drag/Resize Demo</title>
|
|
|
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="description" content="Converse.js: Open Source Browser-Based Instant Messaging" />
|
|
|
-
|
|
|
- <link type="text/css" rel="stylesheet" href="stylesheets/stylesheet.css">
|
|
|
- <link type="text/css" rel="stylesheet" href="converse.css">
|
|
|
- <link rel="stylesheet" type="text/css" href="dragresize/dragresize.css">
|
|
|
-
|
|
|
- <script src="components/jquery/jquery.min.js"></script>
|
|
|
- <script data-main="main" src="components/requirejs/require.js"></script>
|
|
|
- <script type="text/javascript" src="dragresize/dragresize.js"></script>
|
|
|
-
|
|
|
- <style type="text/css">
|
|
|
- /* converse.css overrides */
|
|
|
- #chatpanel {
|
|
|
- height: 320px;
|
|
|
- }
|
|
|
-
|
|
|
- .chatbox {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-content {
|
|
|
- box-sizing: border-box;
|
|
|
- -moz-box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: -webkit-calc(100% - 125px);
|
|
|
- height: -moz-calc(100% - 125px);
|
|
|
- height: -o-calc(100% - 125px);
|
|
|
- height: calc(100% - 125px);
|
|
|
- }
|
|
|
-
|
|
|
- form.sendXMPPMessage {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|
|
|
-
|
|
|
- <script type="text/javascript">
|
|
|
- //<![CDATA[
|
|
|
-
|
|
|
- // Using DragResize is simple!
|
|
|
- // You first declare a new DragResize() object, passing its own name and an object
|
|
|
- // whose keys constitute optional parameters/settings:
|
|
|
-
|
|
|
- var dragresize = new DragResize('dragresize',
|
|
|
- { minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 600, maxTop: 600 });
|
|
|
-
|
|
|
- // Optional settings/properties of the DragResize object are:
|
|
|
- // enabled: Toggle whether the object is active.
|
|
|
- // handles[]: An array of drag handles to use (see the .JS file).
|
|
|
- // minWidth, minHeight: Minimum size to which elements are resized (in pixels).
|
|
|
- // minLeft, maxLeft, minTop, maxTop: Bounding box (in pixels).
|
|
|
-
|
|
|
- // Next, you must define two functions, isElement and isHandle. These are passed
|
|
|
- // a given DOM element, and must "return true" if the element in question is a
|
|
|
- // draggable element or draggable handle. Here, I'm checking for the CSS classname
|
|
|
- // of the elements, but you have have any combination of conditions you like:
|
|
|
-
|
|
|
- dragresize.isElement = function(elm) {
|
|
|
- if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
|
|
|
- };
|
|
|
- dragresize.isHandle = function(elm) {
|
|
|
- if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
|
|
|
- };
|
|
|
-
|
|
|
- // You can define optional functions that are called as elements are dragged/resized.
|
|
|
- // Some are passed true if the source event was a resize, or false if it's a drag.
|
|
|
- // The focus/blur events are called as handles are added/removed from an object,
|
|
|
- // and the others are called as users drag, move and release the object's handles.
|
|
|
- // You might use these to examine the properties of the DragResize object to sync
|
|
|
- // other page elements, etc.
|
|
|
-
|
|
|
- dragresize.ondragfocus = function() { };
|
|
|
- dragresize.ondragstart = function(isResize) { };
|
|
|
- dragresize.ondragmove = function(isResize) { };
|
|
|
- dragresize.ondragend = function(isResize) { };
|
|
|
- dragresize.ondragblur = function() { };
|
|
|
-
|
|
|
- // Finally, you must apply() your DragResize object to a DOM node; all children of this
|
|
|
- // node will then be made draggable. Here, I'm applying to the entire document.
|
|
|
- dragresize.apply(document);
|
|
|
- //]]>
|
|
|
- </script>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
-<!-- HEADER -->
|
|
|
-<div id="header_wrap" class="outer">
|
|
|
- <header class="inner">
|
|
|
- <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
|
|
|
- <h2 id="project_tagline">Drag and drop</h2>
|
|
|
- </header>
|
|
|
-</div>
|
|
|
-
|
|
|
-<div id="conversejs">
|
|
|
-
|
|
|
- <div id="controlbox" class="chatbox">
|
|
|
- <div class="nub-flyout drsElement">
|
|
|
- <div class="chat-head oc-chat-head drsMoveHandle">
|
|
|
- <ul id="controlbox-tabs">
|
|
|
- <li><a class="current" href="#login">Sign in</a></li>
|
|
|
- </ul>
|
|
|
- <a class="close-chatbox-button icon-close"></a></div>
|
|
|
- <div class="controlbox-panes">
|
|
|
- <div id="login-dialog">
|
|
|
- <form id="converse-login">
|
|
|
- <label>XMPP/Jabber Username:</label><input type="text" id="jid">
|
|
|
- <label>Password:</label><input type="password" id="password">
|
|
|
- <input class="login-submit" type="submit" value="Log In">
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
|
|
- <div class="nub-flyout drsElement">
|
|
|
- <div class="chat-head chat-head-chatbox drsMoveHandle">
|
|
|
- <a class="close-chatbox-button icon-close"></a>
|
|
|
- <a class="minimize-chatbox-button icon-minus"></a>
|
|
|
-
|
|
|
- <a href="http://opkode.com" target="_blank" class="user">
|
|
|
- <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
|
|
|
- <div class="chat-title"> JC Brand </div>
|
|
|
- </a>
|
|
|
- <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div class="chat-content">
|
|
|
- <div class="chat-info"><strong>/help</strong>:This is an info message</div>
|
|
|
- <div class="chat-error">This is an error message</div>
|
|
|
- <div class="chat-message">
|
|
|
- <span class="chat-message-me">09:35 me: </span>
|
|
|
- <span class="chat-message-content">
|
|
|
- Hello world
|
|
|
- <span class="icon-smiley"></span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="chat-message ">
|
|
|
- <span class="chat-message-them">19:25 Benedict-John: </span>
|
|
|
- <span class="chat-message-content">Dagsê</span>
|
|
|
- </div>
|
|
|
- <div class="chat-message">
|
|
|
- <span class="chat-message-me">19:39 me: </span>
|
|
|
- <span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
|
|
|
- </div>
|
|
|
- <div class="chat-message">
|
|
|
- <span class="chat-message-me">19:42 me: </span>
|
|
|
- <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
|
|
- </div>
|
|
|
- <div class="chat-event">JC Brand is busy</div>
|
|
|
- <div class="chat-message ">
|
|
|
- <span class="chat-message-me">19:43 me: </span>
|
|
|
- <span class="chat-message-content">Another message to check that scrolling works.</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <form class="sendXMPPMessage" action="" method="post">
|
|
|
- <ul class="chat-toolbar no-text-select">
|
|
|
- <li class="toggle-smiley icon-happy" title="Insert a smilery">
|
|
|
- <ul>
|
|
|
- <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
|
|
- <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
|
|
- <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
|
|
- <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
|
|
- <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
|
|
- <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
|
|
- <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
|
|
- <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
|
|
- <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
|
|
- <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
|
|
- <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
|
|
- <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
|
|
- <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
|
|
|
- <span class="chat-toolbar-text">unencrypted</span>
|
|
|
- <span class="icon-unlocked"></span>
|
|
|
- <ul>
|
|
|
- <li><a href="#">Start private conversation</a></li>
|
|
|
- <li><a href="#">End private conversation</a></li>
|
|
|
- <li><a href="#">Authenticate buddy</a></li>
|
|
|
- <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-</div>
|
|
|
-</body>
|
|
|
-</html>
|
JC Brand