Made a start on the folder browser control

Added base2 js library

src/Umbraco.Web.UI/Umbraco.Web.UI.csproj

@@ -317,6 +317,7 @@
     <Content Include="umbraco\config\lang\se.xml" />
     <Content Include="umbraco\config\lang\zh.xml" />
     <Content Include="umbraco\controls\Tree\CustomTreeService.asmx" />
+    <Content Include="umbraco\dashboard\MediaDashboardFolderBrowser.ascx" />
     <Content Include="umbraco\developer\RelationTypes\EditRelationType.aspx" />
     <Content Include="umbraco\developer\RelationTypes\Images\Bidirectional.png" />
     <Content Include="umbraco\developer\RelationTypes\Images\ParentToChild.png" />
@@ -349,6 +350,8 @@
     <Content Include="umbraco\webservices\api\MemberService.asmx" />
     <Content Include="umbraco\webservices\api\StylesheetService.asmx" />
     <Content Include="umbraco\webservices\api\TemplateService.asmx" />
+    <Content Include="umbraco_client\FolderBrowser\Css\folderbrowser.css" />
+    <Content Include="umbraco_client\FolderBrowser\Js\folderbrowser.js" />
     <Content Include="umbraco_client\tags\css\jquery.tagsinput.css" />
     <Content Include="umbraco_client\tags\js\jquery.tagsinput.js" />
     <Content Include="umbraco_client\tags\js\jquery.tagsinput.min.js">
@@ -924,6 +927,7 @@
     <Content Include="umbraco\LiveEditing\Modules\SkinModule\js\initcolorpicker.js" />
     <Content Include="umbraco_client\MacroContainer\macroContainer.css" />
     <Content Include="umbraco_client\mousewheel\jquery.mousewheel.js" />
+    <Content Include="umbraco_client\ui\base2.js" />
     <Content Include="umbraco_client\ui\jquery.alphanumeric.js" />
     <Content Include="umbraco_client\ui\jquery.tooltip.min.js" />
     <Content Include="umbraco_client\ui\knockout.js" />
@@ -1799,6 +1803,7 @@
     <Folder Include="masterpages\" />
     <Folder Include="media\" />
     <Folder Include="scripts\" />
+    <Folder Include="umbraco_client\FolderBrowser\Images\" />
     <Folder Include="umbraco_client\tags\images\" />
     <Folder Include="usercontrols\" />
     <Folder Include="xslt\" />

src/Umbraco.Web.UI/config/Dashboard.config

@@ -30,6 +30,11 @@
     <areas>
       <area>media</area>
     </areas>
+    <tab caption="Content">
+      <control showOnce="false" addPanel="false" panelCaption="">
+        /umbraco/dashboard/mediadashboardfolderbrowser.ascx
+      </control>
+    </tab>
     <tab caption="Get Started">
       <control showOnce="true" addPanel="true" panelCaption="">
         /umbraco/dashboard/mediadashboardintro.ascx

src/Umbraco.Web.UI/umbraco/dashboard/MediaDashboardFolderBrowser.ascx

@@ -0,0 +1,4 @@
+<%@ Control Language="C#" AutoEventWireup="true" %>
+<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols.FolderBrowser" Assembly="controls" %>
+
+<umb:FolderBrowser runat="server" />

src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css

@@ -0,0 +1,60 @@
+.umbFolderBrowser {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.umbFolderBrowser .breadcrumb {
+    margin: 20px 20px 15px;
+    padding: 0 0 10px;
+
+    border-bottom: solid 1px #ccc;
+}
+
+.umbFolderBrowser .breadcrumb li {
+    display: inline;
+    padding: 0 5px 0 0;
+    margin: 0;
+}
+
+.umbFolderBrowser .breadcrumb li:after {
+    content: '>';
+}
+
+.umbFolderBrowser .breadcrumb li:last-child:after,
+.umbFolderBrowser .breadcrumb li:first-child:after {
+    content: '';
+}
+
+.umbFolderBrowser .breadcrumb li a {
+    margin-right: 5px;
+}
+
+.umbFolderBrowser .items {
+    margin: 5px 15px;
+    padding: 0;
+}
+
+.umbFolderBrowser .items li {
+    display: block;
+    list-style: none;
+    margin: 5px;
+    padding: 0;
+    background: #f5f5f5;
+    text-align: center;
+    border: solid 1px #ccc;
+    width: 120px;
+    height: 160px;
+    float: left;
+    -moz-box-shadow: 2px 2px 2px #e0e0e0;
+    -webkit-box-shadow: 2px 2px 2px #e0e0e0;
+    box-shadow: 2px 2px 2px #e0e0e0;
+}
+
+.umbFolderBrowser .items li img {
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+}

src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js

@@ -0,0 +1,98 @@
+
+Umbraco.Sys.registerNamespace("Umbraco.Controls");
+
+(function ($, Base) {
+
+    Umbraco.Controls.FolderBrowser = Base.extend({
+        
+        // Private
+        _el: null,
+        _elId: null,
+        _parentId: null,
+        _opts: null,
+        _viewModel: null,
+        
+        // Constructor
+        constructor: function (el, opts) {
+
+            _this = this;
+
+            // Store el info
+            this._el = el;
+            this._elId = el.id;
+
+            // Grab parent id from element
+            this._parentId = $(el).data("parentid");
+
+            // Merge options with default
+            this._opts = $.extend({
+                // Default options go here
+            }, opts);
+
+            // Setup the viewmode;
+            this._viewModel = $.extend({}, {
+                parent: this,
+                panelVisible: ko.observable(true),
+                items: ko.observableArray([]) 
+            });
+
+            // Inject the upload button into the toolbar
+            var button = $("<input id='fbUploadToolbarButton' type='image' src='images/editor/save.gif' onmouseover=\"this.className='editorIconOver'\" onmouseout=\"this.className='editorIcon'\" onmouseup=\"this.className='editorIconOver'\" onmousedown=\"this.className='editorIconDown'\" />");
+            button.click(function(e) {
+                e.preventDefault();
+            });
+            
+            $(".tabpage:first-child .menubar td[id$='tableContainerButtons'] .sl nobr").after(button);
+
+            // Grab children media items
+            this._viewModel.items.push({ name: "test1.jpg" });
+            this._viewModel.items.push({ name: "test2.jpg" });
+            this._viewModel.items.push({ name: "test3.jpg" });
+            this._viewModel.items.push({ name: "test4.jpg" });
+            this._viewModel.items.push({ name: "test5.jpg" });
+            this._viewModel.items.push({ name: "test1.jpg" });
+            this._viewModel.items.push({ name: "test2.jpg" });
+            this._viewModel.items.push({ name: "test3.jpg" });
+            this._viewModel.items.push({ name: "test4.jpg" });
+            this._viewModel.items.push({ name: "test5.jpg" });
+
+            // Bind the viewmodel
+            ko.applyBindings(this._viewModel, el);
+        }
+        
+        // Public
+        
+    });
+    
+    $.fn.folderBrowser = function (o)
+    {
+        if ($(this).length != 1) {
+            throw "Only one folder browser can exist on the page at any one time";
+        }
+
+        return $(this).each(function () {
+            var folderBrowser = new Umbraco.Controls.FolderBrowser(this, o);
+            $(this).data("api", folderBrowser);
+        });
+    };
+    
+    $.fn.folderBrowserApi = function ()
+    {
+        //ensure there's only 1
+        if ($(this).length != 1) {
+            throw "Requesting the API can only match one element";
+        }
+
+        //ensure thsi is a collapse panel
+        if ($(this).data("api") == null) {
+            throw "The matching element had not been bound to a folderBrowser";
+        }
+
+        return $(this).data("api");
+    };
+
+    $(function () {
+        $(".umbFolderBrowser").folderBrowser();
+    });
+
+})(jQuery, base2.Base)