}.bind(this), Math.floor((Math.random()*10)+1)*500);
});
+ var original = '';
+
+ $('#appendQuery').on('click', function(){
+ $('#linkAppend').toggleClass('inactive', !$(this).is(':checked'));
+ });
+
+ $(document).on('click', '#previewModal .close-btn', function(e) {
+ e.preventDefault();
+ $('#previewModal').delay(100).removeClass('active');
+ $('html, body').css('max-height', 'none').css('overflow', 'scroll');
+ });
+
+ $(document).on('click', '#showPreview', function(e) {
+ e.preventDefault();
+ $('html, body').animate({
+ scrollTop : 0
+ }, 700);
+ $('#previewModal').delay(100).addClass('active');
+ $('html, body').css('max-height', $(window).height()).css('overflow', 'hidden');
+ $('iframe').height($(window).height() - 40)
+ });
+
+ $(document).on('click', '#inlinerReset', function(e) {
+ e.preventDefault();
+ $('.show-on-submit').fadeOut(700);
+ $('.hide-on-submit').fadeIn(700);
+ $('#emailSource').removeClass('result').val(original);
+ });
+
+ $('#skateForm').on('submit', function(e){
+ e.preventDefault();
+ original = $('#emailSource').val()
+ var data = {
+ source: original,
+ };
+
+ $('#emailSource').val('Loading...')
+ $('html, body').animate({
+ scrollTop : $('.top-headlines').offset().top
+ }, 700);
+ $('#emailSource').addClass('result');
+ $('.hide-on-submit').fadeOut(700);
+
+ if ($('#linkAppend').val() && $('#appendQuery').is(':checked')) {
+ data.linkAppend = $('#linkAppend').val()
+ }
+
+ $.post("skate-proxy.php", data, function(resp){
+ $('.show-on-submit').fadeIn(700);
+ $(document).foundation('reveal');
+ $('#emailSource').val(resp.html);
+ $('#previewModal iframe').contents().find('html').html(resp.html);
+ }, "json");
+ });
+
</script>
<?php include 'includes/_offcanvas-menu.php' ?>
</div>
</section>
-
+<div id="inlinerReportModal" class="reveal-modal">
+ <h2>Oh Noes!</h2>
+ <p class="lead">Found a problem with our inliner? Here's what to do.</p>
+ <ol>
+ <li>Send us an email at <a href="mailto:skate@zurb.com">skate@zurb.com</a>.</li>
+ <li>Attach (don't copy and paste) a copy of your original code.</li>
+ <li>Tell us the <kbd>Skate Build Version #</kbd>, located in an HTML comment at the top of the code the inliner output (or send us the full code as an attachment).</li>
+ </ol>
+ <p>
+ Sorry you're having problems. :( We'll try and get you squared away as soon as possible.
+ </p>
+ <a class="close-reveal-modal">×</a>
+</div>
</body>
</html>
<div class="row">
<div class="large-7 columns">
- <form class="inky-inliner">
+ <form id="skateForm" class="inky-inliner">
<h4 class="normal">Email content & options</h4>
<div class="inliner-form">
<label>Paste your email content here. Styles should be included. Links should be full URLs.</label>
- <textarea placeholder="Paste your HTML here"></textarea>
+ <textarea id="emailSource" placeholder="Paste your HTML here"></textarea>
</div>
- <div class="inliner-form options">
+ <div class="inliner-form options hide-on-submit">
<label for="appendQuery">
<input type="checkbox" id="appendQuery"> Append query string to links
</label>
- <input type="text" placeholder="Enter the URL where your email lives" class="inactive">
+ <input id="linkAppend" type="text" placeholder="Enter the URL where your email lives" class="inactive">
<label for="removeComments">
<input type="checkbox" id="removeComments"> Remove Comments
</label>
<br>
- <div class="inliner-form">
- <label>Enter your email and we'll send you a note once we add new features to Ink!</label>
+ <div class="inliner-form hide-on-submit">
+ <label>Enter your email and we'll send you a note once we add new features to Ink! <small>OPTIONAL</small></label>
<input type="email" placeholder="e.g. you@yourdomain.com">
</div>
<br>
+
+ <a id="inlinerReset" href="#" class="button show-on-submit secondary">Convert Another Email</a>
+ <a id="showPreview" href="#" class="button show-on-submit">Preview</a>
- <button type="submit" class="button">Convert Email</button>
+ <button type="submit" class="button hide-on-submit">Convert Email</button>
</form>
</div>
<div class="large-4 columns">
</ul>
</div>
</div>
+<div id="previewModal">
+ <div class="control-bar">
+ <a class="close-btn" href="#">← Return</a>
+ <a class="button small secondary report-btn" href="#" data-reveal-id="inlinerReportModal">Report Broken</a>
+ </div>
+ <iframe src="process.php"></iframe>
+</div>
<?php include 'includes/_subscribe.php' ?>
<div class="show-for-small">
/* inliner */
.inliner-form {
.inactive { display: none; }
- textarea { min-height: 600px; }
+ textarea {
+ min-height: 500px;
+ font-family: "Lucida Console", Monaco, monospace;
+ font-size: 11px;
+ transition: all 0.7s ease-out;
+ -webkit-transition: all 0.7s ease-out;
+ -moz-transition: all 0.7s ease-out;
+ -ms-transition: all 0.7s ease-out;
+ -o-transition: all 0.7s ease-out;
+ }
label { margin-bottom: 8px; line-height: 1.4; }
&.options label { margin-bottom: 0; }
}
.inky-inliner { margin-bottom: 50px;
h4 { margin-bottom: 5px; }
p { margin-bottom: 10px; }
- .button { background: #004454; color: #FFF;
+ .button:not(.secondary) { background: #004454; color: #FFF;
&:hover { background: #002B36; }
}
+ textarea.result {
+ min-height: 300px;
+ }
+ .show-on-submit {
+ display: none;
+ }
}
.inline-advantages { margin-left: 25px; }
+#previewModal {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #fff;
+ z-index: 45;
+ display: none;
+
+ .control-bar {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: #f7f7f7;
+ box-shadow: 0 0 3px 5px rgba(0,0,0,0.25);
+
+ .close-btn {
+ margin: 14px 10px;
+ display: inline-block;
+ }
+
+ .report-btn {
+ margin: 5px 10px;
+ float: right;
+ }
+ }
+
+ iframe {
+ margin-top: 40px;
+ border: none;
+ width: 100%;
+ height: 100%;
+ }
+
+ &.active {
+ display: block;
+ }
+}
+#inlinerReportModal {
+ ol {
+ margin-left: 2em;
+ }
+}
/* compatibility */
table {
-<?php
+<?php
-/**
- * AJAX Cross Domain (PHP) Proxy 0.7
- * by Iacovos Constantinou (http://www.iacons.net)
- *
- * Released under CC-GNU GPL
- */
+$url = "http://skate.zurb.com/api/v1/raw";
-/**
- * Enables or disables filtering for cross domain requests.
- * Recommended value: true
- */
-define( 'CSAJAX_FILTERS', true );
-/**
- * If set to true, $valid_requests should hold only domains i.e. a.example.com, b.example.com, usethisdomain.com
- * If set to false, $valid_requests should hold the whole URL ( without the parameters ) i.e. http://example.com/this/is/long/url/
- * Recommended value: false (for security reasons - do not forget that anyone can access your proxy)
- */
-define( 'CSAJAX_FILTER_DOMAIN', false );
+ini_set("allow_url_fopen", 1);
+$ch = curl_init();
+curl_setopt($ch,CURLOPT_URL, $url);
+curl_setopt($ch,CURLOPT_POST, true);
+curl_setopt($ch,CURLOPT_POSTFIELDS, file_get_contents("php://input"));
+curl_exec($ch);
+curl_close($ch);
-/**
- * Set debugging to true to receive additional messages - really helpful on development
- */
-define( 'CSAJAX_DEBUG', true );
-
-/**
- * A set of valid cross domain requests
- */
-$valid_requests = array(
- 'http://skate.zurb.com/api/v1/raw'
-);
-
-/* * * STOP EDITING HERE UNLESS YOU KNOW WHAT YOU ARE DOING * * */
-
-// identify request headers
-$request_headers = array( );
-foreach ( $_SERVER as $key => $value ) {
- if ( substr( $key, 0, 5 ) == 'HTTP_' ) {
- $headername = str_replace( '_', ' ', substr( $key, 5 ) );
- $headername = str_replace( ' ', '-', ucwords( strtolower( $headername ) ) );
- if ( !in_array( $headername, array( 'Host', 'X-Proxy-Url' ) ) ) {
- $request_headers[] = "$headername: $value";
- }
- }
-}
-
-// identify request method, url and params
-$request_method = $_SERVER['REQUEST_METHOD'];
-$request_params = ( $request_method == 'GET' ) ? $_GET : $_POST;
-// Get URL from `csurl` in GET or POST data, before falling back to X-Proxy-URL header.
-$request_url = urldecode( isset( $_REQUEST['csurl'] ) ? $_REQUEST['csurl'] : $_SERVER['HTTP_X_PROXY_URL'] );
-$p_request_url = parse_url( $request_url );
-unset( $request_params['csurl'] );
-
-// ignore requests for proxy :)
-if ( preg_match( '!' . $_SERVER['SCRIPT_NAME'] . '!', $request_url ) || empty( $request_url ) || count( $p_request_url ) == 1 ) {
- csajax_debug_message( 'Invalid request - make sure that csurl variable is not empty' );
- exit;
-}
-
-// check against valid requests
-if ( CSAJAX_FILTERS ) {
- $parsed = $p_request_url;
- if ( CSAJAX_FILTER_DOMAIN ) {
- if ( !in_array( $parsed['host'], $valid_requests ) ) {
- csajax_debug_message( 'Invalid domain - ' . $parsed['host'] . ' does not included in valid requests' );
- exit;
- }
- } else {
- $check_url = isset( $parsed['scheme'] ) ? $parsed['scheme'] . '://' : '';
- $check_url .= isset( $parsed['user'] ) ? $parsed['user'] . ($parsed['pass'] ? ':' . $parsed['pass'] : '') . '@' : '';
- $check_url .= isset( $parsed['host'] ) ? $parsed['host'] : '';
- $check_url .= isset( $parsed['port'] ) ? ':' . $parsed['port'] : '';
- $check_url .= isset( $parsed['path'] ) ? $parsed['path'] : '';
- if ( !in_array( $check_url, $valid_requests ) ) {
- csajax_debug_message( 'Invalid domain - ' . $request_url . ' does not included in valid requests' );
- exit;
- }
- }
-}
-
-// append query string for GET requests
-if ( $request_method == 'GET' && count( $request_params ) > 0 && (!array_key_exists( 'query', $p_request_url ) || empty( $p_request_url['query'] ) ) ) {
- $request_url .= '?' . http_build_query( $request_params );
-}
-
-// let the request begin
-$ch = curl_init( $request_url );
-curl_setopt( $ch, CURLOPT_HTTPHEADER, $request_headers ); // (re-)send headers
-curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true ); // return response
-curl_setopt( $ch, CURLOPT_HEADER, true ); // enabled response headers
-// add post data for POST requests
-if ( $request_method == 'POST' ) {
- curl_setopt( $ch, CURLOPT_POST, true );
- curl_setopt( $ch, CURLOPT_POSTFIELDS, http_build_query( $request_params ) );
-}
-
-// retrieve response (headers and content)
-$response = curl_exec( $ch );
-curl_close( $ch );
-
-// split response to header and content
-list($response_headers, $response_content) = preg_split( '/(\r\n){2}/', $response, 2 );
-
-// (re-)send the headers
-$response_headers = preg_split( '/(\r\n){1}/', $response_headers );
-foreach ( $response_headers as $key => $response_header ) {
- // Rewrite the `Location` header, so clients will also use the proxy for redirects.
- if ( preg_match( '/^Location:/', $response_header ) ) {
- list($header, $value) = preg_split( '/: /', $response_header, 2 );
- $response_header = 'Location: ' . $_SERVER['REQUEST_URI'] . '?csurl=' . $value;
- }
- if ( !preg_match( '/^(Transfer-Encoding):/', $response_header ) ) {
- header( $response_header );
- }
-}
-
-// finally, output the content
-print($response_content );
-
-function csajax_debug_message( $message )
-{
- if ( true == CSAJAX_DEBUG ) {
- print $message . PHP_EOL;
- }
-}
\ No newline at end of file
+?>
\ No newline at end of file
}
/* line 520, ../sass/app.scss */
.inliner-form textarea {
- min-height: 600px;
-}
-/* line 521, ../sass/app.scss */
+ min-height: 500px;
+ font-family: "Lucida Console", Monaco, monospace;
+ font-size: 11px;
+ transition: all 0.7s ease-out;
+ -webkit-transition: all 0.7s ease-out;
+ -moz-transition: all 0.7s ease-out;
+ -ms-transition: all 0.7s ease-out;
+ -o-transition: all 0.7s ease-out;
+}
+/* line 530, ../sass/app.scss */
.inliner-form label {
margin-bottom: 8px;
line-height: 1.4;
}
-/* line 522, ../sass/app.scss */
+/* line 531, ../sass/app.scss */
.inliner-form.options label {
margin-bottom: 0;
}
-/* line 524, ../sass/app.scss */
+/* line 533, ../sass/app.scss */
.inky-inliner {
margin-bottom: 50px;
}
-/* line 525, ../sass/app.scss */
+/* line 534, ../sass/app.scss */
.inky-inliner h4 {
margin-bottom: 5px;
}
-/* line 526, ../sass/app.scss */
+/* line 535, ../sass/app.scss */
.inky-inliner p {
margin-bottom: 10px;
}
-/* line 527, ../sass/app.scss */
-.inky-inliner .button {
+/* line 536, ../sass/app.scss */
+.inky-inliner .button:not(.secondary) {
background: #004454;
color: #FFF;
}
-/* line 528, ../sass/app.scss */
-.inky-inliner .button:hover {
+/* line 537, ../sass/app.scss */
+.inky-inliner .button:not(.secondary):hover {
background: #002B36;
}
+/* line 539, ../sass/app.scss */
+.inky-inliner textarea.result {
+ min-height: 300px;
+}
+/* line 542, ../sass/app.scss */
+.inky-inliner .show-on-submit {
+ display: none;
+}
-/* line 531, ../sass/app.scss */
+/* line 546, ../sass/app.scss */
.inline-advantages {
margin-left: 25px;
}
+/* line 547, ../sass/app.scss */
+#previewModal {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #fff;
+ z-index: 45;
+ display: none;
+}
+/* line 557, ../sass/app.scss */
+#previewModal .control-bar {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: #f7f7f7;
+ box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.25);
+}
+/* line 565, ../sass/app.scss */
+#previewModal .control-bar .close-btn {
+ margin: 14px 10px;
+ display: inline-block;
+}
+/* line 570, ../sass/app.scss */
+#previewModal .control-bar .report-btn {
+ margin: 5px 10px;
+ float: right;
+}
+/* line 576, ../sass/app.scss */
+#previewModal iframe {
+ margin-top: 40px;
+ border: none;
+ width: 100%;
+ height: 100%;
+}
+/* line 583, ../sass/app.scss */
+#previewModal.active {
+ display: block;
+}
+
+/* line 588, ../sass/app.scss */
+#inlinerReportModal ol {
+ margin-left: 2em;
+}
+
/* compatibility */
-/* line 535, ../sass/app.scss */
+/* line 595, ../sass/app.scss */
table span {
display: block;
text-align: center;
}
-/* line 536, ../sass/app.scss */
+/* line 596, ../sass/app.scss */
table .check {
color: green;
}
-/* line 537, ../sass/app.scss */
+/* line 597, ../sass/app.scss */
table .x {
color: red;
}