upload process; basic lms styles

cms/static/css/html-editor.css

@@ -33,6 +33,11 @@ h2 {
   text-transform: uppercase;
 }
 
+h3 {
+  font-size: 19px;
+  font-weight: 400;
+}
+
 code {  
   margin: 0 2px;
   padding: 0px 5px;

cms/static/js/base.js

@@ -463,11 +463,25 @@ function displayFinishedUpload(xhr) {
     }
 
     var resp = JSON.parse(xhr.responseText);
-    $('.upload-modal .embeddable-xml-input').val('<img src="' + xhr.getResponseHeader('asset_url') + '"/>');
+    var extension = resp.url.match(/\.([0-9a-z]+)(?:[\?#]|$)/i);
+    var embedMarkup;
+    switch(extension[1]) {
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+            embedMarkup = '<img src="' + xhr.getResponseHeader('asset_url') + '" />';
+            break;
+        default:
+            embedMarkup = '<a href="' + xhr.getResponseHeader('asset_url') + '">' + resp.displayname + '</a>';
+            break;
+    }
+    $('.upload-modal .embeddable-xml-input').val(embedMarkup);
+    $('.asset-library.widget .insert-asset-button').attr('data-markup', embedMarkup);
     $('.upload-modal .embeddable').show();
     $('.upload-modal .file-name').hide();
     $('.upload-modal .progress-fill').html(resp.msg);
-    $('.upload-modal .choose-file-button').html('Load Another File').show();
+    $('.upload-modal .choose-file-button').html('Load Another File').addClass('another').show();
     $('.upload-modal .progress-fill').width('100%');
 
     // see if this id already exists, if so, then user must have updated an existing piece of content

cms/static/js/html-editor.js

@@ -17,13 +17,13 @@ function initHTMLEditor($editor, $prev) {
       theme : "advanced",
       skin: 'studio',      
       
-      // we may want to add "styleselect" when we collect all styles used throught the lms
+      // we may want to add "styleselect" when we collect all styles used throughout the lms
       theme_advanced_buttons1 : "formatselect,bold,italic,underline,bullist,numlist,outdent,indent,blockquote,studio.asset,link,unlink",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "none",
       theme_advanced_resizing : true,
-      theme_advanced_blockformats : "p,code,h2,h3,h4,h5,h6,blockquote",
+      theme_advanced_blockformats : "p,code,h2,h3,blockquote",
       content_css : "/static/css/html-editor.css",
       width: '100%',
       height: '400px',
@@ -32,11 +32,12 @@ function initHTMLEditor($editor, $prev) {
             title : 'Add Asset',
             image : '/static/img/visual-editor-image-icon.png',
             onclick : function() {
-              $assetWidget = $($('#asset-library-widget').html());
-              $assetWidget.find('.close-button').bind('click', closeAssetWidget);
+              $assetWidget = $($('#asset-library-widget').html());              
               $modalCover.unbind('click');
               $modalCover.bind('click', closeAssetWidget);
               $modalCover.css('z-index', '99999');
+              $('.upload-button', $assetWidget).bind('click', uploadFromWidget);
+              $('.close-button', $assetWidget).bind('click', closeAssetWidget);
               $('.insert-asset-button', $assetWidget).bind('click', { editor: ed }, insertAsset);
               $body.append($assetWidget);
             }
@@ -54,6 +55,28 @@ function initHTMLEditor($editor, $prev) {
   $editor.find('.save-button, .cancel-button').bind('click', updateHTMLPreview);
 }
 
+function uploadFromWidget(e) {
+  $('.library', $assetWidget).hide();
+  $('.upload-form', $assetWidget).show();
+  $('.choose-file-button', $assetWidget).bind('click', function(e) {
+      e.preventDefault();
+      $('.file-input', $assetWidget).click();
+      $('.file-input', $assetWidget).bind('change', startUpload);
+  });
+}
+
+function startUploadFromWidget(e) {
+  $('.upload-modal h1').html('Uploading…');
+  $('.upload-modal .file-name').html($('.file-input').val().replace('C:\\fakepath\\', ''));
+  $('.upload-modal .file-chooser').ajaxSubmit({
+      beforeSend: resetUploadBar,
+      uploadProgress: showUploadFeedback,
+      complete: displayFinishedUpload
+  });
+  $('.upload-modal .choose-file-button').hide();
+  $('.upload-modal .progress-bar').removeClass('loaded').show();
+}
+
 function insertAsset(e) {
   closeAssetWidget();
   var editor = e.data.editor;

cms/static/sass/_assets.scss

@@ -37,6 +37,12 @@
 		@include blue-button;
 		padding: 10px 82px 12px;
 		font-size: 17px;
+
+    &.another {
+      @include white-button;
+      padding: 6px 22px 8px;
+      font-size: 13px;
+    }
 	}
 
 	.progress-bar {
@@ -149,7 +155,7 @@
       margin-top: 2px;
       background-color: #fff;
       background-position: 12px 8px;
-      font-size: 14px;
+      font-size: 13px;
     }
 
     .thumb-col {
@@ -198,6 +204,21 @@
 
     .upload-form {
       display: none;
+      width: auto !important;
+      margin: 60px 30px 80px !important;
+      text-align: center;
+
+      h1 {
+        float: none;
+        font-size: 34px;
+        font-weight: 300;
+        text-align: center;
+      }
+
+      .insert-asset-button {
+        padding: 8px 40px 10px;
+        font-size: 17px;
+      }
     }
   }
 
@@ -258,11 +279,6 @@
       width: 100px;
     }
 
-    .insert-asset-button {
-      @include blue-button;
-      font-size: 12px;
-    }
-
     .embeddable-xml-input {
       @include box-shadow(none);
       width: 100%;
@@ -279,6 +295,11 @@
     }
   }
 
+  .insert-asset-button {
+    @include blue-button;
+    font-size: 12px;
+  }
+
   .pagination {
     float: right;
     margin: 15px 10px;

cms/static/sass/_lms.scss

+.components li {
+  font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #3c3c3c;
+
+  a {
+    color: #1d9dd9;
+    text-decoration: none;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 1.6;
+  }
+
+  h2 {
+    color: #646464;
+    font-size: 19px;
+    font-weight: 300;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+  }
+
+  h3 {
+    font-size: 19px;
+    font-weight: 400;
+  }
+
+  code {  
+    margin: 0 2px;
+    padding: 0px 5px;
+    border-radius: 3px;
+    border: 1px solid #eaeaea;
+    white-space: nowrap;
+    font-family: Monaco, monospace;
+    font-size: 14px;
+    background-color: #f8f8f8;
+  }
+
+  p + h2, ul + h2, ol + h2, p + h3 {
+    margin-top: 40px;
+  }
+
+  p + p, ul + p, ol + p {
+    margin-top: 20px;
+  }
+
+  p {
+    color: #3c3c3c;
+    font: normal 1em/1.6em;
+    margin: 0px;
+  }
+}
\ No newline at end of file

cms/static/sass/_unit.scss

@@ -40,14 +40,14 @@
     }
   }
 
-  h2 {
-    margin: 30px 0;
-    color: #646464;
-    font-size: 19px;
-    font-weight: 300;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-  }
+  // h2 {
+  //   margin: 30px 0;
+  //   color: #646464;
+  //   font-size: 19px;
+  //   font-weight: 300;
+  //   letter-spacing: 1px;
+  //   text-transform: uppercase;
+  // }
 
   .components {
     > li {

cms/static/sass/base-style.scss

@@ -24,9 +24,10 @@
 @import "modal";
 @import "alerts";
 @import "login";
+@import "lms";
 @import 'jquery-ui-calendar';
 
 @import 'content-types';
 
 @import 'module/module-styles.scss';
-@import 'descriptor/module-styles.scss';
+@import 'descriptor/module-styles.scss';
\ No newline at end of file