views:

336

answers:

1

I'm not 100% sure what question I should ask - as I'm too sure on the best way to do this .. so let me describe what I'm trying to do (using a simplified example) and we'll go from there.

You have arbitrary HTML Elements (IMG, A, TD, whatever). Via the CSS they are assigned an HTML Behavior

.BoldSelection { 
    behavior: url(SelectBold.htc); 
    border: thin solid black;  
}

The Behavior simply puts a thick border around the elements when they are clicked - BUT - they have to set the previously selected element with a normal border.

So here is the HTC source. This would work if CurrentlyFocusedElementID was static between all instances of the behavior. But it isn't.

<Public:Attach Event="onContentReady" onEvent="LoadInit" />

    <Script Language="VBScript" type="Text/VBScript">

        Sub LoadInit
            element.onClick = getRef("setFocusedElement")
        End Sub

        Sub setFocusedElement
            set ele = document.getElementByID(CurrentlyFocusedElementID)
            ele.style.border = "thin solid black"
            CurrentlyFocusedElementID = element.id
            element.style.border = "thick solid black"
        End Sub

    </Script>

I also thought that if I could store an arbitrary property or attribute within the containing document's DOM then I could use that as a common place to look for the last active element ... alas I can't figure out a way to do that without using some sort of hack (ie. hijacking the body's class value)

I would like to keep the code all contained within the HTC. I like the modular fashion of doing it this way .. that way I can simply assign the CSS Behavior and its done - no callbacks .. no parent attributes .. no HTML Components to declare.

How would you suggest I go about doing this?

Thank you in advance.

+1  A: 

The missing piece of the puzzle was .. expandos. Custom arbitrary attributes. Here is the completed .HTC

<Public:Attach Event="onContentReady" onEvent="LoadInit" />

  <Script Language="VBScript" type="Text/VBScript">

    ' This is an example HTC only.   If we were only setting borders, it'd make more sense to store
    ' the previous element's border type and keep the rest of the formatting.  For simplicity we are
    ' swapping out the class name

    Sub LoadInit

      ' No ID defined for this element.  Highlight it for the developer
      If element.id = "" Then
        element.style.bordercolor = "rgb(200,50,10)"
        element.style.borderwidth = "thin"
        element.style.borderstyle = "dashed"
        Exit Sub
      End If

      ' Attach our Click Events
      element.onClick = getRef("BoldIt")
      element.onDblClick = getRef("BoldItMore")

    End Sub


    ' Changes the Class Name for the current element, and if a previously
    ' selected element exists, restore its original classname
    Sub changeClass(newCSSClass)
      ' Storing the Expando on the document.body element
      Set ele = window.document.body

      ' Retrieve our two custom attributes - the ID of the element, and what its original ClassName was.
      LastEle = ele.getAttribute("LastHighlightedEle")
      LastEleClass = ele.getAttribute("LastHighlightedEleClass")

      ' If there was in fact a previously selected element - restore the classname
      If not isnull(LastEle) then
        set oldEle = window.document.getElementByID(LastEle)
        oldEle.className = LastEleClass
        set oldEle =  Nothing
      End If

      ' Set our two custom attributes to this element and adjust this element's CSS ClassName
      LastEle = element.id
      LastEleClass = element.className
      ele.setAttribute "LastHighlightedEle",LastEle
      ele.setAttribute "LastHighlightedEleClass",LastEleClass
      element.className = newCSSClass
    End Sub

    ' Single Click Event - 'Thick' is a CSS Style for a 3px border
    Sub BoldIt
      changeClass("Thick")
    End Sub

    ' Double Click Event - 'Thicker' is a CSS Style for a 4px border
    Sub BoldItMore
      changeClass("Thicker")
    End Sub

  </Script>
Yesurbius