src/chrome/test/data/extensions/platform_apps/web_view/dnd_within_webview/guest.js

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 var embedder = null;
   6 var $ = function(id) {
   7   return document.getElementById(id);
   8 };
   9
  10 var LOG = function(msg) {
  11   window.console.log(msg);
  12 };
  13
  14 var dragStarted = false;
  15 var dropData = 'Uninitialized';
  16 var dropped = false;
  17 var isDragInterrupted = false;
  18 var sentConnectedMessage = false;
  19
  20 // Number of mousemove events recorded after (most recent) mousedown and before
  21 // (most recent) mouseup.
  22 var numDocumentMouseMoves = 0;
  23
  24 var sendGuestGotDrop = function() {
  25   embedder.postMessage(JSON.stringify(['guest-got-drop', dropData]), '*');
  26 };
  27
  28 window.addEventListener('resize', function(e) {
  29   if (!embedder) {
  30     return;
  31   }
  32   resized = true;
  33   embedder.postMessage(JSON.stringify(['resized']), '*');
  34 });
  35
  36 var maybeSendConnected = function() {
  37   LOG('maybeSendConnected, sentConnectedMessage: ' + sentConnectedMessage);
  38   if (!sentConnectedMessage && embedder) {
  39     LOG('Inside');
  40     sentConnectedMessage = true;
  41     embedder.postMessage(JSON.stringify(['connected']), '*');
  42   }
  43 };
  44
  45 var resetState = function() {
  46   LOG('guest.resetState');
  47   resetSelection();
  48
  49   dropped = false;
  50   dragStarted = false;
  51   isDragInterrupted = false;
  52
  53   embedder.postMessage(JSON.stringify(['resetStateReply']), '*');
  54 };
  55
  56 window.addEventListener('message', function(e) {
  57   embedder = e.source;
  58   var data = JSON.parse(e.data)[0];
  59   if (data == 'create-channel') {
  60     maybeSendConnected();
  61   } else if (data == 'resetState') {
  62     resetState();
  63   }
  64 });
  65
  66 var doPostMessage = function(msg) {
  67   embedder.postMessage(JSON.stringify([msg]), '*');
  68 };
  69
  70 var resetSelection = function() {
  71   var selection = window.getSelection();
  72   var range = document.createRange();
  73   range.selectNodeContents($('dragMe'));
  74   selection.removeAllRanges();
  75   selection.addRange(range);
  76   LOG('Restored selection');
  77 };
  78
  79 var setUpGuest = function() {
  80   window.console.log('n.guest.setUpGuest');
  81
  82   document.body.style.width = '300px';
  83   document.body.style.background = '#CCCCCC';
  84
  85   document.body.innerHTML +=
  86       '<div class="dragMe" id="dragMe">Drop me</div>' +
  87       '<div class="destination" id="dest"></div>';
  88
  89   document.body.addEventListener('mousemove', function(e) {
  90     LOG('document.mousemove: ' + e.clientX + ', ' + e.clientY);
  91     ++numDocumentMouseMoves;
  92   });
  93   document.body.addEventListener('mousedown', function(e) {
  94     LOG('document.mousedown: ' + e.clientX + ', ' + e.clientY);
  95     numDocumentMouseMoves = 0;
  96   });
  97   document.body.addEventListener('mouseup', function(e) {
  98     LOG('document.mouseup: ' + e.clientX + ', ' + e.clientY);
  99     LOG('numDocumentMouseMoves: ' + numDocumentMouseMoves);
 100     LOG('dragStarted: ' + dragStarted +
 101         ', isDragInterrupted: ' + isDragInterrupted);
 102     if (!dragStarted && !isDragInterrupted) {
 103       LOG('Guest drag operation was interrupted by an unexpected mouseup');
 104       isDragInterrupted = true;
 105       embedder.postMessage(JSON.stringify(
 106           ['guest-got-drop', 'drag-interrupted-by-mouseup']), '*');
 107     }
 108
 109     numDocumentMouseMoves = 0;
 110   });
 111
 112   // Select the text to drag.
 113   resetSelection();
 114
 115   // Whole bunch of drag/drop events on destination node follows.
 116   // We only need to make sure we preventDefault in dragenter and
 117   // dragover.
 118   var destNode = $('dest');
 119   var srcNode = $('dragMe');
 120
 121   srcNode.addEventListener('mousemove', function(e) {
 122     LOG('s.mousemove ' + e.clientX + ', ' + e.clientY);
 123   });
 124   srcNode.addEventListener('mousedown', function(e) {
 125     LOG('s.mousedown ' + e.clientX + ', ' + e.clientY);
 126   });
 127   srcNode.addEventListener('mouseup', function(e) {
 128     LOG('s.mouseup ' + e.clientX + ', ' + e.clientY);
 129   });
 130
 131   destNode.addEventListener('dragenter', function(e) {
 132     LOG('d.dragenter');
 133     e.preventDefault();
 134   }, false);
 135
 136   destNode.addEventListener('dragover', function(e) {
 137     LOG('d.dragover');
 138     e.preventDefault();
 139   }, false);
 140
 141   destNode.addEventListener('dragleave', function(e) {
 142     LOG('d.dragleave');
 143   }, false);
 144
 145   destNode.addEventListener('drop', function (e) {
 146     LOG('d.drop');
 147     dropped = true;
 148     dropData = e.dataTransfer.getData('Text');
 149     sendGuestGotDrop();
 150   }, false);
 151
 152   destNode.addEventListener('dragend', function (e) {
 153     LOG('d.dragend');
 154   }, false);
 155
 156   srcNode.addEventListener('dragstart', function(e) {
 157     LOG('s.dragstart');
 158     dragStarted = true;
 159   }, false);
 160   srcNode.addEventListener('dragend', function(e) {
 161     LOG('s.dragend');
 162   }, false);
 163   srcNode.addEventListener('dragexit', function(e) {
 164     LOG('s.dragexit');
 165   }, false);
 166   srcNode.addEventListener('dragleave', function(e) {
 167     LOG('s.dragleave');
 168   }, false);
 169
 170   destNode.addEventListener('dragexit', function(e) {
 171     LOG('s.dragexit');
 172   }, false);
 173
 174   LOG('set up complete');
 175 };
 176
 177 setUpGuest();