Skip to content

Commit

Permalink
[ui:cwd] fix Studio-42#2158 add file type badge in icons view with CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@nao-pon
nao-pon committed Aug 21, 2017
1 parent 8108d59 commit 1223a34
Show file tree
Hide file tree
Showing 12 changed files with 158 additions and 10 deletions.
1 change: 1 addition & 0 deletions Jakefile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ var dirmode = 0755,
path.join(src, 'js', 'elFinder.js'),
path.join(src, 'js', 'elFinder.version.js'),
path.join(src, 'js', 'jquery.elfinder.js'),
path.join(src, 'js', 'elFinder.mimetypes.js'),
path.join(src, 'js', 'elFinder.options.js'),
path.join(src, 'js', 'elFinder.options.netmount.js'),
path.join(src, 'js', 'elFinder.history.js'),
Expand Down
86 changes: 78 additions & 8 deletions css/cwd.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,71 @@
background-position:1px -1px;
}

/* type badge in "icons" view */
.elfinder-cwd-icon:before {
content: none;
position: absolute;
left: 0px;
top: 5px;
min-width: 20px;
max-width: 84px;
text-align: center;
padding: 1px 4px;
border-radius: 4px;
font-family: Verdana;
font-size: 10px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
.elfinder-cwd-icon.elfinder-cwd-bgurl:before {
left: -10px;
}

/* icon image has type */
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-empty:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-plain:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-rtf:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-rtfd:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-pdf:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-html:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-css:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-javascript:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-javascript:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-perl:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-python:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-ruby:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-sh:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-shellscript:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-c:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-csrc:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-chdr:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-c--:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-c--src:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-c--hdr:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-java:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-java-source:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-php:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-xml:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-zip:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-zip:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-xz:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-7z-compressed:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-gzip:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-tar:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-bzip:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-bzip2:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-rar:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-rar-compressed:before,
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-shockwave-flash:before { content: none }

/* addtional type badge name */
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-mp2t:before { content: 'ts' }
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-dash-xml:before { content: 'dash' }
.elfinder-cwd-view-icons .elfinder-cwd-icon.elfinder-cwd-icon-x-mpegurl:before { content: 'hls' }

/* thumbnail image */
.elfinder-cwd-icon.elfinder-cwd-bgurl {
background-position: center center;
Expand All @@ -282,8 +347,10 @@
-moz-background-size: cover;
background-size: cover;
}
.elfinder-cwd-bgurl:after {
.elfinder-cwd-icon.elfinder-cwd-bgurl:after {
content: ' ';
}
.elfinder-cwd-bgurl:after {
position: relative;
display: inline-block;
top: 36px;
Expand All @@ -306,11 +373,11 @@
transform: scale(.6);
}
/* thumbnail image overlay none */
.elfinder-cwd-icon-image:after {
.elfinder-cwd-view-icons .elfinder-cwd-icon-image:after {
content: none;
}
/* thumbnail image video overlay */
.elfinder-cwd-icon-video:after {
.elfinder-cwd-view-icons .elfinder-cwd-icon-video:after {
top: 32px;
left: -26px;
height: 25px;
Expand All @@ -336,10 +403,13 @@
.elfinder-cwd-icon-application:after,
.elfinder-cwd-icon-application { background-position:0 -150px; }

.elfinder-cwd-icon-x-empty:after,
.elfinder-cwd-icon-text:after,
.elfinder-cwd-icon-x-empty,
.elfinder-cwd-icon-text { background-position:0 -200px; }
.elfinder-cwd-icon-text { background-position:0 -1350px; }

.elfinder-cwd-icon-plain:after,
.elfinder-cwd-icon-plain,
.elfinder-cwd-icon-x-empty:after,
.elfinder-cwd-icon-x-empty { background-position:0 -200px; }

.elfinder-cwd-icon-image:after,
.elfinder-cwd-icon-vnd-adobe-photoshop:after,
Expand All @@ -354,8 +424,8 @@
.elfinder-cwd-icon-video,
.elfinder-cwd-icon-flash-video,
.elfinder-cwd-icon-dash-xml,
.elfinder-cwd-icon-vnd-apple-mpegURL,
.elfinder-cwd-icon-x-mpegURL { background-position:0 -350px; }
.elfinder-cwd-icon-vnd-apple-mpegurl,
.elfinder-cwd-icon-x-mpegurl { background-position:0 -350px; }

.elfinder-cwd-icon-rtf:after,
.elfinder-cwd-icon-rtfd:after,
Expand Down
11 changes: 11 additions & 0 deletions css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,20 @@
.elfinder-cwd-wrapper.elfinder-cwd-wrapper-trash {
background-color: #f0efef;
}

/* selected file in "icons" view */
.elfinder-cwd-view-icons .elfinder-cwd-file .ui-state-hover { background:#ccc; }

/* type badge in "icons" view */
.elfinder-cwd-view-icons .elfinder-cwd-icon:before {
color: white;
background-color: #798da7;
}
.elfinder-cwd-view-icons .elfinder-cwd-icon-text:before { background-color: #6f99e6 }
.elfinder-cwd-view-icons .elfinder-cwd-icon-image:before { background-color: #2ea26c }
.elfinder-cwd-view-icons .elfinder-cwd-icon-audio:before { background-color: #7bad2a }
.elfinder-cwd-view-icons .elfinder-cwd-icon-video:before { background-color: #322aad }

/* list view*/
.elfinder-cwd table thead td.ui-state-hover { background:#ddd; }
.elfinder-cwd table tr:nth-child(odd) { background-color:#edf3fe; }
Expand Down
1 change: 1 addition & 0 deletions elfinder.playground.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
<script src="js/elFinder.js"></script>
<script src="js/elFinder.version.js"></script>
<script src="js/jquery.elfinder.js"></script>
<script src="js/elFinder.mimetypes.js"></script>
<script src="js/elFinder.options.js"></script>
<script src="js/elFinder.options.netmount.js"></script>
<script src="js/elFinder.history.js"></script>
Expand Down
1 change: 1 addition & 0 deletions elfinder.src.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
<script src="js/elFinder.js"></script>
<script src="js/elFinder.version.js"></script>
<script src="js/jquery.elfinder.js"></script>
<script src="js/elFinder.mimetypes.js"></script>
<script src="js/elFinder.options.js"></script>
<script src="js/elFinder.options.netmount.js"></script>
<script src="js/elFinder.history.js"></script>
Expand Down
Binary file modified img/icons-big.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/src/icons-big.xcf
View file
Binary file not shown.
8 changes: 8 additions & 0 deletions js/elFinder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4683,6 +4683,14 @@ elFinder.prototype = {
'video/ogg' : 'VideoOGG'
},

/**
* File mimetype to file extention mapping
*
* @type Object
* @see elFinder.mimetypes.js
*/
mimeTypes : {},

/**
* Ajax request data validation rules
*
Expand Down
1 change: 1 addition & 0 deletions js/elFinder.mimetypes.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions js/elFinder.resources.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ elFinder.prototype.resources = {
text : [
'application/x-empty',
'application/javascript',
'application/json',
'application/xhtml+xml',
'audio/x-mp3-playlist',
'application/x-web-config',
Expand Down
47 changes: 47 additions & 0 deletions js/ui/cwd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,13 +280,60 @@ $.fn.elfindercwd = function(fm, options) {
}
},

/**
* Type badge CSS added flag
*
* @type Object
*/
addedBadges = {},

/**
* Type badge style sheet element
*
* @type Object
*/
addBadgeStyleSheet,

/**
* Add type badge CSS into 'head'
*
* @type Fundtion
*/
addBadgeStyle = function(mime, name) {
var sel, ext, type;
if (! addedBadges[mime]) {
if (typeof addBadgeStyleSheet === 'undefined') {
if ($('#elfinderAddBadgeStyle'+fm.namespace).length) {
$('#elfinderAddBadgeStyle'+fm.namespace).remove();
}
addBadgeStyleSheet = $('<style id="addBadgeStyle'+fm.namespace+'"/>').insertBefore($('head').children(':first')).get(0).sheet || null;
}
if (addBadgeStyleSheet) {
mime = mime.toLowerCase();
type = mime.split('/');
ext = fm.escape(fm.mimeTypes[mime] || (name.replace(/.bac?k$/i, '').match(/\.([^.]+)$/) || ['',''])[1]);
if (ext) {
sel = '.elfinder-cwd-view-icons .elfinder-cwd-icon-' + type[0].replace(/(\.|\+)/g, '-');
if (typeof type[1] !== 'undefined') {
sel += '.elfinder-cwd-icon-' + type[1].replace(/(\.|\+)/g, '-');
}
try {
addBadgeStyleSheet.insertRule(sel + ':before{content:"' + ext.toLowerCase() + '"}', 0);
} catch(e) {}
}
addedBadges[mime] = true;
}
}
},

/**
* Return file html
*
* @param Object file info
* @return String
**/
itemhtml = function(f) {
f.mime && f.mime !== 'directory' && !addedBadges[f.mime] && addBadgeStyle(f.mime, f.name);
return templates[list ? 'row' : 'icon']
.replace(/\{([a-z0-9_]+)\}/g, function(s, e) {
return replacement[e] ? replacement[e](f, fm) : (f[e] ? f[e] : '');
Expand Down
11 changes: 9 additions & 2 deletions php/elFinderVolumeDriver.class.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,16 +274,18 @@ abstract class elFinderVolumeDriver {
'md:text/plain' => 'text/x-markdown',
'markdown:text/plain' => 'text/x-markdown',
'css:text/x-asm' => 'text/css',
'ico:image/vnd.microsoft.icon' => 'image/x-icon',
'csv:text/plain' => 'text/csv',
'json:text/plain' => 'text/x-json',
'ico:image/vnd.microsoft.icon' => 'image/x-icon',
'm4a:video/mp4' => 'audio/mp4',
'oga:application/ogg' => 'audio/ogg',
'ogv:application/ogg' => 'video/ogg',
'zip:application/x-zip' => 'application/zip',
'm3u8:text/plain' => 'application/x-mpegURL',
'mpd:text/plain' => 'application/dash+xml',
'mpd:application/xml' => 'application/dash+xml',
'xml:application/xml' => 'text/xml'
'xml:application/xml' => 'text/xml',
'*:application/x-dosexec' => 'application/x-executable'
),
// An option to add MimeMap to the `mimeMap` option
// Array '[ext]:[detected mime type]' => '[normalized mime]'
Expand Down Expand Up @@ -4195,6 +4197,11 @@ protected function mimetype($path, $name = '') {
$_checkKey = strtolower($ext.':*');
if (isset($this->options['mimeMap'][$_checkKey])) {
$type = $this->options['mimeMap'][$_checkKey];
} else {
$_checkKey = strtolower('*:'.$type);
if (isset($this->options['mimeMap'][$_checkKey])) {
$type = $this->options['mimeMap'][$_checkKey];
}
}
}

Expand Down

0 comments on commit 1223a34

Please sign in to comment.