Skip to content

Instantly share code, notes, and snippets.

@yackermann

yackermann/rms.html

Created April 30, 2015 03:20
Show Gist options
  • Save yackermann/2c5b3a753f1b81bf668a to your computer and use it in GitHub Desktop.
Save yackermann/2c5b3a753f1b81bf668a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rms.html
<!DOCTYPE html>
<html>
<head>
<title>RMS - Read My SMS</title>
<style type="text/css">
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
#messages{
margin: 0;
width: 50%;
height: 100%;
padding: 0.5em;
float:left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.message{
padding: 0.7em;
border-radius: 20px;
padding-left: 0;
}
p.message.left{
background: lightgray;
}
p.message.right{
background: lightblue;
}
span.message.name{
border-radius: 0;
padding-right: 1.3em;
padding-left: 1.3em;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
p.left{
text-align:left;
}
p.right{
text-align:right;
}
div.left{
margin-right: 50%;
}
div.right{
margin-left: 50%;
}
.drop_zone {
margin: 0;
width: 49%;
float:right;
border: 3px dashed #bbb;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
white-space: nowrap;
height: 99%;
padding: 10px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.drop_zone > span{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:white;
padding: 0.5em;
}
.dropzone.parent:before {
content: '';
display: inline-block;
padding-top: 50%;
vertical-align: middle;
margin-right: -0.25em;
}
.dropzone.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
@media print {
html{
font-size: 20pt;
}
@page {
size: portrait;
}
.drop_zone{
visibility: hidden;
width: 0;
height: 0;
}
#messages{
width: 100%;
padding: 0;
margin: 0;
}
p.right{
text-align:left;
}
.message{
padding: 0;
}
}
</style>
</head>
<body id="drop_zone">
<div id="messages">
</div>
<div class="drop_zone" id="cm">
<input type="file" id="files" style="opacity:0">
<div class="centered">
<span class="dropzone">
Drop your file here
</span>
</div>
</div>
<script type="text/javascript">
/* Copyright 2013 William Summers, metaTribal LLC
* adapted from https://developer.mozilla.org/en-US/docs/JXON
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var xmlToJSON=function(){this.version="1.3";var e={mergeCDATA:!0,grokAttr:!0,grokText:!0,normalize:!0,xmlns:!0,namespaceKey:"_ns",textKey:"_text",valueKey:"_value",attrKey:"_attr",cdataKey:"_cdata",attrsAsObject:!0,stripAttrPrefix:!0,stripElemPrefix:!0,childrenAsArray:!0},t=new RegExp(/(?!xmlns)^.*:/),r=new RegExp(/^\s+|\s+$/g);return this.grokType=function(e){return/^\s*$/.test(e)?null:/^(?:true|false)$/i.test(e)?"true"===e.toLowerCase():isFinite(e)?parseFloat(e):e},this.parseString=function(e,t){return this.parseXML(this.stringToXML(e),t)},this.parseXML=function(a,n){for(var s in n)e[s]=n[s];var l={},i=0,o="";if(e.xmlns&&a.namespaceURI&&(l[e.namespaceKey]=a.namespaceURI),a.attributes&&a.attributes.length>0){var u={};for(i;i<a.attributes.length;i++){var c=a.attributes.item(i);m={};var p="";p=e.stripAttrPrefix?c.name.replace(t,""):c.name,m[e.valueKey]=e.grokAttr?this.grokType(c.value.replace(r,"")):c.value.replace(r,""),e.xmlns&&c.namespaceURI&&(m[e.namespaceKey]=c.namespaceURI),e.attrsAsObject?u[p]=m:l[e.attrKey+p]=m}e.attrsAsObject&&(l[e.attrKey]=u)}if(a.hasChildNodes())for(var d,y,m,x=0;x<a.childNodes.length;x++)d=a.childNodes.item(x),4===d.nodeType?e.mergeCDATA?o+=d.nodeValue:l.hasOwnProperty(e.cdataKey)?(l[e.cdataKey].constructor!==Array&&(l[e.cdataKey]=[l[e.cdataKey]]),l[e.cdataKey].push(d.nodeValue)):e.childrenAsArray?(l[e.cdataKey]=[],l[e.cdataKey].push(d.nodeValue)):l[e.cdataKey]=d.nodeValue:3===d.nodeType?o+=d.nodeValue:1===d.nodeType&&(0===i&&(l={}),y=e.stripElemPrefix?d.nodeName.replace(t,""):d.nodeName,m=xmlToJSON.parseXML(d),l.hasOwnProperty(y)?(l[y].constructor!==Array&&(l[y]=[l[y]]),l[y].push(m)):(e.childrenAsArray?(l[y]=[],l[y].push(m)):l[y]=m,i++));else o||(e.childrenAsArray?(l[e.textKey]=[],l[e.textKey].push(null)):l[e.textKey]=null);if(o)if(e.grokText){var h=this.grokType(o.replace(r,""));null!==h&&void 0!==h&&(l[e.textKey]=h)}else l[e.textKey]=e.normalize?o.replace(r,"").replace(/\s+/g," "):o.replace(r,"");return l},this.xmlToString=function(e){try{var t=e.xml?e.xml:(new XMLSerializer).serializeToString(e);return t}catch(r){return null}},this.stringToXML=function(e){try{var t=null;if(window.DOMParser){var r=new DOMParser;return t=r.parseFromString(e,"text/xml")}return t=new ActiveXObject("Microsoft.XMLDOM"),t.async=!1,t.loadXML(e),t}catch(a){return null}},this}();
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer ? evt.dataTransfer.files : evt.target.files; //Tweak for filedrop and click;
// files is a FileList of File objects. List some properties.
var messages_div = document.getElementById('messages');
var models = {
'2': function(sms){
return '<div class="left"> \
<p class="left"> \
<p class="message left"> \
<span class="message name left" title="Me">Me:</span> \
<br>' + sms.message + '<br><span>' + sms.date + '</span></p> \
</p> \
</div>';
},
'1': function(sms) {
return '<div class="right"> \
<p class="right" title="' + sms.name + ' +' + sms.number + '"> \
<p class="message right"> \
<span class="message name right">' + sms.name + ' ( +' + sms.number + ' ):</span> \
<br>' + sms.message + '<br><span>' + sms.date + '</span> \
</p>\
</p> \
</div>';
}
}
var output = [];
var reader = new FileReader();
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('text/xml')) {
alert('XML only!')
continue;
}
reader.onload = (function(theFile) {
return function(e) {
messages.innerHTML = '';
var data = xmlToJSON.parseString(e.target.result).smses[0].sms;
console.log(data);
for(var i = 0, sms; sms = data[i]; i++){
var sms = {
'message': sms['_attr'].body['_value'],
'name': sms['_attr'].contact_name['_value'],
'number': sms['_attr'].address['_value'],
'type': sms['_attr'].type['_value'],
'date': sms['_attr'].readable_date['_value']
}
messages.innerHTML = messages.innerHTML + models[sms.type](sms);
}
};
})(f);
// Read in the image file as a data URL.
reader.readAsText(f);
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
var files_input = document.getElementById('files');
files_input.addEventListener('change', handleFileSelect, false);
document.getElementById('cm').addEventListener("click", function(){ files_input.click() });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment