/upstream/templates/covers/add.tmpl
Type: /type/template
body: value: $def with (doc, data={}, status=None)

$putctx('bodyid', 'form')
$putctx('robots', 'noindex,nofollow')

$if doc.type.key == "/type/author":
    $ intro = _("There are two ways to place an author's image on Open Library")
    $ action = doc.url('/add-photo')
$elif doc.type.key == "/type/edition":
    $ intro = _("There are two ways to get a cover image on Open Library")
    $ action = doc.url('/add-cover')
$elif doc.get_edition_covers:
    $ intro = _("There are three ways to get a cover image on Open Library")
    $ action = doc.url('/add-cover')
$else:
    $ intro = _("There are two ways to get a cover image on Open Library")
    $ action = doc.url('/add-cover')

    
<div class="popAlert" id="errors" style="display: $('block' if status else 'none')">
$if status:
    $if status.code == 1: $_("Please provide a valid image.")
    $elif status.code == 2: $_("Please provide an image URL.")
    $elif status.code == 3: $_("Please provide a valid image.")
</div>

<script type="text/javascript">
<!--
\$().ready(carousels);
\$().ready(function(){\$('#popcovers').jcarousel();});
\$(function() {
    parent.closeThrobber();
    \$("#form.addcover-form").submit(function(event) {
              
       function val(selector) {
           return \$.trim(\$(selector).val());
       }
       function error(message) {
           \$("#errors").show().html(message);
           event.preventDefault();
       }
       var file = val("#coverFile");
       var url = val("#imageUrl");
       var coverid = val("#coverid");
       
       if (file == "" && (url == "" || url == "http://" ) && coverid == "") {
           return error("Please choose an image or provide a URL.");
       }
       
       function test_url(url) {
           var obj = {
               optional: function() { return false; }
           }
           return \$.validator.url.apply(obj, [url, null]);           
       }
       
       if (url != "" && url != "http://" && !test_url(url)) {
           return error("Please provide a valid URL.");
       }       
   });
});
//-->
</script>

<div class="imageIntro">$intro</div>

<form class="floatform" id="addcover-form" name="bookcover" method="post" enctype="multipart/form-data" action="$action">

    <div align="center" style="width:100%;">
        <div class="centerIt">

            $if doc.type.key == "/type/work":
                $if doc.get_edition_covers():
                    <div class="formElement">
                        <div class="label">
                            <label>$:_("<strong>Pick one</strong> from the existing covers,")</label>
                        </div>
                        <div id="covers">
                            <ul id="popcovers">
                            $for cover in doc.get_edition_covers():
                                <li class="edition-cover" id="cover-$cover.id"><img src="$cover.url(size='M')"/></li>
                            </ul>
                        </div>
                        <input type="hidden" id="coverid" name="coverid" value=""/>
                        <script type="text/javascript">
                        \$("#popcovers > li").click(function() {
                            \$(this).toggleClass("selected").siblings().removeClass("selected");
                            var coverid = "";
                            if (\$(this).hasClass("selected")) {
                                coverid = \$(this).attr("id").split("-")[1];
                            }
                            \$("#coverid").val(coverid);
                        });
                        </script>
                    </div>
                    
            <div class="formElement">
                <div class="label">
                    <label id="imageBrowse" for="coverFile">$_("Choose a JPG, GIF or PNG on your computer,")</label>
                </div>
                <div class="input">
                    <input type="file" name="file" id="coverFile" value=""/>
                </div>
            </div>
                    
            <div class="formElement">
                <div class="label">
                    <label id="imageWeb" for="imageUrl"><span class="highlight">$:_("<u>Or</u></span>, paste in the image URL if it's on the web.")</label>
                </div>
                <div class="input">
                    <input type="text" name="url" id="imageUrl" value="$data.get('url', 'http://')" onClick="if(!this._haschanged && this.value == 'http://'){this.value=''};this._haschanged=true;"/>
                </div>
            </div>
            
            <div class="formElement" style="margin: $('15px 0px 0px 15px;' if doc.type.key == "/type/work" else '50px 0px 0px 30px;')">
                <button type="submit" name="upload" id="imageUpload" value="$_('Submit')" class="largest">$_("Submit")</button>
                <a class="close-popup floaterClose" href="javascript:;" onclick="parent.\$.fn.colorbox.close();">$_("Cancel")</a>
            </div>
                    
        </div>
    </div>                
</form>
title: Covers pop-up content