Skip to content

Instantly share code, notes, and snippets.

@jhartman86

jhartman86/index.html

Created April 8, 2016 23:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhartman86/c4971407e5f1bb198992f22dd8f63232 to your computer and use it in GitHub Desktop.
Save jhartman86/c4971407e5f1bb198992f22dd8f63232 to your computer and use it in GitHub Desktop.
Download ZIP
sltShareDialogs
Raw
index.html
<html>
<head>
<title>Configure</title>
<link rel="stylesheet" type="text/css" href="https://code.fluidretail.net/configure-ui/stable/css/configure-app.css">
<style>
* {box-sizing:border-box;}
html, body {width:100%;height:100%;}
body {margin:0;padding:1rem;min-height:100%;background:#eaeaea;}
[configure] {width:920px;max-width:95%;margin:0 auto;background:#fff;padding:1rem;}
[carousel] {margin-bottom:3rem;max-width:400px;margin:0 auto 3rem;}
[custom-shares]{text-align:center;margin-bottom:1rem;}
[custom-shares] a {cursor:pointer;}
</style>
</head>
<body>
<div configure>
<div carousel></div>
<div custom-shares>
<a share-type="facebook">Facebook</a>
<a share-type="twitter">Twitter</a>
<a share-type="pinterest">Pinterest</a>
<a share-type="email">Email</a>
</div>
<div pager></div>
</div>
<script type="text/javascript">
var params = {
// facebookAppId: 1145259078840013,
environment: 'prod',
workflow: 'prod',
customer: 758,
product: 20331
};
// CHACOS
// params.customer = 1535;
// params.product = 20929;
// FRANKLIN
// params.customer = 1525;
// params.product = 20725;
// SUR LA TABLE
params.customer = 1548;
params.product = 21055;
params.recipeId = 23948839;
params.facebookAppId = 1143448359033346;
params.workflow = 'prod';
// When configure is loaded, it is avail as window.configureApp
document.addEventListener('configureApp', function( e ){
configureApp(params, function(err, configure){
if(err){ console.warn('CONFIGURE FAILED TO LOAD'); return; }
// Leak to window
window.configure = configure;
configure.run('createComponent', {
type: 'displayCarousel'
,container: '[carousel]'
,arrows: false
,dots: false
,touchMove: false
,view: 'main'
,clickToConfigure: true
,enableTooltips: true
});
configure.run('createComponent', {
type: 'pager'
,container: '[pager]'
});
// Create sharing stuff
Array.prototype.slice.call(document.querySelectorAll('[share-type]'))
.forEach(function(node, i){
node.addEventListener('click', onClickShareType);
});
function onClickShareType(){
var _shareType = this.getAttribute('share-type');
configure.run('setComponentOptions', {
'dialog recipeImage': {
width: _shareType === 'email' ? 420 : 350,
height: _shareType === 'email' ? 250 : 215,
format: 'jpg',
quality: 90
}
});
configure.run('createDialog', {
type: 'shareDialog'
,shareType: _shareType
,title: _shareType
,width: _shareType === 'email' ? 760 : 455
,facebookSummary: "lorem ipsum"
,showElements: _shareType === 'email' ? [
'recipeImages',
'nameFrom',
'nameTo',
'emailTo',
'message',
'postButton',
'cancelButton'
] : undefined
}, function(err, shareDialog){
if(err){ throw err; }
// console.log(shareDialog);
});
}
});
});
</script>
<!-- <script src="https://code.fluidretail.net/configure-ui/stable/js/configure-app.js" type="text/javascript" charset="utf-8" data-configure-global="configureApp"></script> -->
<script src="//0.0.0.0:8880/js/configure-app.dev.js" type="text/javascript" charset="utf-8" data-configure-global="configureApp"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment