jsharmony-cms 1.3.0 → 1.5.1

package/clientjs/component/componentModel/dataModelTemplate_gridPreview.js

@@ -115,7 +115,9 @@ DataModelTemplate_GridPreview.prototype.buildTemplate = function(componentTempla
   model.oncommit =  '_this.onCommit(xmodel, rowid, callback);';
   model.ejs =  '';
   model.sort = { [this._sequenceFieldName]: 'asc' };
-  model.oninit = "jsh.$root('.xform'+xmodel.class).before('<div class=\"dataGridEditor_instructions\"><span style=\"font-size:1.3em;position:relative;top:1px;margin-right:2px;margin-left:4px;\">&#x1f6c8;</span> Add, edit, and re-order items using the icons :: Double-click to edit</div>');";
+  model.oninit = [
+    "jsh.$root('.xform'+xmodel.class).before('<div class=\"dataGridEditor_instructions\"><span style=\"font-size:1.3em;position:relative;top:1px;margin-right:2px;margin-left:4px;\">&#x1f6c8;</span> Add, edit, and re-order items using the icons <span class=\"dataGridEditor_instructions_doubleClick\">:: Double-click to edit</span></div>');",
+  ].join(' ');
   model.rowclass = "<%=xejs.iif(rowid==0,'first')%>";
   model.tableclass = ((model.tableclass||'')+' '+(componentConfig&&componentConfig.options&&componentConfig.options.component_preview_size=='collapse'?'jsharmony_cms_component_preview_collapse':'jsharmony_cms_component_preview_expand')).trim();
   this._jsh.XPage.ParseModelDefinition(model, null, null, { ignoreErrors: true });

package/clientjs/component/templateRenderer.js

@@ -111,6 +111,8 @@ TemplateRenderer.render = function(config, type, jsh, cms, componentConfig, addi
     isInEditor: true,
     isInPageEditor: true,
     isInComponentEditor: ((type=='gridRowDataPreview') || (type=='gridItemPreview')),
+    componentRenderClass: 'jsharmony_cms_componentRender_'+jsh.XExt.escapeCSSClass((componentConfig&&componentConfig.id)||'')+'_'+cms.componentManager.getUniqueId().toString(),
+    getMediaThumbnails: function(url){ return cms.componentManager.getMediaThumbnails(url); },
     renderPlaceholder: renderPlaceholder,
   }, additionalRenderParams));
   

package/clientjs/jsHarmonyCMS.ComponentManager.js

@@ -34,6 +34,8 @@ exports = module.exports = function(jsh, cms){
   this.containerlessComponents = {};
   this.cntContainerlessComponents = 0;
 
+  var maxUniqueId = 0;
+
   this.load = function(onError){
     _this.loadSystemComponentTemplates(onError);
   }
@@ -375,6 +377,8 @@ exports = module.exports = function(jsh, cms){
       isInEditor: true,
       isInPageEditor: false,
       isInComponentEditor: false,
+      componentRenderClass: 'jsharmony_cms_componentRender_'+XExt.escapeCSSClass((component&&component.id)||'')+'_'+cms.componentManager.getUniqueId().toString(),
+      getMediaThumbnails: function(url){ return cms.componentManager.getMediaThumbnails(url); },
       items: data.items,
       item: data.item,
       component: properties,
@@ -401,4 +405,24 @@ exports = module.exports = function(jsh, cms){
     }
     return rslt;
   }
+
+  this.getUniqueId = function(){ return ++maxUniqueId; }
+
+  this.getMediaThumbnails = function(url){
+    if(!cms.site_config || !cms.site_config.media_thumbnails) return {};
+    if(!url || (url.indexOf('#@JSHCMS') < 0)) return {};
+    
+    var urlparts = document.createElement('a');
+    urlparts.href = url;
+    var patharr = (urlparts.pathname||'').split('/');
+    var rslt = {};
+    if(((urlparts.pathname||'').indexOf('/_funcs/media/')==0) && (patharr.length>=4)){
+      for(var thumbnail_id in cms.site_config.media_thumbnails){
+        if((patharr.length >= 5) && patharr[4]) patharr[4] = thumbnail_id;
+        else patharr.splice(4,0,thumbnail_id);
+        rslt[thumbnail_id] = urlparts.protocol + '//' + urlparts.host + patharr.join('/') + (urlparts.search||'') + (urlparts.hash||'');
+      }
+    }
+    return rslt;
+  }
 }

package/clientjs/jsHarmonyCMS.Editor.js

@@ -83,6 +83,9 @@ exports = module.exports = function(jsh, cms, toolbarContainer){
         ],
         contextmenu: 'jsharmonycmscomponentcontextmenu link linkchecker image imagetools table spellchecker configurepermanentpen',
         toolbar: 'formatselect | backcolor forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link  image charmapmaterialicons table fullscreen | jsHarmonyCmsWebSnippet | jsHarmonyCmsComponent | jsHarmonyCmsView | jsHarmonyCmsEndEdit',
+        mobile: {
+          toolbar_mode: 'floating',
+        },
         removed_menuitems: 'newdocument',
         image_advtab: true,
         menu: {

package/doc/site_config.json

@@ -13,11 +13,36 @@
   "template_variables": {                           // Default values for Template Variables
     "key": "value"
   },
+
+  //Media thumbnail configuration
   "media_thumbnails": {
+    "thumbnail_id": {
+      //(Optional) Resize thumbnail to fit within target width and height
+      "resize": [150, 150],  // [width, height]
+
+      //(Optional) Crop thumbnail to target width and height
+      "crop": [150, 150],  // [width, height]
+
+      //(Optional) Resample thumbnail to target format (jpg, png, gif, tif)
+      "format": "jpg",
+
+      //(Optional) Export thumbnail on publish, as filename.thumbnail_id.extension
+      "export": true,
+
+      //(Optional) Add as an srcset responsive breakpoint to IMG tags in published content
+      //  If set to a string, the value will be used as the srcset condition, ex. "1x" "2x" "2048w"
+      //  If set to true, the thumbnail width will be used as the srcset condition, ex "150w"
+      "responsive": true,
+    },
+
+    //Default Thumbnails
     "file_tile": { "resize": [150, 150], "format": "jpg" },
     "file_preview": { "resize": [300, 300], "format": "jpg" },
-    "small": { "resize": [512, 384], "export": true },
-    "medium": { "resize": [1024, 768], "export": true },
-    "large": { "resize": [2048, 1538] }
+    "small": { "resize": [512, 384] },
+    "medium": { "resize": [1024, 768] },
+    "large": { "resize": [2048, 1538] },
+
+    //(Optional) Set a maximum image size for uploaded media
+    "maximum": { "resize": [2048, 1538] }
   }
 }

package/jsHarmonyCMSConfig.js

@@ -58,7 +58,7 @@ function jsHarmonyCMSConfig(){
     serverHttpsCa: undefined,   // path/to/https-ca.pem
   };
 
-  this.media_thumbnails = {
+  this.media_thumbnails = {  //Media thumbnail configuration.  See site_config.json for options
     file_tile: { resize: [150, 150], format: "jpg" },
     file_preview: { resize: [300, 300], format: "jpg" },
     small: { resize: [512, 384] },

package/models/Dashboard_BranchOverview.css

@@ -14,6 +14,9 @@
   padding-right:19px;
   white-space:nowrap;
 }
+.xform<%=model.class%> th a {
+  color:#555;
+}
 .xform<%=model.class%> td {
   font-family: 'PT Sans', arial, helvetica, sans-serif;
   font-size:1.2em;

package/models/Dashboard_BranchOverview.ejs

@@ -30,7 +30,7 @@
   <%% } %%>
   <%% _.each(cur_branch && branch_data, function(branch_item){ if(branch_item.code_val=='branch') return; %%>
     <tr>
-      <th valign="bottom">&nbsp;&nbsp;<%%=branch_item.code_txt%%></th>
+      <th valign="bottom">&nbsp;&nbsp;<a href="<%%=jsh.globalparams.branch_items[branch_item.code_val].editor_url%%>"><%%=branch_item.code_txt%%></a></th>
       <td valign="bottom">
         <%%=branch_item.cnt%%>
       </td>

package/models/_funcs.branch.js

@@ -629,14 +629,14 @@ module.exports = exports = function(module, funcs){
           //Replace URLs
           function replaceURLs(content, options){
             var rslt = funcs.replaceBranchURLs(content, _.extend({ replaceComponents: true }, options, {
-              getMediaURL: function(media_key, _branchData, getLinkContent){
+              getMediaURL: function(media_key, thumbnail_id, _branchData, getLinkContent){
                 var orig_media_key = media_key;
                 var media_file_id = media_key;
                 if(branchData.media_mapping[orig_media_key]){
                   media_key = branchData.media_mapping[orig_media_key].new_media_id;
                   media_file_id = branchData.media_mapping[orig_media_key].new_media_file_id || media_key;
                 }
-                return branchData._baseurl+'_funcs/media/'+media_key+'/?media_file_id='+media_file_id+'#@JSHCMS';
+                return branchData._baseurl+'_funcs/media/'+media_key+(thumbnail_id?'/'+thumbnail_id:'')+'/?media_file_id='+media_file_id+'#@JSHCMS';
               },
               getPageURL: function(page_key){
                 var orig_page_key = page_key;

package/models/_funcs.component.js

@@ -659,9 +659,11 @@ module.exports = exports = function(module, funcs){
       isInEditor: false,
       isInPageEditor: false,
       isInComponentEditor: false,
+      componentRenderClass: 'jsharmony_cms_componentRender_'+Helper.escapeCSSClass((renderOptions.templateName)||'')+'_'+((branchData && branchData.component_getUniqueId && branchData.component_getUniqueId())||'').toString(),
       items: [],
       item: {},
       component: properties,
+      getMediaThumbnails: function(url){ return funcs.getMediaThumbnails(url, branchData); },
       renderPlaceholder: function(){ return ''; },
       renderTemplate: function(locals, templateName, items){
         if(!items || (_.isArray(items) && !items.length)) return '';

package/models/_funcs.deploy.js

@@ -119,17 +119,19 @@ module.exports = exports = function(module, funcs){
     return page_fpath;
   }
 
-  exports.getMediaRelativePath = function(media, publish_params, thumbnail_name){
+  exports.getMediaRelativePath = function(media, publish_params, thumbnail_id, thumbnail_config){
     var media_fpath = media.media_path||'';
     if(!media_fpath) return '';
     while(media_fpath.substr(0,1)=='/') media_fpath = media_fpath.substr(1);
 
-    if(thumbnail_name){
+    if(thumbnail_id){
       var lastDot = media_fpath.lastIndexOf('.');
       var lastSlash = Math.max(media_fpath.lastIndexOf('/'),media_fpath.lastIndexOf('\\'));
-      if((lastDot < 0) || (lastDot < lastSlash)) media_fpath += '.'+thumbnail_name;
+      if((lastDot < 0) || (lastDot < lastSlash)) media_fpath += '.'+thumbnail_id;
       else {
-        media_fpath = media_fpath.substr(0, lastDot) + '.' + thumbnail_name + media_fpath.substr(lastDot);
+        media_fpath = media_fpath.substr(0, lastDot) +
+          '.' + thumbnail_id +
+          ((thumbnail_config && thumbnail_config.format) ? '.' + thumbnail_config.format : media_fpath.substr(lastDot));
       }
     }
 
@@ -142,6 +144,36 @@ module.exports = exports = function(module, funcs){
     return media_fpath;
   }
 
+  exports.getMediaThumbnails = function(url, branchData){
+    if(!branchData || !branchData.media_items || !branchData.site_config || !branchData.site_config.media_thumbnails) return {};
+    if(!url || (url.indexOf('#@JSHCMS') < 0)) return {};
+    var urlparts = null;
+    try{
+      urlparts = urlparser.parse(url, true);
+    }
+    catch(ex){
+      return {};
+    }
+    if(!urlparts.pathname) return {};
+    var patharr = (urlparts.pathname||'').split('/');
+
+    var rslt = {};
+    if((urlparts.pathname.indexOf('/_funcs/media/')==0) && (patharr.length>=4)){
+      var media_key = patharr[3];
+      if(!(media_key in branchData.media_items)) return {};
+      var media = branchData.media_items[media_key];
+      for(var thumbnail_id in branchData.site_config.media_thumbnails){
+        var thumbnail_config = branchData.site_config.media_thumbnails[thumbnail_id];
+        if(!thumbnail_config || !thumbnail_config.export) continue;
+        if(!_.includes(['.jpg','.jpeg','.tif','.tiff','.png','.gif','.svg'], media.media_ext)) continue;
+        if((patharr.length >= 5) && patharr[4]) patharr[4] = thumbnail_id;
+        else patharr.splice(4,0,thumbnail_id);
+        rslt[thumbnail_id] = urlparts.protocol + '//' + urlparts.host + patharr.join('/') + (urlparts.search||'') + (urlparts.hash||'');
+      }
+    }
+    return rslt;
+  }
+
   exports.downloadLocalTemplates = function(branchData, templates, template_html, options, download_cb){
     options = _.extend({ templateType: 'PAGE', exportTemplates: {} }, options);
 
@@ -592,6 +624,8 @@ module.exports = exports = function(module, funcs){
           deployment.publish_params = publish_params;
 
           //Branch Data
+          var component_maxUniqueId = 0;
+          var component_maxUniqueIdSalt = crypto.randomBytes(16).toString('hex');
           var branchData = {
             publish_params: publish_params,
             template_variables: template_variables,
@@ -612,8 +646,10 @@ module.exports = exports = function(module, funcs){
             component_templates: null,
             component_template_html: {},
             component_export_template_html: {},
+            component_getUniqueId: function(){ return crypto.createHash('md5').update(component_maxUniqueIdSalt+'.'+(++component_maxUniqueId).toString()).digest("hex"); },
 
             media_keys: {},
+            media_items: {},
 
             menus: {},
             menu_template_html: {},
@@ -1289,7 +1325,7 @@ module.exports = exports = function(module, funcs){
 
     //Get list of all media_keys
     var sql = 'select \
-      m.media_key,media_file_id,media_path \
+      m.media_key,media_file_id,media_path,media_width,media_height,media_ext \
       from '+(module.schema?module.schema+'.':'')+'media m \
       inner join '+(module.schema?module.schema+'.':'')+'branch_media bm on bm.media_id = m.media_id\
       inner join '+(module.schema?module.schema+'.':'')+'deployment d on d.branch_id = bm.branch_id and d.deployment_id=@deployment_id\
@@ -1311,7 +1347,10 @@ module.exports = exports = function(module, funcs){
         }
         catch(ex){ }
 
-        if(media_urlpath) branchData.media_keys[media.media_key] = media_urlpath;
+        if(media_urlpath){
+          branchData.media_keys[media.media_key] = media_urlpath;
+          branchData.media_items[media.media_key] = media;
+        }
       });
       return cb();
     });
@@ -1416,10 +1455,12 @@ module.exports = exports = function(module, funcs){
                 //Additional parameters for static render
                 page: clientPage.page,
                 template: clientPage.template,
+
                 sitemap: clientPage.sitemap,
                 getSitemapURL: function(sitemap_item){ return funcs.getSitemapUrl(sitemap_item, branchData); },
                 menu: null,
                 getMenuURL: function(menu_item){ return funcs.getMenuUrl(menu_item, branchData); },
+
                 include: includePage,
               }
               if(renderOptions.menu_tag){
@@ -1465,9 +1506,14 @@ module.exports = exports = function(module, funcs){
                 include: includePage,
               });
               renderedContent = funcs.applyRenderTags(renderedContent, { page: ejsparams.page });
+              renderedContent = funcs.applyResponsiveImg(renderedContent, branchData.site_config.media_thumbnails, branchData.media_items);
               var replaceBranchURLsParams = {
-                getMediaURL: function(media_key){
+                getMediaURL: function(media_key, thumbnail_id){
                   if(!(media_key in branchData.media_keys)) throw new Error('Page '+page.page_path+' links to missing Media ID # '+media_key.toString());
+                  if(thumbnail_id){
+                    if(!(branchData.site_config.media_thumbnails && branchData.site_config.media_thumbnails[thumbnail_id])) throw new Error('Page '+page.page_path+', Media #'+media_key.toString()+' links to invalid Thumbnail ID: '+thumbnail_id);
+                    return funcs.appendThumbnail(branchData.media_keys[media_key], thumbnail_id, branchData.site_config.media_thumbnails && branchData.site_config.media_thumbnails[thumbnail_id]);
+                  }
                   return branchData.media_keys[media_key];
                 },
                 getPageURL: function(page_key){
@@ -1589,7 +1635,7 @@ module.exports = exports = function(module, funcs){
       _.each(renderParams.menu.items, function(menu_item){ menu_item.selected = false; });
     }
 
-    var rslt = funcs.renderComponent(branchData.component_export_template_html[template_name][exportIndex] || '', null, renderOptions, renderParams);
+    var rslt = funcs.renderComponent(branchData.component_export_template_html[template_name][exportIndex] || '', branchData, renderOptions, renderParams);
     if(exportItem.export_path){
       branchData.fsOps.addFile(branchData.fsOps.getValidFilePath(exportItem.export_path), rslt);
     }
@@ -1787,24 +1833,24 @@ module.exports = exports = function(module, funcs){
           },
           //Export thumbnails
           function(generate_cb){
-            async.eachOfSeries(branchData.site_config.media_thumbnails, function(thumbnail_config, thumbnail_name, thumbnail_cb){
+            async.eachOfSeries(branchData.site_config.media_thumbnails, function(thumbnail_config, thumbnail_id, thumbnail_cb){
               if(!thumbnail_config || !thumbnail_config.export) return thumbnail_cb();
-              if(!_.includes(['.jpg','.jpeg','.tif','.tiff','.png','.gif','.svg'], media.media_ext)) return cb();
+              if(!_.includes(['.jpg','.jpeg','.tif','.tiff','.png','.gif','.svg'], media.media_ext)) return thumbnail_cb();
 
-              funcs.getMediaFile(media.media_file_id, media.media_filename, media.media_ext, thumbnail_name, thumbnail_config, function(err, thumbnail_srcpath, stat){
-                if(err) return thumbnail_cb('Error getting thumbnail for '+media_fpath+':'+thumbnail_name+' - '+err.toString());
+              funcs.getMediaFile(media.media_file_id, media.media_filename, media.media_ext, thumbnail_id, thumbnail_config, function(err, thumbnail_srcpath, thumbnail_fname, stat){
+                if(err) return thumbnail_cb('Error getting thumbnail for '+media_fpath+':'+thumbnail_id+' - '+err.toString());
                 
                 fs.readFile(thumbnail_srcpath, null, function(err, thumbnail_content){
                   if(err) return thumbnail_cb(err);
     
                   var thumbnail_fpath = '';
                   try{
-                    thumbnail_fpath = funcs.getMediaRelativePath(media, publish_params, thumbnail_name);
+                    thumbnail_fpath = funcs.getMediaRelativePath(media, publish_params, thumbnail_id, thumbnail_config);
                   }
                   catch(ex){
                     return thumbnail_cb(ex);
                   }
-                  if(!thumbnail_fpath) return thumbnail_cb(new Error('Thumbnail deployment path could not be generated for: '+media.media_fpath+':'+thumbnail_name));
+                  if(!thumbnail_fpath) return thumbnail_cb(new Error('Thumbnail deployment path could not be generated for: '+media.media_fpath+':'+thumbnail_id));
     
                   branchData.site_files[thumbnail_fpath] = {
                     md5: crypto.createHash('md5').update(thumbnail_content).digest("hex")

package/models/_funcs.deployment_target.js

@@ -888,6 +888,11 @@ module.exports = exports = function(module, funcs){
           }
           else {
             wc.req(op.params[0], 'GET', {}, {}, undefined, function(err, res, templateContent){
+              if(err){
+                if((err.code=='DEPTH_ZERO_SELF_SIGNED_CERT')||(err.code=='SELF_SIGNED_CERT_IN_CHAIN')||(err.message=='self signed certificate')){
+                  err.message = 'Self-signed certificate found for URL: '+op.params[0] + ' :: Select the "Ignore certificate errors when downloading remote templates" option in the Deployment Target configuration to allow self-signed certificates.';
+                }
+              }
               op.params[1](err, res, templateContent, op.done);
             }, { rejectUnauthorized: !publish_config.ignore_remote_template_certificate });
           }

package/models/_funcs.media.js

@@ -29,22 +29,22 @@ module.exports = exports = function(module, funcs){
   var exports = {};
   var _t = module._t, _tN = module._tN;
 
-  exports.getMediaFilename = function(media_file_id, media_ext, thumbnail_name, thumbnail_config){
+  exports.getMediaFilename = function(media_file_id, media_ext, thumbnail_id, thumbnail_config){
     var fname = media_file_id.toString();
-    if(thumbnail_name) fname += '.' + thumbnail_name;
+    if(thumbnail_id) fname += '.' + thumbnail_id;
     else if(thumbnail_config && thumbnail_config.resize){
       fname += '.custom.'+(thumbnail_config.resize[0]||'').toString()+'x'+(thumbnail_config.resize[1]||'').toString();
     }
     else if(thumbnail_config) throw new Error('Unsupported media file name: '+JSON.stringify(thumbnail_config));
-    fname += media_ext;
+    fname += ((thumbnail_config && thumbnail_config.format) ? '.' + thumbnail_config.format : media_ext);
     return path.join(path.join(module.jsh.Config.datadir,'media'),fname);
   }
 
-  exports.getMediaFile = function(media_file_id, media_filename, media_ext, thumbnail_name, thumbnail_config, callback){
+  exports.getMediaFile = function(media_file_id, media_filename, media_ext, thumbnail_id, thumbnail_config, callback){
     var jsh = module.jsh;
 
     var srcpath = funcs.getMediaFilename(media_file_id, media_ext);
-    var fpath = funcs.getMediaFilename(media_file_id, media_ext, thumbnail_name, thumbnail_config);
+    var fpath = funcs.getMediaFilename(media_file_id, media_ext, thumbnail_id, thumbnail_config);
     var fname = path.basename(media_filename);
 
     if(thumbnail_config && thumbnail_config.format){
@@ -54,7 +54,7 @@ module.exports = exports = function(module, funcs){
 
     var transformMedia = function(transform_callback){
       if('resize' in thumbnail_config) jsh.Extensions.image.resize(srcpath, fpath, thumbnail_config.resize, thumbnail_config.format, transform_callback);
-      else if('crop' in thumbnail_config) jsh.Extensions.image.crop(srcpath, fpath, thumbnail_config.format, transform_callback);
+      else if('crop' in thumbnail_config) jsh.Extensions.image.crop(srcpath, fpath, thumbnail_config.crop, thumbnail_config.format, transform_callback);
       else if('format' in thumbnail_config) jsh.Extensions.image.resample(srcpath, fpath, thumbnail_config.format, transform_callback);
       else return transform_callback(new Error('Invalid thumbnail_config: '+JSON.stringify(thumbnail_config)));
     }
@@ -68,16 +68,27 @@ module.exports = exports = function(module, funcs){
             if(err) return callback(err);
             fs.stat(fpath, function (err, stat) {
               if(err) return callback(err);
-              return callback(null, fpath, stat);
+              return callback(null, fpath, fname, stat);
             });
           });
         }
         else return callback(err);
       }
-      else return callback(null, fpath, stat);
+      else return callback(null, fpath, fname, stat);
     });
   }
 
+  exports.appendThumbnail = function(fpath, thumbnail_id, thumbnail_config){
+    if(!fpath) return fpath;
+    var fname = path.basename(fpath);
+    var fext = path.extname(fname);
+    fpath = fpath.substr(0, fpath.length - fext.length) + '.' + thumbnail_id + fext;
+    if(thumbnail_config && thumbnail_config.format){
+      if(fext.length > 1) fpath = fpath.substr(0, fpath.length - fext.length) + '.' + thumbnail_config.format;
+    }
+    return fpath;
+  }
+
   exports.media = function (req, res, next) {
     var verb = req.method.toLowerCase();
     
@@ -103,12 +114,12 @@ module.exports = exports = function(module, funcs){
       if (verb == 'get'){
         if(!req.params || !req.params.media_key) return next();
         var media_key = req.params.media_key;
-        var thumbnail_name = req.params.thumbnail;
+        var thumbnail_id = req.params.thumbnail;
         var thumbnail_config = null;
-        if(thumbnail_name) thumbnail_config = siteConfig.media_thumbnails[thumbnail_name];
+        if(thumbnail_id) thumbnail_config = siteConfig.media_thumbnails[thumbnail_id];
 
         //Invalid Thumbnail
-        if(thumbnail_name && !thumbnail_config) return next();
+        if(thumbnail_id && !thumbnail_config) return next();
 
         //Check if media exists
         sql_ptypes = [dbtypes.BigInt];
@@ -167,11 +178,10 @@ module.exports = exports = function(module, funcs){
           }
 
           var serveoptions = { attachment: !!('download' in Q), mime_override: media.media_ext };
-          var fname = path.basename(media.media_filename);
 
           if(thumbnail_config && thumbnail_config.format) serveoptions.mime_override = '.' + thumbnail_config.format;
 
-          funcs.getMediaFile(media.media_file_id, media.media_filename, media.media_ext, thumbnail_name, thumbnail_config, function(err, fpath, stat){
+          funcs.getMediaFile(media.media_file_id, media.media_filename, media.media_ext, thumbnail_id, thumbnail_config, function(err, fpath, fname, stat){
             if(err){
               if(err.message == 'Media file not found') return Helper.GenError(req, res, -33, 'Media file not found.');
               jsh.Log.error(err.toString() + '\n' + (err.stack?err.stack:(new Error()).stack));

package/models/_funcs.page.js

@@ -183,7 +183,7 @@ module.exports = exports = function(module, funcs){
 
   exports.replaceBranchURLs = function(content, options){
     options = _.extend({
-      getMediaURL: function(media_key, branchData, getLinkContent, urlparts){ return ''; },
+      getMediaURL: function(media_key, thumbnail_id, branchData, getLinkContent, thumbnail, urlparts){ return ''; },
       getPageURL: function(page_key, branchData, getLinkContent, urlparts){ return ''; },
       onError: function(err){ },
       onComponentData: null, //function(content){ return content; },
@@ -221,13 +221,14 @@ module.exports = exports = function(module, funcs){
       }
       var urlparts = urlparser.parse(url, true);
       if(!urlparts.path) return url;
-      var patharr = (urlparts.path||'').split('/');
+      var patharr = (urlparts.pathname||'').split('/');
 
       if((urlparts.path.indexOf('/_funcs/media/')==0) && (patharr.length>=4)){
         var media_key = patharr[3];
         if(parseInt(media_key).toString()==media_key){
           try{
-            var media_url = options.getMediaURL(media_key, options.branchData, getLinkContent, urlparts);
+            var thumbnail_id = ((patharr.length >= 5) ? patharr[4] : '');
+            var media_url = options.getMediaURL(media_key, thumbnail_id, options.branchData, getLinkContent, urlparts);
           }
           catch(ex){
             if(options.onError) options.onError(ex);
@@ -444,11 +445,11 @@ module.exports = exports = function(module, funcs){
 
     function replaceURLs(content, options){
       var rslt = funcs.replaceBranchURLs(content, _.extend({ replaceComponents: true }, options, {
-        getMediaURL: function(media_key, branchData, getLinkContent, urlparts){
+        getMediaURL: function(media_key, thumbnail_id, branchData, getLinkContent, urlparts){
           if(!media_files){
-            return baseurl + urlparts.path.substr(1) + '#@JSHCMS';
+            return baseurl + urlparts.pathname.substr(1) + '#@JSHCMS';
           }
-          return baseurl+'_funcs/media/'+media_key+'/?media_id='+media_files[media_key].media_id+'#@JSHCMS';
+          return baseurl+'_funcs/media/'+media_key+(thumbnail_id?'/'+thumbnail_id:'')+'/?media_id='+media_files[media_key].media_id+'#@JSHCMS';
         },
         getPageURL: function(page_key, branchData, getLinkContent, urlparts){
           if(branch_id) return baseurl+'_funcs/page/'+page_key+'/?branch_id='+branch_id+'&view=1#@JSHCMS';
@@ -1241,6 +1242,7 @@ module.exports = exports = function(module, funcs){
             if(!siteConfig) siteConfig = {};
             var pageSiteConfig = {
               defaultEditorConfig: siteConfig.defaultEditorConfig||{},
+              media_thumbnails: {},
             };
             if(typeof pageSiteConfig.defaultEditorConfig.webSnippetsPath == 'undefined'){
               if(cms.PreviewServer){
@@ -1249,6 +1251,10 @@ module.exports = exports = function(module, funcs){
                 pageSiteConfig.defaultEditorConfig.webSnippetsPath = webSnippetPath;
               }
             }
+            _.each(siteConfig.media_thumbnails, function(thumbnail_config, thumbnail_id){
+              if(!thumbnail_config || !thumbnail_config.export) return;
+              pageSiteConfig.media_thumbnails[thumbnail_id] = true;
+            });
             res.end(JSON.stringify({ '_success': 1, siteConfig: pageSiteConfig }));
           });
         });

package/models/_funcs.search.js

@@ -120,11 +120,21 @@ module.exports = exports = function(module, funcs){
             media_keys: {},
             page_keys: {},
             results: [],
+            site_config: {},
           };
           var sql_ptypes = [dbtypes.BigInt];
           var sql_params = { 'branch_id': branch_id };
           
           async.waterfall([
+            //Get site_config
+            function(search_cb){
+              funcs.getSiteConfig(req._DBContext, site_id, { continueOnConfigError: true }, function(err, siteConfig){
+                if(err) return search_cb(err);
+                searchData.site_config = siteConfig || {};
+                return search_cb();
+              });
+            },
+            //Search pages
             function(search_cb){
               async.eachOfSeries(cms.BranchItems, function(branch_item, branch_item_type, search_item_cb){
                 if(!branch_item.search) return search_item_cb();
@@ -289,8 +299,9 @@ module.exports = exports = function(module, funcs){
                 return content;
               }
               var rslt = funcs.replaceBranchURLs(content, _.extend({ replaceComponents: true }, {
-                getMediaURL: function(media_key){
+                getMediaURL: function(media_key, thumbnail_id){
                   if(!(media_key in searchData.media_keys)) return '';
+                  if(thumbnail_id) return funcs.appendThumbnail(searchData.media_keys[media_key], thumbnail_id, searchData.site_config.media_thumbnails && searchData.site_config.media_thumbnails[thumbnail_id]);
                   return searchData.media_keys[media_key];
                 },
                 getPageURL: function(page_key){

package/models/_funcs.template.js

@@ -25,6 +25,7 @@ var path = require('path');
 var fs = require('fs');
 var parse5 = require('parse5');
 var crypto = require('crypto');
+var urlparser = require('url');
 
 module.exports = exports = function(module, funcs){
   var exports = {};
@@ -1683,6 +1684,110 @@ module.exports = exports = function(module, funcs){
     return htdoc.content;
   }
 
+  exports.applyResponsiveImg = function(content, thumbnails, media_items){
+    if(!content) return content;
+    media_items = media_items || {};
+
+    var responsiveThumbnails = {};
+    if(thumbnails) for(var key in thumbnails){
+      if(thumbnails[key].responsive) responsiveThumbnails[key] = thumbnails[key];
+    }
+
+    if(_.isEmpty(responsiveThumbnails)) return content;
+
+    //If no img tags, return
+    if(content.toLowerCase().indexOf('img') < 0) return content;
+
+    var htdoc = new funcs.HTMLDoc(content);
+    htdoc.applyNodes([
+      { //img tags
+        pred: function(node){ return htdoc.isTag(node, 'img'); },
+        exec: function(node){
+          var src = (htdoc.getAttr(node, 'src')||'').toString();
+          if(!src) return;
+          if(htdoc.hasAttr(node, 'srcset')) return;
+
+          //Check for #@JSHCMS
+          var urlparts = null;
+          try{
+            urlparts = urlparser.parse(src, true);
+          }
+          catch(ex){
+          }
+          if(!urlparts) return;
+
+          if(!Helper.beginsWith(urlparts.hash || '', '#@JSHCMS')) return;
+          if((urlparts.pathname||'').indexOf('/_funcs/media/')!=0) return;
+
+          var patharr = (urlparts.pathname||'').split('/');
+          if(patharr.length < 4) return;
+          var media_key = patharr[3];
+          var media_thumbnail = patharr[4];
+
+          //Check if media_key is valid
+          var media_item = media_items[media_key];
+          var media_width = 0;
+          var media_height = 0;
+          if(media_item){
+            if(media_item.media_width) media_width = media_item.media_width;
+            if(media_item.media_height) media_height = media_item.media_height;
+          }
+          if(media_thumbnail && (media_thumbnail in thumbnails)){
+            var tgtThumbnail = thumbnails[media_thumbnail];
+            if(tgtThumbnail.resize && tgtThumbnail.resize.length){
+              media_width = tgtThumbnail.resize[0];
+              media_height = tgtThumbnail.resize[1];
+            }
+            else if(tgtThumbnail.crop && tgtThumbnail.crop.length){
+              media_width = tgtThumbnail.crop[0];
+              media_height = tgtThumbnail.crop[1];
+            }
+          }
+
+          var srcsets = [];
+          var max_width = media_width;
+          for(var thumbnail_id in responsiveThumbnails){
+            var thumbnail = responsiveThumbnails[thumbnail_id];
+            var srcsetCondition = '';
+            if(_.isString(thumbnail.responsive)) srcsetCondition = thumbnail.responsive;
+            else {
+              var thumbnail_width = 0;
+              if(media_item && media_item.media_width) thumbnail_width = media_item.media_width;
+              if(thumbnail.resize && thumbnail.resize.length) thumbnail_width = thumbnail.resize[0];
+              else if(thumbnail.crop && thumbnail.crop.length) thumbnail_width = thumbnail.crop[0];
+
+              if(thumbnail_width && (!media_width || (thumbnail_width < media_width))){
+                srcsetCondition = thumbnail_width + 'w';
+                if(thumbnail_width >= max_width) max_width = thumbnail_width + 1;
+              }
+            }
+
+            if(srcsetCondition){
+              //Generate srcset
+              var srcsetUrl = urlparts.protocol+'//'+urlparts.host+'/_funcs/media/'+media_key+'/'+thumbnail_id+'/#@JSHCMS'+urlparts.hash.substr(('#@JSHCMS').length);
+              srcsets.push(srcsetUrl+' '+srcsetCondition);
+            }
+          }
+
+          //Update img tag
+          if(srcsets.length){
+            srcsets.push(src + ' ' + max_width + 'w');
+            htdoc.appendAttr(node, 'srcset', srcsets.join(', '), 'srcset');
+          }
+
+          if(media_width && media_height && htdoc.hasAttr(node, 'cms-image-dimensions')){
+            if(!htdoc.hasAttr(node, 'width') && !htdoc.hasAttr(node, 'height')){
+              htdoc.appendAttr(node, 'width', media_width.toString());
+              htdoc.appendAttr(node, 'height', media_height.toString());
+              htdoc.removeAttr(node, 'cms-image-dimensions');
+            }
+          }
+        }
+      },
+    ]);
+    return htdoc.content;
+  }
+
   exports.generateEditorTemplate = function(content, options){
     options = _.extend({ cmsBaseUrl: '/', template_variables: {} }, options);
 

package/models/_funcs.validate.js

@@ -130,15 +130,6 @@ module.exports = exports = function(module, funcs){
 
     async.waterfall([
 
-      //Get site config
-      function(cb){
-        funcs.getSiteConfig('deployment', branchData.site_id, { }, function(err, siteConfig){
-          if(err) return cb(err);
-          branchData.site_config = siteConfig || {};
-          return cb();
-        });
-      },
-
       //Get template_variables for branch
       function(cb){
         var sql = "select site_editor deployment_target_id, v_my_site.deployment_target_template_variables, v_my_branch_desc.site_id, deployment_target_publish_config, deployment_target_publish_path from {schema}.v_my_branch_desc left outer join {schema}.v_my_site on v_my_site.site_id = v_my_branch_desc.site_id left outer join {schema}.deployment_target on deployment_target.deployment_target_id = v_my_site.deployment_target_id where v_my_branch_desc.branch_id=@branch_id";
@@ -167,16 +158,22 @@ module.exports = exports = function(module, funcs){
             return deploy_cb('Error parsing deployment_target_publish_config: '+ex.toString());
           }
 
-          funcs.parseTemplateVariables('publish', 'deployment', branchData.site_id, branchData.site_config, template_variables, deployment_target_publish_config, function(err, parsed_template_variables){
+          //Get site config
+          funcs.getSiteConfig('deployment', branchData.site_id, { }, function(err, siteConfig){
             if(err) return cb(err);
-            template_variables = parsed_template_variables;
-            branchData.template_variables = template_variables;
+            branchData.site_config = siteConfig || {};
+
+            funcs.parseTemplateVariables('publish', 'deployment', branchData.site_id, branchData.site_config, template_variables, deployment_target_publish_config, function(err, parsed_template_variables){
+              if(err) return cb(err);
+              template_variables = parsed_template_variables;
+              branchData.template_variables = template_variables;
 
-            //Deployment Target Publish Params
-            var publish_params = _.extend(JSON.parse(JSON.stringify(template_variables)), deployment_target_publish_config);
-            branchData.publish_params = publish_params;
+              //Deployment Target Publish Params
+              var publish_params = _.extend(JSON.parse(JSON.stringify(template_variables)), deployment_target_publish_config);
+              branchData.publish_params = publish_params;
 
-            return cb();
+              return cb();
+            });
           });
         });
       },
@@ -322,8 +319,11 @@ module.exports = exports = function(module, funcs){
         if(page.compiled.content) for(var key in page.compiled.content) allContent[key + ' content'] = page.compiled.content[key];
         for(var key in allContent){
           funcs.replaceBranchURLs(allContent[key], {
-            getMediaURL: function(media_key, branchData, getLinkContent){
+            getMediaURL: function(media_key, thumbnail_id, branchData, getLinkContent){
               if(!(media_key in branchData.media_keys)) throw new Error('<' + key + '>: Link to missing Media ID #'+media_key.toString()+': ...'+getLinkContent()+'...');
+              if(thumbnail_id){
+                if(!(branchData.site_config.media_thumbnails && branchData.site_config.media_thumbnails[thumbnail_id])) throw new Error('<' + key + '>: Media #'+media_key.toString()+' links to invalid Thumbnail ID: '+thumbnail_id+' ...'+getLinkContent()+'...');
+              }
               return '';
             },
             getPageURL: function(page_key, branchData, getLinkContent){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsharmony-cms",
-  "version": "1.3.0",
+  "version": "1.5.1",
   "description": "jsHarmony CMS",
   "main": "index.js",
   "scripts": {
@@ -30,8 +30,8 @@
     "diff2html": "3.4.1",
     "ejs": "2.7.4",
     "js-beautify": "^1.11.0",
-    "jsharmony": "^1.1.201",
-    "jsharmony-factory": "^1.1.97",
+    "jsharmony": "^1.4.0",
+    "jsharmony-factory": "^1.2.0",
     "lodash": "^4.17.19",
     "node-forge": "^0.10.0",
     "parse5": "^6.0.1",

package/public/js/jsHarmonyCMS.js

@@ -579,7 +579,9 @@ DataModelTemplate_GridPreview.prototype.buildTemplate = function(componentTempla
   model.oncommit =  '_this.onCommit(xmodel, rowid, callback);';
   model.ejs =  '';
   model.sort = { [this._sequenceFieldName]: 'asc' };
-  model.oninit = "jsh.$root('.xform'+xmodel.class).before('<div class=\"dataGridEditor_instructions\"><span style=\"font-size:1.3em;position:relative;top:1px;margin-right:2px;margin-left:4px;\">&#x1f6c8;</span> Add, edit, and re-order items using the icons :: Double-click to edit</div>');";
+  model.oninit = [
+    "jsh.$root('.xform'+xmodel.class).before('<div class=\"dataGridEditor_instructions\"><span style=\"font-size:1.3em;position:relative;top:1px;margin-right:2px;margin-left:4px;\">&#x1f6c8;</span> Add, edit, and re-order items using the icons <span class=\"dataGridEditor_instructions_doubleClick\">:: Double-click to edit</span></div>');",
+  ].join(' ');
   model.rowclass = "<%=xejs.iif(rowid==0,'first')%>";
   model.tableclass = ((model.tableclass||'')+' '+(componentConfig&&componentConfig.options&&componentConfig.options.component_preview_size=='collapse'?'jsharmony_cms_component_preview_collapse':'jsharmony_cms_component_preview_expand')).trim();
   this._jsh.XPage.ParseModelDefinition(model, null, null, { ignoreErrors: true });
@@ -3786,6 +3788,8 @@ TemplateRenderer.render = function(config, type, jsh, cms, componentConfig, addi
     isInEditor: true,
     isInPageEditor: true,
     isInComponentEditor: ((type=='gridRowDataPreview') || (type=='gridItemPreview')),
+    componentRenderClass: 'jsharmony_cms_componentRender_'+jsh.XExt.escapeCSSClass((componentConfig&&componentConfig.id)||'')+'_'+cms.componentManager.getUniqueId().toString(),
+    getMediaThumbnails: function(url){ return cms.componentManager.getMediaThumbnails(url); },
     renderPlaceholder: renderPlaceholder,
   }, additionalRenderParams));
   
@@ -4329,6 +4333,8 @@ exports = module.exports = function(jsh, cms){
   this.containerlessComponents = {};
   this.cntContainerlessComponents = 0;
 
+  var maxUniqueId = 0;
+
   this.load = function(onError){
     _this.loadSystemComponentTemplates(onError);
   }
@@ -4670,6 +4676,8 @@ exports = module.exports = function(jsh, cms){
       isInEditor: true,
       isInPageEditor: false,
       isInComponentEditor: false,
+      componentRenderClass: 'jsharmony_cms_componentRender_'+XExt.escapeCSSClass((component&&component.id)||'')+'_'+cms.componentManager.getUniqueId().toString(),
+      getMediaThumbnails: function(url){ return cms.componentManager.getMediaThumbnails(url); },
       items: data.items,
       item: data.item,
       component: properties,
@@ -4696,6 +4704,26 @@ exports = module.exports = function(jsh, cms){
     }
     return rslt;
   }
+
+  this.getUniqueId = function(){ return ++maxUniqueId; }
+
+  this.getMediaThumbnails = function(url){
+    if(!cms.site_config || !cms.site_config.media_thumbnails) return {};
+    if(!url || (url.indexOf('#@JSHCMS') < 0)) return {};
+    
+    var urlparts = document.createElement('a');
+    urlparts.href = url;
+    var patharr = (urlparts.pathname||'').split('/');
+    var rslt = {};
+    if(((urlparts.pathname||'').indexOf('/_funcs/media/')==0) && (patharr.length>=4)){
+      for(var thumbnail_id in cms.site_config.media_thumbnails){
+        if((patharr.length >= 5) && patharr[4]) patharr[4] = thumbnail_id;
+        else patharr.splice(4,0,thumbnail_id);
+        rslt[thumbnail_id] = urlparts.protocol + '//' + urlparts.host + patharr.join('/') + (urlparts.search||'') + (urlparts.hash||'');
+      }
+    }
+    return rslt;
+  }
 }
 },{"./jsHarmonyCMS.Component":21}],23:[function(require,module,exports){
 /*
@@ -6146,6 +6174,9 @@ exports = module.exports = function(jsh, cms, toolbarContainer){
         ],
         contextmenu: 'jsharmonycmscomponentcontextmenu link linkchecker image imagetools table spellchecker configurepermanentpen',
         toolbar: 'formatselect | backcolor forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link  image charmapmaterialicons table fullscreen | jsHarmonyCmsWebSnippet | jsHarmonyCmsComponent | jsHarmonyCmsView | jsHarmonyCmsEndEdit',
+        mobile: {
+          toolbar_mode: 'floating',
+        },
         removed_menuitems: 'newdocument',
         image_advtab: true,
         menu: {

package/views/jsh_cms_editor.css.ejs

@@ -667,4 +667,28 @@ span[data-component] {
   right:6px;
   cursor:pointer;
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+}
+
+@media screen and (max-width: 500px) {
+  .jsharmony_cms .xactions.secondaryform {
+    padding-top:20px;
+  }
+  .jsharmony_cms .xactions.secondarygrid {
+    padding-top:14px;
+  }
+  .jsharmony_cms_dialog .jsharmony_cms_component_dialog > .xbodyhead {
+    position:relative;
+  } 
+  .jsharmony_cms_component_dataGridEditor .dataGridEditor_instructions {
+    border-right: 2px solid #eee;
+  }
+  .dataGridEditor_instructions_doubleClick {
+    display:none;
+  }
+  .xdialogbox.jsharmony_cms_component_dialog {
+    min-width:auto !important;
+  }
+  .jsharmony_cms_component_dataGridEditor [data-component-template="gridRow"] .component_toolbar {
+    text-align:left;
+  }
 }

package/views/jsh_cms_editor.ejs

@@ -281,6 +281,7 @@ cms-content-editor
 cms-content-editor-type
 cms-component-editor-remove-class
 cms-component-editor-add-class
+cms-image-dimensions
 
 ===================
 EJS Container Slurp
@@ -303,6 +304,7 @@ getEJSOutput(f)
 getSitemapURL(sitemap_item)
 getMenuURL(menu_item)
 renderPlaceholder({ errors: '' })
+getMediaThumbnails(url)
 
 * Only available for Export Components
 addFile(filePath, fileContent)
@@ -318,6 +320,7 @@ baseUrl
 isInEditor
 isInPageEditor
 isInComponentEditor
+componentRenderClass
 sitemap
 menu  (from cms-menu-tag)
 data  { item: <object>, items: Array<object> }