diff --git a/src/assets/AfmAsset.php b/src/assets/AfmAsset.php index b053cb4..a7ab020 100644 --- a/src/assets/AfmAsset.php +++ b/src/assets/AfmAsset.php @@ -33,7 +33,7 @@ class AfmAsset extends AssetBundle * @var array */ public $css = [ - 'angular-filemanager.less', + 'angular-filemanager-scoped.less', 'angular-filemanager-custom.less' ]; diff --git a/src/assets/dist/angular-filemanager-scoped.less b/src/assets/dist/angular-filemanager-scoped.less new file mode 100755 index 0000000..a65c8cc --- /dev/null +++ b/src/assets/dist/angular-filemanager-scoped.less @@ -0,0 +1,4 @@ +// this is just a wrapper to scope angularFilemanager Styles to prevent side-effects +angular-filemanager { + @import './angular-filemanager.less'; +} diff --git a/src/assets/dist/angular-filemanager.less b/src/assets/dist/angular-filemanager.less index 9e85113..b1c862b 100755 --- a/src/assets/dist/angular-filemanager.less +++ b/src/assets/dist/angular-filemanager.less @@ -1,18 +1,20 @@ @-webkit-keyframes fadeIn { 0% { - opacity: 0 + opacity: 0; } + 100% { - opacity: 1 + opacity: 1; } } @keyframes fadeIn { 0% { - opacity: 0 + opacity: 0; } + 100% { - opacity: 1 + opacity: 1; } } @@ -20,12 +22,13 @@ 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0) + transform: translate3d(0, -100%, 0); } + 100% { opacity: 1; -webkit-transform: none; - transform: none + transform: none; } } @@ -33,72 +36,84 @@ 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0) + transform: translate3d(0, -100%, 0); } + 100% { opacity: 1; -webkit-transform: none; - transform: none + transform: none; } } @keyframes rotate { 100% { - transform: rotate(360deg) + transform: rotate(360deg); } } @-webkit-keyframes rotate { 100% { - -webkit-transform: rotate(360deg) + -webkit-transform: rotate(360deg); } } @keyframes colors { - 0%, 100% { - stroke: #4285F4 + 0% { + stroke: #4285F4; } + 25% { - stroke: #DE3E35 + stroke: #DE3E35; } + 50% { - stroke: #F7C223 + stroke: #F7C223; } + 75% { - stroke: #1B9A59 + stroke: #1B9A59; + } + + 100% { + stroke: #4285F4; } } @keyframes dash { 0% { - stroke-dasharray: 1, 150; + stroke-dasharray: 1,150; stroke-dashoffset: 0; - stroke: red + stroke: red; } + 50% { - stroke-dasharray: 90, 150; + stroke-dasharray: 90,150; stroke-dashoffset: -35; - stroke: #ff0 + stroke: yellow; } + 100% { - stroke-dasharray: 90, 150; + stroke-dasharray: 90,150; stroke-dashoffset: -124; - stroke: green + stroke: green; } } @-webkit-keyframes dash { 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0 + stroke-dasharray: 1,150; + stroke-dashoffset: 0; } + 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35 + stroke-dasharray: 90,150; + stroke-dashoffset: -35; } + 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124 + stroke-dasharray: 90,150; + stroke-dashoffset: -124; } } @@ -106,27 +121,28 @@ -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-fill-mode: both; - animation-fill-mode: both + animation-fill-mode: both; } -.animated.fast, .modal.animated { +.modal.animated, +.animated.fast { -webkit-animation-duration: .2s; - animation-duration: .2s + animation-duration: .2s; } .animated.slow { -webkit-animation-duration: 1.1s; - animation-duration: 1.1s + animation-duration: 1.1s; } .animated.fadeInDown { -webkit-animation-name: fadeInDown; - animation-name: fadeInDown + animation-name: fadeInDown; } .animated.fadeIn { -webkit-animation-name: fadeIn; - animation-name: fadeIn + animation-name: fadeIn; } .spinner-container { @@ -134,764 +150,859 @@ animation: rotate 2s linear infinite; z-index: 2; width: 65px; - height: 65px + height: 65px; } .spinner-container .path { - stroke-dasharray: 1, 150; + stroke-dasharray: 1,150; stroke-dashoffset: 0; stroke: #2196F3; stroke-linecap: round; -webkit-animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite; - animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite + animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite; +} +.modal { + word-wrap: break-word; } -angular-filemanager { +.modal .label.error-msg { + display: block; + font-size: 12px; + margin-top: 5px; + padding: 0; + padding: 5px; + margin-top: 10px; + text-align: left; +} - .modal { - word-wrap: break-word - } +.modal .label.error-msg > span { + white-space: pre-wrap; +} - .modal .label.error-msg { - display: block; - font-size: 12px; - padding: 5px; - margin-top: 10px; - text-align: left - } +.modal .breadcrumb { + margin: 0; + background: #00bcd4; + font-size: 16px; + max-height: inherit; + padding: 0 10px; + margin-bottom: 5px; +} - .modal .label.error-msg > span { - white-space: pre-wrap - } +.modal-fullscreen .modal-dialog, +.modal-fullscreen .modal-content { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} - .modal .breadcrumb { - margin: 0 0 5px; - background: #00bcd4; - font-size: 16px; - max-height: inherit; - padding: 0 10px - } +.modal-fullscreen .modal-dialog { + margin: 0; + width: 100%; +} - .modal-fullscreen .modal-content, .modal-fullscreen .modal-dialog { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0 - } +.modal-fullscreen .modal-content { + border: none; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inherit; + -moz-box-shadow: inherit; + -o-box-shadow: inherit; + box-shadow: inherit; +} - .modal-fullscreen .modal-dialog { - margin: 0; - width: 100% - } +.modal-fullscreen textarea.code { + min-height: 450px; +} - .modal-fullscreen .modal-content { - border: none; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inherit; - -moz-box-shadow: inherit; - -o-box-shadow: inherit; - box-shadow: inherit - } +.modal img.preview { + max-width: 100%; + max-height: 640px; + border-radius: 3px; +} - .modal-fullscreen textarea.code { - min-height: 450px - } +.modal img.preview.loading { + width: 100%; + height: 1px; + opacity: 0; +} - .modal img.preview { - max-width: 100%; - max-height: 640px; - border-radius: 3px - } - .modal img.preview.loading { - width: 100%; - height: 1px; - opacity: 0 - } +.modal .modal-content { + border-radius: 10px 10px 4px 4px; +} - .modal .modal-content { - border-radius: 10px 10px 4px 4px - } +.modal .modal-header { + border-radius: 4px 4px 0 0; + background: #2196F3; + padding: 1.3em; +} - .modal .modal-header { - border-radius: 4px 4px 0 0; - background: #2196F3; - padding: 1.3em - } +.modal .modal-header .modal-title { + font-size: 20px; + line-height: 100%; + color: #D4E5F5; + margin: 0; +} - .modal .modal-header .modal-title { - font-size: 20px; - line-height: 100%; - color: #D4E5F5; - margin: 0 - } +.modal .modal-header .close { + opacity: 1; + color: #D4E5F5; +} - .modal .modal-header .close { - opacity: 1; - color: #D4E5F5 - } +.modal .modal-header .close.fullscreen { + font-size: 14px; + position: relative; + top: 4px; + margin-right: .8em; +} +body { + font-size: 14px; + height: 100vh; +} - .modal .modal-header .close.fullscreen { - font-size: 14px; - position: relative; - top: 4px; - margin-right: .8em - } +*, +*:focus { + outline: 0!important; +} - .detail-sources, .ellipsis { - text-overflow: ellipsis; - overflow: hidden - } +.navbar { + min-height: 32px; + margin-bottom: 0; + border: 0; + border-radius: 0; + color: #fff; +} - body { - font-size: 14px; - height: 100vh - } +.navbar .navbar-collapse { + overflow: visible; + padding: 0; +} - *, :focus { - outline: 0 !important - } +.navbar .navbar-toggle { + padding: 5px 10px; +} - .navbar { - min-height: 32px; - margin-bottom: 0; - border: 0; - border-radius: 0; - color: #fff - } +.navbar .navbar-brand { + font-size: inherit; + height: 55px; + line-height: 100%; +} - .navbar .navbar-collapse { - overflow: visible; - padding: 0 - } +.btn.btn-default { + color: #444; + background-color: #FAFAFA; +} - .navbar .navbar-toggle { - padding: 5px 10px - } +.btn { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); + font-weight: 500; + letter-spacing: .01em; + border: none; +} - .navbar .navbar-brand { - font-size: inherit; - height: 55px; - line-height: 100% - } +textarea.code { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 13px; + min-height: 250px; + resize: vertical; + color: #000; +} - .btn.btn-default { - color: #444; - background-color: #FAFAFA - } +.sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} - .btn { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); - font-weight: 500; - letter-spacing: .01em; - border: none - } +.sidebar { + display: none; + background: #fafafa; + margin-top: 2px; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + border-right: 1px solid #eee; +} - textarea.code { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 13px; - min-height: 250px; - resize: vertical; - color: #000 - } +.btn-go-back { + margin-top: -5px; +} - .sub-header { - padding-bottom: 10px; - border-bottom: 1px solid #eee - } +.nav-sidebar { + margin-right: -21px; + margin-bottom: 20px; + margin-left: -20px; +} - .sidebar { - display: none; - background: #fafafa; - margin-top: 2px; - padding: 0; - overflow-x: hidden; - overflow-y: auto; - border-right: 1px solid #eee - } - .btn-go-back { - margin-top: -5px - } +.nav-sidebar > li > a { + color: #7a7a7a; + padding: 7px 0 7px 16px; +} - .nav-sidebar { - margin-right: -21px; - margin-bottom: 20px; - margin-left: -20px - } - .nav-sidebar > li > a { - color: #7a7a7a; - padding: 7px 0 7px 16px - } +.nav-sidebar> li > a:hover, +.nav-sidebar> li > a:focus { + background: none; + color: #1378b9; +} - .nav-sidebar > li > a:focus, .nav-sidebar > li > a:hover { - background: 0 0; - color: #1378b9 - } +.nav-sidebar > li.active > a { + color: #2196F3; +} - .nav-sidebar > li.active > a { - color: #2196F3 - } - .main { - padding: 0 - } +.main { + padding: 0; +} - .main .page-header { - margin-top: 0 - } +.main .page-header { + margin-top: 0; +} - .file-tree ul.nav.nav-sidebar { - margin: 0; - padding: 0 0 0 12px - } +.file-tree ul.nav.nav-sidebar { + margin: 0; + padding: 0; + padding-left: 12px; +} - .file-tree ul.nav.nav-sidebar:first-child { - padding-left: 0 - } +.file-tree ul.nav.nav-sidebar:first-child { + padding-left: 0; +} - .file-tree ul.nav.nav-sidebar.file-tree-root > li { - border-left: none; - padding-left: 0 - } +.file-tree ul.nav.nav-sidebar.file-tree-root > li { + border-left: none; + padding-left: 0px; +} - .table td { - vertical-align: middle - } +.table td { + vertical-align: middle; +} - #context-menu { - position: absolute; - display: none; - z-index: 9999 - } +#context-menu { + position: absolute; + display: none; + z-index: 9999; +} - .iconset { - padding: 10px - } +.iconset { + padding: 10px; +} - .col-120 { - width: 100px; - max-height: 100px; - float: left; - margin-bottom: 9px; - margin-right: 9px - } +.col-120 { + width: 100px; + max-height: 100px; + float: left; + margin-bottom: 9px; + margin-right: 9px; +} - .col-120:last-child { - margin-right: 0 - } +.col-120.preview { + max-height: unset; + height: 120px; +} - .noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none - } +.col-120:last-child { + margin-right: 0; +} - .iconset .thumbnail { - border-radius: 0; - overflow: hidden; - margin: 0; - padding: 10px 0; - border: none; - background: 0 0 - } +.noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE/Edge */ + user-select: none; /* non-prefixed version, currently */ +} - .iconset .thumbnail .image-preview-thumbnail { - height: 85px; - } +.iconset .thumbnail { + border-radius: 0; + overflow: hidden; + margin: 0; + padding: 0; + padding: 10px 0; + border: none; + background: none; +} - .iconset .thumbnail .image-preview-thumbnail img { - max-width: 100% - } +.iconset .preview .thumbnail { + height: 100px; + position: relative; +} +.iconset .preview .thumbnail .item-name { + position: absolute; + bottom: 0; + width: 100%; +} - .iconset .thumbnail.selected, .table-files .selected { - background: #2196F3 - } +.iconset .preview .thumbnail .item-icon i { + vertical-align: middle; +} - .iconset .thumbnail.selected, .table-files .selected td, .table-files .selected td a { - color: #fff - } +.iconset .thumbnail .image-preview-thumbnail img { + max-width: 100%; + max-height: 70px; +} - .iconset .thumbnail .item-icon { - font-size: 32px - } +.table-files .selected, +.iconset .thumbnail.selected { + background: #2196F3; +} +.iconset .preview .thumbnail.selected { + background: none; + color: #000; + border: 1px solid #2196F3; +} - .detail-sources { - word-wrap: break-word - } +.iconset .thumbnail.selected, +.table-files .selected td, +.table-files .selected td a { + color:#fff; +} - .dropdown-menu { - font-size: 14px - } +.iconset .thumbnail .item-icon { + font-size: 32px; +} - .dropdown-menu > li > a { - padding: 6px 20px - } +.detail-sources { + text-overflow: ellipsis; + overflow: hidden; + word-wrap: break-word; +} - .dropdown-menu > li > a > i { - margin-right: 4px - } +.dropdown-menu { + font-size: 14px; +} - .dropdown-menu.dropdown-right-click { - display: block; - position: static; - margin-bottom: 5px - } +.dropdown-menu > li > a { + padding: 6px 20px; +} - .dropdown-menu.dropdown-right-click .divider { - margin: 3px 0 - } +.dropdown-menu > li > a > i { + margin-right: 4px; +} - .upload-dragover .main { - opacity: .4 - } +.dropdown-menu.dropdown-right-click { + display: block; + position: static; + margin-bottom: 5px; +} - .upload-dragover:before { - content: "\e198"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 100; - color: #2196F3; - font-size: 8em; - font-family: 'Glyphicons Halflings' - } +.dropdown-menu.dropdown-right-click .divider { + margin: 3px 0; +} - .upload-list { - margin-top: 20px - } +.upload-dragover .main { + opacity: .4; +} - .spinner-wrapper { - margin: 8% auto 0; - text-align: center - } +.upload-dragover:before { + content: "\e198"; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 100; + color: #2196F3; + font-size: 8em; + font-family: 'Glyphicons Halflings'; +} - a:active, a:focus, a:hover, table th > a:active, table th > a:focus, table th > a:hover { - text-decoration: none - } +.upload-list { + margin-top: 20px; +} - .sortorder:after { - color: #2196f3; - content: '\25bc' - } +.spinner-wrapper { + margin: 0 auto; + text-align: center; + margin-top: 8%; +} - .sortorder.reverse:after { - color: #2196f3; - content: '\25b2' - } +a:hover, +a:active, +a:focus, +table th > a:hover, +table th > a:active, +table th > a:focus { + text-decoration: none; +} - .ng-cloak, .x-ng-cloak, [data-ng-cloak], [ng-cloak], [ng\:cloak], [x-ng-cloak] { - display: none !important - } +.sortorder:after { + color: #2196f3; + content: '\25bc'; +} - .mr2 { - margin-right: 2px - } +.sortorder.reverse:after { + color: #2196f3; + content: '\25b2'; +} - .mr5 { - margin-right: 5px - } +[ng\:cloak], [ng-cloak], +[data-ng-cloak], [x-ng-cloak], +.ng-cloak, .x-ng-cloak { + display: none !important; +} - .mt10 { - margin-top: 10px - } +.mr2 { + margin-right: 2px; +} - .mb0 { - margin-bottom: 0 - } +.mr5 { + margin-right: 5px; +} - .pointer { - cursor: pointer - } +.mt10 { + margin-top: 10px; +} - .block { - display: block - } +.mb0 { + margin-bottom: 0; +} - .ellipsis { - white-space: nowrap - } +.pointer { + cursor: pointer; +} - .bold { - font-weight: 700 - } +.block { + display: block; +} + +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.bold { + font-weight: bold; +} +.main { + overflow-y: auto; +} + +@media (min-width: 768px) { .main { - overflow-y: auto + padding-right: 0; + padding-left: 0; } - @media (min-width: 768px) { - .main { - padding-right: 0; - padding-left: 0 - } - - .main, .row, .sidebar, angular-filemanager > div { - height: 100% - } - - .container-fluid { - height: -webkit-calc(100% - 58px); - height: -moz-calc(100% - 58px); - height: calc(100% - 58px) - } - - .sidebar { - display: block - } + /* The view should fill all available vertical space */ + angular-filemanager > div,.row,.main,.sidebar { + height: 100%; } - .selected-file-details { - padding-left: 20px + .container-fluid { + height: -webkit-calc(100% - 58px); + height: -moz-calc(100% - 58px); + height: calc(100% - 58px); } - .item-extension::after { - font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; - content: attr(data-ext); - left: 4px; - position: absolute; - color: #fff; - font-size: 9px; - text-transform: uppercase; - top: 21px + .sidebar { + display: block; } +} - .selected .item-extension::after { - color: #2196F3 - } +.selected-file-details { + padding-left: 20px; +} - .form-control.search-input { - max-width: 20em; - display: inline - } +.item-extension::after { + font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif; + content: attr(data-ext); + left: 4px; + position: absolute; + color: #fff; + font-size: 9px; + text-transform: uppercase; + top: 21px; +} - .like-code { - display: inline - } +.selected .item-extension::after { + color: #2196F3; +} - .point { - margin-right: 8px; - font-size: 10px - } +.form-control.search-input { + max-width: 20em; + display: inline; +} - .navbar .btn.btn-flat { - padding: 2px; - width: 32px; - height: 30px; - margin-left: 5px - } +.like-code { + display: inline; +} - .navbar-inverse .navbar-toggle .icon-bar { - background: #fff - } +.point { + margin-right: 8px; + font-size: 10px; +} - .navbar-inverse .navbar-form input[type=text] { - color: #7a7a7a; - box-shadow: none; - margin: 0 10px - } +.navbar .btn.btn-flat { + padding: 2px; + width: 32px; + height: 30px; + margin-left: 5px; +} - .navbar .navbar-form { - border-bottom: none; - border-top: none; - box-shadow: none; - padding: 0; - margin: 12px 0 - } +.navbar-inverse .navbar-toggle .icon-bar { + background: #fff; +} - .breadcrumb { - background: 0 0; - padding: 0; - font-size: 17px; - margin: 12px 0; - overflow: hidden; - max-height: 30px - } +.navbar-inverse .navbar-form input[type="text"] { + color: #7a7a7a; + box-shadow: none; + margin: 0 10px; +} - .breadcrumb a, .breadcrumb > .active { - color: #fff - } +.navbar .navbar-form { + border-bottom: none; + border-top: none; + box-shadow: none; + padding: 0; + margin: 12px 0; +} - .breadcrumb > li + li:before { - font-family: 'Glyphicons Halflings'; - content: "\e080"; - font-size: 12px; - color: #fff - } +.breadcrumb { + background: none; + padding: 0; + font-size: 17px; + margin: 12px 0; + overflow: hidden; + max-height: 30px +} - .scrollable-menu { - height: auto; - max-height: 200px; - overflow-x: hidden - } +.breadcrumb>.active, +.breadcrumb a { + color: #fff; +} - .btn.btn-flat { - background: 0 0; - color: #fff - } +.breadcrumb>li+li:before { + font-family: 'Glyphicons Halflings'; + content: "\e080"; + font-size: 12px; + color: #fff; +} - .btn-group.open > .btn-flat, .btn.btn-flat, .btn.btn-flat:active { - box-shadow: none - } +.scrollable-menu { + height: auto; + max-height: 200px; + overflow-x: hidden; +} - .btn.btn-flat > i { - font-size: 18px; - width: 18px; - height: 18px; - line-height: 100% - } +.btn.btn-flat { + background: none; + color: #fff; +} - .multiSelect .acol, .multiSelect .caret, .multiSelect .inlineBlock, .multiSelect > button { - display: inline-block - } +.btn-group.open > .btn-flat, +.btn.btn-flat, +.btn.btn-flat:active { + box-shadow: none; +} - .multiSelect .vertical { - float: none - } +.btn.btn-flat > i { + font-size: 18px; + width: 18px; + height: 18px; + line-height: 100%; +} - .multiSelect .horizontal:not(.multiSelectGroup) { - float: left - } +/* + * Don't modify things marked with ! - unless you know what you're doing + */ - .multiSelect .line { - padding: 2px 0 4px; - max-height: 30px; - overflow: hidden; - box-sizing: content-box - } +/* ! vertical layout */ +.multiSelect .vertical { + float: none; +} - .multiSelect .acol { - min-width: 12px - } +/* ! horizontal layout */ +.multiSelect .horizontal:not(.multiSelectGroup) { + float: left; +} - .multiSelect > button { - position: relative; - text-align: center; - cursor: pointer; - border: 1px solid #c6c6c6; - padding: 1px 8px; - font-size: 14px; - min-height: 38px !important; - border-radius: 4px; - color: #555; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - white-space: normal; - background-color: #fff; - background-image: linear-gradient(#fff, #f7f7f7) - } +/* ! create a "row" */ +.multiSelect .line { + padding: 2px 0px 4px 0px; + max-height: 30px; + overflow: hidden; + box-sizing: content-box; +} - .multiSelect > button:hover { - background-image: linear-gradient(#fff, #e9e9e9) - } +/* ! create a "column" */ +.multiSelect .acol { + display: inline-block; + min-width: 12px; +} - .multiSelect > button:disabled { - background-image: linear-gradient(#fff, #fff); - border: 1px solid #ddd; - color: #999 - } +/* ! */ +.multiSelect .inlineBlock { + display: inline-block; +} - .multiSelect .buttonClicked { - box-shadow: 0 2px 5px rgba(0, 0, 0, .15) inset, 0 1px 2px rgba(0, 0, 0, .05) - } +/* the multiselect button */ +.multiSelect > button { + display: inline-block; + position: relative; + text-align: center; + cursor: pointer; + border: 1px solid #c6c6c6; + padding: 1px 8px 1px 8px; + font-size: 14px; + min-height : 38px !important; + border-radius: 4px; + color: #555; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + white-space:normal; + background-color: #fff; + background-image: linear-gradient(#fff, #f7f7f7); +} - .multiSelect .buttonLabel { - display: inline-block; - padding: 5px 0 - } +/* button: hover */ +.multiSelect > button:hover { + background-image: linear-gradient(#fff, #e9e9e9); +} - .multiSelect .caret { - width: 0; - height: 0; - margin: 0 0 1px 12px !important; - vertical-align: middle; - border-top: 4px solid #333; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - border-bottom: 0 dotted - } +/* button: disabled */ +.multiSelect > button:disabled { + background-image: linear-gradient(#fff, #fff); + border: 1px solid #ddd; + color: #999; +} - .multiSelect .checkboxLayer { - background-color: #fff; - position: absolute; - z-index: 999; - border: 1px solid rgba(0, 0, 0, .15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); - box-shadow: 0 6px 12px rgba(0, 0, 0, .175); - min-width: 278px; - display: none !important - } +/* button: clicked */ +.multiSelect .buttonClicked { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05); +} - .multiSelect .clearButton, .multiSelect .helperButton { - display: inline; - text-align: center; - font-size: 13px; - color: #666; - background-color: #f1f1f1; - cursor: pointer - } +/* labels on the button */ +.multiSelect .buttonLabel { + display: inline-block; + padding: 5px 0px 5px 0px; +} - .multiSelect .helperContainer { - border-bottom: 1px solid #ddd; - padding: 8px 8px 0 - } +/* downward pointing arrow */ +.multiSelect .caret { + display: inline-block; + width: 0; + height: 0; + margin: 0px 0px 1px 12px !important; + vertical-align: middle; + border-top: 4px solid #333; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + border-bottom: 0 dotted; +} - .multiSelect .helperButton { - border: 1px solid #ccc; - height: 26px; - border-radius: 2px; - line-height: 1.6; - margin: 0 0 8px - } +/* the main checkboxes and helper layer */ +.multiSelect .checkboxLayer { + background-color: #fff; + position: absolute; + z-index: 999; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + min-width:278px; + display: none !important; +} - .multiSelect .helperButton.reset { - float: right - } +/* container of helper elements */ +.multiSelect .helperContainer { + border-bottom: 1px solid #ddd; + padding: 8px 8px 0px 8px; +} - .multiSelect .helperButton:not( .reset ) { - margin-right: 4px - } +/* helper buttons (select all, none, reset); */ +.multiSelect .helperButton { + display: inline; + text-align: center; + cursor: pointer; + border: 1px solid #ccc; + height: 26px; + font-size: 13px; + border-radius: 2px; + color: #666; + background-color: #f1f1f1; + line-height: 1.6; + margin: 0px 0px 8px 0px; +} - .multiSelect .clearButton { - position: absolute; - border: 1px solid #ccc; - height: 22px; - width: 22px; - border-radius: 2px; - line-height: 1.4; - right: 2px; - top: 4px - } +.multiSelect .helperButton.reset{ + float: right; +} - .multiSelect .inputFilter { - border-radius: 2px; - border: 1px solid #ccc; - height: 26px; - font-size: 14px; - width: 100%; - padding-left: 7px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #888; - margin: 0 0 8px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) - } +.multiSelect .helperButton:not( .reset ) { + margin-right: 4px; +} - .multiSelect .clearButton:hover, .multiSelect .helperButton:hover { - border: 1px solid #ccc; - color: #999; - background-color: #f4f4f4 - } +/* clear button */ +.multiSelect .clearButton { + position: absolute; + display: inline; + text-align: center; + cursor: pointer; + border: 1px solid #ccc; + height: 22px; + width: 22px; + font-size: 13px; + border-radius: 2px; + color: #666; + background-color: #f1f1f1; + line-height: 1.4; + right : 2px; + top: 4px; +} - .multiSelect .helperButton:disabled { - color: #ccc; - border: 1px solid #ddd - } +/* filter */ +.multiSelect .inputFilter { + border-radius: 2px; + border: 1px solid #ccc; + height: 26px; + font-size: 14px; + width:100%; + padding-left:7px; + -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; /* Firefox, other Gecko */ + box-sizing: border-box; /* Opera/IE 8+ */ + color: #888; + margin: 0px 0px 8px 0px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); +} - .multiSelect .clearButton:focus, .multiSelect .helperButton:focus, .multiSelect .inputFilter:focus { - border: 1px solid #66AFE9 !important; - outline: 0; - -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .065), 0 0 5px rgba(102, 175, 233, .6) !important; - box-shadow: inset 0 0 1px rgba(0, 0, 0, .065), 0 0 5px rgba(102, 175, 233, .6) !important - } +/* helper elements on hover & focus */ +.multiSelect .clearButton:hover, +.multiSelect .helperButton:hover { + border: 1px solid #ccc; + color: #999; + background-color: #f4f4f4; +} +.multiSelect .helperButton:disabled { + color: #ccc; + border: 1px solid #ddd; +} - .multiSelect .checkBoxContainer { - display: block; - padding: 8px; - overflow: hidden - } +.multiSelect .clearButton:focus, +.multiSelect .helperButton:focus, +.multiSelect .inputFilter:focus { + border: 1px solid #66AFE9 !important; + outline: 0; + -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important; + box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important; +} - .multiSelect .show { - display: block !important - } +/* container of multi select items */ +.multiSelect .checkBoxContainer { + display: block; + padding: 8px; + overflow: hidden; +} - .multiSelect .multiSelectItem { - display: block; - padding: 3px; - color: #444; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - border: 1px solid transparent; - position: relative; - min-width: 278px; - min-height: 32px - } +/* ! to show / hide the checkbox layer above */ +.multiSelect .show { + display: block !important; +} - .multiSelect .multiSelectItem:not(.multiSelectGroup).selected { - background-image: linear-gradient(#e9e9e9, #f1f1f1); - color: #555; - cursor: pointer; - border-top: 1px solid #e4e4e4; - border-left: 1px solid #e4e4e4; - border-right: 1px solid #d9d9d9 - } +/* item labels */ +.multiSelect .multiSelectItem { + display: block; + padding: 3px; + color: #444; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + border: 1px solid transparent; + position: relative; + min-width:278px; + min-height: 32px; +} - .multiSelect .multiSelectItem .acol label { - display: inline-block; - padding-right: 30px; - margin: 0; - font-weight: 400; - line-height: normal - } +/* Styling on selected items */ +.multiSelect .multiSelectItem:not(.multiSelectGroup).selected +{ + background-image: linear-gradient( #e9e9e9, #f1f1f1 ); + color: #555; + cursor: pointer; + border-top: 1px solid #e4e4e4; + border-left: 1px solid #e4e4e4; + border-right: 1px solid #d9d9d9; +} - .multiSelect .multiSelectFocus, .multiSelect .multiSelectGroup:hover, .multiSelect .multiSelectItem:hover { - background-image: linear-gradient(#c1c1c1, #999) !important; - color: #fff !important; - cursor: pointer; - border: 1px solid #ccc !important - } +.multiSelect .multiSelectItem .acol label { + display: inline-block; + padding-right: 30px; + margin: 0px; + font-weight: normal; + line-height: normal; +} - .multiSelect .multiSelectGroup span:hover, .multiSelect .multiSelectItem span:hover { - cursor: pointer - } +/* item labels focus on mouse hover */ +.multiSelect .multiSelectItem:hover, +.multiSelect .multiSelectGroup:hover { + background-image: linear-gradient( #c1c1c1, #999 ) !important; + color: #fff !important; + cursor: pointer; + border: 1px solid #ccc !important; +} - .multiSelect .multiSelectGroup { - display: block; - clear: both - } +/* item labels focus using keyboard */ +.multiSelect .multiSelectFocus { + background-image: linear-gradient( #c1c1c1, #999 ) !important; + color: #fff !important; + cursor: pointer; + border: 1px solid #ccc !important; +} - .multiSelect .tickMark { - display: inline-block; - position: absolute; - right: 10px; - top: 7px; - font-size: 10px - } +/* change mouse pointer into the pointing finger */ +.multiSelect .multiSelectItem span:hover, +.multiSelect .multiSelectGroup span:hover +{ + cursor: pointer; +} - .multiSelect .checkbox { - color: #ddd !important; - position: absolute; - left: -9999px; - cursor: pointer - } +/* ! group labels */ +.multiSelect .multiSelectGroup { + display: block; + clear: both; +} - .multiSelect .disabled, .multiSelect .disabled label input:hover ~ span, .multiSelect .disabled:hover { - color: #c4c4c4 !important; - cursor: not-allowed !important - } +/* right-align the tick mark (✔) */ +.multiSelect .tickMark { + display:inline-block; + position: absolute; + right: 10px; + top: 7px; + font-size: 10px; +} - .multiSelect img { - vertical-align: middle; - margin-bottom: 0; - max-height: 22px; - max-width: 22px - } +/* hide the original HTML checkbox away */ +.multiSelect .checkbox { + color: #ddd !important; + position: absolute; + left: -9999px; + cursor: pointer; +} + +/* checkboxes currently disabled */ +.multiSelect .disabled, +.multiSelect .disabled:hover, +.multiSelect .disabled label input:hover ~ span { + color: #c4c4c4 !important; + cursor: not-allowed !important; +} -} \ No newline at end of file +/* If you use images in button / checkbox label, you might want to change the image style here. */ +.multiSelect img { + vertical-align: middle; + margin-bottom:0px; + max-height: 22px; + max-width:22px; +} diff --git a/src/assets/dist/angular-filemanager.min.js b/src/assets/dist/angular-filemanager.min.js index 66350bb..6d196df 100755 --- a/src/assets/dist/angular-filemanager.min.js +++ b/src/assets/dist/angular-filemanager.min.js @@ -219,7 +219,7 @@ $scope.apiMiddleware.apiHandler.inprocess = true; $scope.modal('imagepreview', null, true) .find('#imagepreview-target') - .attr('src', $scope.apiMiddleware.getUrl(item)) + .attr('src', $scope.apiMiddleware.getPreviewUrl(item)) .unbind('load error') .on('load error', function() { $scope.apiMiddleware.apiHandler.inprocess = false; @@ -303,6 +303,31 @@ $scope.fileNavigator.refresh(recycle); }; + $scope.customAction = function (action, callback) { + var item = $scope.singleSelection(); + // can only be true if configured via JS, not if configured via filefly module php config options + if (typeof callback === 'function') { + callback(item); + return; + } + + if (window[callback] && typeof window[callback] === 'function') { + window[callback](item); + } else { + var msg = 'custom action [' + callback + '] has to be defined in global window scope!'; + window.console.error(msg); + return false; + } + }; + + $scope.customFileAction = function (action, callback) { + return $scope.customAction(action, callback); + }; + + $scope.customDirAction = function (action, callback) { + return $scope.customAction(action, callback); + }; + $scope.downloadLink = function() { var item = $scope.singleSelection(); if ($scope.selectionHas('dir')) { @@ -562,47 +587,6 @@ }]); })(angular); -(function(angular) { - 'use strict'; - var app = angular.module('FileManagerApp'); - - app.directive('angularFilemanager', ['$parse', 'fileManagerConfig', function($parse, fileManagerConfig) { - return { - restrict: 'EA', - templateUrl: fileManagerConfig.tplPath + '/main.html' - }; - }]); - - app.directive('ngFile', ['$parse', function($parse) { - return { - restrict: 'A', - link: function(scope, element, attrs) { - var model = $parse(attrs.ngFile); - var modelSetter = model.assign; - - element.bind('change', function() { - scope.$apply(function() { - modelSetter(scope, element[0].files); - }); - }); - } - }; - }]); - - app.directive('ngRightClick', ['$parse', function($parse) { - return function(scope, element, attrs) { - var fn = $parse(attrs.ngRightClick); - element.bind('contextmenu', function(event) { - scope.$apply(function() { - event.preventDefault(); - fn(scope, {$event: event}); - }); - }); - }; - }]); - -})(angular); - (function(angular) { 'use strict'; angular.module('FileManagerApp').service('chmod', function () { @@ -720,7 +704,11 @@ var rawModel = { name: model && model.name || '', thumbnail: model && model.thumbnail || '', + preview: model && model.preview || '', urls: model && model.urls || [], + extension: model && model.extension || '', + dirName: model && model.dirName || '', + // why not using model.dirname path: path || [], type: model && model.type || 'file', size: model && parseInt(model.size || 0), @@ -728,6 +716,7 @@ perms: new Chmod(model && model.rights), content: model && model.content || '', recursive: false, + // why not using model.path ? fullPath: function() { var path = this.path.filter(Boolean); return ('/' + path.join('/') + '/' + this.name).replace(/\/\//, '/'); @@ -782,6 +771,94 @@ return Item; }]); })(angular); +(function(angular) { + 'use strict'; + var app = angular.module('FileManagerApp'); + + app.directive('angularFilemanager', ['$parse', 'fileManagerConfig', function($parse, fileManagerConfig) { + return { + restrict: 'EA', + templateUrl: fileManagerConfig.tplPath + '/main.html' + }; + }]); + + app.directive('ngFile', ['$parse', function($parse) { + return { + restrict: 'A', + link: function(scope, element, attrs) { + var model = $parse(attrs.ngFile); + var modelSetter = model.assign; + + element.bind('change', function() { + scope.$apply(function() { + modelSetter(scope, element[0].files); + }); + }); + } + }; + }]); + + app.directive('ngRightClick', ['$parse', function($parse) { + return function(scope, element, attrs) { + var fn = $parse(attrs.ngRightClick); + element.bind('contextmenu', function(event) { + scope.$apply(function() { + event.preventDefault(); + fn(scope, {$event: event}); + }); + }); + }; + }]); + +})(angular); + +(function(angular) { + 'use strict'; + var app = angular.module('FileManagerApp'); + + app.filter('strLimit', ['$filter', function($filter) { + return function(input, limit, more) { + if (input.length <= limit) { + return input; + } + return $filter('limitTo')(input, limit) + (more || '...'); + }; + }]); + + app.filter('fileExtension', ['$filter', function($filter) { + return function(input) { + return /\./.test(input) && $filter('strLimit')(input.split('.').pop(), 3, '..') || ''; + }; + }]); + + app.filter('formatDate', ['$filter', function() { + return function(input) { + return input instanceof Date ? + input.toISOString().substring(0, 19).replace('T', ' ') : + (input.toLocaleString || input.toString).apply(input); + }; + }]); + + app.filter('humanReadableFileSize', ['$filter', 'fileManagerConfig', function($filter, fileManagerConfig) { + // See https://en.wikipedia.org/wiki/Binary_prefix + var decimalByteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']; + var binaryByteUnits = ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; + + return function(input) { + var i = -1; + var fileSizeInBytes = input; + + do { + fileSizeInBytes = fileSizeInBytes / 1024; + i++; + } while (fileSizeInBytes > 1024); + + var result = fileManagerConfig.useBinarySizePrefixes ? binaryByteUnits[i] : decimalByteUnits[i]; + return Math.max(fileSizeInBytes, 0.1).toFixed(1) + ' ' + result; + }; + }]); +})(angular); + (function(angular) { 'use strict'; angular.module('FileManagerApp').provider('fileManagerConfig', function() { @@ -825,7 +902,10 @@ remove: true, createFolder: true, pickFiles: false, - pickFolders: false + pickFolders: false, + // optional array of custom actions for files and dirs, must be an array of 'name': 'callback' + customFileActions: false, + customDirActions: false }, multipleDownloadFileName: 'angular-filemanager.zip', @@ -2020,53 +2100,6 @@ }]); })(angular); -(function(angular) { - 'use strict'; - var app = angular.module('FileManagerApp'); - - app.filter('strLimit', ['$filter', function($filter) { - return function(input, limit, more) { - if (input.length <= limit) { - return input; - } - return $filter('limitTo')(input, limit) + (more || '...'); - }; - }]); - - app.filter('fileExtension', ['$filter', function($filter) { - return function(input) { - return /\./.test(input) && $filter('strLimit')(input.split('.').pop(), 3, '..') || ''; - }; - }]); - - app.filter('formatDate', ['$filter', function() { - return function(input) { - return input instanceof Date ? - input.toISOString().substring(0, 19).replace('T', ' ') : - (input.toLocaleString || input.toString).apply(input); - }; - }]); - - app.filter('humanReadableFileSize', ['$filter', 'fileManagerConfig', function($filter, fileManagerConfig) { - // See https://en.wikipedia.org/wiki/Binary_prefix - var decimalByteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']; - var binaryByteUnits = ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; - - return function(input) { - var i = -1; - var fileSizeInBytes = input; - - do { - fileSizeInBytes = fileSizeInBytes / 1024; - i++; - } while (fileSizeInBytes > 1024); - - var result = fileManagerConfig.useBinarySizePrefixes ? binaryByteUnits[i] : decimalByteUnits[i]; - return Math.max(fileSizeInBytes, 0.1).toFixed(1) + ' ' + result; - }; - }]); -})(angular); - (function(angular, $) { 'use strict'; angular.module('FileManagerApp').service('apiHandler', ['$http', '$q', '$window', '$translate', 'Upload', @@ -2520,7 +2553,12 @@ var itemPath = this.getFilePath(item); return this.apiHandler.getUrl(fileManagerConfig.downloadFileUrl, itemPath); }; - + ApiMiddleware.prototype.getPreviewUrl = function(item) { + if (item.model && item.model.preview !== '') { + return item.model.preview; + } + return this.getUrl(item); + }; ApiMiddleware.prototype.getThumbnailUrl = function(item) { return this.getThumbnailPath(item); }; @@ -3844,13 +3882,13 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect' }]); angular.module("FileManagerApp").run(["$templateCache", function($templateCache) {$templateCache.put("src/templates/current-folder-breadcrumb.html","
    \n
  1. \n \n {{ config.appName }}\n \n
    2. \n
  2. \n \n {{dir | strLimit : 8}}\n \n \n {{dir | strLimit : 12}}\n \n
    3. \n
"); -$templateCache.put("src/templates/item-context-menu.html","
\n \n\n \n
"); -$templateCache.put("src/templates/main-icons-preview.html","
\n
\n
\n \n
\n \n
\n \"{{item.model.name}}\"\n
\n \n \n
\n {{item.model.name | strLimit : 11 }}\n \n
\n
\n\n
\n
\n
\n\n
\n {{\"no_files_in_folder\" | translate}}...\n
\n \n
\n {{ fileNavigator.error }}\n
\n
"); +$templateCache.put("src/templates/item-context-menu.html","
\n \n\n \n
"); +$templateCache.put("src/templates/main-icons-preview.html","
\n
\n
\n \n
\n \n
\n \"{{item.model.name}}\"\n
\n \n \n
\n
\n {{item.model.name | strLimit : 11 }}\n
\n \n
\n
\n\n
\n
\n
\n\n
\n {{\"no_files_in_folder\" | translate}}...\n
\n \n
\n {{ fileNavigator.error }}\n
\n
"); $templateCache.put("src/templates/main-icons.html","
\n
\n
\n \n
\n \n \n
\n {{item.model.name | strLimit : 11 }}\n \n
\n
\n\n
\n
\n
\n\n
\n {{\"no_files_in_folder\" | translate}}...\n
\n \n
\n {{ fileNavigator.error }}\n
\n
"); $templateCache.put("src/templates/main-table-modal.html","\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n {{\"name\" | translate}}\n \n \n
\n
\n
\n {{\"no_folders_in_folder\" | translate}}...\n \n \n
\n {{ fileNavigator.error }}\n
\n \n \n {{item.model.name | strLimit : 32}}\n \n \n \n
"); $templateCache.put("src/templates/main-table.html","\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n {{\"name\" | translate}}\n \n \n \n \n {{\"size\" | translate}}\n \n \n \n \n {{\"date\" | translate}}\n \n \n \n \n {{\"permissions\" | translate}}\n \n \n
\n
\n
\n {{\"no_files_in_folder\" | translate}}...\n
\n {{ fileNavigator.error }}\n
\n \n \n \n {{item.model.name | strLimit : 64}}\n \n \n \n {{item.model.size | humanReadableFileSize}}\n \n \n {{item.model.date | formatDate }}\n \n {{item.model.perms.toCode(item.model.type === \'dir\'?\'d\':\'-\')}}\n
\n"); $templateCache.put("src/templates/main.html","
\n
\n\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n"); $templateCache.put("src/templates/modals.html","
\n
\n
\n
\n \n

{{\"preview\" | translate}}

\n
\n
\n
\n\n \"{{singleSelection().model.name}}\"\n {{\'loading\' | translate}} ...\n
\n
\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\"confirm\" | translate}}

\n
\n
\n {{\'sure_to_delete\' | translate}} \n\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\'move\' | translate}}

\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
\n
\n \n

{{\'rename\' | translate}}

\n
\n
\n \n \n\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\'copy_file\' | translate}}

\n
\n
\n
\n \n \n
\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\'compress\' | translate}}

\n
\n
\n
\n
{{\'compression_started\' | translate}}
\n
\n
\n
\n {{\'sure_to_start_compression_with\' | translate}} {{singleSelection().model.name}} ?\n
\n
\n \n \n
\n
\n\n
\n
\n
\n
\n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\'extract_item\' | translate}}

\n
\n
\n
\n
{{\'extraction_started\' | translate}}
\n
\n
\n \n \n
\n
\n
\n
\n
\n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n \n

{{\'edit_file\' | translate}}

\n
\n
\n \n {{\'loading\' | translate}} ...\n \n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\'new_folder\' | translate}}

\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n

{{\"upload_files\" | translate}}

\n
\n
\n \n \n\n
\n
    \n
  • \n \n
    {{uploadFile.name}}
    \n

    {{uploadFile.size | humanReadableFileSize}}

    \n
    • \n
\n
\n {{\"uploading\" | translate}}... {{apiMiddleware.apiHandler.progress}}%\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n
\n \n

{{\'change_permissions\' | translate}}

\n
\n
\n
\n
\n

{{\'read\' | translate}}

\n \n
\n
\n
\n
\n
\n
\n

{{\'write\' | translate}}

\n\n \n
\n
\n
\n
\n
\n
\n

{{\'delete\' | translate}}

\n \n
\n
\n
\n
\n
\n
\n
\n \n \n
\n \n \n \n\n\n
\n
\n
\n
\n
\n \n

{{\'copy_links\' | translate}}

\n
\n
\n\n \n\n
\n \n \n \n \n
\n
\n \n\n
\n \n \n \n \n
\n\n \n\n
\n \n \n \n \n
\n
\n\n
\n
\n \n
\n \n \n \n
\n
\n
\n\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n \n

{{\"select_destination_folder\" | translate}}

\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n\n\n\n"); -$templateCache.put("src/templates/navbar.html",""); +$templateCache.put("src/templates/navbar.html",""); $templateCache.put("src/templates/sidebar.html","\n\n"); $templateCache.put("src/templates/spinner.html","");}]); \ No newline at end of file diff --git a/src/widgets/FileManagerWidget.php b/src/widgets/FileManagerWidget.php index 135bd30..338e804 100644 --- a/src/widgets/FileManagerWidget.php +++ b/src/widgets/FileManagerWidget.php @@ -11,6 +11,8 @@ use hrzg\filemanager\assets\AfmAsset; use yii\base\Widget; +use yii\helpers\ArrayHelper; +use yii\helpers\Json; use yii\helpers\Url; use yii\web\View; @@ -40,24 +42,22 @@ class FileManagerWidget extends Widget public $template = '
'; /** - * @var string + * @var boolean|null */ - public $thumbnailUrlPrefix; + public $enableThumbnails; /** - * @var string + * @var boolean|null */ - public $thumbnailUrlSuffix; + public $enableIconPreviewView; /** - * @var boolean + * array of angular fileManagerApp options + * + * @var null|array */ - public $enableThumbnails; + public $options; - /** - * @var boolean - */ - public $enableIconPreviewView; /** * @inheritdoc */ @@ -97,74 +97,105 @@ protected function setFileManagerConfig() $title = empty($this->title) ? getenv('AFM_TITLE') : $this->title; $lang = \Yii::$app->language; - // resolve options for JavaScript - $enableThumbnails = $this->enableThumbnails ? 'true' : 'false'; - $enableIconPreviewView = $this->enableIconPreviewView ? 'true' : 'false'; + $this->options = is_array($this->options) ? $this->options : []; + + $defaults = [ + 'appName' => $title, + 'defaultLang' => $lang, + // which functions should be activated in fileManagerApp? + 'searchForm' => true, + 'sidebar' => true, + 'breadcrumb' => true, + 'hidePermissions' => true, + + // Handler Urls + 'listUrl' => $this->handlerUrl, + 'uploadUrl' => $this->handlerUrl, + 'renameUrl' => $this->handlerUrl, + 'copyUrl' => $this->handlerUrl, + 'moveUrl' => $this->handlerUrl, + 'removeUrl' => $this->handlerUrl, + 'getContentUrl' => $this->handlerUrl, + 'createFolderUrl' => $this->handlerUrl, + 'downloadFileUrl' => $this->handlerUrl, + 'downloadMultipleUrl' => $this->handlerUrl, + 'compressUrl' => $this->handlerUrl, + 'extractUrl' => $this->handlerUrl, + 'permissionsUrl' => $this->handlerUrl, + + // Additional settings + 'multipleDownloadFileName' => 'filemanager.zip', + 'showSizeForDirectories' => false, + 'useBinarySizePrefixes' => false, + 'downloadFilesByAjax' => true, + 'previewImagesInModal' => true, + 'enablePermissionsRecursive' => false, + 'enableThumbnails' => false, + 'enableIconPreviewView' => false, + + // File patterns + 'isEditableFilePattern' => '/\.(!)/i', + 'isImageFilePattern' => '/\.(jpe?g|gif|bmp|png|svg|tiff?)$/i', + 'isExtractableFilePattern' => '/\.(gz|tar|rar|g?zip)$/i', + // define allowed actions for filemanager + 'allowedActions' => [ + 'upload' => true, + 'rename' => false, + 'move' => true, + 'copy' => true, + 'edit' => true, + 'compress' => true, + 'compressChooseName' => true, + 'extract' => true, + 'download' => true, + 'downloadMultiple' => true, + 'downloadLink' => true, + 'preview' => true, + 'remove' => true, + 'createFolder' => true, + 'pickFiles' => false, + 'pickFolders' => false, + 'changePermissions' => $allowPermissions, + 'customFileActions' => false, + 'customDirActions' => false, + ] + ]; + + // these options are regEx and therefor can not be stored as strings in json + // if preset, they will be handled later, see search/replace + $specialOpts = [ + 'isEditableFilePattern', + 'isImageFilePattern', + 'isExtractableFilePattern' + ]; + // store specialOpts for replacement + $specialValues = []; + + $config = ArrayHelper::merge($defaults, $this->options); + + // now insert placeholders for $specialValues that can not be stored as strings, e.g. regexP + foreach ($specialOpts as $opt) { + if (!empty($config[$opt])) { + $specialValues[$opt] = [ + 'value' => $config[$opt], + 'placeholder' => '###' . strtoupper($opt) . '###', + ]; + $config[$opt] = $specialValues[$opt]['placeholder']; + } + } + // generate config json + $configJson = json_encode($config); + // then replace placeholder strings in json config that can/should not be strings... + foreach ($specialValues as $special) { + $configJson = str_replace('"' . $special['placeholder']. '"', $special['value'], $configJson); + } + // finally create JS to init fileManagerApp $initFilemanagerJs = <<thumbnailUrlPrefix}', - thumbnailUrlSuffix: '{$this->thumbnailUrlSuffix}', - enableThumbnails: {$enableThumbnails}, - enableIconPreviewView: {$enableIconPreviewView}, - - // File patterns - isEditableFilePattern: /\.(!)/i, - isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i, - isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i - //tplPath: 'src/templates' - }); + // we use merge here to get deep.copy, see: https://docs.angularjs.org/api/ng/function/angular.merge + config.set(angular.merge(defaults, $configJson)); }]); JS;