| <html> |
| <head> |
| <title>Blogger OAuth example</title> |
| <link type="text/css" rel="stylesheet" href="/css/index.css"/> |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
| </head> |
| <body> |
| |
| {% if logged %} |
| |
| <div id="header"> |
| <div class="right"><a href="/oauth/revoke_token">logout</a></div> |
| <div class="left">Blogger OAuth example</div> |
| <div id="status" class="hidden"><span class="text">blah blah</span></div> |
| </div> |
| |
| <p>Your blogs:</p> |
| {% for blog in blogs %} |
| <div class="blog"> |
| <div class="left"> |
| <span class="title"> |
| <a href="{{blog.link}}">{{ blog.title }}</a> |
| </span><br/> |
| <span class="date">created: {{ blog.published }}</span><br/> |
| <span class="date">last updated: {{ blog.updated }}</span> |
| </div> |
| <div class="right post-editor-wrapper"> |
| <a href="#" class="new-post-link">Write a post</a> |
| <div class="hidden post-editor"> |
| <span class="hidden id">{{ blog.id }}</span> |
| <textarea>Type new post</textarea><br/> |
| <input type="button" value="Publish"/> |
| </div> |
| </div> |
| </div> |
| <div class="clear"/> |
| {% endfor %} |
| |
| {% else %} |
| |
| I could do automatic redirect but we all love welcome screens :). <br/> |
| |
| Ok, <a href="/oauth/request_token">allow this app to access Blogger</a>. |
| |
| {% endif %} |
| |
| <script type="text/javascript" charset="utf-8"> |
| $(document).ready(function() { |
| |
| $('a.new-post-link').click(function() { |
| $(this).next().slideToggle(); |
| }); |
| |
| $('input').click(function() { |
| showStatus('Creating post...'); |
| var body = $(this).prevAll('textarea')[0].value; |
| var id = $(this).prevAll('span.id').text(); |
| $.post('/new_post', { |
| 'body': body, |
| 'id': id |
| }, function(data) { |
| showStatusAndHideAfterFiveSecs('Post created.'); |
| }); |
| }); |
| |
| $(document).ajaxError(function(event, xhr) { |
| alert('Something went wrong. Code: ' + xhr.status); |
| hideStatus(); |
| }); |
| }); |
| |
| function showStatus(msg) { |
| $('#status span.text').text(msg); |
| $('#status').fadeIn(); |
| } |
| |
| function hideStatus() { |
| $('#status').fadeOut(); |
| } |
| |
| function showStatusAndHideAfterFiveSecs(msg) { |
| showStatus(msg); |
| setTimeout(hideStatus, 5000); |
| } |
| |
| </script> |
| </body> |
| </html> |
