Skip to content

Instantly share code, notes, and snippets.

@mohamedali-s-4725

mohamedali-s-4725/components.context-menu.js

Last active June 22, 2021 14:38
Show Gist options
  • Save mohamedali-s-4725/8943e2f757e259b0c19aecf94bb19b34 to your computer and use it in GitHub Desktop.
Save mohamedali-s-4725/8943e2f757e259b0c19aecf94bb19b34 to your computer and use it in GitHub Desktop.
Download ZIP
Menu
Raw
components.context-menu.js
import Ember from 'ember';
const { Component, get, set } = Ember;
export default Component.extend({
default_permission: Ember.Object.create({
can_access_comment: true,
can_read_files: true,
can_edit_files: true,
can_update_files: true,
can_remove_share: true,
can_share: true,
can_trash: true,
can_delete_files: true,
can_move: true,
can_download: true
}),
file_permissions: function(){
return [];
}.property(),
didReceiveAttrs(){
this._super(...arguments);
this.send( 'computeMenu' );
},
actions:{
computeMenu(){
let self = this,
file_count = get( self, 'selected_files' ),
file_permissions = get( self, 'file_permissions' ),
default_permission = get( self, 'default_permission' );
if ( file_count > 1 ){
let disabled_menus = [];
file_permissions.forEach( ( obj )=> {
let keys = Object.keys( obj ),
values = Object.values( obj );
values.filter( ( boolean, index )=> {
if ( !boolean && !disabled_menus.includes( keys[index] ) ){
disabled_menus.pushObject( keys[index] );
default_permission[ keys[index] ] = false;
} else if ( !disabled_menus.includes( keys[index] ) ) {
default_permission[ keys[index] ] = true;
}
});
});
self.send( 'constructMenu', default_permission );
} else {
file_permissions = file_permissions.length ? file_permissions[0] : default_permission;
self.send( 'constructMenu', file_permissions );
}
},
constructMenu( capabilities ){
let self = this,
file_count = get( self, 'selected_files' ),
menu_object = get( self, 'menu_object' );
Object.keys( capabilities ).forEach( ( permission )=>{
this.send( 'toggleMenu', 'key', permission, capabilities[ permission ] );
});
if ( file_count > 1 ){
this.send( 'toggleMenu', 'show_on', 'single_select', false );
this.send( 'toggleMenu', 'show_on', 'multi_select_only', true );
} else {
this.send( 'toggleMenu', 'show_on', 'multi_select_only', false );
}
},
toggleMenu( filter_key, filter_value, status ){
let menu_list = get( this, 'menu_object' ),
menu_object = menu_list.filterBy( filter_key, filter_value );
menu_object.forEach( ( menu ) => {
if ( menu ){
menu.set( 'enabled', status );
}
});
}
}
});
Raw
components.file-listing.js
import Ember from 'ember';
export default Ember.Component.extend({
resource_permission: function(){
return Ember.Object.create({
can_access_comment: true,
can_read_files: true,
can_edit_files: true,
can_update_files: true,
can_remove_share: true,
can_share: true,
can_trash: true,
can_delete_files: true,
can_move: true,
can_download: true
});
}.property(),
files: function(){
return [];
}.property(),
files_count: function(){
return 0;
}.property(),
file_permissions: function(){
return [];
}.property(),
mouseMove(){
this.$('.capabilities').show();
},
mouseLeave(){
this.$('.capabilities').hide();
},
actions:{
changePermission( permission ){
this.toggleProperty( permission );
},
fileClicked( permission, id ){
let files = this.get( 'files' ),
file_permissions = this.get( 'file_permissions' );
if ( files.includes( id ) ){
files.removeObject( id );
file_permissions.removeObject( permission );
this.decrementProperty( 'files_count' );
} else {
files.pushObject( id );
file_permissions.pushObject( permission );
this.incrementProperty( 'files_count' );
}
}
}
});
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({});
Raw
controllers.favorites.js
import Ember from 'ember';
const { Object:object } = Ember;
export default Ember.Controller.extend({
selected_files: 0,
file_permissions: [],
menu_object: [
object.create({ 'label_name': 'Open',
'triggerAction': '',
'key': 'can_read_files' ,
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Preview',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Properties',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Share',
'triggerAction': '',
'key': 'can_share',
'show_on': 'multi_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Comment',
'triggerAction': '',
'key': 'can_access_comment',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Upload New Version',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Set As Favorite',
'triggerAction': '',
'key': 'set_as_favorite',
'show_on': 'multi_select',
'action_based': true,
'enabled': true }),
object.create({ 'label_name': 'Remove from Favorites',
'triggerAction': '',
'key': 'remove_favorite',
'show_on': 'multi_select',
'action_based': true,
'enabled': true }),
object.create({ 'label_name': 'Check-In',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Check-Out',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Rename',
'triggerAction': '',
'key': 'can_edit_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Copy',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Move',
'triggerAction': '',
'key': 'can_move',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Download',
'triggerAction': '',
'key': 'can_download',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Zip',
'triggerAction': '',
'key': 'zip',
'show_on': 'multi_select_only',
'action_based': false,
'enabled': true }),
object.create({ 'label_name': 'Move to Trash',
'triggerAction': '',
'key': 'can_trash',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Remove Share',
'triggerAction': '',
'key': 'can_remove_share',
'show_on': 'multi_select',
'action_based': true,
'enabled': false })
]
});
Raw
controllers.folders.js
import Ember from 'ember';
const { Object:object, Controller } = Ember;
export default Controller.extend({
selected_files: 0,
file_permissions: [],
menu_object: [
object.create({ 'label_name': 'Open',
'triggerAction': '',
'key': 'can_read_files' ,
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Preview',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Properties',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'is_divider': true }),
object.create({ 'label_name': 'Share',
'triggerAction': '',
'key': 'can_share',
'show_on': 'multi_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Comment',
'triggerAction': '',
'key': 'can_access_comment',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Upload New Version',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Set As Favorite',
'triggerAction': '',
'key': 'set_as_favorite',
'show_on': 'multi_select',
'action_based': true,
'enabled': true }),
object.create({ 'label_name': 'Remove from Favorites',
'triggerAction': '',
'key': 'remove_favorite',
'show_on': 'multi_select',
'action_based': true,
'enabled': true }),
object.create({ 'label_name': 'Check-In',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Check-Out',
'triggerAction': '',
'key': 'can_update_files',
'show_on': 'single_select',
'action_based': true,
'enabled': false }),
object.create({ 'label_name': 'Rename',
'triggerAction': '',
'key': 'can_edit_files',
'show_on': 'single_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Copy',
'triggerAction': '',
'key': 'can_read_files',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Move',
'triggerAction': '',
'key': 'can_move',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Download',
'triggerAction': '',
'key': 'can_download',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Zip',
'triggerAction': '',
'key': 'zip',
'show_on': 'multi_select_only',
'action_based': false,
'enabled': true }),
object.create({ 'label_name': 'Move to Trash',
'triggerAction': '',
'key': 'can_trash',
'show_on': 'multi_select',
'action_based': false,
'enabled': false }),
object.create({ 'label_name': 'Remove Share',
'triggerAction': '',
'key': 'can_remove_share',
'show_on': 'multi_select',
'action_based': true,
'enabled': false })
]
});
Raw
controllers.trash.js
import Ember from 'ember';
const { Object:object } = Ember;
export default Ember.Controller.extend({
selected_files: 0,
file_permissions: [],
menu_object: [
object.create({ 'label_name': 'Put back',
'triggerAction': '',
'key': 'can_delete_files',
'show_on': 'multi_select',
'action_based': false,
'enabled': true
}),
object.create({ 'label_name': 'Delete Forever',
'triggerAction': '',
'key': 'can_delete_files' ,
'show_on': 'multi_select',
'action_based': false,
'enabled': true
})
]
});
Raw
router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route( 'folders' );
this.route( 'favorites' );
this.route( 'trash' );
});
export default Router;
Raw
routes.application.js
import Ember from 'ember';
export default Ember.Route.extend({
afterModel(){
this.transitionTo( 'folders' );
}
});
Raw
routes.favorites.js
import Ember from 'ember';
export default Ember.Route.extend({
actions:{
willTransition(){
this.controller.set( 'selected_files', 0 );
this.controller.set( 'file_permissions', [] );
}
}
});
Raw
routes.folders.js
import Ember from 'ember';
export default Ember.Route.extend({
actions:{
willTransition(){
this.controller.set( 'selected_files', 0 );
this.controller.set( 'file_permissions', [] );
}
}
});
Raw
routes.trash.js
import Ember from 'ember';
export default Ember.Route.extend({
actions:{
willTransition(){
this.controller.set( 'selected_files', 0 );
this.controller.set( 'file_permissions', [] );
}
}
});
Raw
styles.app.css
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.menu-container{
width: 40%;
float: left;
}
.menu{
border: solid 1px;
padding: 10px 10px 10px 10px;
float: left;
margin-left: 5px;
}
.menu .item{
padding: 3px;
}
.options{
float: left;
margin: 5px 25px;
}
.options .file{
width: 120px;
border: solid 1px;
padding: 2px 15px;
font-size: 12px;
margin: 8px;
}
.options .selection {
float: left;
margin: 5px 0px 0px -10px;
}
.options .capabilities{
position: absolute;
display: none;
margin: -28px 0px 0px 166px;
width: 130px;
overflow: scroll;
max-height: 120px;
border: solid 1px;
font-size: 13px;
}
.capabilities .arrow{
position: fixed;
border-top: 6px solid transparent;
border-right: 7px solid black;
border-bottom: 6px solid transparent;
margin-left: -7px;
float:left;
}
.capabilities .permission{
margin: 7px 10px 7px 10px;
}
.capabilities .permission:hover{
color: blue;
}
.capabilities .per-ch{
float: left;
margin: 0px 8px 0px 10px;
}
.route{
display: inline-block;
margin-right: 25px;
}
a{
color: black;
text-decoration: none;
font-style: italic;
}
.route .active{
background: lightgray;
padding: 3px 25px;
font-weight: bold;
font-style: normal;
}
Raw
templates.application.hbs
<div class='page-header'>
<h2> <center> Menu construction based on permission </center> </h2>
<div class='selected-route'> {{ selected_route }}
<div class='route'>
{{#link-to 'folders'}} Folders {{/link-to}}
</div>
<div class='route'>
{{#link-to 'favorites'}} Favorites {{/link-to}}
</div>
<div class='route'>
{{#link-to 'trash'}} Trash {{/link-to}}
</div>
</div>
</div>
<hr>
{{outlet}}
Raw
templates.components.context-menu.hbs
<div class='menu'>
{{#each menu_object as | menu |}}
{{#if menu.enabled }}
<div class='item'> {{menu.label_name}} </div>
{{/if}}
{{#if menu.is_divider }}
{{/if}}
{{/each}}
</div>
{{yield}}
Raw
templates.components.file-listing.hbs
<input type='checkbox' class='selection' {{action 'fileClicked' resource_permission id on='mouseUp' }}>
<div class='file'> File {{id}} </div>
<div class='capabilities'>
<div class='arrow'> </div>
{{#if resource_permission.can_access_comment}}
<input type='checkbox' class='per-ch' style='margin-top: 10px;' checked={{resource_permission.can_access_comment}} {{action 'changePermission' 'resource_permission.can_access_comment'}}>
{{else}}
<input type='checkbox' class='per-ch' style='margin-top: 10px;' {{action 'changePermission' 'resource_permission.can_access_comment' }}>
{{/if}}
<div class='permission'> can comment </div><hr>
{{#if resource_permission.can_trash}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_trash}} {{action 'changePermission' 'resource_permission.can_trash' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_trash' }}>
{{/if}}
<div class='permission'> can trash </div><hr>
{{#if resource_permission.can_delete_files}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_delete_files}} {{action 'changePermission' 'resource_permission.can_delete_files' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_delete_files' }}>
{{/if}}
<div class='permission'> can delete </div><hr>
{{#if resource_permission.can_edit_files}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_edit_files}} {{action 'changePermission' 'resource_permission.can_edit_files' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_edit_files' }}>
{{/if}}
<div class='permission'> can edit </div><hr>
{{#if resource_permission.can_read_files}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_read_files}} {{action 'changePermission' 'resource_permission.can_read_files' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_read_files' }}>
{{/if}}
<div class='permission'> can read </div><hr>
{{#if resource_permission.can_update_files}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_update_files}} {{action 'changePermission' 'resource_permission.can_update_files' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_update_files' }}>
{{/if}}
<div class='permission'> can update </div><hr>
{{#if resource_permission.can_share}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_share}} {{action 'changePermission' 'resource_permission.can_share' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_share' }}>
{{/if}}
<div class='permission'> can share </div><hr>
{{#if resource_permission.can_move}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_move}} {{action 'changePermission' 'resource_permission.can_move' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_move' }}>
{{/if}}
<div class='permission'> can move </div><hr>
{{#if resource_permission.can_download}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_download}} {{action 'changePermission' 'resource_permission.can_download' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_download' }}>
{{/if}}
<div class='permission'> can download </div><hr>
{{#if resource_permission.can_remove_share}}
<input type='checkbox' class='per-ch' checked={{resource_permission.can_remove_share}} {{action 'changePermission' 'resource_permission.can_remove_share' }}>
{{else}}
<input type='checkbox' class='per-ch' {{action 'changePermission' 'resource_permission.can_remove_share' }}>
{{/if}}
<div class='permission'> can remove share </div>
</div>
{{yield}}
Raw
templates.favorites.hbs
<div class='menu-container'>
<h3> Menu : </h3>
{{!--
* Finally we sent `menu_object` param only into the context-menu component. ( `menu_object` --> from controller )
* The `selected_files` and `file_permissions` are getting from `selection` service.
--}}
{{#if selected_files}}
{{context-menu selected_files=selected_files file_permissions=file_permissions menu_object=menu_object}}
{{else}}
<font color='red'> Select any file. </font>
{{/if}}
</div>
<hr style="float: left; "size="500">
<div class='options'>
<h3> Listing : </h3>
{{!--
* This component used for demo. ( dummy )
--}}
{{file-listing id=1 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=2 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=3 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=4 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=5 file_permissions=file_permissions files_count= selected_files}}
</div>
{{outlet}}
<br>
<br>
Raw
templates.folders.hbs
<div class='menu-container'>
<h3> Menu : </h3>
{{!--
* Finally we sent `menu_object` param only into the context-menu component.
* The `selected_files` and `file_permissions` are getting from `selection` service.
--}}
{{#if selected_files}}
{{context-menu selected_files=selected_files file_permissions=file_permissions menu_object=menu_object}}
{{else}}
<font color='red'> Select any file. </font>
{{/if}}
</div>
<hr style="float: left; "size="500">
<div class='options'>
<h3> Listing : </h3>
{{!--
* This component used for demo.
--}}
{{file-listing id=1 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=2 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=3 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=4 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=5 file_permissions=file_permissions files_count= selected_files}}
</div>
{{outlet}}
<br>
<br>
Raw
templates.trash.hbs
<div class='menu-container'>
<h3> Menu : </h3>
{{!--
* Finally we sent `menu_object` param only into the context-menu component.
* The `selected_files` and `file_permissions` are getting from `selection` service.
--}}
{{#if selected_files}}
{{context-menu selected_files=selected_files file_permissions=file_permissions menu_object=menu_object}}
{{else}}
<font color='red'> Select any file. </font>
{{/if}}
</div>
<hr style="float: left; "size="500">
<div class='options'>
<h3> Listing : </h3>
{{!--
* This component used for demo.
--}}
{{file-listing id=1 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=2 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=3 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=4 file_permissions=file_permissions files_count= selected_files}}
{{file-listing id=5 file_permissions=file_permissions files_count= selected_files}}
</div>
{{outlet}}
<br>
<br>
Raw
twiddle.json
{
"version": "0.10.6",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment