Difference: AjaxWebSelector (r2 vs. r1)

r2 - 10 Jan 2013 - 17:08 - AdminUser

r1 - 10 Jan 2013 - 17:08 - UnknownUser

AjaxWebSelector

On this page:

Error: no such plugin chili

Webs

%STARTSECTION{"webs"}%

%FLEXWEBLIST{
  subwebs="none"
  header="[{"
  format="$n$indent   id:'$web',$n$indent   name:'$name',$n$indent   parent:'$parent',$n$indent   depth: $depth,$n$indent   color:'$color',$n$indent   description:'$sitemapuseto',$n$indent   nrsubwebs: $nrsubwebs,$n$indent   url: '$url'$n$indent" 
  subheader=",   subwebs:$n$indent   [{"
  separator="},{" 
  subseparator="},{" 
  subfooter="}]$n$indent"
  footer="}]$n"
}%

%ENDSECTION{"webs"}%

%STARTSECTION{"webs"}%

%FLEXWEBLIST{
  subwebs="none"
  header="[{"
  format="$n$indent   id:'$web',$n$indent   name:'$name',$n$indent   parent:'$parent',$n$indent   depth: $depth,$n$indent   color:'$color',$n$indent   description:'$sitemapuseto',$n$indent   nrsubwebs: $nrsubwebs,$n$indent   url: '$url'$n$indent" 
  subheader=",   subwebs:$n$indent   [{"
  separator="},{" 
  subseparator="},{" 
  subfooter="}]$n$indent"
  footer="}]$n"
}%

%ENDSECTION{"webs"}%

Webselector

%STARTINCLUDE%
%JQREQUIRE{"gradient"}% %JQREQUIRE{"simplemodal"}%



---++ Select a web

  
    
    
    
  
  
    %BUTTON{"Go" icon="page_white_go" id="webGo"}%
  




%STOPINCLUDE%

%STARTINCLUDE%
%JQREQUIRE{"gradient"}% %JQREQUIRE{"simplemodal"}%



---++ Select a web

  
    
    
    
  
  
    %BUTTON{"Go" icon="page_white_go" id="webGo"}%
  




%STOPINCLUDE%

Webselector.css


.weblet {
  float:left;
  padding:10px;
  margin:0px 10px 10px 0px;
  border:1px solid #ddd;
  width:100px;
  height:100px;
  position:relative;
  font-size:95%;
  overflow:hidden;
}
.weblet h2 {
  margin:0px;
  border:0px;
}
.weblet .parent {
  font-size:95%;
  font-style:italic;
}
.weblet .desc {
  margin-top:0.1em;
}
.weblet .more {
  margin-top:0.1em;
}
.weblet .more a {
  text-decoration:none;
}
#weblist .container {
  margin-top:10px;
  width:550px;
  height:390px;
  overflow-x:hidden;
  overflow-y:auto;
}
.weblet h2 {
  margin-top:0px;
  font-size:105%;
  font-weight:bold;
  color:#222;
}
.weblet.selected {
  border:1px solid red;
}


.weblet {
  float:left;
  padding:10px;
  margin:0px 10px 10px 0px;
  border:1px solid #ddd;
  width:100px;
  height:100px;
  position:relative;
  font-size:95%;
  overflow:hidden;
}
.weblet h2 {
  margin:0px;
  border:0px;
}
.weblet .parent {
  font-size:95%;
  font-style:italic;
}
.weblet .desc {
  margin-top:0.1em;
}
.weblet .more {
  margin-top:0.1em;
}
.weblet .more a {
  text-decoration:none;
}
#weblist .container {
  margin-top:10px;
  width:550px;
  height:390px;
  overflow-x:hidden;
  overflow-y:auto;
}
.weblet h2 {
  margin-top:0px;
  font-size:105%;
  font-weight:bold;
  color:#222;
}
.weblet.selected {
  border:1px solid red;
}

Webselector.js


(function($) {
webSelector = {
   show: function() {
    $("#weblist").modal({
      persist:true, 
      onShow: webSelector.init
    });
    $(window).trigger("resize");
    return false;
  },

  spaceOutWikiWord: function(wikiWord) {
    return wikiWord.replace(/([a-z])([A-Z0-9]+)/g, "$1 $2");
  },

  addWeblets: function(webs, $container) {
    for (var i in webs) {
      var web = webs[i];
      var color = web.color;
      if (color == '') 
        color = 'dddddd';
      color = color.replace(/#/g, '');
      var webName = webSelector.spaceOutWikiWord(web.name);

      var $weblet = $(""+
        ""+webName+""+
        (web.parent?" In "+web.parent+"":"")+
        ""+web.description+""+
        (web.nrsubwebs?"more »":"")+
        ""+
        ""+
        "").
        appendTo($container);
      $weblet.gradient({to:'ffffff', from:color});
      webSelector.addWeblets(web.subwebs, $container);
    }
  },

  selectWeblet: function(elem) {
    var webId = '', webName= '', webUrl = '';
    if (elem) {
      if ($(elem).hasClass("selected")) {
        return webSelector.goWeb();
      }
      webId = $(elem).attr('id');
      webName = $(elem).find("input[name=webName]").val();
      webUrl = $(elem).find("input[name=webUrl]").val();    
    }
    $("#webId").val(webId);
    $("#webName").val(webName);
    $("#webUrl").val(webUrl);
    $("#weblist .weblet").removeClass("selected");
    if (elem)
      $(elem).addClass("selected");
  },

  goWeb: function() {
    var webUrl = $("#webUrl").val();
    if (webUrl) {
      window.location.href = webUrl;
    }
    return false;
  },

  init: function() {
    if (typeof(webSelector.webs) == 'undefined') {
      var $container = $("#weblist .container");
      var url = "%SCRIPTURL{view}%/%WEB%/%TOPIC%?section=webs;skin=text;contenttype=text/plain";
      $.getJSON(url, function(data) {
        webSelector.webs = data;
        webSelector.addWeblets(data, $container);
        $(".weblet").click(function() {
          webSelector.selectWeblet(this);
        });
        $("#webGo").click(webSelector.goWeb);
      });

      $("#webName").keyup(function(e) {
        var webName = $(this).val();
        var count = 0;
        var foundWeblet;
        if (webName) {
          $(".weblet").each(function() {
            var thisName = $(this).find("input[name=webName]").val();
            if (thisName.indexOf(webName) == 0) {
              $(this).show();
              count++;
              foundWeblet = this;
            } else {
              $(this).hide();
            }
          });
        } else {
          $(".weblet").show();
          webSelector.selectWeblet();
        }
        if (count == 1 && e.which == 13) {
          webSelector.selectWeblet(foundWeblet);
          webSelector.goWeb();
        }
      });
    }

    window.setTimeout(function() {
      $("#webName").focus();
    }, 100);
  }
}
})(jQuery);


(function($) {
webSelector = {
   show: function() {
    $("#weblist").modal({
      persist:true, 
      onShow: webSelector.init
    });
    $(window).trigger("resize");
    return false;
  },

  spaceOutWikiWord: function(wikiWord) {
    return wikiWord.replace(/([a-z])([A-Z0-9]+)/g, "$1 $2");
  },

  addWeblets: function(webs, $container) {
    for (var i in webs) {
      var web = webs[i];
      var color = web.color;
      if (color == '') 
        color = 'dddddd';
      color = color.replace(/#/g, '');
      var webName = webSelector.spaceOutWikiWord(web.name);

      var $weblet = $(""+
        ""+webName+""+
        (web.parent?" In "+web.parent+"":"")+
        ""+web.description+""+
        (web.nrsubwebs?"more »":"")+
        ""+
        ""+
        "").
        appendTo($container);
      $weblet.gradient({to:'ffffff', from:color});
      webSelector.addWeblets(web.subwebs, $container);
    }
  },

  selectWeblet: function(elem) {
    var webId = '', webName= '', webUrl = '';
    if (elem) {
      if ($(elem).hasClass("selected")) {
        return webSelector.goWeb();
      }
      webId = $(elem).attr('id');
      webName = $(elem).find("input[name=webName]").val();
      webUrl = $(elem).find("input[name=webUrl]").val();    
    }
    $("#webId").val(webId);
    $("#webName").val(webName);
    $("#webUrl").val(webUrl);
    $("#weblist .weblet").removeClass("selected");
    if (elem)
      $(elem).addClass("selected");
  },

  goWeb: function() {
    var webUrl = $("#webUrl").val();
    if (webUrl) {
      window.location.href = webUrl;
    }
    return false;
  },

  init: function() {
    if (typeof(webSelector.webs) == 'undefined') {
      var $container = $("#weblist .container");
      var url = "%SCRIPTURL{view}%/%WEB%/%TOPIC%?section=webs;skin=text;contenttype=text/plain";
      $.getJSON(url, function(data) {
        webSelector.webs = data;
        webSelector.addWeblets(data, $container);
        $(".weblet").click(function() {
          webSelector.selectWeblet(this);
        });
        $("#webGo").click(webSelector.goWeb);
      });

      $("#webName").keyup(function(e) {
        var webName = $(this).val();
        var count = 0;
        var foundWeblet;
        if (webName) {
          $(".weblet").each(function() {
            var thisName = $(this).find("input[name=webName]").val();
            if (thisName.indexOf(webName) == 0) {
              $(this).show();
              count++;
              foundWeblet = this;
            } else {
              $(this).hide();
            }
          });
        } else {
          $(".weblet").show();
          webSelector.selectWeblet();
        }
        if (count == 1 && e.which == 13) {
          webSelector.selectWeblet(foundWeblet);
          webSelector.goWeb();
        }
      });
    }

    window.setTimeout(function() {
      $("#webName").focus();
    }, 100);
  }
}
})(jQuery);

Test

Goto webspace

I	Attachment	Action	Size	Date	Who	Comment
css	webselector.css	manage	0.6 K	06 Nov 2009 - 00:04	ProjectContributor
js	webselector.js	manage	3.1 K	06 Nov 2009 - 00:04	ProjectContributor

I	Attachment	Action	Size	Date	Who	Comment
css	webselector.css	manage	0.6 K	06 Nov 2009 - 00:04	ProjectContributor
js	webselector.js	manage	3.1 K	06 Nov 2009 - 00:04	ProjectContributor

r2 - 10 Jan 2013 - 17:08 - AdminUser

r1 - 10 Jan 2013 - 17:08 - UnknownUser

View topic | View difference interwoven | History: r2 < r1 | More topic actions

Revision r2 - 10 Jan 2013 - 17:08 - AdminUser
Revision r1 - 10 Jan 2013 - 17:08 - UnknownUser

Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback