new buttons and widgets

r2/r2/config/rewrites.py

@@ -26,6 +26,6 @@ rewrites = (#these first two rules prevent the .embed rewrite from
             ("^/_(.*)", "/_$1"),
             ("^/static/(.*\.js)", "/static/$1"),
             #This next rewrite makes it so that all the embed stuff works.
-            ("^(.*)(?<!button)(\.js)$", "$1.embed"))
+            ("^(.*)(?<!button)(?<!buttonlite)(\.js)$", "$1.embed"))
 
 rewrites = tuple((re.compile(r[0]), r[1]) for r in rewrites)

r2/r2/config/routing.py

@@ -59,8 +59,9 @@ def make_map(global_conf={}, app_conf={}):
     mc('/buttons', controller='buttons', action='button_demo_page')
     #the frame
     mc('/button_content', controller='buttons', action='button_content')
-    #/button.js - the embed
+    #/button.js and buttonlite.js - the embeds
     mc('/button', controller='buttons', action='button_embed')
+    mc('/buttonlite', controller='buttons', action='button_lite')
     
     mc('/widget', controller='buttons', action='widget_demo_page')
     mc('/bookmarklets', controller='buttons', action='bookmarklets')

r2/r2/controllers/buttons.py

@@ -20,8 +20,8 @@
 # CondeNet, Inc. All Rights Reserved.
 ################################################################################
 from reddit_base import RedditController
-from r2.lib.pages import Button, ButtonEmbed, ButtonDemoPanel, WidgetDemoPanel, \
-    Bookmarklets, BoringPage
+from r2.lib.pages import Button, ButtonNoBody, ButtonEmbed, ButtonLite, \
+    ButtonDemoPanel, WidgetDemoPanel, Bookmarklets, BoringPage
 from r2.models import *
 from r2.lib.strings import Score
 from pylons import c, request
@@ -38,8 +38,11 @@ class ButtonsController(RedditController):
 
     @validate(url = nop('url'),
               title = nop('title'),
-              css = nop('css'))
-    def GET_button_content(self, url, title, css):
+              css = nop('css'),
+              vote = VBoolean('vote', default=True),
+              newwindow = VBoolean('newwindow'),
+              width = VInt('width', 0, 300))
+    def GET_button_content(self, url, title, css, vote, newwindow, width):
         try:
             links = Link._by_url(url,None)
             #find the one with the highest score
@@ -63,13 +66,24 @@ class ButtonsController(RedditController):
 
         bt = self.buttontype()
         if bt == 1:
-            score_fmt = Score.points
+            score_fmt = Score.safepoints
         else:
             score_fmt = Score.number_only
             
-        c.response.content = Button(button=self.buttontype(), css=css,
-                                    score_fmt = score_fmt, link = l, likes = likes,
-                                    url=url, title=title).render()
+        page_handler = Button
+        if not vote:
+            page_handler = ButtonNoBody
+
+        if newwindow:
+            target = "_new"
+        else:
+            target = "_parent"
+            
+        c.response.content = page_handler(button=self.buttontype(), css=css,
+                                    score_fmt = score_fmt, link = l, 
+                                    likes = likes, url=url, title=title,
+                                    vote = vote, target = target,
+                                    bgcolor=c.bgcolor, width=width).render()
         return c.response
 
     
@@ -81,7 +95,7 @@ class ButtonsController(RedditController):
         c.response_content_type = 'text/javascript; charset=UTF-8'
 
         buttontype = buttontype or 1
-        width, height = ((130, 22), (52, 80), (70, 60))[buttontype - 1]
+        width, height = ((120, 22), (51, 69), (69, 52))[buttontype - 1]
         if _width: width = _width
         if _height: height = _height
 
@@ -93,6 +107,34 @@ class ButtonsController(RedditController):
         c.used_cache = True
         return self.sendjs(bjs, callback='', escape=False)
 
+    @validate(buttonimage = VInt('i', 0, 14),
+              url = nop('url'),
+              styled = VBoolean('styled', default=True))
+    def GET_button_lite(self, buttonimage, url, styled):
+        c.render_style = 'js'
+        c.response_content_type = 'text/javascript; charset=UTF-8'
+        if not url:
+            url = request.referer
+        try:
+            links = Link._by_url(url,None)
+            #find the one with the highest score
+            l = max(links, key = lambda x: x._score)
+        except:
+            #we don't want to return 500s in other people's pages.
+            l = None
+
+        if buttonimage == None:
+            image = 1
+        else:
+            image = buttonimage
+
+        bjs = ButtonLite(image = image, link = l, url = url, styled = styled).render()
+        # we don't want the JS to be cached!
+        c.used_cache = True
+        return self.sendjs(bjs, callback='', escape=False)
+
+
+
     def GET_button_demo_page(self):
         return BoringPage(_("reddit buttons"),
                           show_sidebar = False, 

r2/r2/controllers/reddit_base.py

@@ -339,6 +339,15 @@ def set_cnameframe():
     if hasattr(c.site, 'domain'):
         c.authorized_cname = request.environ.get('authorized_cname', False)
 
+def set_colors():
+    theme_rx = re.compile(r'')
+    color_rx = re.compile(r'^([a-fA-F0-9]){3}(([a-fA-F0-9]){3})?$')
+    c.theme = None
+    if color_rx.match(request.get.get('bgcolor') or ''):
+        c.bgcolor = request.get.get('bgcolor')
+    if color_rx.match(request.get.get('bordercolor') or ''):
+        c.bordercolor = request.get.get('bordercolor')
+
 def ratelimit_agents():
     user_agent = request.user_agent
     for s in g.agents:
@@ -466,6 +475,7 @@ class RedditController(BaseController):
         set_content_type()
         set_iface_lang()
         set_content_lang()
+        set_colors()
 
         # set some environmental variables in case we hit an abort
         if not isinstance(c.site, FakeSubreddit):

r2/r2/lib/pages/pages.py

@@ -856,15 +856,24 @@ class ButtonEmbed(Wrapped):
         Wrapped.__init__(self, button = button, width = width, height = height,
                          referer=referer)
 
+class ButtonLite(Wrapped):
+    """Generates the JS wrapper around the buttons for embedding."""
+    def __init__(self, image = None, link = None, url = "", styled = True):
+        Wrapped.__init__(self, image = image, link = link, url = url, styled = styled)
+
 class Button(Wrapped):
     """the voting buttons, embedded with the ButtonEmbed wrapper, shown on /buttons"""
     extension_handling = False
-    def __init__(self, link = None, likes = None, 
-                 button = None, css=None,
-                 url = None, title = '', score_fmt = None):
+    def __init__(self, link = None, likes = None, button = None, css=None, 
+                 url = None, title = '', score_fmt = None, vote = True, target = "_parent", 
+                 bgcolor = None, width = 100):
         Wrapped.__init__(self, link = link, likes = likes, score_fmt = score_fmt,
-                         button = button, css = css, url = url, title = title)
+                         button = button, css = css, url = url, title = title, 
+                         vote = vote, target = target, bgcolor=bgcolor, width=width)
 
+class ButtonNoBody(Button):
+    """A button page that just returns the raw button for direct embeding"""
+    pass
 
 class ButtonDemoPanel(Wrapped):
     """The page for showing the different styles of embedable voting buttons"""

r2/r2/lib/strings.py

@@ -200,6 +200,10 @@ class Score(object):
     def points(x):
         return  strings.number_label % (x, plurals.N_points(x))
 
+    @staticmethod
+    def safepoints(x):
+        return  strings.number_label % (max(x,0), plurals.N_points(x))
+
     @staticmethod
     def subscribers(x):
         return  strings.person_label % \

r2/r2/lib/template_helpers.py

@@ -238,3 +238,24 @@ def join_urls(*urls):
             u = utils.lstrips(u, '/')
         url += u
     return url
+
+def style_line(button_width = None, bgcolor = "", bordercolor = ""):
+    style_line = ''
+    bordercolor = c.bordercolor or bordercolor
+    bgcolor     = c.bgcolor or bgcolor
+    if bgcolor:
+        style_line += "background-color: #%s;" % bgcolor
+    if bordercolor:
+        style_line += "border: 1px solid #%s;" % bordercolor
+    if button_width:
+        style_line += "width: %spx;" % button_width
+    return style_line
+
+def choose_width(thing, width):
+    if width:
+        return width - 5
+    else:
+        if thing:
+            return 100 + (10 * (len(str(thing.link.score))))
+        else:
+            return 110

r2/r2/models/link.py

@@ -209,7 +209,10 @@ class Link(Thing, Printable):
                               wrapped.can_ban,
                               wrapped.thumbnail,
                               wrapped.moderator_banned))
+        # htmllite depends on other get params
         s = ''.join(s)
+        if c.render_style == "htmllite":
+            s += str(request.get.has_key('style'))
         return s
 
     def make_permalink(self, sr, force_domain = False):

r2/r2/public/static/reddit.css

@@ -470,16 +470,16 @@ before enabling */
     background-repeat: no-repeat; 
 }
 
-.arrow.upmod { background-image: url(/static/aupmod.png); }
-.arrow.downmod { background-image: url(/static/adownmod.png); }
-.arrow.up { background-image: url(/static/aupgray.png); }
-.arrow.down { background-image: url(/static/adowngray.png); }
+.arrow.upmod { background-image: url(/static/aupmod.gif); }
+.arrow.downmod { background-image: url(/static/adownmod.gif); }
+.arrow.up { background-image: url(/static/aupgray.gif); }
+.arrow.down { background-image: url(/static/adowngray.gif); }
 
 .midcol { 
     float: left; 
     margin-right: 2px; 
     margin-left: 7px; 
-    background: white; 
+    background: transparent; 
     overflow: hidden;
 }
 
@@ -826,6 +826,10 @@ a.star { text-decoration: none; color: #ff8b60 }
 .sharetable.preftable th { padding-bottom: 5px; padding-top: 5px;  }
 .sharetable.preftable button { margin-top: 10px }
 
+.preftable.widget-preview { font-size:smaller; }
+.preftable.widget-preview input[type="text"] { width: 150px; }
+.preftable #css-options input[type="text"] { margin-left: 0px; width: 6em; }
+
 .share-summary { width: 95%; margin-top: 10px; }
 .share-summary .head td { width: 50%; font-size: large; text-align: center }
 .share-summary td { vertical-align: top;}
@@ -1143,7 +1147,7 @@ a.star { text-decoration: none; color: #ff8b60 }
     margin: 1px;
 }
 
-.button {color: #369; width: 98%; height: 96%}
+.button {color: #369;}
 .button a:hover { text-decoration: underline }
 
 
@@ -1156,7 +1160,7 @@ a.star { text-decoration: none; color: #ff8b60 }
     float: left; 
 }
 .button .blog1 .score { 
-    float: right;
+    float: center;
     margin-top: 2px;
     margin-right: 5px; 
 }
@@ -1172,13 +1176,27 @@ a.star { text-decoration: none; color: #ff8b60 }
 
 .optional {color: green}
 .instructions { font-size: larger;  }
-.instructions h1, .instructions h2 { margin-top: 20px; margin-bottom: 20px;  }
+.instructions h1, .instructions h2, .instructions h3 { margin-top: 20px; margin-bottom: 20px;  }
 .instructions p { margin: 10px; max-width: 60em}
-.instructions pre, .instructions iframe { margin: 5px;  margin-right: 10px; }
+.instructions pre { margin: 5px;  margin-right: 10px; }
+.instructions iframe { margin: 5px 10px 5px 0px; }
 .instructions input, .instructions select { margin: 0 .5em }
+.instructions a.view-code { float: right; margin-bottom: 1em; }
+.instructions a:focus { -moz-outline-style: none; }
+.instructions strong { font-weight: bold; }
+.instructions .buttons { margin-left: 1em; max-width: 50em; }
+.instructions .buttons li { margin-top: 1em; 
+                            border-bottom: 1px solid #e0e0e0;  
+                            padding-bottom: 1em;}      
+.instructions code { display: block;
+                     font-family: monospace; 
+                     font-size: small;
+                     margin: 5px; 
+                     background-color: #FF9; 
+                     padding: 10px; 
+                     max-width: 50em;}
 
-
-#preview { float: right; width: 20em; margin-right: 10px; }
+#preview { float: right; width: 30em; margin-right: 10px; }
 #preview span { color: lightgray;  }
 #preview #previewbox {
   border-width: .2em;

r2/r2/public/static/utils.js

@@ -609,3 +609,15 @@ function view_embeded_media(id, media_link) {
     }
 
 }
+
+function show_hide_child(el, tagName, label) {
+    code_block = el.parentNode.getElementsByTagName(tagName)[0];
+    if (code_block.style.display == "none") {
+            show(code_block);
+            el.innerHTML = 'hide ' + label;
+    } else if (code_block.style.display == "") {
+            hide(code_block);
+            el.innerHTML = 'view ' + label;
+        }
+}
+    

r2/r2/templates/base.htmllite

@@ -19,19 +19,41 @@
 ## All portions of the code written by CondeNet are Copyright (c) 2006-2008
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
+<%namespace file="utils.html" import="optionalstyle"/>
 
 <%!
    from pylons.i18n import _
-   from r2.lib.template_helpers import get_domain
+   from r2.lib.template_helpers import get_domain, style_line
+   from r2.models.subreddit import FakeSubreddit, Default
 %>
-<h3><a href="http://${get_domain()}/">
-    <img src="http://sp.reddit.com/reddithead4.gif" alt="" />
-  </a>
-  <%
-    link = '<a href="http://%s/">reddit</a></h3>' % get_domain()
-    label = _("link from %(site)s")
-    label = label.replace(" ", "&nbsp;");
-  %>
-  ${unsafe(label % dict(site = link))}
 
-${next.body()}
+<div class="rembeddit"
+     ${optionalstyle("font-family:verdana,arial,helvetica,sans-serif;padding:5px;" + style_line(bgcolor="FFFFFF", bordercolor="336699"))}>
+
+  <h3 class="reddit-title" ${optionalstyle("margin:0;")}>
+    <a href="http://${get_domain()}/" ${optionalstyle("margin:5px;")}>
+      <img src="http://sp.reddit.com/reddithead4.gif" alt="" 
+           ${optionalstyle("border:none")} />
+    </a>
+    <%
+       style = capture(optionalstyle, "text-decoration:none;color:#336699")
+       link = '<a %s href="http://%s/">%s</a></h3>' % (style, get_domain(), c.site.name)
+       label = _("links from %(site)s").replace(" ", "&#32;");
+       %>
+    ${unsafe(label % dict(site = link))}
+  </h3>
+  %if not isinstance(c.site, FakeSubreddit) or c.site != Default:
+  <p ${optionalstyle("margin: 0px 30px 10px 30px; color: gray;")}
+     class="powered-by-reddit">
+    <small>
+      powered by&#32; 
+      <a href="http://${g.domain}" 
+         ${optionalstyle("text-decoration:none;color:#336699")}>
+        ${Default.name}
+      </a>
+    </small>
+  </p>
+  %endif
+
+  ${next.body()}
+</div>

r2/r2/templates/button.html

@@ -25,7 +25,7 @@
  %>
 <%inherit file="reddit.html"/>
 <%namespace module="r2.lib.template_helpers" import="generateurl"/>
-<%namespace file="printable.html" import="arrow, score" />
+<%namespace file="buttontypes.html" import="button1, button2, button3, submiturl, submitlink" />
 
 
 
@@ -63,70 +63,4 @@
   </body>
 </%def>
 
-<%def name="submiturl(url, title='')">
-  ${("http://%s/submit" % get_domain(True)) + query_string(dict(url=url, title=title))}
-</%def>
-
-<%def name="submitlink(url, title='', text='submit')">
-  <a href='${submiturl(url, title)}' target='_parent'>${text}</a>
-</%def>
-
-
-<%def name="button1(thing)">
-<div class="blog blog1">
-  <div class="headimgcell">
-    <a href="${submiturl(thing.url, thing.title)}" target="_parent">
-      <img src="http://www.reddit.com/static/blog_head.png" alt=""/>
-    </a>
-  </div>
-  %if thing.link:
-    <% thing.link.score = thing.link._ups - thing.link._downs %>
-    ${arrow(thing.link, 1, thing.likes)}
-    ${arrow(thing.link, 0, thing.likes == False)}
-    ${score(thing.link, thing.likes, inline=False)}
-  %else:
-    ${submitlink(thing.url, thing.title)}
-  %endif
-  <div class="clear"></div>
-</div>
-</%def>
-
-<%def name="button2(thing)">
-  <div class="blog blog2">
-    %if thing.link:
-      ${arrow(thing.link, 1, thing.likes)}
-      <% thing.link.score = thing.link._ups - thing.link._downs %>
-      ${score(thing.link, thing.likes, inline=False, label = False)}
-      ${arrow(thing.link, 0, thing.likes == False)}
-    %else:
-      ${submitlink(thing.url, thing.title, 'submit to')}
-    %endif
-    <div class="bottomreddit">
-      <a href="${submiturl(thing.url, thing.title)}" target="_parent">reddit</a>
-    </div>
-  </div>
-</%def>
-
-
-<%def name="button3(thing)">
-<div class="blog blog3">
-  <div class="left">
-    %if thing.link:
-      ${arrow(thing.link, 1, thing.likes)}
-      <% thing.link.score = thing.link._ups - thing.link._downs %>
-      ${score(thing.link, thing.likes, inline=False, label = False)}
-      ${arrow(thing.link, 0, thing.likes == False)}
-    %else:
-      ${submitlink(thing.url, thing.title,  unsafe('<div class="arrow upmod"></div>'))}
-      ${submitlink(thing.url, thing.title, '?')}
-      ${submitlink(thing.url, thing.title,  unsafe('<div class="arrow downmod"></div>'))}
-    %endif
-  </div>
-  <div class="right">
-    ${submitlink(thing.url, thing.title, \
-          unsafe('<img src="http://www.reddit.com/static/blog_snoo.png" alt=""/>'))}
-  </div>
-  <div class="clear"></div>
-</div>
-</%def>
 

r2/r2/templates/buttondemopanel.html

@@ -25,47 +25,158 @@
 
 <% domain = get_domain(True) %>
 
-<%def name="drawrequired(type)" buffered="True">
-<script type="text/javascript" src="http://${domain}/button.js?t=${type}"></script>
-</%def>
-
-<%def name="drawoptional(url, title)">
-${"<script type='text/javascript'>reddit_url='%s'</script>" % url}<br/>
-${"<script type='text/javascript'>reddit_title='%s'</script>" % title}
-</%def>
-
 <div class="instructions">
   <h1>${_("put %(site)s buttons on your site") % dict(site=c.site.name)}</h1>
-    <p>${_("copy and paste the code for the style of button you would like\
-      into your site.  The green lines are\
-      optional.")}</p>
-    
-    <p>${_("if the site has not been submitted yet, clicking on the button\
-      will take the user to a reddit submit page, otherwise it takes\
-      them to the comments page.")}</p>
-    
-    <p>${_("if you want to specify the URL that should be submitted to\
-      reddit, include the reddit_url line.  if you don't include that\
-      line, then the current page's URL will be used.")}</p>
-    
-    <p>${_("if you want to specify the title that should be submitted to\
-      reddit, include the reddit_title line.  if you don't include that\
-      line, then the user will have to specify a title when they\
-      submit.")}</p>
-    
-    <script type="text/javascript">reddit_url="${'http://%s/buttons' % domain}";</script>
-    ${buttondemo(1)}
-    ${buttondemo(2)}
-    ${buttondemo(3)}
+    <p>${_('the reddit button is the smart way to get your content submitted to\
+      and discussed on reddit.  pick the button you like from below, and then\
+      copy/paste the code into your HTML editor.')}</p>
+
+    <h2>${_("commonly used buttons")}</h2>
+    <p>${_('use one of these buttons to quickly add reddit links to your site, or \
+      see below for more options.')}</p>
+    <ul class="buttons">
+      <li>${badgedemo(1)}</li>
+      <li>${badgedemo(7)}</li>
+      <li>${point_button_demo(0)}</li>
+      <li>${point_button_demo(1)}</li>
+      <li>${interactive_button_demo(1)}</li>
+    </ul>
+      
+
+    <h2>${_("buttons with points")}</h2>
+    <ul class="buttons">
+    %for x in xrange(0,6):
+      <li>${point_button_demo(x)}</li>
+    %endfor
+    </ul>
+    <h2>${_("customizing the look of your buttons")}</h2>
+    <p>${_('the buttons with points have two additional options.')}</p>
+    <ul class="buttons" >
+      <li><strong>styled=off</strong><br />
+        ${_('no styles will be added, so you can style it yourself')}</li>
+      <li><strong>url=[URL]</strong><br />
+        ${_('specify a url to use instead of the current url')}</li>
+    </ul>
+    <p>${_('Example:')}</p>
+    <code>
+    ${capture(point_option_example)}
+    </code>
+
+
+    <h2>${_('simple interactive button')}</h2>
+    <p>${_('put this code on your page:')}</p>
+    <code>${draw_interactive(False)}</code>
+      <p>${_("and you'll get something like this:")}</p>
+        <span style="margin-left: 10px;">${unsafe(draw_interactive(False))}</span>
+
+    <h2>${_("more interactive buttons")}</h2>
+    <ul class="buttons">
+      %for x in xrange(1,4):
+      <li>${interactive_button_demo(x)}</li>
+    %endfor
+    </ul>
+
+    <h2>${_('interactive button advanced settings')}</h2>
+    <div class="box buttonsettings">
+      <ul>
+        <li>
+          <p><strong>${_("specify a url")}</strong><br />
+            ${_("useful in places like blogs, where you want to link to the post's permalink")}</p>
+          <code>${drawoption('url','[URL]')}</code>
+        </li>
+        <li>
+          <p><strong>${_("specify a title")}</strong></p>
+          <code>${drawoption('title','[TITLE]')}</code>
+        </li>
+        <li>
+          <p><strong>${_("specify the color")}</strong></p>
+          <code>${drawoption('bgcolor','[COLOR]')}</code>
+        </li>
+        <li>
+          <p><strong>${_("specify a border color")}</strong></p>
+          <code>${drawoption('bordercolor','[COLOR]')}</code>
+        </li>
+      </ul>
+      <p style="font-weight: bold">${_('Example:')}</p>
+      <p>${_('to make this button:')}</p>
+      <span style="margin-left: 10px;">${draw_interactive_example()}</span>
+      <p>${_('use this code:')}</p>
+      <code>
+      ${capture(draw_interactive_example)}
+      </code>
+    </div>
+
+    <h2>${_("more badges and buttons")}</h2>
+    <ul class="buttons">
+    %for x in xrange(1,15):
+      <li>${badgedemo(x)}</li>
+    %endfor
+    </ul>
+
+
 </div>
-  
-<%def name="buttondemo(type)">
-  <h2>${_("style %(number)s") % dict(number=type)}</h2>
-  
-  ${unsafe(drawrequired(type))}
-  <pre>
-  <span class="optional">${drawoptional('[URL]', '[TITLE]')}</span><br/>
-  ${drawrequired(type)}
-  </pre>
+
+<%def name="drawbadge(image)">
+<a href="http://${domain}/submit" 
+onclick="window.location = 'http://${domain}/submit?url=' + encodeURIComponent(window.location); return false">
+<img src="http://${domain}/static/spreddit${image}.gif" alt="submit to reddit" border="0" />
+</a>
+</%def>
+
+<%def name="badgedemo(image)">
+  <a class="view-code" href="" 
+     onclick='show_hide_child(this, "code", "code"); return false'>view code</a>
+  ${unsafe(drawbadge(image))}<br />
+  <code style="display: none">
+  ${capture(drawbadge, image)}
+  </code>
+</%def>
+
+<%def name="draw_point_button(image)" buffered="True">
+<script type="text/javascript" src="http://${domain}/buttonlite.js?i=${image}"></script>
+</%def>
+
+<%def name="point_option_example()">
+<script type="text/javascript" src="http://${domain}/buttonlite.js?i=1&styled=off&url=foo.com"></script>
+</%def>
+
+<%def name="point_button_demo(image)">
+  <a class="view-code" href="" 
+     onclick='show_hide_child(this, "code", "code"); return false'>view code</a>
+  ${unsafe(draw_point_button(image))}<br />
+  <code style="display: none">
+  ${draw_point_button(image)}
+  </code>
+</%def>
+
+<%def name="draw_interactive(type)" buffered="True">
+%if type:
+<script type="text/javascript" src="http://${domain}/button.js?t=${type}"></script>
+%else:
+<script type="text/javascript" src="http://${domain}/button.js"></script>
+%endif
+</%def>
+
+<%def name="interactive_button_demo(number)">
+  <a class="view-code" href="" 
+     onclick='show_hide_child(this, "code", "code"); return false'>view code</a>
+  ${unsafe(draw_interactive(number))}<br />
+  <code style="display: none">
+  ${draw_interactive(number)}
+  </code>
+</%def>
+
+<%def name="drawoption(option, val)">
+${"<script type='text/javascript'>reddit_%s='%s'</script>" % (option, val)}
+</%def>
+
+<%def name="draw_interactive_example()">
+<script type="text/javascript">
+  reddit_url = "http://${domain}/buttons";
+  reddit_title = "Buttons!";
+  reddit_bgcolor = "FF3";
+  reddit_bordercolor = "00F";
+</script>
+<script type="text/javascript" src="http://${domain}/button.js?t=3"></script>
 </%def>
 

r2/r2/templates/buttonembed.js

@@ -33,6 +33,9 @@ if (window.reddit_url)  { write_string += encodeURIComponent(reddit_url); }
 else { write_string += encodeURIComponent('${thing.referer}');}
 if (window.reddit_title) { write_string += '&title=' + encodeURIComponent(reddit_title); }
 if (window.reddit_css) { write_string += '&css=' + encodeURIComponent(reddit_css); }
+if (window.reddit_bgcolor) { write_string += '&bgcolor=' + encodeURIComponent(reddit_bgcolor); }
+if (window.reddit_bordercolor) { write_string += '&bordercolor=' + encodeURIComponent(reddit_bordercolor); }
+write_string += '&width=${thing.width}';
 write_string += '" height="${thing.height}" width="${thing.width}" scrolling="no" frameborder="0"></iframe>';
 document.write(write_string);
 })()

r2/r2/templates/buttonlite.js

@@ -0,0 +1,67 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be consistent
+## with Exhibit B.
+## 
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+## 
+## The Original Code is Reddit.
+## 
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is CondeNet, Inc.
+## 
+## All portions of the code written by CondeNet are Copyright (c) 2006-2008
+## CondeNet, Inc. All Rights Reserved.
+################################################################################
+<%!
+   from r2.lib.template_helpers import get_domain
+   from r2.lib.strings import Score
+ %>
+
+<%namespace file="buttontypes.html" import="submiturl" />
+
+<% 
+   domain = get_domain()
+   if thing.link:
+       thing.link.score = thing.link._ups - thing.link._downs
+%>
+(function() {
+    var styled_submit = '<a style="color: #369; text-decoration: none;" href="${submiturl(thing.url)}">';
+    var unstyled_submit = '<a href="${submiturl(thing.url)}">';
+    var write_string='<span class="reddit_button" style="';
+%if thing.styled:    
+    write_string += 'color: grey;';
+%endif
+    write_string += '">';
+%if thing.image > 0:
+    write_string += '<img style="height: 2.3ex; vertical-align:top; margin-right: 1ex" src="http://${domain}/static/spreddit${thing.image}.gif">';
+%endif
+%if thing.link:
+    write_string += '${Score.safepoints(thing.link.score)}';
+    %if thing.styled:  
+        write_string += ' on ' + styled_submit + 'reddit</a>';
+    %else:
+        write_string += ' on ' + unstyled_submit + 'reddit</a>';
+    %endif
+%else:
+    %if thing.styled:
+    write_string += styled_submit + 'submit';
+    %else:
+    write_string += unstyled_submit + 'submit';
+    %endif
+    %if thing.image > 0:
+    write_string += '</a>';
+    %else:
+    write_string += ' to reddit</a>';
+    %endif
+%endif
+    write_string += '</span>';
+
+document.write(write_string);
+})()

r2/r2/templates/buttonnobody.html

@@ -0,0 +1,31 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be consistent
+## with Exhibit B.
+## 
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+## 
+## The Original Code is Reddit.
+## 
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is CondeNet, Inc.
+## 
+## All portions of the code written by CondeNet are Copyright (c) 2006-2008
+## CondeNet, Inc. All Rights Reserved.
+################################################################################
+
+<%namespace file="buttontypes.html" import="button1, button2, button3, submiturl, submitlink" />
+
+%if thing.button == 1:
+  ${button1(thing)}
+%elif thing.button == 2:
+  ${button2(thing)}
+%elif thing.button == 3:
+  ${button3(thing)}
+%endif

r2/r2/templates/buttontypes.html

@@ -0,0 +1,120 @@
+## The contents of this file are subject to the Common Public Attribution
+## License Version 1.0. (the "License"); you may not use this file except in
+## compliance with the License. You may obtain a copy of the License at
+## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
+## License Version 1.1, but Sections 14 and 15 have been added to cover use of
+## software over a computer network and provide for limited attribution for the
+## Original Developer. In addition, Exhibit A has been modified to be consistent
+## with Exhibit B.
+## 
+## Software distributed under the License is distributed on an "AS IS" basis,
+## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
+## the specific language governing rights and limitations under the License.
+## 
+## The Original Code is Reddit.
+## 
+## The Original Developer is the Initial Developer.  The Initial Developer of
+## the Original Code is CondeNet, Inc.
+## 
+## All portions of the code written by CondeNet are Copyright (c) 2006-2008
+## CondeNet, Inc. All Rights Reserved.
+################################################################################
+<%!
+   from r2.lib.template_helpers import get_domain, static, style_line, choose_width
+   from r2.lib.utils import query_string
+ %>
+
+<%namespace file="printable.html" import="arrow, score" />
+<%namespace file="utils.html" import="img_link" />
+
+<%def name="submiturl(url, title='')">${("http://%s/submit" % get_domain(True)) + query_string(dict(url=url, title=title))}</%def>
+
+<%def name="submitlink(url, title='', text='submit')">
+  <a href='${submiturl(url, title)}' target='${thing.target}'>${text}</a>
+</%def>
+
+<%def name="class_def(class_number, width=None)">
+  %if style_line(width):
+  <div class="blog blog${class_number}" style="${style_line(width)}">
+  %else:
+  <div class="blog blog${class_number}">
+  %endif
+</%def>
+
+<%def name="button1(thing)">
+${class_def(1, width=choose_width(thing, thing.width))}
+  <div class="headimgcell">
+    <a href="${submiturl(thing.url, thing.title)}" target="${thing.target}">
+      <img src="http://www.reddit.com/static/blog_head.png" alt=""/>
+    </a>
+  </div>
+  %if thing.link:
+    <% thing.link.score = thing.link._ups - thing.link._downs %>
+    %if thing.vote:
+    ${arrow(thing.link, 1, thing.likes)}
+    ${arrow(thing.link, 0, thing.likes == False)}
+    ${score(thing.link, thing.likes, inline=False)}
+    %else:
+    ${thing.link.score}
+    %endif
+  %else:
+    ${submitlink(thing.url, thing.title)}
+  %endif
+  <div class="clear"></div>
+</div>
+</%def>
+
+<%def name="button2(thing)">
+  ${class_def(2)}
+    %if thing.link:
+      <% thing.link.score = thing.link._ups - thing.link._downs %>
+      %if thing.vote:
+      ${arrow(thing.link, 1, thing.likes)}
+      ${score(thing.link, thing.likes, inline=False, label = False)}
+      ${arrow(thing.link, 0, thing.likes == False)}
+      %else:
+      &nbsp;<br />
+      ${thing.link.score}
+      &nbsp;<br />
+      %endif
+    %else:
+      <img src="http://www.reddit.com/static/blog_head.png" alt=""/>
+      ${submitlink(thing.url, thing.title, 'submit to')}
+    %endif
+      %if thing.bgcolor:
+      <div class="bottomreddit" style="background-color: #${thing.bgcolor}">
+      %else:
+      <div class="bottomreddit">
+      %endif
+      <a href="${submiturl(thing.url, thing.title)}" target="${thing.target}">reddit</a>
+    </div>
+  </div>
+</%def>
+
+
+<%def name="button3(thing)">
+${class_def(3)}
+  <div class="left">
+    %if thing.link:
+      <% thing.link.score = thing.link._ups - thing.link._downs %>
+      %if thing.vote:
+      ${arrow(thing.link, 1, thing.likes)}
+      ${score(thing.link, thing.likes, inline=False, label = False)}
+      ${arrow(thing.link, 0, thing.likes == False)}
+      %else:
+      &nbsp;<br />
+      ${thing.link.score}
+      &nbsp;<br />
+      %endif
+    %else:
+      ${submitlink(thing.url, thing.title,  unsafe('<div class="arrow upmod"></div>'))}
+      ${submitlink(thing.url, thing.title, '?')}
+      ${submitlink(thing.url, thing.title,  unsafe('<div class="arrow downmod"></div>'))}
+    %endif
+  </div>
+  <div class="right">
+    ${img_link('submit', '/static/blog_snoo.gif', '/submit' + query_string(dict(url=thing.url, title=thing.title)))}
+  </div>
+  <div class="clear"></div>
+</div>
+</%def>

r2/r2/templates/link.htmllite

@@ -19,6 +19,7 @@
 ## All portions of the code written by CondeNet are Copyright (c) 2006-2008
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
+<%namespace file="utils.html" import="optionalstyle"/>
 
 <%!
    from pylons.i18n import _, ungettext
@@ -36,12 +37,33 @@
    else:
        # generates "comment" the imperative verb
        com_label = _("comment") 
+
+   domain = get_domain(subreddit=False)
+   permalink = "http://%s%s" % (domain, thing.permalink)
+   if thing.likes == False:
+      arrow = "http://%s/static/widget_arrows_down.png"
+   elif thing.likes:
+      arrow = "http://%s/static/widget_arrows_up.png"
+   else:
+      arrow = "http://%s/static/widget_arrows.png"
+   arrow = arrow % domain
  %>
-  <link>\
-  <a href="${thing.url}">
-    ${thing.title}</a><br />
-  <small>
-    ${thing.score} ${ungettext("point", "points", thing.score)} |
-    &nbsp;<a href="http://${get_domain(subreddit=False)}${thing.permalink}">${com_label}</a>
-  </small>
+  <a href="${permalink}" class="reddit-voting-arrows" target="_blank"
+     ${optionalstyle("float:left; display:block;")}>
+    <img src="${arrow}" alt="vote" ${optionalstyle("border:none;")}/>
+  </a>
+  <div class="reddit-entry" ${optionalstyle("margin-left: 20px; min-height:32px;padding-bottom:5px;")}>
+    <a href="${thing.url}" class="reddit-link-title"
+       ${optionalstyle("text-decoration:none;color:#336699;")}>
+      ${thing.title}
+    </a>
+    <br />
+    <small ${optionalstyle("color:gray;")}>
+      ${thing.score} ${ungettext("point", "points", thing.score)} 
+      |&#32;
+      <a class="reddit-comment-link"
+         ${optionalstyle("color:gray")}
+         href="${permalink}">${com_label}</a>
+    </small>
+  </div>
 </%def>

r2/r2/templates/listing.htmllite

@@ -19,7 +19,40 @@
 ## All portions of the code written by CondeNet are Copyright (c) 2006-2008
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
+<%namespace file="utils.html" import="optionalstyle"/>
+<div class="reddit-listing" 
+       ${optionalstyle("margin-left:5px;margin-top:7px;")}>
+  <% 
+     t = thing.things
+     l = len(t)
+   %>
+  %for i, a in enumerate(t):
+   <% 
+      cls = "reddit-link "
+      cls += "odd " if i % 2 else "even "
+      cls += "first-half" if i < (l+1)/2 else "second-half"
 
-%for a in thing.things:
-  ${a.render()}
-%endfor:
+      two_col = request.get.has_key("twocolumn")
+    %>
+   %if two_col:
+     %if i == 0:
+       <div class="reddit-listing-left" 
+            ${optionalstyle("float:left;width:43%")}>
+     %elif i - 1 < (l+1)/2 and i >= (l+1)/2:
+       </div>
+       <div class="reddit-listing-right" 
+            ${optionalstyle("float:right; width:43%;")}>
+     %endif
+   %endif
+
+     <div class="${cls}">
+      ${a.render()}
+     </div>
+   %if two_col and i == l - 1:
+   </div>
+   %endif
+  %endfor:
+  %if two_col:
+    <div ${optionalstyle("clear:both")}><!--IE6sux--></div>
+  %endif
+</div>

r2/r2/templates/printable.htmllite

@@ -20,20 +20,16 @@
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
 
-<p id="entry_${thing._fullname}">
-  ${self.parent()}
-  ${self.entry()}
-</p>
+${self.parent()}
+${self.entry()}
+${self.Child()}
 
-<div id="child_${thing._fullname}">
-  ${self.Child()}
-</div>
 
 <%def name="parent()">
 </%def>
 
 <%def name="Child()">
-${hasattr(thing, "child") and thing.child.render() or ''}
+  ${hasattr(thing, "child") and thing.child.render() or ''}
 </%def>
 
 <%def name="entry()">

r2/r2/templates/utils.html

@@ -215,3 +215,9 @@ ${unsafe(txt)}
 <%def name="separator()">
   <span class="separator">|</span>
 </%def>
+
+<%def name="optionalstyle(style)">
+  %if request.get.get('style') != "off":
+    style="${style}"
+  %endif
+</%def>

r2/r2/templates/widgetdemopanel.html

@@ -23,7 +23,10 @@
    from r2.lib.template_helpers import get_domain
  %>
 
-<% domain = get_domain(True) %>
+<% 
+   domain = get_domain(cname = c.cname, subreddit = False) 
+   sr_domain = get_domain(cname = c.cname, subreddit = True)
+ %>
 
 <script type="text/javascript">
 function escapeHTML(text) {
@@ -36,34 +39,56 @@ function escapeHTML(text) {
 function getrval(r) {
     for (var i=0; i < r.length; i++) {
         if (r[i].checked) return r[i].value;
-    }
+    } 
 }
 
 function update() {
     f = document.forms.widget;
     which = getrval(f.which);
     if (which == "all") {
-        url = "http://${domain}/" + f.what.value + "/.embed?limit=" +
+        url = "http://${sr_domain}/" + f.what.value + "/.embed?limit=" +
                       f.num.value + "&t=" + f.when.value;
     } else if (which == "one") {
-        if (!f.who2.value) return;
-        url = "http://${domain}/user/"+f.who2.value+"/"+
+        if (!f.who.value) return;
+        url = "http://${domain}/user/"+f.who.value+"/"+
                       f.where2.value+".embed?limit=" + f.num.value + 
-                      "&sort="+f.what2.value;
+                      "&sort="+f.what.value;
+
+    } else if (which == "two") {
+        if(!f.domain.value) return;
+         url = "http://${domain}/domain/" + f.domain.value + "/.embed?limit=" 
+                      + f.num.value + "&sort="+f.what.value;
     } else {
-        alert("xxx");
         alert(which);
     }
+    $("preview").style.width = "";
+    if(f.nostyle.checked) {
+      url += "&style=off";
+      hide("css-options");
+    }
+    else {
+      show("css-options");
+      if(f.border.checked && f.bord_color.value) {
+        url += "&bordercolor=" + f.bord_color.value;
+      }
+      if(f.background.checked && f.bg_color.value) {
+        url += "&bgcolor=" + f.bg_color.value;
+      }
+      if(f.twocol.checked) {
+        url += "&twocolumn=true";
+        $("preview").style.width = "40em";
+      }
+    }
+
     script = '<script src="' + 
-                      escapeHTML(url).replace('&amp;', '&') + 
-                      '" type="text/javascript"><' + '/script>';
+                      escapeHTML(url).replace(/&amp;/g, '&') + 
+                      '" type="text/javascript"><'+'/script>';
     document.getElementById("codebox").innerHTML = escapeHTML(script);
     new Ajax.Request(url+"&", {method:"get", onSuccess: function(t) {
       s = eval(t.responseText.replace("document.write", ""));
       document.getElementById("previewbox").innerHTML = s;
     }});
 }
-
 </script>
 
 <div class="instructions">
@@ -78,63 +103,133 @@ function update() {
   <h1>${_("get live %(site)s headlines on your site") % dict(site=c.site.name)}</h1>
   
   <p>${_("just cut and paste the generated code into your site and your specified %(site)s feed will be displayed and updated as new stories bubble up") % dict(site=c.site.name)}</p>
+
   <h2>${_("which links do you want to display?")}</h2>
   
-  <form name="widget" action="" onsubmit="update(); return false">
-    <p>
-      ${_("number")}:
-      <select name="num" onchange="update()">
-        <option value="5" selected="selected">5</option>
-        <option value="10">10</option>
-        <option value="20">20</option>
+  <form name="widget" action="" onsubmit="update(); return false" id="widget"
+        class="pretty-form">
+    <%def name="when()" buffered="True">
+      <select name="when" onchange="update()" onfocus="update()">
+        <option value="hour">${_("this hour")}</option>
+        <option value="day">${_("today")}</option>
+        <option value="week">${_("this week")}</option>
+        <option value="month">${_("this month")}</option>
+        <option value="all" selected="selected">${_("all-time")}</option>
       </select>
-    </p>
-    <p>
-      <input type="radio" name="which" value="all" checked="checked" onclick="update()" /> 
-      ${unsafe(_("%(site)s %(what)s links from %(when)s") % dict(site = c.site.name, what = capture(what), when = capture(when)))}
-      <%def name="what()">
-        <select name="what" onchange="update()">
-          <option value="hot" selected="selected">${_("hottest")}</option>
-          <option value="new">${_("newest")}</option>
-          <option value="top">${_("top")}</option>
-        </select>
-      </%def>
-      <%def name="when()">
-        <select name="when" onchange="update()">
-          <option value="hour">${_("this hour")}</option>
-          <option value="day">${_("today")}</option>
-          <option value="week">${_("this week")}</option>
-          <option value="month">${_("this month")}</option>
-          <option value="all" selected="selected">${_("all-time")}</option>
-        </select>
-      </%def>
-    </p>
-    <p>
-      <input type="radio" name="which" value="one" onclick="update()" /> 
-      ${unsafe(_("%(what)s %(where)s %(who)s") % dict(what = capture(what2), where= capture(where2), who  = capture(who2)))}
-
-      <%def name="what2()">
-        <select name="what2" onchange="update()">
-          <option value="hot" selected="selected">${_("hottest")}</option>
-          <option value="new">${_("newest")}</option>
-          <option value="top">${_("top")}</option>
-        </select> 
-      </%def>
-    
-      <%def name="where2()">
-        <select name="where2" onchange="update()">
-          <option value="submitted">${_("submitted by")}</option>
-          <option value="saved">${_("saved by")}</option>
-          <option value="liked">${_("liked by")}</option>
-          <option value="disliked">${_("disliked by")}</option>
-        </select> 
-      </%def>
-    
-      <%def name="who2()">
-        <input type="text" name="who2" value="" 
-               onchange="update()" onblur="update()" />
-      </%def>
-    </p>
+    </%def>
+    <%def name="where2()" buffered="True">
+      <select name="where2" onchange="update()"
+              onfocus="this.parentNode.firstChild.checked='checked'">
+        <option value="submitted">${_("submitted by")}</option>
+        <option value="saved">${_("saved by")}</option>
+        <option value="liked">${_("liked by")}</option>
+        <option value="disliked">${_("disliked by")}</option>
+      </select> 
+    </%def>
+    <%def name="text_input(name)" buffered="True">
+      <input type="text" name="${name}" value="" 
+             onfocus="this.parentNode.firstChild.checked='checked'"
+             onchange="update()" onblur="update()" />
+    </%def>
+   <table class="widget-preview preftable">
+     <tr>
+       <th>
+         ${_("listing options")}
+       </th>
+       <td class="prefright">
+         <p>
+           <input type="radio" name="which" value="all" checked="checked" 
+                  onclick="update()" /> 
+           ${_("links from %(domain)s") % dict(domain = get_domain())}
+         </p>
+         <p>
+          <input type="radio" name="which" value="one" onclick="update()" /> 
+           ${unsafe(_("links %(submitted_by)s the user %(who)s") % dict(submitted_by = where2(), who = text_input("who")))}
+         </p>
+         <p>
+           <input type="radio" name="which" value="two" onclick="update()" /> 
+          ${unsafe(_("links from the domain %(domain)s") % dict(domain = text_input("domain")))}
+         </p>
+       </td>
+     </tr>
+     <tr>
+       <th>
+         ${_("sorting options")}
+       </th>
+       <td class="prefright">
+         <p>
+           <%def name="what()" buffered="True">
+           <select name="what" onchange="update()">
+             <option value="hot" selected="selected">${_("hottest")}</option>
+             <option value="new">${_("newest")}</option>
+             <option value="top">${_("top")}</option>
+           </select>
+           </%def>
+           ${unsafe(_("sort links by %(what)s") % dict(what = what()))}
+         </p>
+         <p>
+           ${unsafe(_("date range includes %(when)s") % dict(when = when()))}
+         </p>
+         <p>
+           ${_("number of links to show")}:
+           <select name="num" onchange="update()">
+             <option value="5" selected="selected">5</option>
+             <option value="10">10</option>
+             <option value="20">20</option>
+           </select>
+         </p>
+       </td>
+     </tr>
+     <tr>
+       <th>
+         ${_("display options")}
+       </th>
+       <td class="prefright">
+         <p>
+           <input name="nostyle" id="nostyle" type="checkbox"
+                  onfocus="update()"
+                  onchange="update()"/>
+           <label for="nostyle">
+             ${_("remove css styling")}  
+             &#32;<span class="little gray">
+               ${_("(the widget will inherit all styles from the page)")}
+             </span>
+           </label>
+         </p>
+         <div id="css-options">
+         <p>
+           <input name="twocol" id="twocol" type="checkbox"
+                  onfocus="update()"
+                  onchange="update()"/>
+           <label for="twocol">
+             ${_("two columns")}
+           </label>
+         </p>
+         <p>
+           <input name="background" id="background" type="checkbox"
+                  onfocus="update()"
+                  onchange="update()"/>
+           <label for="background">
+             ${_("background color")}
+           </label>
+           &nbsp;#${unsafe(text_input("bg_color"))}
+           &#32;<span class="little gray">
+             ${_("(e.g., FF0000 = red)")}
+           </span>
+         </p>
+         <p>
+           <input name="border" id="border" type="checkbox" 
+                  onfocus="update()"
+                  onchange="update()"/>
+           <label for="border"> 
+             ${_("border color")}
+           </label>
+           &nbsp;#${unsafe(text_input("bord_color"))}
+         </p>
+         </div>
+       </td>
+     </tr>
+  </table>
   </form>
 
   <h2>${_("the code")}</h2>