Oomph 2.0 concept

aspect02.html

<aspect min-screen="lg" ratio="0.5625">
    <oomph-analytics job-id="1542" />
    <animation id="anim01" type="move-in-from-left" />

    <layer z-index="0" background-src="./aspect02/layer0/lg0535.jpg">
        <ips id="ips01" width="53%" height="30%" left="10%" top="5%">
            <ips-slide background-src="./aspect02/ips01/01.jpg">
                <link href="http://www.google.com" top="90%" left="80%" width="20%" height="10%" />
            </ips-slide>
            <ips-slide background-src="./aspect02/ips01/02.jpg" /></ips-slide>
        </ips>
    </layer>
    <layer z-index="1">
        <action-hotspot top="0%" left="0%" width="10%" height="5%" on-click="oomph.ips01.nextSlide()" />
        <action-hotspot top="95%" left="90%" width="10%" height="5%" on-click="oomph.ips01.animate(oomph.anim01)" />
        <!-- or alternatively, flip the animation dependancy... -->
        <action-hotspot top="95%" left="90%" width="10%" height="5%" on-click="oomph.anim01.animate(oomph.ips01)" />
    </layer>
</aspect>

elements_ips.es6.js

class Ips extends Oomph.Element {
    /* Public API */
    nextSlide() {
        // ...
    }
    
    previousSlide() {
        // ...
    }
    
    animate(animationObj) {
        // use properties in animation object to animate self
    }
}

index.html

<collection title="My Magazine" flow="horizontal">
    
    <!-- external reference of embedded pages -->
    <collection title="Section 1" flow="vertical" src="http://resource.oomphhq.com/collections/123" />
    <!-- or embedded -->
    <collection title="Section 2" flow="vertical">
        <page title="My Page">
            <!-- aspect for mid tablets and up with landscape 4:3 -->
            <aspect min-screen="md" ratio="1.3333" src="./aspect01.html" />
            <!-- aspect for large tablets and up in 16:9 portrait -->
            <aspect min-screen="lg" ratio="0.5625" src="./aspect02.html" />
        </page>
    </collection>
</collection>

yep good. a few things.

collections would only ever reference things by URL rather than embedding structure. This is to enforce granularity in delivering stuff to a reasonable size. i.e. about the size of a page is the biggest resource that should be possible in a single http request.

rather than defining each hotspot type as a custom element i think it would be better to define a element and allow a class to drive the specific widget behaviour. that way we can add hotspot types without needing to update our model.

The use of links in IPS and action-hotspots in the example you used highlights my point about them marked up as to different things while they are technically the same thing.

With these in mind the example you used could look more like this:

<layer z-index="0" background-src="./aspect02/layer0/lg0535.jpg">
    <hotspot class="ips" id="ips01" width="53%" height="30%" left="10%" top="5%">
      <oomph-view id="slide1">
        <aspect ...>
          <layer background-src="./aspect02/ips01/01.jpg">
            <hotspot class="oomph-action"  top="90%" left="80%" width="20%" height="10%" on-click="http://www.google.com" />
          </layer>
        </aspect>
      </oomph-view>
      <oomph-view id="slide2">....etc....</oomphView>
    </hotspot>
</layer>
<layer z-index="1">
    <hotspot class="oomph-action" top="0%" left="0%" width="10%" height="5%" on-click="oomph.ips01.nextSlide()" />
    <hotspot class="oomph-action" top="95%" left="90%" width="10%" height="5%" on-click="oomph.ips01.animate(oomph.anim01)" />
</layer>

The extra view and aspect may seem redundant in the nested instance but they do contain context that would help with calculating things at runtime such as inner shapes relative to container shapes. e.g. a view that is bigger than it's outer box. Also it means that when we get to the content that may be in a container style widget such as an IPS then we just recurse. The only true function of an IPS is to provide swipe gestures/pagination it need not know what a link is.

Tim