View source for Widget:FlashCard

<noinclude>__NOTOC__
This widget allows you to embed Flash cards on your wiki page.

Created by [https://www.mediawikiwidgets.org/User:Wesalius Wesalius]

== Using this widget ==
For information on how to use this widget, see [https://www.mediawikiwidgets.org/FlashCard widget description page on MediaWikiWidgets.org].

== Copy to your site ==
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
</noinclude><includeonly><div style="-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;background-color:#e2e6e7;padding:20px;text-align:center;">
<button onclick="shufle()" class="mw-ui-button" style="margin-bottom:10px;">Shuffle</button> 
<select name="mode" class="mw-ui-input mw-ui-input-inline" onchange="changeMode(this.value)">
  <option value="2" selected='selected'>Images</option>
  <option value="1">Descriptions</option>
  <option value="0">All</option>
</select>
<br />
<button onclick="previous()" class="mw-ui-button mw-ui-progressive"><<</button>
<button onclick="showIndex(true)" class="mw-ui-button mw-ui-progressive">Show</button>
<button onclick="next()" class="mw-ui-button mw-ui-progressive">>></button>

<p><img id="fcimg" src="" width="<!--{$width|escape:'html'|default:300}-->"></p>
<p id="fctitle"></p>
</div>

<script>

var index=0;
var mode=2;
var max;
//var rel1 = /\| *(popis|description) *= *([^\|]*)\|/i;
var rel1 = /(popis kartičky) *= *([^\n]*)/i;
var pth = "";

// get input
var fcobj = {"pictures":[]};
var fccounter = 0;

function runWidgetFlashCard() {

// get input from category
<!--{if isset($category)}-->
  $.getJSON( pth + '/api.php?action=query', {
      list: 'categorymembers',
      cmtitle: 'Category:<!--{$category|escape:'html'}-->',
      cmlimit: '500',
      cmnamespace: '6',
      format: 'json'
    }, function( fcdata ) {
    $.each( fcdata.query.categorymembers, function( key, val ) {
      // get imageinfo
      $.getJSON( pth + '/api.php?action=query', {
          titles: val.title,
          prop: 'imageinfo',
          iiprop: 'url|mediatype',
          iiurlwidth: '<!--{$width|escape:'html'|default:300}-->',
          format: 'json'
        }, function( fcdata2 ) {
        $.each( fcdata2.query.pages, function( key2, val2 ) {
          // get imgurl and description
          iinfo = val2.imageinfo[0];
          if(iinfo['mediatype'] == "BITMAP" || iinfo['mediatype'] == "DRAWING" ) {
            var imgurl = iinfo['thumburl'];
            engtitle = val.title.replace("Soubor:", "File:");

//$(".mw-body-content").append(engtitle + " - " + iinfo['mediatype'] + "<br>");

            // get description text
            imgsource = pth + "/api.php?action=query";
            $.get( imgsource, { 
                prop: 'revisions',
                titles: engtitle,
                rvprop: 'content',
                format: 'php' 
              }).done(function( fcdata3 ) {
              if( matches = fcdata3.match(rel1) ) {
                if( matches[2].search(/(script>|javascript *:)/) != -1 || matches[2].search(/on[a-zA-Z]* *= *["|']/) != -1 ) {
                  fcname = "Zdroj obsahuje Javascript. Odstraňte jej prosím.";
                }
                else {
                  fcname = matches[2];
                  fcname = fcname.replace(/\[\[([^\|]*)\|([^\]]*)\]\]/,"<a href='"+window.location.origin+"/index.php?title=$1'>$2</a>");
                }
              }
              else fcname = '??';
              fcobj.pictures.push({"id": fccounter, "name": fcname, "url": imgurl });

//$(".mw-body-content").append(imgurl + "<br>");

              fccounter++;
              if( fcobj.pictures.length == fcdata.query.categorymembers.length ) {
                // start the script
                max=fcobj.pictures.length-1;
                showIndex();
              }
            });
          }
        });
      });
    });
  });
<!--{elseif isset($name)}-->
  // get input - particular images
  <!--{foreach from=$name key=k item=v}-->
    <!--{if isset($url[$k])}-->
    //fcobj.pictures.push({"id": "<!--{$k}-->", "name": "<!--{$v}-->", "url": "<!--{$url[$k]}-->"});  
    fcname = "<!--{$v}-->";
    fcurl = "<!--{$url[$k]}-->";
    if( fcname.search(/(script>|javascript *:)/) != -1 || fcname.search(/on[a-zA-Z]* *= *["|']/) != -1 ) {
      fcname = "Source contains Javascript. Remove it please.";
    }
    if( fcurl.search(/(script>|javascript *:)/) != -1 || fcurl.search(/on[a-zA-Z]* *= *["|']/) != -1 ) {
      fcurl = "URL contains Javascript. Remove it please.";
    }
    fcobj.pictures.push({"id": fccounter, "name": fcname, "url": fcurl});
    fccounter++;
    <!--{/if}-->
  <!--{/foreach}-->
  max=fcobj.pictures.length-1;
  showIndex();
<!--{/if}-->

}


/* flashcard engine functions */
//buttons
//0 all 1 names 2 pics
function changeMode(mood){
  mode=mood;
  showIndex();
}

function next(){
  if(index<max){
    index++;
  }else{
    index=0;
  }
  showIndex();
}

function previous(){
  if(index>0){
    index--;
  }else{
    index=max;
  }
  showIndex();
}



//show pic depending on global variable mode
function showIndex(){
  showIndex(false);
}                            

function showIndex(force) {
      document.getElementById("fctitle").innerHTML =fcobj.pictures[index].name;
      document.getElementById("fcimg").src =fcobj.pictures[index].url;
    if(mode==0 || force){
      document.getElementById("fctitle").style='display:block';
      document.getElementById("fcimg").style='display:inline';
    }else if(mode==1){
      document.getElementById("fctitle").style='display:block';
      document.getElementById("fcimg").src ="";
      document.getElementById("fcimg").style='display:none';
    }else if(mode==2){      
      document.getElementById("fctitle").innerHTML ="";
      document.getElementById("fctitle").style='display:none';
      document.getElementById("fcimg").style='display:inline';
    }    
}

//shuffle
function shuffle(o){
    o.sort(function() { return 0.5 - Math.random() });
    index=0;
    return o;
};
function shufle(){
  fcobj.pictures=shuffle(fcobj.pictures);
  showIndex();
};


function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }
    //alert(out);
    $(".mw-body-content").append(out + "<br>");
}


if(window.addEventListener){
  window.addEventListener('load', runWidgetFlashCard)
}else{
  window.attachEvent('onload', runWidgetFlashCard)
}

/*************************/
</script>
</includeonly>
<noinclude>[[Category:Widgets]]</noinclude>