iframes igjen

Hva

I denne modulen ser vi litt på hvordan vi kan toggle utseende og flytte iframes. Vi kan kanskje si at vi vil gjøre dem litt mer som gadgets?

Innpakket

Vi kan enkelt legge på en menylinje som gjør at vi kan åpne og lukke vår latin-frame.

HTML-koden ser slik ut:

<div class="wxtgadget" style="width:303px">
<div class="header"> 
<span class="off" onclick="toggleGadget(this);">_</span>
Latinske ordtak</div>
<div class="content" style="display:none">
<iframe height="120" src="../frame1.html" 
       width="300"> 
</iframe>
</div>
</div>

De aktuelle stildefinisjonene:

.wxtgadget .header{
           border-style:solid; border-width:thin;
           font-size:14px;font-weight:bold;line-height:100%;
           padding: 2px 0px 2px 2px;  min-height:15px;  margin:0px;
           background:#7AC5CD}
.wxtgadget .off { cursor:pointer;float:right; min-width:25px;
              color:#7AC5CD;background:#7AC5CD url(gopen.gif) no-repeat}
.wxtgadget .on {cursor:pointer;float:right; min-width:25px;
           color:#7AC5CD;background:#7AC5CD url(gclose.gif) no-repeat;
               border-bottom-style:none;}
.wxtgadget .content{margin:0px;padding:0px}

Og de to ikonene: og

Java scriptet: toggleGadget kan være slik:

function toggleGadget(elt)
{
    contentElt=elt.parentNode.parentNode.getElementsByTagName('div')[1];
    if(elt.getAttribute("class")=="off")
    {
        contentElt.style.display="block";
        elt.setAttribute("class","on");
    }
    else
    {
        contentElt.style.display="none";
        elt.setAttribute("class","off");
    }
}

Flyttbart

Vi ønsker i tillegg til å åpne og lukke vinduet, også å gjøre det flyttbart (drag and drop). Dette krever en god del mer javaskripting. Det finnes mange oppskrifter for Dragging i Javascript. her har jeg valgt et bibliotek som er helt uavhengig av HTML5 dragg-drop. Biblioteket stammer fraQuirksmode [1]

HTML-koden blir slik:

<div id="gadget1" class="wxtgadget" style="width:303;position:absolute">
    <div class="header" style="cursor:move"> 
    <span class="off" onclick="toggleGadget(this)">_</span>Latinske ordtak</div>
    <div class="content" style="display:none">
        <iframe height="120" 
                src="../frame1.html" 
                width="300"> 
        </iframe>
    </div>
</div>
<script type="text/javascript"> dragDrop.initElement('gadget1');</script>

Javascriptbiblioteket er slik:

// modified from: http://www.quirksmode.org/js/dragdrop.html
var MAX_Z_INDEX=1;
function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}
function removeEventSimple(obj,evt,fn) {
    if (obj.removeEventListener)
        obj.removeEventListener(evt,fn,false);
    else if (obj.detachEvent)
        obj.detachEvent('on'+evt,fn);
}
dragDrop = {
    initialMouseX: undefined,
    initialMouseY: undefined,
    startX: undefined,
    startY: undefined,
    draggedObject: undefined,
    initElement: function (element) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        element.onmousedown = dragDrop.startDragMouse;
    //-------
    if (element.style.zIndex)
    {
        thisIndex=element.style.zIndex;
        if (thisIndex > MAX_Z_INDEX)
            MAX_Z_INDEX=thisIndex;
    }
    //-------
    },
    startDragMouse: function (e) {
        dragDrop.startDrag(this);
        var evt = e || window.event;
        dragDrop.initialMouseX = evt.clientX;
        dragDrop.initialMouseY = evt.clientY;
        addEventSimple(document,'mousemove',dragDrop.dragMouse);
        addEventSimple(document,'mouseup',dragDrop.releaseElement);
        return false;
    },
    startDrag: function (obj) {
        if (dragDrop.draggedObject)
            dragDrop.releaseElement();
        dragDrop.startX = obj.offsetLeft;
        dragDrop.startY = obj.offsetTop;
        dragDrop.draggedObject = obj;
        obj.className += ' dragged';
        dragDrop.draggedObject.style.zIndex=MAX_Z_INDEX+1;
        MAX_Z_INDEX=MAX_Z_INDEX+1;
    },
    dragMouse: function (e) {
        var evt = e || window.event;
        var dX = evt.clientX - dragDrop.initialMouseX;
        var dY = evt.clientY - dragDrop.initialMouseY;
        dragDrop.setPosition(dX,dY);
        return false;
    },
    setPosition: function (dx,dy) {
        dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
        dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
    },
    releaseElement: function() {
        removeEventSimple(document,'mousemove',dragDrop.dragMouse);
        removeEventSimple(document,'mouseup',dragDrop.releaseElement);
        dragDrop.draggedObject.className = 
            dragDrop.draggedObject.className.replace(/dragged/,'');
        dragDrop.draggedObject = null;
    }
}

HTML-koden blir slik:

<div id="gadget2" class="wxtgadget" style="width:303;position:absolute">
 <div class="header" style="cursor:move"> 
  <span class="off" onclick="toggleGadget(this)">_</span>TED prize winner 2014</div>
    <div class="content" style="display:none">
    <iframe 
     src="https://embed.ted.com/talks/charmian_gooch_meet_global_corruption_s_hidden_players.html" 
     width="560" height="315">
    </iframe>
    </div>
</div>
<script type="text/javascript"> dragDrop.initElement('gadget2');</script>

Google gadgets

Google har et eget gadget begrep. Google gadgets kan plasseres på en vevside, or er implementert som en iframe. iGoogle var en tjeneste fra Google som gjorde at du ved enkle grep kan konfigurere en vevside med ønskede gadgets. Du trengte en Google-konto for å eksperimentere med dette. Google har også detaljerte beskrivelser av hvodan man skal lage gadgets, beskrevet på Developer Tools [2] .

iGoogle ble avviklet høsten 3013

Diverse tester og forsøk på å finne fram i Googles dokumentsajon har, i hvert fall i skrivende stund, lagt en viss demper på lysten til å fortsette med Google gadgets.

Referanser

Quirksmode Dragh and drop Peter-Paul Koch Quirksmode.org www.quirksmode.org/js/dragdrop.html 05-07-2010

Gadgets Developers Tools Google developers.google.com/gadgets/ 14-06-2010