Widget:HeartSoundApp: Difference between revisions

Jump to navigation Jump to search
← Older edit
VisualWikitext
Matt Pijoan (talk | contribs)
Bots, Bureaucrats, bureaucrats, Interface administrators, interwiki, nocaptcha, smwadministrator, staff, Administrators, Widget editors
7,579 edits
No edit summary
Matt Pijoan (talk | contribs)
Bots, Bureaucrats, bureaucrats, Interface administrators, interwiki, nocaptcha, smwadministrator, staff, Administrators, Widget editors
7,579 edits
No edit summary
 
(33 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
     <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 position = $("#imageHolder").offset();
         if ($("#soundLocation").val().length > 0) {
        var top = Math.round($("#imageHolder").offset().top)+200;
            var top = Math.round($("#imageHolder").offset().top) + 200;
        var left = Math.round(position.left)+200;
            var left = Math.round($("#imageHolder").offset().left) + 200;
        var style = "position:absolute; top:"+top.toString()+"; left:"+left.toString()+"width:25px; height:25px; border:1px solid #000;";
            var style = "position:absolute; top:" + top.toString() + "px; left:" + left.toString() + "px; width:25px; height:25px; border:1px solid #000;";
        $("#imageHolder").append("<div src='"+$("#soundLocation").val()+"' style='"+style+"'></div>");
            $("#imageHolder").append("<div data-src='" + $("#soundLocation").val() + "' style='" + style + "'></div>");
        $("#soundLocation").val("");
            $("#soundLocation").val("");
        $("#imageHolder div").last().css({"position": "absolute", "top":top.toString(),"left":left.toString(),"width":"25","height":"25","border":"1px solid #000"});
            $("#imageHolder div").last().draggable();
         $("#imageHolder div").last().draggable();
         }
     
     });
     });
     $("#save").click(function(){
     $("#save").click(function () {
    $("#output").val("");
        $("#step3").css("visibility", "visible");
         $("#imageHolder div").each(function(){
        $("#output").val("<div id='imageHolder'>" + $("#imageHolder").children("img")[0].outerHTML + "\r\n");
             var position = $(this).position();
         $("#imageHolder div").each(function () {
            var imgPos = $("#imageHolder").offset();
             var left = Math.round($(this).position().left - $("#imageHolder").position().left);
            var compTop = (position.top - imgPos.top).toString();
             var top = Math.round($(this).position().top - $("#imageHolder").position().top);
             var compLeft = (position.left - imgPos.left).toString();
             $("#output").val($("#output").val() + "<div data-src='" + $(this).attr("data-src") + "' data-left='" + left + "' data-top='" + top + "' class='soundBox'></div>\r\n");
            $(this).attr("data-top",compTop);
            $(this).attr("data-left",compLeft);
             $("#output").val($("#output").val()+$(this)[0]+"\r\n");
         });
         });
        $("#output").val($("#output").val() + "</div>");
     });
     });
});
});
</script>
</script>
Enter the image location:<br />
<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>

Latest revision as of 18:15, 8 February 2016

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:HeartSoundApp&oldid=1213138"