Widget:HeartSoundApp: Difference between revisions
Jump to navigation
Jump to search
Matt Pijoan (talk | contribs) No edit summary |
Matt Pijoan (talk | contribs) No edit summary |
||
| Line 5: | Line 5: | ||
<script> | <script> | ||
$(document).ready(function() { | $(document).ready(function () { | ||
$("#open").click(function(){ | $("#step2").css("visibility", "hidden"); | ||
$("#imageHolder").html("<img src='"+$("#fileLocation").val()+"' />"); | $("#step3").css("visibility", "hidden"); | ||
$("#open").click(function () { | |||
if ($("fileLocation").val().length() > 0) { | |||
$("#imageHolder").html("<img src='" + $("#fileLocation").val() + "' />"); | |||
$("#step2").css("visibility", "visible"); | |||
$("#step1").css("visibility", "hidden"); | |||
} | |||
}); | }); | ||
$("#add").click(function(){ | $("#add").click(function () { | ||
var top = Math.round($("#imageHolder").offset().top)+200; | if ($("#soundLocation").val().length() > 0) { | ||
var top = Math.round($("#imageHolder").offset().top) + 200; | |||
var left = Math.round($("#imageHolder").offset().left) + 200; | |||
var style = "position:absolute; top:" + top.toString() + "px; left:" + left.toString() + "px; width:25px; height:25px; border:1px solid #000;"; | |||
$("#imageHolder").append("<div data-src='" + $("#soundLocation").val() + "' style='" + style + "'></div>"); | |||
$("#soundLocation").val(""); | |||
$("#imageHolder div").last().draggable(); | |||
} | |||
}); | }); | ||
$("#save").click(function(){ | $("#save").click(function () { | ||
$("#step3").css("visibility", "visible"); | |||
$("#imageHolder div").each(function(){ | $("#output").val("<div id='imageHolder'>" + $("#imageHolder").children("img")[0].outerHTML + "\r\n"); | ||
$("#imageHolder div").each(function () { | |||
var left = Math.round($(this).position().left - $("#imageHolder").position().left); | var left = Math.round($(this).position().left - $("#imageHolder").position().left); | ||
var top = Math.round($(this).position().top - $("#imageHolder").position().top); | var top = Math.round($(this).position().top - $("#imageHolder").position().top); | ||
$("#output").val($("#output").val()+"<div data-src='"+$(this).attr("data-src")+"' data-left='"+left+"' data-top='"+top+"' class='soundBox'></div>\r\n"); | $("#output").val($("#output").val() + "<div data-src='" + $(this).attr("data-src") + "' data-left='" + left + "' data-top='" + top + "' class='soundBox'></div>\r\n"); | ||
}); | }); | ||
$("#output").val($("#output").val() + "</div>"); | |||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
<div id="step1"> | |||
Enter the image location:<br /> | Enter the image location:<br /> | ||
<input type="text" id="fileLocation" /><input type="button" value="Open" id="open" /><br /> | <input type="text" id="fileLocation" /><input type="button" value="Open" id="open" /><br /> | ||
</div> | |||
<div id="step2"> | |||
<div id="imageHolder"> | <div id="imageHolder"> | ||
</div> | </div> | ||
<input type="text" id="soundLocation" /><input type="button" value="Add" id="add" /><br /><br /> | <input type="text" id="soundLocation" /><input type="button" value="Add" id="add" /><br /><br /> | ||
<input type="button" value="Save" id="save" /> | <input type="button" value="Save" id="save" /> | ||
</div> | |||
<div id="step3"> | |||
<textarea id="output" readonly width="200" height="50"></textarea> | <textarea id="output" readonly width="200" height="50"></textarea> | ||
</div> | |||
</includeonly> | </includeonly> | ||