thumbnail.xml - new-tab-jumpstart - New Tab JumpStart - JumpStart your web experience

Source path: svn/ tags/ 0.5a5/ content/ bindings/ thumbnail.xml

‹r216

r241

<?xml version="1.0"?>

<!DOCTYPE bindings [
<!ENTITY % thumbnailsDTD SYSTEM "chrome://jumpstart/locale/thumbnails.dtd" >
%thumbnailsDTD;
<!ENTITY % tabViewDTD SYSTEM "chrome://jumpstart/locale/tabView.dtd">
%tabViewDTD;
]>


<bindings id="thumbnail"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml">

  <binding id="siteTileContainer">
    <content>
      <element>
        <xul:stack>
            <xul:grid>
              <xul:columns />
              <xul:rows />
              <xul:label value="&nothingInHistory;" hidden="true" />
            </xul:grid>
            <xul:hbox anonid="transparency" style="background-color:red;opacity: 0.5;" hidden="true" >
            </xul:hbox>
            <xul:hbox anonid="slider" style="background-color:transparent; -moz-box-align: start; -moz-box-pack: center;" hidden="true">
                    <xul:hbox style="background-color:-moz-dialog;opacity: 1; margin: 10px;">
                            <xul:scale anonid="thumbsNumberScale" flex="1" min="0" max="0" increment="1" pageincrement="1" />
                            <xul:label anonid="numberOfThumbs" value="" />
                            <xul:toolbarbutton anonid="editOK" />
                            <xul:toolbarbutton anonid="editCancel" />
                    </xul:hbox>
            </xul:hbox>

        </xul:stack>
      </element>
    </content>
    <implementation>
      <field name="controller">null</field>
      <constructor>
        <![CDATA[
          var obj = window;
          if(this.hasAttribute("controller")){
              var controllerFullName = this.getAttribute("controller");
              controllerFullName.split('.').forEach(function(item){
                obj = obj[item];
              });
          }

          obj.setView(this);
          this.controller = obj;

          var view = this;

          function $get(id){
                  return document.getAnonymousElementByAttribute(view, 'anonid', id);
          }

          (function() {
                var Services = {};
                Components.utils.import("resource://jumpstart/config.js", Services);
                Components.utils.import("resource://jumpstart/browserServices.js", Services);

                var Config = Services.JumpstartConfiguration.Thumbs;
                var small = Config.ShowSmallThumbs;
                var lines = Config.Lines;
                var columns = Config.Columns;

                function setPref(aName, aValue){
                        Services.JumpstartConfiguration.setThumbPref(aName, aValue);
                }

                //ensure number is between min and max (if over max then max, if under min then min)
                function respectBoundaries(min, max, current){
                        var result = max < current?max:current;
                        return result > min?result:min;
                }

                var slideHandler = {
                  slider : null,
                  label : null,
                  sizes : [],
                  OnLoad : function(){
                        this.slider = $get("thumbsNumberScale");
                        this.label = $get("numberOfThumbs");
                        this.doHookup();
                        this.refreshText();
                  },
                  doHookup: function(){
                        var configForCalculation = {
                          ShowSmallThumbs: small,
                          MinColumns: 3,
                          MinLines: 2
                        };

                        var configParams = Services.BrowserServices.calculateMaxThumbs(configForCalculation);

                        this._hookup(2, configParams.lines, 3, configParams.columns);

                        var line = respectBoundaries(2, configParams.lines, lines);
                        var col = respectBoundaries(3, configParams.columns, columns);

                        //find correct index and apply it to slider
                        for(var i = 0; i < this.sizes.length; i++){
                          if(this.sizes[i].line == line && this.sizes[i].col == col){
                                this.slider.value = i;
                                break;
                          }
                        }
                  },
                  _loadSizes : function(minlines, maxlines, mincols, maxcols){
                        this.sizes = [];
                        for(var lineCount = minlines; lineCount <= maxlines; lineCount++){
                          for(var colCount = mincols; colCount <= maxcols; colCount ++){
                                this.sizes.push({
                                  line: lineCount,
                                  col : colCount,
                                  count: lineCount * colCount
                                });
                          }
                        }

                        this.sizes.sort(function(a, b){return a.count - b.count;}); //order by number of thumbs
                        return this.sizes;
                  },
                  _hookup: function(minlines, maxlines, mincols, maxcols){
                        this._loadSizes(minlines, maxlines, mincols, maxcols);
                        this.slider.max = this.sizes.length - 1;

                        var thumbprefs = this;
                        this.slider.addEventListener('change', function(){
                                thumbprefs.refreshText();
                                var cfg = {};
                                var dim = slideHandler._currentSize();
                                cfg.ShowSmallThumbs = small;
                                cfg.Lines = dim.line; cfg.Columns = dim.col; cfg.Count = dim.count;
                                view.controller.drawForConfig(cfg);
                        }, true);
                  },
                  refreshText : function(){
                        this.label.value = this._getText(this._currentSize());
                  },
                  _getText : function(dimensions){
                        return "(" + dimensions.col + "x" + dimensions.line + ") " + dimensions.count;
                  },
                  _currentSize : function(){
                        return this.sizes[this.slider.value];
                  }
                };


                $get('editOK').addEventListener('command', function(){
                        view.exitEdit();
                        var cfg = slideHandler._currentSize();
                        setPref('columns', cfg.col);
                        setPref('lines', cfg.line);
                        view.controller.drawOriginal(true);
                        }, true);
            $get('editCancel').addEventListener('command', function(){view.exitEdit();view.controller.drawOriginal(true);}, true);

                slideHandler.OnLoad();
        })();
        ]]>
      </constructor>
      <method name="getContent">
          <body>
              <![CDATA[
                return document.getAnonymousNodes(this)[0].childNodes[0];
              ]]>
          </body>
      </method>
      <method name="enterEdit">
          <body>
              <![CDATA[
                var view = this;
                function $get(id){
                    return document.getAnonymousElementByAttribute(view, 'anonid', id);
		}
		$get('transparency').hidden = false;
		$get('slider').hidden = false;
              ]]>
          </body>
      </method>
      <method name="exitEdit">
          <body>
              <![CDATA[
		var view = this;
                function $get(id){
                    return document.getAnonymousElementByAttribute(view, 'anonid', id);
		}
		$get('transparency').hidden = true;
		$get('slider').hidden = true;
              ]]>
          </body>
      </method>
      <method name="draw">
        <parameter name="data" />
        <parameter name="config" />
        <parameter name="onClickHandler" />
        <parameter name="pinHandler" />
        <parameter name="removeHandler" />
        <parameter name="moveHandler" />
        <body>
            <![CDATA[
                this.controller.draw(data,config,onClickHandler,pinHandler,removeHandler,moveHandler);
            ]]>
        </body>
      </method>
    </implementation>
  </binding>

  <binding id="siteTile">
    <content>
        <xul:hbox class="head">
          <html:img anonid="img" />
          <html:a anonid="url" class="thumblink" />
        </xul:hbox>
        <html:div class="image">
          <html:a href="#" class="thumbImageUrl">
            <html:img class="thumbImage" />
            <html:div anonid="thumbOverlay" class="thumbOverlay" style="display:none;">
              <html:a anonid="pinLink" class="thumbPin pinLink" tooltiptext="&controls.pinLabel;" href="#"></html:a>
              <html:a anonid="removeLink" class="thumbPin removeLink" tooltiptext="&controls.removeLabel;" href="#"></html:a>
            </html:div>
          </html:a>
        </html:div>
    </content>
    <implementation>
      <field name="index">-1</field>
      <field name="handleMouse">false</field>
      <field name="host"></field>
      <field name="url"></field>
      <field name="title"></field>
      <field name="fav"></field>
      <field name="toRemove">false</field>
      <field name="pinned">false</field>
      <field name="removeHandler">null</field>
      <field name="pinHandler">null</field>
      <field name="followedPageHandler">null</field>
      <field name="thumbData">null</field>
      <field name="utils">null</field>
      <constructor>
        <![CDATA[

        ]]>
      </constructor>
      <method name="setup">
        <parameter name="config" />
        <body>
          <![CDATA[
          ]]>
        </body>
      </method>
      <method name="draw">
        <parameter name="config" />
        <parameter name="thumbData" />
        <parameter name="followedPageHandler" />
        <body>
          <![CDATA[
            function htmlEncode(s){
              return s.replace(/&(?!\w+([;\s]|$))/g, "&amp;")
                .replace(/</g, "&lt;").replace(/>/g, "&gt;");
            }

            this.handleMouse = true;

            this.setup(config);

            this.thumbData = thumbData.original;
            this.host = thumbData.host;
            this.url = thumbData.url;
            this.title = thumbData.title;
            this.fav = thumbData.fav;
            var header = document.getAnonymousElementByAttribute(this, 'class', 'head');
            var image = document.getAnonymousElementByAttribute(this, 'class', 'thumbImage');
            var imageAnchor = document.getAnonymousElementByAttribute(this, 'class', 'thumbImageUrl');
            var a = document.getAnonymousElementByAttribute(this, 'anonid', 'url');
            var img = document.getAnonymousElementByAttribute(this, 'anonid', 'img');

            if (thumbData.fav != '') {
                img.src = thumbData.fav;
            }else{
                img.style.display = 'none';
            }

            var url = thumbData.originalUrl ? thumbData.originalUrl : thumbData.url;
            this.url = url;
            a.href = url;
            var txt = document.createTextNode((!thumbData.title)? url : thumbData.title);
            a.appendChild(txt);

            a.setAttribute("title",  ((!thumbData.title) ? url : thumbData.title));
            header.setAttribute("tooltiptext", ((!thumbData.title)? url : thumbData.title));

            a.addEventListener("click", followedPageHandler, true);

            if(thumbData.thumb != ''){
                image.src = thumbData.thumb;
            }else{
                imageAnchor.style.backgroundColor = "#fff";
                imageAnchor.style.backgroundImage = "url(" + thumbData.fav + ")";
                imageAnchor.style.backgroundRepeat = "no-repeat";
                imageAnchor.style.backgroundPosition = "center center";
                imageAnchor.style.width = "inherit";
                imageAnchor.style.height = "inherit";
                imageAnchor.style.display = "block";
            }
            imageAnchor.href = url;

            imageAnchor.addEventListener("click", followedPageHandler, true);

            this.hookUpButtons();
            this.refreshButtonStatus();

          ]]>
        </body>
      </method>
      <method name="hookUpButtons">
        <body>
          <![CDATA[
            let pinButton = document.getAnonymousElementByAttribute(this, "anonid", "pinLink");
            let removeButton = document.getAnonymousElementByAttribute(this, "anonid", "removeLink");

            pinButton.addEventListener("click", mlalevic.Utils.Binder.bind(this, this.handlePin), true);
            removeButton.addEventListener("click", mlalevic.Utils.Binder.bind(this, this.handleRemove), true);
          ]]>
        </body>
      </method>
      <method name="refreshButtonStatus">
        <body>
          <![CDATA[
            var thumbData = this.thumbData;
            this.removed = (thumbData.removed == undefined)?false:thumbData.removed;
            this.pinned = (thumbData.pinned == undefined)?false:thumbData.pinned;

            let pinButton = document.getAnonymousElementByAttribute(this, "anonid", "pinLink");
            let removeButton = document.getAnonymousElementByAttribute(this, "anonid", "removeLink");

            if(this.pinned){
              pinButton.setAttribute("class", "thumbPin pinLink pinned");
            }else{
              pinButton.setAttribute("class", "thumbPin pinLink");
            }

            if(this.removed){
              removeButton.setAttribute("class", "thumbPin removeLink toRemove");
            }else{
              removeButton.setAttribute("class", "thumbPin removeLink");
            }
            ]]>
        </body>
      </method>
      <method name="handlePin">
        <parameter name="aEvent" />
        <body>
          <![CDATA[
            if (aEvent.button != 0) //left button
              return;
            aEvent.preventDefault();
            aEvent.stopPropagation();
            this.onPin();
          ]]>
        </body>
      </method>
      <method name="handleRemove">
        <parameter name="aEvent" />
        <body>
          <![CDATA[
            if (aEvent.button != 0) //left button
              return;
            aEvent.preventDefault();
            aEvent.stopPropagation();
            this.onRemove();
          ]]>
        </body>
      </method>
      <method name="onRemove">
        <body>
          <![CDATA[
            if(this.removeHandler){
              this.removeHandler(this.thumbData);
              this.refreshButtonStatus();
            }
          ]]>
        </body>
      </method>
      <method name="onPin">
        <body>
          <![CDATA[
            if(this.pinHandler){
              this.pinHandler(this.thumbData);
              this.refreshButtonStatus();
            }
          ]]>
        </body>
      </method>
      <method name="handleMouseOver">
        <body>
          <![CDATA[
            if(!this.handleMouse)
              return;
            var overlay = document.getAnonymousElementByAttribute(this, 'anonid', 'thumbOverlay');
            if(overlay)overlay.style.display = '';
          ]]>
        </body>
      </method>
      <method name="handleMouseOut">
        <body>
        <![CDATA[
          if(!this.handleMouse)
              return;
          var overlay = document.getAnonymousElementByAttribute(this, 'anonid', 'thumbOverlay');
          if(overlay)overlay.style.display = 'none';
        ]]>
        </body>
      </method>
      <method name="setSize">
        <parameter name="width" />
        <parameter name="height" />
        <body>
          <![CDATA[
          var image = document.getAnonymousElementByAttribute(this, 'class', 'thumbImage');
          var container = document.getAnonymousElementByAttribute(this, 'class', 'image');
          image.width = width;
          image.height = height;
          image.style.height = height + 'px';
          image.style.width = width + 'px';
          this.width = width;
          this.height = height + 20;
          this.style.height = this.height + 'px';
          this.style.width = this.width + 'px';
          container.width = width;
          container.height = height;
          container.style.width = width + 'px';
          container.style.height = height + 'px';
        ]]>
        </body>
      </method>
    </implementation>
    <handlers>
      <handler event="mouseover">
        this.handleMouseOver();
      </handler>
      <handler event="mouseout">
        this.handleMouseOut();
      </handler>
    </handlers>
  </binding>

  <binding id="closedTabLink">
    <content>
      <xul:hbox class="faviconSiteLink" flex="1" />
    </content>
    <implementation>
      <method name="draw">
        <parameter name="closedTabData" />
        <parameter name="onClickHandler" />
        <body>
          <![CDATA[
            var faviconUrl = closedTabData.image;
            var text = closedTabData.title;
            var href = closedTabData.state.entries[0].url;
            document.getAnonymousNodes(this)[0].draw(href, text, faviconUrl, onClickHandler);
          ]]>
        </body>
      </method>
    </implementation>
  </binding>

  <binding id="recentBookmarkLink">
    <content>
      <xul:hbox class="faviconSiteLink" flex="1" />
    </content>
    <implementation>
      <method name="draw">
        <parameter name="href" />
        <parameter name="text" />
        <parameter name="faviconUrl" />
        <parameter name="onClickHandler" />
        <body>
          <![CDATA[
            document.getAnonymousNodes(this)[0].draw(href, text, faviconUrl, onClickHandler);
          ]]>
        </body>
      </method>
    </implementation>
  </binding>

  <binding id="faviconSiteLink">
    <content>
      <xul:hbox class="faviconSiteLink" flex="1">
        <xul:image class="favIcon" />
        <xul:label class="customlink" crop="end" flex="1" />
      </xul:hbox>
    </content>
    <implementation>
      <field name="href" />
      <field name="onClick" />
      <method name="draw">
        <parameter name="href" />
        <parameter name="text" />
        <parameter name="faviconUrl" />
        <parameter name="onClickHandler" />
        <body>
          <![CDATA[
            this.href = href;
            this.onClick = onClickHandler;
            document.getAnonymousNodes(this)[0].childNodes[0].src = faviconUrl;
            document.getAnonymousNodes(this)[0].childNodes[1].value = text;
            document.getAnonymousNodes(this)[0].setAttribute("tooltiptext", text);
          ]]>
        </body>
      </method>
      <method name="clickHandler">
        <body>
            if(this.onClick)
                this.onClick();
        </body>
      </method>
    </implementation>
    <handlers>
      <handler event="click" action="this.clickHandler()" />
      <handler event="mouseover" action="window.status=this.href" />
      <handler event="focus" action="window.status=this.href" />
      <handler event="mouseout" action="window.status=''" />
      <handler event="blur" action="window.status=''" />
    </handlers>
  </binding>

  <binding id="searchEngines">
    <resources>
      <stylesheet src="chrome://jumpstart/skin/tabView.css"/>
      <stylesheet src="chrome://jumpstart/skin/xbl.css"/>
      <!--<stylesheet src="chrome://jumpstart/skin/overlay.css"/>-->
    </resources>
    <content>
            <xul:hbox class="searchEngines">
               <xul:spacer flex="1" />
               <xul:arrowscrollbox anonid="searchEnginesContainer" flex="1"></xul:arrowscrollbox>
               <xul:spacer flex="1" />
               <xul:label class="customlink" value="&back;" onclick="loadURI('chrome://jumpstart/content/tabView.xul', null, null, true);" />
            </xul:hbox>
    </content>
    <implementation>
            <constructor>
            <![CDATA[
              if(!this.hasAttribute("term")){
                    return;
              }

              var utils = {};
              Components.utils.import("resource://jumpstart/utils.js", utils);

              function the_search(engineName, searchText, useNewTab) {
                    var ss = Components.classes["@mozilla.org/browser/search-service;1"].
                                     getService(Components.interfaces.nsIBrowserSearchService);

                    var engine = ss.getEngineByName(engineName);
                    if(!engine)return;
                    var submission = engine.getSubmission(searchText, null); // HTML response

                    // getSubmission can return null if the engine doesn't have a URL
                    // with a text/html response type.  This is unlikely (since
                    // SearchService._addEngineToStore() should fail for such an engine),
                    // but let's be on the safe side.
                    if (!submission)
                      return;

                    if (useNewTab) {
                      gBrowser.loadOneTab(submission.uri.spec, null, null,
                                                              submission.postData, null, false);
                    } else
                      loadURI(submission.uri.spec, null, submission.postData, false);
              }

              let searchText = this.getAttribute("term");

              let ss = Components.classes["@mozilla.org/browser/search-service;1"].
                        getService(Components.interfaces.nsIBrowserSearchService);
              let output = {};
              let engines = ss.getEngines(output);

              let container = document.getAnonymousElementByAttribute(this, 'anonid', 'searchEnginesContainer');
              //clear:
              while (container.firstChild) {
                container.removeChild(container.firstChild);
              }

              for(var i = 0; i < output.value; i++){
                var e = engines[i];
                var box = document.createElement("hbox");
                box.setAttribute("class", "faviconSiteLinkBind");
                container.appendChild(box);
                var engineName = e.name;
                box.draw(e.name, e.name, e.iconURI.spec, utils.Binder.bindArguments(this, the_search, engineName, searchText, false));
              }
                        ]]>
            </constructor>
        </implementation>
    </binding>

    <binding id="bookmarksToolbar">
        <content>
                <xul:hbox flex="1"
                      anonid="PlacesToolbar"
                      context="placesContext"
                      onclick="BookmarksEventHandler.onClick(event);"
                      oncommand="BookmarksEventHandler.onCommand(event);"
                      tooltip="bhTooltip"
                      popupsinherittooltip="true">
                  <xul:toolbarbutton class="bookmark-item bookmarks-toolbar-customize"
                                 mousethrough="never"
                                 label="&bar.button;"/>
                  <xul:hbox flex="1">
                    <xul:hbox align="center">
                      <xul:image anonid="PlacesToolbarDropIndicator"
                             class="PlacesToolbarDropIndicator"
                             mousethrough="always"
                             collapsed="true"/>
                    </xul:hbox>
                    <xul:scrollbox orient="horizontal"
                               anonid="PlacesToolbarItems"
                               flex="1"/>
                    <xul:toolbarbutton type="menu"
                                   anonid="PlacesChevron"
                                   class="chevron"
                                   mousethrough="never"
                                   collapsed="true"
                                   tooltiptext="&bar.chevron;"
                                   >
                      <xul:menupopup anonid="PlacesChevronPopup"
                                 placespopup="true"
                                 tooltip="bhTooltip" popupsinherittooltip="true"
                                 context="placesContext"/>
                    </xul:toolbarbutton>
                  </xul:hbox>
                </xul:hbox>
        </content>
        <implementation>
          <constructor>
            <![CDATA[
              var chevron = document.getAnonymousElementByAttribute(this, 'anonid', 'PlacesChevron');
              var toolbar = document.getAnonymousElementByAttribute(this, 'anonid', 'PlacesToolbar');
              chevron.addEventListener('popupshowing', function(event){toolbar._placesView._onChevronPopupShowing(event);}, true);
            ]]>
          </constructor>
        </implementation>
    </binding>


</bindings>

Show details Hide details

Change log

r226 by mlalevic on Jan 13, 2011 Diff

Fixed resources alias from modules to
jumpstart to avoid conflicts with other
extensions

Go to:

Project members, sign in to write a code review

Older revisions

r216 by mlalevic on Dec 6, 2010 Diff

Added Toolbar XBL

r210 by mlalevic on Sep 18, 2010 Diff

Added configuration for notice and
search, fixed styling for custom links

r208 by mlalevic on Sep 17, 2010 Diff

Updated label to use locale

All revisions of this file

File info

Size: 25682 bytes, 653 lines

View raw file

File properties

svn:executable