Skip to content

Instantly share code, notes, and snippets.

@tad-lispy

tad-lispy/funcase.js

Last active August 29, 2015 14:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tad-lispy/7bee05d43d1eb0bcd942 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tad-lispy/7bee05d43d1eb0bcd942 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tad-lispy revised this gist Feb 18, 2015. 2 changed files with 0 additions and 182 deletions.
    88 changes: 0 additions & 88 deletions funcase.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -1,88 +0,0 @@
    # This is a sample application for API test purposes only.
    # It will do real things later.

    # Sample data to be sent when requested
    # Additional property (preview) will be added to it in 'get data' part below
    data =
    fabric:
    # This is not a real data - only a sample
    type : 'shop'
    name : 'XCATS'
    stuff : 'Cool cats'
    staff :
    boss : 'Lionel King'
    accountant: 'Marry A. Bobcat'
    sales : [
    'Katie Cat'
    'ms. Ocelot'
    'Snow, Leopold'
    ]

    # When everything is ready...
    jQuery ($) ->
    # Check if the application is running inside a frame
    if window.top is window then return $('body').html """
    <h1>This application is supposed to be running in a frame</h1>
    """

    host = window.top # Host application window

    # Say 'hello' to indicate that the application is ready.
    # Host application should wait for 'hello' before sending 'init' message
    host.postMessage type : 'hello', '*'

    # Now we wait for the host to send messages.
    window.addEventListener 'message', (message) ->

    # Make sure the origin is correct
    if message.origin isnt 'https://xgsm.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    # Each message has a
    # * type - String; 'init', 'get data' or 'load data')
    # * body - optional, type specific data
    { type, body } = message.data

    switch type
    when 'init'
    # Initialize the app
    # It expects to receive info regarding:
    # * host platform
    # * API version
    # * Overlay image PNG (different for each product)

    # This is for test purposes only
    # Here we try to load image into canva to serialize it later
    # in response to 'get data' message.
    canvas = document.createElement 'canvas'
    image = document.createElement 'img'
    $(image).one 'load', ->
    canvas.id = 'overlay'
    canvas.height = image.height
    canvas.width = image.width
    canvas
    .getContext '2d'
    .drawImage image, 0, 0

    document.body.appendChild canvas

    image.src = body.overlay
    # Make sure the load is triggered for cached images
    # SEE: http://stackoverflow.com/questions/7844982/
    if image.complete or image.width then do $(image).load

    # After that the user can play with application

    when 'get data'
    # Host wants to get the data

    # Prepare fake large base64 data by serializing a canvas
    canvas = document.getElementById 'overlay'
    data.preview = canvas.toDataURL 'image/png'

    # Send the data
    message.source.postMessage
    type : 'data'
    body : data
    , '*'
    94 changes: 0 additions & 94 deletions iai-shop.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -1,94 +0,0 @@
    # This piece goest to host application (IAI Shop)
    # See below for compiled javascript

    ###
    Each post message has following structure:
    type : 'hello' or 'init' or 'get data' or 'data'
    body : { *everything else, optional* }
    The communication goes like this (postMessages):
    IAI Shop Funcase
    -------- -------
    *iframe loaded*
    |<------ hello -------
    |------- init ------->
    *funcase is initializing*
    *user plays with it*
    *form.submit*
    ----- get data ------>|
    *data is gathered*
    <------- data --------|
    *item is added to cart
    along with data attachemtn*
    ###

    jQuery ($) ->
    funcase = document
    .getElementById 'appframe' # The iFrame of the funcase application
    .contentWindow # The window of the funcase application


    window.addEventListener 'message', (message) ->
    if message.origin isnt 'http://funcase.lazurski.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    { type, body } = message.data
    switch type
    # First, we wait for hello message from the funcase application
    # It indicates that it is ready to be initialized
    when 'hello'
    # Let's initialize the embeded funcase application
    message.source.postMessage
    type : 'init'
    body :
    # Inform funcase application about the host platform
    platform: 'IAI Shop'

    # Set API version - let's be future proof
    api : '1.0'

    # The overlay image url. This will be different for each product.
    # TODO: We will run into problems with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
    overlay : '/cats.jpg'
    , '*'

    # When the user submits the form
    $('#sample-form').submit (event) ->
    do event.preventDefault

    form = event.target
    data = new FormData form

    # Get the attachment from the funcase application
    funcase.postMessage type : 'get data', '*'

    # Wait for the funcase application to respond with data
    window.addEventListener 'message', (message) ->
    # Security check:
    unless message.origin is 'http://funcase.lazurski.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    # Serialize data from the message
    json = JSON.stringify message.data
    blob = new Blob [json], type: 'application/json'

    # append serialized data to the form
    data.append 'attachment', blob

    # send it using jQuery.ajax
    jQuery
    .ajax
    url : form.action
    data : data
    type : 'POST'
    processData : no # This...
    contentType : no # ...and this are important.
    .done (res) ->
    console.dir res
    $('#response-preview').html JSON.stringify res, null, 2
  2. tad-lispy revised this gist Feb 18, 2015. 4 changed files with 17 additions and 10 deletions.
    0 application.coffee → funcase.coffee
    View file
    File renamed without changes.
    0 application.js → funcase.js
    View file
    File renamed without changes.
    26 changes: 17 additions & 9 deletions iai-shop.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -2,19 +2,27 @@
    # See below for compiled javascript

    ###
    The communication goes like this (postMessages):
    IAI Funcase
    --- -------
    *iframe loaded*
    |<--- hello ----
    |---- init ---->
    Each post message has following structure:
    type : 'hello' or 'init' or 'get data' or 'data'
    body : { *everything else, optional* }
    The communication goes like this (postMessages):
    IAI Shop Funcase
    -------- -------
    *iframe loaded*
    |<------ hello -------
    |------- init ------->
    *funcase is initializing*
    *user plays with it*
    *form.submit*
    -- get data --->|
    <---- data -----|
    ----- get data ------>|
    *data is gathered*
    <------- data --------|
    *item is added to cart
    along with data attachemtn*
    ###

    1 change: 0 additions & 1 deletion iai-shop.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    jQuery(function($) {
    var funcase;
    funcase = document.getElementById('appframe').contentWindow;
  3. tad-lispy created this gist Feb 18, 2015.
    88 changes: 88 additions & 0 deletions application.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    # This is a sample application for API test purposes only.
    # It will do real things later.

    # Sample data to be sent when requested
    # Additional property (preview) will be added to it in 'get data' part below
    data =
    fabric:
    # This is not a real data - only a sample
    type : 'shop'
    name : 'XCATS'
    stuff : 'Cool cats'
    staff :
    boss : 'Lionel King'
    accountant: 'Marry A. Bobcat'
    sales : [
    'Katie Cat'
    'ms. Ocelot'
    'Snow, Leopold'
    ]

    # When everything is ready...
    jQuery ($) ->
    # Check if the application is running inside a frame
    if window.top is window then return $('body').html """
    <h1>This application is supposed to be running in a frame</h1>
    """

    host = window.top # Host application window

    # Say 'hello' to indicate that the application is ready.
    # Host application should wait for 'hello' before sending 'init' message
    host.postMessage type : 'hello', '*'

    # Now we wait for the host to send messages.
    window.addEventListener 'message', (message) ->

    # Make sure the origin is correct
    if message.origin isnt 'https://xgsm.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    # Each message has a
    # * type - String; 'init', 'get data' or 'load data')
    # * body - optional, type specific data
    { type, body } = message.data

    switch type
    when 'init'
    # Initialize the app
    # It expects to receive info regarding:
    # * host platform
    # * API version
    # * Overlay image PNG (different for each product)

    # This is for test purposes only
    # Here we try to load image into canva to serialize it later
    # in response to 'get data' message.
    canvas = document.createElement 'canvas'
    image = document.createElement 'img'
    $(image).one 'load', ->
    canvas.id = 'overlay'
    canvas.height = image.height
    canvas.width = image.width
    canvas
    .getContext '2d'
    .drawImage image, 0, 0

    document.body.appendChild canvas

    image.src = body.overlay
    # Make sure the load is triggered for cached images
    # SEE: http://stackoverflow.com/questions/7844982/
    if image.complete or image.width then do $(image).load

    # After that the user can play with application

    when 'get data'
    # Host wants to get the data

    # Prepare fake large base64 data by serializing a canvas
    canvas = document.getElementById 'overlay'
    data.preview = canvas.toDataURL 'image/png'

    # Send the data
    message.source.postMessage
    type : 'data'
    body : data
    , '*'
    58 changes: 58 additions & 0 deletions application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    (function() {
    var data;

    data = {
    fabric: {
    type: 'shop',
    name: 'XCATS',
    stuff: 'Cool cats',
    staff: {
    boss: 'Lionel King',
    accountant: 'Marry A. Bobcat',
    sales: ['Katie Cat', 'ms. Ocelot', 'Snow, Leopold']
    }
    }
    };

    jQuery(function($) {
    var host;
    if (window.top === window) {
    return $('body').html("<h1>This application is supposed to be running in a frame</h1>");
    }
    host = window.top;
    host.postMessage({
    type: 'hello'
    }, '*');
    return window.addEventListener('message', function(message) {
    var body, canvas, image, type, _ref;
    if (message.origin !== 'https://xgsm.pl') {
    console.error('This PostMessage event should be ignored. For test purposes it is not.');
    }
    _ref = message.data, type = _ref.type, body = _ref.body;
    switch (type) {
    case 'init':
    canvas = document.createElement('canvas');
    image = document.createElement('img');
    $(image).one('load', function() {
    canvas.id = 'overlay';
    canvas.height = image.height;
    canvas.width = image.width;
    canvas.getContext('2d').drawImage(image, 0, 0);
    return document.body.appendChild(canvas);
    });
    image.src = body.overlay;
    if (image.complete || image.width) {
    return $(image).load();
    }
    break;
    case 'get data':
    canvas = document.getElementById('overlay');
    data.preview = canvas.toDataURL('image/png');
    return message.source.postMessage({
    type: 'data',
    body: data
    }, '*');
    }
    });
    });
    }).call(this);
    86 changes: 86 additions & 0 deletions iai-shop.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    # This piece goest to host application (IAI Shop)
    # See below for compiled javascript

    ###
    The communication goes like this (postMessages):
    IAI Funcase
    --- -------
    *iframe loaded*
    |<--- hello ----
    |---- init ---->
    *form.submit*
    -- get data --->|
    <---- data -----|
    ###

    jQuery ($) ->
    funcase = document
    .getElementById 'appframe' # The iFrame of the funcase application
    .contentWindow # The window of the funcase application


    window.addEventListener 'message', (message) ->
    if message.origin isnt 'http://funcase.lazurski.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    { type, body } = message.data
    switch type
    # First, we wait for hello message from the funcase application
    # It indicates that it is ready to be initialized
    when 'hello'
    # Let's initialize the embeded funcase application
    message.source.postMessage
    type : 'init'
    body :
    # Inform funcase application about the host platform
    platform: 'IAI Shop'

    # Set API version - let's be future proof
    api : '1.0'

    # The overlay image url. This will be different for each product.
    # TODO: We will run into problems with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
    overlay : '/cats.jpg'
    , '*'

    # When the user submits the form
    $('#sample-form').submit (event) ->
    do event.preventDefault

    form = event.target
    data = new FormData form

    # Get the attachment from the funcase application
    funcase.postMessage type : 'get data', '*'

    # Wait for the funcase application to respond with data
    window.addEventListener 'message', (message) ->
    # Security check:
    unless message.origin is 'http://funcase.lazurski.pl'
    console.error 'This PostMessage event should be ignored. For test purposes it is not.'
    # return

    # Serialize data from the message
    json = JSON.stringify message.data
    blob = new Blob [json], type: 'application/json'

    # append serialized data to the form
    data.append 'attachment', blob

    # send it using jQuery.ajax
    jQuery
    .ajax
    url : form.action
    data : data
    type : 'POST'
    processData : no # This...
    contentType : no # ...and this are important.
    .done (res) ->
    console.dir res
    $('#response-preview').html JSON.stringify res, null, 2
    53 changes: 53 additions & 0 deletions iai-shop.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@

    jQuery(function($) {
    var funcase;
    funcase = document.getElementById('appframe').contentWindow;
    window.addEventListener('message', function(message) {
    var body, type, _ref;
    if (message.origin !== 'http://funcase.lazurski.pl') {
    console.error('This PostMessage event should be ignored. For test purposes it is not.');
    }
    _ref = message.data, type = _ref.type, body = _ref.body;
    switch (type) {
    case 'hello':
    return message.source.postMessage({
    type: 'init',
    body: {
    platform: 'IAI Shop',
    api: '1.0',
    overlay: '/cats.jpg'
    }
    }, '*');
    }
    });
    return $('#sample-form').submit(function(event) {
    var data, form;
    event.preventDefault();
    form = event.target;
    data = new FormData(form);
    funcase.postMessage({
    type: 'get data'
    }, '*');
    return window.addEventListener('message', function(message) {
    var blob, json;
    if (message.origin !== 'http://funcase.lazurski.pl') {
    console.error('This PostMessage event should be ignored. For test purposes it is not.');
    }
    json = JSON.stringify(message.data);
    blob = new Blob([json], {
    type: 'application/json'
    });
    data.append('attachment', blob);
    return jQuery.ajax({
    url: form.action,
    data: data,
    type: 'POST',
    processData: false,
    contentType: false
    }).done(function(res) {
    console.dir(res);
    return $('#response-preview').html(JSON.stringify(res, null, 2));
    });
    });
    });
    });