Widget:CJP4: Difference between revisions

Jump to navigation Jump to search
VisualWikitext
No edit summary
No edit summary
 
(63 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script>
<script content-type= "application/javascript" src="http://www.wikidoc.org/includes/raty/md5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type"text/javascript">
<script type"text/javascript">
$(document).ready(loadResources);
$(document).ready(loadResources);


function loadResources() {
function loadResources() {
mw.loader.load('mediaWiki.user');
jQuery.browser = {};
$('#button').click(runQuery);
(function () {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    }
})();
// mw.loader.load('mediaWiki.user');
$('#search').click(runQuery);
$('#query-container').change(updateDisplay);
$('#update').click(updateDisplay);
 
    $("#slider").slider({
        min: 0,
        max: 25,
        step: 1,
        range: true,
        values: [5, 20],
        slide: function(event, ui) {
            if (ui.values[0] < ui.values[1])
            {       
                $("input.pillSizeSlider[data-index=0]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=1]").val(ui.values[1]);
                updatePillSizeImages();
            }
            else if (ui.values[0] > ui.values[1])
            {
                $("input.pillSizeSlider[data-index=1]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=0]").val(ui.values[1]);
                updatePillSizeImages();               
            }
            else
            {       
                $("input.pillSizeSlider[data-index=0]").val(ui.values[0]);
                $("input.pillSizeSlider[data-index=1]").val(ui.values[1]);
                updatePillSizeImages();
            }
        }
    });
 
 
    $('input.pillSizeSlider[data-index=0]').val($("#slider").slider("option","values")[0]);
    $('input.pillSizeSlider[data-index=1]').val($("#slider").slider("option","values")[1]);
 
    $("input.pillSizeSlider").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
        updatePillSizeImages();
    });
 
};
};
function updatePillSizeImages() {
var minPillSize = $('input.pillSizeSlider[data-index=0]').val();
var maxPillSize = $('input.pillSizeSlider[data-index=1]').val();
var pillArr = [
"http://static.wikidoc.org/3/35/Pill_Size_1_mm.png",
"http://static.wikidoc.org/3/35/Pill_Size_1_mm.png",
"http://static.wikidoc.org/8/8a/Pill_Size_2_mm.png",
"http://static.wikidoc.org/f/f7/Pill_Size_3_mm.png",
"http://static.wikidoc.org/f/fb/Pill_Size_4_mm.png",
"http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png",
"http://static.wikidoc.org/d/d8/Pill_Size_6_mm.png",
"http://static.wikidoc.org/e/ec/Pill_Size_7_mm.png",
                "http://static.wikidoc.org/4/4d/Pill_Size_8_mm.png",
"http://static.wikidoc.org/9/97/Pill_Size_9_mm.png",
"http://static.wikidoc.org/3/36/Pill_Size_10_mm.png",
"http://static.wikidoc.org/2/2e/Pill_Size_11_mm.png",
                "http://static.wikidoc.org/c/c5/Pill_Size_12_mm.png",
"http://static.wikidoc.org/0/0d/Pill_Size_13_mm.png",
"http://static.wikidoc.org/1/16/Pill_Size_14_mm.png",
"http://static.wikidoc.org/4/4a/Pill_Size_15_mm.png",
"http://static.wikidoc.org/e/ee/Pill_Size_16_mm.png",
"http://static.wikidoc.org/8/86/Pill_Size_17_mm.png",
"http://static.wikidoc.org/a/af/Pill_Size_18_mm.png",
"http://static.wikidoc.org/e/ea/Pill_Size_19_mm.png",
"http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png",
"http://static.wikidoc.org/e/e2/Pill_Size_21_mm.png",
"http://static.wikidoc.org/a/a3/Pill_Size_22_mm.png",
"http://static.wikidoc.org/b/b4/Pill_Size_23_mm.png",
"http://static.wikidoc.org/c/cf/Pill_Size_24_mm.png",
"http://static.wikidoc.org/9/92/Pill_Size_25_mm.png"
];
$("#queryDisplaySmallSize").attr("src",pillArr[minPillSize]);
$("#queryDisplayLargeSize").attr("src",pillArr[maxPillSize]);
};


function buildQueryParameters(){
function buildQueryParameters(){
Line 50: Line 142:
if (document.getElementById('selectedIngred').value)
if (document.getElementById('selectedIngred').value)
{
{
var selectedIngredArray = document.getElementById('selectedIngred').value.split();
var selectedIngredArray = document.getElementById('selectedIngred').value.split(',');
                 $.each(selectedIngredArray, function(index, value){
                 $.each(selectedIngredArray, function(index, value){
                     selectedIngredArray[index] = '[[Pill%20Ingred::' + value.trim() + ']]';
                     selectedIngredArray[index] = '[[Pill%20Ingred::' + value.trim() + ']]';
                 });
                 });
                alert(selectedIngredArray.join(""));
 
var queryIngred = '[[Pill%20Ingred::' + document.getElementById('selectedIngred').value + ']]'
var queryIngred = selectedIngredArray.join("");
}
}
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
};
};


function updateDisplay() {


if (document.getElementById('selectedShape').value)
{
switch(document.getElementById('selectedShape').value){
case "Round":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/79/Round_Grey_Pill.png";
break;
case "Oval":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/3/3d/Oval_Grey_Pill.png";
break;
case "Square":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/e/e9/Square_Grey_Pill.png";
break;
case "Rectangular":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/8e/Rectangular_Grey_Pill.png";
break;
case "Triangular":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/c/cb/Triangular_Grey_Pill.png";
break;
case "Capsule":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/b/b8/Capsule_Grey_Pill.png";
break;
case "Pentagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/b/be/Pentagon_Grey_Pill.png";
break;
case "Hexagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/2/25/Hexagon_Grey_Pill.png";
break;
case "Diamond":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/9/98/Diamond_Grey_Pill.png";
break;
case "Gear":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/5/56/Gear_Grey_Pill.png";
break;
case "DoubleCircle":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/73/Double_Circle_Grey_Pill.png";
break;
case "Clover":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/a/a3/Clover_Grey_Pill.png";
break;
case "TearDrop":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/9/9a/Tear_Drop_Grey_Pill.png";
break;
case "Octagon":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/f/f7/Octagon_Grey_Pill.png";
break;
case "SemiCircle":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/80/SemiCircle_Grey_Pill.png";
break;
case "Bullet":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/8/8c/Bullet_Grey_Pill.png";
break;
case "Trapezoid":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/7/7a/Trapezoid_Grey_Pill.png";
break;
case "FreeForm":
document.getElementById('queryDisplayShape').src = "http://www.wikidoc.org/images/f/fa/Free_Form_Grey_Pill.png";
break;
}
}
if (document.getElementById('selectedImprint').value)
{
document.getElementById('queryDisplaySelectedImprint').innerHTML = document.getElementById('selectedImprint').value
}
};
function changeImage(a) {
        document.getElementById("img").src=a;
}


function runQuery() {
function runQuery() {
Line 178: Line 342:
};
};
</script>
</script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<style type="text/css">
<style type="text/css">
/*Query Container********************************************
/*Query Container********************************************
Line 252: Line 419:
height:auto !important;
height:auto !important;
}
}
#queryDisplayContent img{
height:44px !important;
                float:right !important;
}
/*Results*****************************************************
/*Results*****************************************************
Line 379: Line 549:
             </div>
             </div>
             <div id="propertySize-container">
             <div id="propertySize-container">
             Show Pills Larger than:<input name="selectedMinSize" id="selectedMinSize" type="text"size="5"> mm
             Show Pills between:<input type="text" class="pillSizeSlider" data-index="0" name="selectedMinSize" id="selectedMinSize" size="5"/> mm and <input type="text" class="pillSizeSlider" data-index="1" name="selectedMaxSize" id="selectedMaxSize" size="5" /> mm
                 <br/>
                 <br/>
                Show Pills Smaller than: <input name="selectedMaxSize" id="selectedMaxSize" type="text"size="5"> mm
                <div id="slider"></div>
             </div>
             </div>
             <div id="propertyNDCIngreds-container">
             <div id="propertyNDCIngreds-container">
Line 422: Line 592:
                 </div>
                 </div>
                 <div class="queryDisplayImprint">
                 <div class="queryDisplayImprint">
            <span id="queryDisplaySelectedImprint"></span>
                 </div>
                 </div>
             </div>
             </div>
             <div id="queryDisplaySize-container">
             <div id="queryDisplaySize-container">
            <div class="queryDisplayHeader">
            <span>Selected Size:</span>
                </div>
                <div id="queryDisplaySize-container">
             <div class="queryDisplayHeader">
             <div class="queryDisplayHeader">
             <span>Selected Size:</span>
             <span>Selected Size:</span>
                 </div>
                 </div>
                 <div class="queryDisplayContent">
                 <div class="queryDisplayContent">
                <img id="queryDisplaySize" src="http://static.wikidoc.org/2/29/Relative_Pill_Size_13_mm.jpg" />
<img id="queryDisplaySmallSize" style="height:44px !important" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png" />
<img id="queryDisplayDime" style="height:44px !important" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" />
<img id="queryDisplayLargeSize" style="height:44px !important" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" />
                 </div>
                 </div>
            </div>
             </div>
             </div>
             <div id="queryDisplaySearch-container" style="align-content:center;">
             <div id="queryDisplaySearch-container" style="align-content:center;">
             <button id="button">Click Me</button>
             <button id="search">Search</button>
          <button id="update">Update</button>
             </div>
             </div>
         </div>
         </div>

Latest revision as of 03:49, 23 July 2015

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