Skip to content

Commit 355c5d0

Browse files
theClarkSelltheClarkSell
committed
DND working on markdown files as well as the markdown converter
1 parent c861b99 commit 355c5d0

7 files changed

Lines changed: 18216 additions & 174 deletions

File tree

‎4 - JavaScript API/Labs/Drag_and_Drop/end/child/readme.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# 2012 CodeMash HTML5 Precompiler
2+
Contributors: Brandon Satrom, Clark Sell
3+
4+
Tags: HTML5, JavaScript, Drag and Drop
5+
6+
- - -
7+
## Abstract
8+
9+
In this lab we're going to work through building a simple web page utilizing HTML5 Drag and Drop
10+
11+
- - -
12+
## What will you learn?
13+
14+
In this lab you will learn the basics for creating drag able content and consuming it.
15+
16+
* How to enable draggable content
17+
* How and when to use the built in drag and drop events
18+
* How to use the DataTransfer object
19+
* Dragging out of the browser
20+
* Drag Effects
21+
22+
- - -
23+
## Getting Started
24+
25+
For purposes of this lab we're going to write everything in three different files.
26+
27+
* ./default.html
28+
29+
this is the default markup page we will use for Drag and Drop.
30+
31+
* ./scripts/default.js
32+
33+
this is our JavaScript file where all of our event handlers and other functions will be placed.
34+
35+
* ./style/style.css
36+
37+
this is our style elements
38+
39+
- - -
40+
### Step #1
41+
42+
To kick things off lets just run *default.html*. Out of the gas you might notice if you take one of the images on the left of the you can actually already drag it. This is because anything with an anchor tag is actually draggable by default.
43+
44+
** Making it draggable **
45+
46+
1. We can make any content draggable by just adding an attribute to our DOM element
47+
> draggable="true"
48+
2. Add that draggable attribute to the following:
49+
* each li ( three total )
50+
* the div element containing the shield
51+
3.
52+
53+
54+
### Step #2
55+
56+
57+
58+
---
59+
### Extra Credit
60+
61+
One of the great features you can enable with Drag and Drop is the ability to do things like interact with the desktop. If you have ever seen something like SkyDrive.com you can add files just by dragging files into the browser window.
62+
63+
http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd
64+
65+
- - -
66+
## Resources
67+
68+
* W3C Drag and Drop Spec: http://dev.w3.org/html5/spec/Overview.html#dnd
69+
* whatwg: http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
70+
* MDN: https://developer.mozilla.org/En/DragDrop/Drag_Operations
71+
* HTML5 Doctor Demo: http://html5doctor.com/native-drag-and-drop/
72+
* Demo: http://html5demos.com/drag
73+
74+

‎4 - JavaScript API/Labs/Drag_and_Drop/end/default.js‎

Lines changed: 0 additions & 134 deletions
This file was deleted.

‎4 - JavaScript API/Labs/Drag_and_Drop/end/readme.htm‎

Lines changed: 71 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,100 @@
55
<meta charset="utf-8" />
66
<title>Instructions</title>
77

8-
<script src="/scripts/jquery-1.6.2.js" type="text/javascript"></script>
9-
<script src="/scripts/Markdown.Converter.js" type="text/javascript""></script>
8+
<script src="./scripts/jquery-1.6.2.js" type="text/javascript"></script>
9+
<script src="./scripts/Markdown.Converter.js" type="text/javascript"></script>
1010

1111
</head>
1212

1313
<body>
14-
<div id="markdown">yep, we didn't code for that error.</div>
14+
<input id="markdownFile" type="file" /> </br>
15+
16+
<div id="markdown"></div>
1517

1618
<script>
1719

18-
$(document).ready( function () {
19-
20+
// It doesn't look like you can grab local files outside of a webserver.. suck it security!
21+
22+
var markdownFile = document.getElementById("markdownFile");
23+
var markdownResult = document.getElementById("markdown");
24+
25+
var origin = self.location.origin;
26+
27+
if ('file://' !== origin ) {
28+
markdownFile.style.display = 'none';
29+
} else {
30+
markdownResult.textContent = '';
31+
};
32+
33+
document.getElementById('markdownFile').addEventListener('change', readFile, false);
34+
35+
function readFile (e) {
36+
37+
var reader = new FileReader();
38+
var f = e.target.files[0];
39+
40+
reader.onload = ( function (f) {
41+
return function(evt) {
42+
console.log('in onload for fileReader');
43+
44+
displayMarkdown(evt.target.result);
45+
};
46+
})(f);
47+
48+
49+
reader.onerror = function (evt) {
50+
markdownResult.textContent = 'BIG OLE ERROR... Error Code: ' + reader.error.code + ' <- no clue what that really means';
51+
};
52+
53+
reader.readAsText(f);
54+
55+
};
56+
57+
var displayMarkdown = function (toBeConverted) {
58+
59+
var convertedMarkdown = converter.makeHtml(toBeConverted);
60+
61+
$('#markdown').text('');
62+
$('#markdown').append(convertedMarkdown);
63+
}
64+
65+
66+
if ( 'http://' === origin ) {
67+
2068
( function () {
2169

2270
var xhr;
2371

2472
if (window.XMLHttpRequest) {
25-
2673
xhr = new XMLHttpRequest();
2774

2875
} else if (window.ActiveXObject) {
29-
3076
xhr = new ActiveXObject("Microsoft.XMLHTTP");
3177

3278
}
33-
34-
function onError(e) {
35-
$('#markdown').text(e);
36-
};
79+
80+
var sUrl = "http://"
81+
+ self.location.hostname
82+
+ ":"
83+
+ self.location.port
84+
+ "/readme.md";
3785

38-
function onLoaded(e){
39-
40-
var converter = new Markdown.Converter();
41-
var convertedMarkdown = converter.makeHtml(this.responseText);
4286

43-
$('#markdown').text('');
44-
$('#markdown').append(convertedMarkdown);
87+
xhr.open('GET', sUrl);
88+
89+
xhr.onload = function (e) {
90+
displayMarkdown(this.resonseText)
91+
};
92+
93+
xhr.onerror = function (e) {
94+
markdownResult.textContent = 'umm opps:' + e;
4595
};
4696

47-
(function readFile() {
48-
var sUrl = "http://"
49-
+ self.location.hostname
50-
+ ":"
51-
+ self.location.port
52-
+ "/readme.md";
53-
54-
xhr.open('GET', sUrl);
55-
56-
xhr.onload = onLoaded;
57-
xhr.onerror = onError;
58-
59-
xhr.send();
60-
})();
97+
xhr.send();
98+
6199
})();
62-
});
100+
};
101+
63102
</script>
64103

65104
</body>

0 commit comments

Comments
 (0)