Permalink
Browse files

Merge branch 'refs/heads/develop'

  • Loading branch information...
2 parents 81fb46e + 9a645cd commit 0a13eaee2dd3cf1fedc851dcfe6ccdec33892dad @robhawkes committed Feb 26, 2012
@@ -15,7 +15,7 @@
$d.bind("deck.change", function(e, from, to) {
// Don't run if within a presenter iframe
- if (!$d.find("body").hasClass("deck-presenter-iframe")) {
+ if ($d.find("body").hasClass("deck-presenter-iframe")) {
return;
}
@@ -5,6 +5,31 @@ body {
position: relative;
}
+#select-slides {
+
+}
+
+ #file-slides {
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ border: 5px dashed #999;
+ color: #999;
+ font-size: 30px;
+ margin: 20px 0;
+ padding: 50px;
+ text-align: center;
+ }
+
+ #file-slides.drag-over {
+ border-color: #666;
+ color: #666;
+ }
+
+#presenter {
+ display: none;
+}
+
h2 {
background: #666;
color: #fff;
@@ -7,38 +7,45 @@
<link rel="stylesheet" href="deck.presenter.css">
</head>
<body>
- <section class="left">
- <div class="slides-wrapper">
- <iframe src="../../slides/index.html" class="slides" id="current"></iframe>
- <div class="slides-cover"></div>
- </div>
- <h2>Current slide</h2>
- <p class="timer">00:00:00</p>
- </section>
-
- <section class="notes-wrapper">
- <h2>Notes for current slide</h2>
- <div class="notes"></div>
- </section>
-
- <section class="right">
- <div class="slides-wrapper slides-next">
- <iframe src="../../slides/index.html" class="slides" id="next"></iframe>
- <div class="slides-cover"></div>
- </div>
- <h2>Next slide</h2>
- <p class="clock">00:00:00</p>
- </section>
+ <div id="select-slides">
+ <h2>Select slides</h2>
+ <div id="file-slides">Drop slide HTML file here</div>
+ </div>
+
+ <div id="presenter">
+ <section class="left">
+ <div class="slides-wrapper">
+ <iframe src="" class="slides" id="current"></iframe>
+ <div class="slides-cover"></div>
+ </div>
+ <h2>Current slide</h2>
+ <p class="timer">00:00:00</p>
+ </section>
+
+ <section class="notes-wrapper">
+ <h2>Notes for current slide</h2>
+ <div class="notes"></div>
+ </section>
+
+ <section class="right">
+ <div class="slides-wrapper slides-next">
+ <iframe src="" class="slides" id="next"></iframe>
+ <div class="slides-cover"></div>
+ </div>
+ <h2>Next slide</h2>
+ <p class="clock">00:00:00</p>
+ </section>
+ </div>
<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="../jquery-1.7.min.js"><\/script>')</script>
- <!-- Momoment.js -->
+ <!-- Moment.js -->
<script src="moment.min.js"></script>
<!-- Deck Core and extensions -->
- <script src="../../core/deck.core.js"></script>
+ <script src="../../../deck.js/core/deck.core.js"></script>
<script src="deck.presenter.js"></script>
</body>
</html>
@@ -6,23 +6,75 @@ $(function() {
$external,
started;
+ // Set up handler for file input
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
+ //$("#file-slides").bind("change", handleSlideSelect);
+ jQuery.event.props.push("dataTransfer");
+ $("#file-slides").bind("dragover", handleDragOver)
+ .bind("dragleave", handleDragLeave)
+ .bind("drop", handleSlideSelect);
+ } else {
+ console.log("The File APIs are not fully supported in this browser");
+ }
+
// Prevent click-through to slide iframes
$(".slides-cover").bind("click", function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
- // Naive wait for iframes to load
- $("#next").bind("load", function(e) {
- // Load slides in a new window for external monitor
- openSlidesWindow();
- });
+ // Drag and drop handlers
+ function handleDragOver(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ e.dataTransfer.dropEffect = "copy"; // Explicitly show this is a file copy
+ $("#file-slides").addClass("drag-over");
+ }
+
+ function handleDragLeave(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ $("#file-slides").removeClass("drag-over");
+ }
+
+ // Slide selector handler
+ function handleSlideSelect(e) {
+ var files = e.dataTransfer.files; // FileList object
+ objectURL = window.URL.createObjectURL(files[0]);
+
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (!objectURL) {
+ console.log("Failed to create object URL from selected slide");
+ return;
+ }
+
+ // Assume success and hide slide selection screen
+ $("#select-slides").hide();
+
+ // Show presenter display
+ $("#presenter").show();
+
+ // Populate iframes
+ $("#current").attr("src", objectURL).bind("load", function(e) {
+ $current = $("#current")[0].contentWindow["$"];
+ $current("body").addClass("deck-presenter-iframe");
+ $("#next").attr("src", objectURL).bind("load", function(e) {
+ $next = $("#next")[0].contentWindow["$"];
+ $next("body").addClass("deck-presenter-iframe");
+
+ // Load slides in a new window for external monitor
+ openSlidesWindow(objectURL);
+ });
+ });
+ }
// Load display
function loadDisplay() {
- $current = $("#current")[0].contentWindow["$"];
- $next = $("#next")[0].contentWindow["$"];
currentIndex = 0;
started = false;
@@ -95,13 +147,12 @@ $(function() {
}
// Open slide window
- function openSlidesWindow() {
- slidesWindow = window.open("../../slides/index.html", "presenter-display-"+(Math.random()*1), "width=800, height=600");
+ function openSlidesWindow(url) {
+ slidesWindow = window.open(url, "presenter-display-"+(Math.random()*1), "width=800, height=600");
// Wait until the slides have loaded
$(slidesWindow).bind("load", function(e) {
$external = slidesWindow["$"];
- $external("body").addClass("deck-presenter-iframe");
loadDisplay();
});
}

0 comments on commit 0a13eae

Please sign in to comment.