These are chat archives for skatejs/skatejs

13th
Aug 2016
Rob Hicks
@robhicks
Aug 13 2016 11:54
@treshugart Based upon your comments, I thought I was making progress with passing a config property to a skatejs component but after trying to incorporate jsx templating I can’t get it to work.
Here’s my parent component:
const { elementOpen, elementClose, elementOpenStart, elementVoid, text } = skate.vdom;

let defaultConfig = {
  autoHideControls: true,
  autoResize: false,
  crossOriginPolicy: 'Anonymous',
  // debugMode: true,
  preserveImageSizeOnResize: true,
  preserveViewport: true,
  showFullPageControl: false,
  showHomeControl: false,
  showNavigationControl: false, // Turn on/off the default image toolbar
  showNavigator: false,         // Turn on/off the viewport navigator control
  showSequenceControl: false,
  showZoomControl: false,
  showRotationControl: false,
  tabIndex: "", // https://github.com/openseadragon/openseadragon/issues/954
  zoomPerClick: 1.5,
  zoomPerScroll: 1.2
}

const FsCivFull = skate.define('fs-civ-full', {
  props: {
    config: skate.prop.string({
      attribute: true,
      deserialize(val) {
        try {
          let config = JSON.parse(el.config);
          return config;
        } catch(error) {
          console.log("error", error);
        }
      }
    }),
  },
  render(el) {
    // console.log("el.config", el.config);
    let styles = {
      container: {
        height: '100%',
        width: '100%',
        position: 'relative'
      }
    };

    return (
      <div id="civ" style="{styles.container}"><fs-civ-zoomer position="TOP_LEFT" buttons="in,out,full"></fs-civ-zoomer></div>
    )
  }
});

const el = new FsCivFull();

skate.ready(el, () => {
  let osdConfig = Object.assign({element: el}, defaultConfig, el.config);
  let viewer = new OpenSeadragon(osdConfig);
  viewer.goToPage(0);
});
Two issues exist. First, el inside of skate.ready is simply as string ‘<fs-civ-full>’. Second, a syntax error is always thrown in the deserialize catch. Can you point me in the right direction?