JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/yc/r/JJt3yB2LDLj.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://james.padolsey.com/demos/prettyprint/prettyprint.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div id='divTabs'>
    <ul id='ulTitles'>
        <li id='liTitleLoad'><a href='#divTabLoad'>Load from article code</a></li>
    </ul>
    <div id='divTabLoad'>
        Lien article
        <br />
        <input type='text' id='inputArticleLink' />
        <br />
        Titre article
        <br />
        <input type='text' id='inputArticleTitle' />
        <br />
        Article <a href='javascript: void(0);' id='aLoadFromTaArticle'>Load</a>
        <br />
        <textarea id='taArticle'></textarea>
    </div>
</div>

CSS

#divTabs {
    width: 100%;
    height: 600px;
}

li .ui-icon-close {
    float: left; margin: 0.4em 0.2em 0 0;
    cursor: pointer; 
}

textarea {
    width: 100%;
    height: 500px;
}

JavaScript

/* lezard: send mail */
/*
 * Constants & variables *****************************************************
 */
var htmlTemplate = {
    divTab: '<div id=\'divTab{{tabName}}\'>ahahah</div>'
};

/*
 * Objects *************************************************************************
 */
var flickrAPI = {
    key: 'a13626f8f832124b8ca75a60270daff7',
    secret: '7eebc63b225b2d6e',
    requestUrlTemplate: 'http://api.flickr.com/services/rest/?method={methodName}&jsoncallback=?&format=json&api_key={APIKey}',
    photoUrlTemplate: 'http://farm{farm}.static.flickr.com/{server}/{photoId}_{secret}.jpg',
    mailToUrlTemplate: 'http://www.flickr.com/mail/write/?to={userId}',
    photoPageUrlStart: 'http://www.flickr.com/photos/',
    getPhotoId: function(url) {
        url = url.toLowerCase();
        var photoId = url.substr(this.photoPageUrlStart.length);
        //right after the url start is the username, then / then the photoId we are looking for
        photoId = photoId.substr(photoId.indexOf('/') + 1);
        //finally the id ends with the / if any
        if (photoId.indexOf('/') > -1) {
            photoId = photoId.substr(0, photoId.indexOf('/'));
        }
        return photoId;
    },
    getRequestUrl: function(photoId) {
        return this.requestUrlTemplate.replace('{methodName}', 'flickr.photos.getInfo').replace('{APIKey}', this.key) + '&photo_id=' + photoId;
    },
    getPhotoUrlFromResult: function(data) {
        return this.photoUrlTemplate.replace('{farm}', data.photo.farm).replace('{server}', data.photo.server).replace('{photoId}', data.photo.id).replace('{secret}', data.photo.secret);
    },
    getPhotoTitleFromResult: function(data) {
        return data.photo.title._content;
    },
    getPhotoDescFromResult: function(data) {
        return data.photo.description._content;
    },
    getPhotographerNameFromResult: function(data) {
        return (data.photo.owner.realname.length > 0 ? data.photo.owner.realname : data.photo.owner.username);
   ...