close page

Author: Andrew Ross

Diff for: _dev/js/modules/save.js

@@ -18,6 +18,8 @@ class Save {
 
 	setup() {
 
+		console.log(window.location.origin);
+
 		const saveBtn = $('#download-file');
 		const shareBtn = $('#share-on-twitter');
 		const shareModal = $('#share-modal');
@@ -201,6 +203,8 @@ class Save {
 		function postToTwitter() {
 			console.log('start tweet process');
 
+			$('#tweet-preview').addClass('is-working');
+
 			let tp = $('#tweet-preview');
 
 			tp.removeClass('d-none');
@@ -275,13 +279,8 @@ class Save {
 
 
 				function callback(auth, veri, text) {
-
 					//exportModal.classList.remove('previewing');
-
 					var postUrl = 'https://create-dotnet-bot.azurewebsites.net/api/tweet';
-					// if( window.location.hostname === '127.0.0.1' ) {
-					// 	postUrl = 'http://localhost:4000/auth';
-					// }
 					window.fetch(postUrl, {
 						method:'POST',
 						headers: {
@@ -302,6 +301,8 @@ class Save {
 							setTimeout(function(){
 								// exportModal.classList.remove('posting');
 								// exportModal.classList.add('completed');
+								$('#tweet-preview').removeClass('is-working');
+								$('#tweet-preview').addClass('success');
 								sendToAws(false);
 								//TweenMax.to(svgMaskLoad, 1, { scaleY: 1}).delay(1);
 								var url = data.url,

Diff for: _dev/scss/modules/_share.scss

@@ -27,6 +27,33 @@
 }
 
 #tweet-preview {
+  position: relative;
+
+  &.is-working {
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: calc(50% - 22px);
+      left: calc(50% - 22px);
+      width: 44px;
+      height: 44px;
+      z-index: 3;
+      background: url('../images/svgs/loader.svg') center / cover no-repeat;
+      animation: rotation 2s infinite ease-in-out;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba($white, 0.7);
+      backdrop-filter: blur(1px);
+    }
+  }
 
   textarea {
     padding: 12px;
@@ -46,8 +73,6 @@
     text-align: right;
     font-size: 12px;
     color: $gray-dark;
-    // margin-top: -36px;
-    // padding-right: 12px;
     z-index: 3;
     position: relative;
   }
@@ -62,6 +87,21 @@
     display: block;
     text-align: center;
   }
+
+  .tweet-success {
+    display: none;
+    text-align: center;
+    padding: 16px 0;
+  }
+
+  &.success {
+    .tweet-content {
+      display: none;
+    }
+    .tweet-success {
+      display: block;
+    }
+  }
 }
 
 // ----------------------------------------

Diff for: assets/css/main.css

@@ -0,0 +1,28 @@
+---
+layout: default
+title: Getting Twitter Permissions
+id: close-window
+permalink: /close/
+---
+
+
+<script>
+    function getUrlParameter(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+        var results = regex.exec(location.search);
+        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    };
+
+    var response = [getUrlParameter('oauth_token'), getUrlParameter('oauth_verifier')];
+
+    //console.log('URL Reponse = ' + response);
+
+    window.addEventListener('message', function(event) {
+        if( response[0] === undefined || response[0] === ''  || response.length == 0 ) {
+            event.source.postMessage('nothing', event.origin);
+        } else {
+            event.source.postMessage(response, event.origin);
+        }
+    },false);
+</script>

Diff for: assets/images/svgs/loader.svg

@@ -217,19 +217,27 @@ <h4 class="h3">Share your dotnet-bot</h4>
 
 
       <div class="mt-4 d-none" id="tweet-preview">
-        <img id="tweetPreviewImg" src=""/>
-        <input id="twitter-image" type="hidden" value="" />
-        <textarea id="tweet-text" class="d-block" maxlength="280">I created my own #dotnet-bot mod. Create your own at mod-dotnet-bot.net. #dotnetlovesme</textarea>
-
-        <div class="d-flex flex-items-start flex-justify-between mt-3">
-          <button class="btn btn--sm btn--alt btn--wide" type="submit" id="tweet">Post to twitter</button>
-          <span class="tweet-char-count"><span id="tweet-text-count"></span>/280</span>
+        <div class="tweet-content">
+          <img id="tweetPreviewImg" src=""/>
+          <input id="twitter-image" type="hidden" value="" />
+          <textarea id="tweet-text" class="d-block" maxlength="280">I created my own #dotnet-bot mod. Create your own at mod-dotnet-bot.net. #dotnetlovesme</textarea>
+
+          <div class="d-flex flex-items-start flex-justify-between mt-3">
+            <button class="btn btn--sm btn--alt btn--wide" type="submit" id="tweet">Post to twitter</button>
+            <span class="tweet-char-count"><span id="tweet-text-count"></span>/280</span>
+          </div>
         </div>
 
+
         <!-- <a class="ui-icon ui-icon--sm keep-editing" href="">
           <img src="/assets/images/svgs/close.svg" alt="Mail icon" />
           <span class="sr-only">Keep Editing</span>
         </a> -->
+
+        <div class="tweet-success">
+          <p class="h4 text-brand mb-2">Success!</p>
+          <p class="m-0">Your dotnet-bot mod has been posted.</p>
+        </div>
       </div>
 
       <div class="checkbox mt-6">