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 |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<script src="//code.jquery.com/jquery-1.10.2.js"></script> | |||
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |||
<link rel="stylesheet" href=" | <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> | ||
</link> | |||
<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","height":"0px"}); | |||
} | |||
}); | }); | ||
$("#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 () { | |||
$("#output").val($("#output").val()+"<div data-src='"+$(this).attr("data-src")+"'></div>\r\n"); | var left = Math.round($(this).position().left - $("#imageHolder").position().left); | ||
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>"); | |||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
Enter the image location:< | <div id="step1"> | ||
<input type="text" id="fileLocation" /><input type="button" value="Open" id="open" /><br /> | <label for="fileLocation">Enter the image location:</label> | ||
<input type="text" id="fileLocation" class="mw-ui-input"/><br /><input type="button" value="Open" id="open" class="mw-ui-button mw-ui-constructive" /><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="button" value="Save" id="save" /> | <label for="soundLocation">Enter the URL of the heart sound:</label> | ||
<input type="text" id="soundLocation" class="mw-ui-input"/> | |||
<input type="button" value="Add" id="add" class="mw-ui-button mw-ui-constructive" /><br /><br /> | |||
<input type="button" class="mw-ui-button mw-ui-constructive" value="Save" id="save" /> | |||
</div> | |||
<div id="step3"> | |||
<label for="output">Copy and paste the text below on a wikipage to show the image with sound</label> | |||
<textarea id="output" readonly width="200" height="50"></textarea> | <textarea id="output" readonly width="200" height="50"></textarea> | ||
</div> | |||
</includeonly> | </includeonly> | ||