@ -4,9 +4,11 @@ define([
'/bower_components/nthen/index.js' ,
'/common/sframe-common.js' ,
'/common/common-interface.js' ,
'/common/common-ui-elements.js' ,
'/common/common-util.js' ,
'/common/common-hash.js' ,
'/customize/messages.js' ,
'/common/hyperscript.js' ,
'/bower_components/file-saver/FileSaver.min.js' ,
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css' ,
@ -18,9 +20,11 @@ define([
nThen ,
SFCommon ,
UI ,
UIElements ,
Util ,
Hash ,
Messages
Messages ,
h
)
{
var saveAs = window . saveAs ;
@ -41,21 +45,31 @@ define([
'cp-settings-thumbnails' ,
'cp-settings-userfeedback'
] ,
'creation' : [
'cp-settings-creation-owned' ,
'cp-settings-creation-expire' ,
'cp-settings-creation-skip' ,
'cp-settings-creation-template'
] ,
'drive' : [
'cp-settings-backup-drive' ,
'cp-settings-import-local-pads' ,
'cp-settings-reset-drive'
'cp-settings- drive- backup',
'cp-settings- drive- import-local',
'cp-settings- drive-reset '
] ,
'pad' : [
'cp-settings-pad-width' ,
] ,
'code' : [
'cp-settings- indent-unit',
'cp-settings- indent-type'
'cp-settings- code- indent-unit',
'cp-settings- code- indent-type'
]
} ;
var createInfoBlock = function ( ) {
var create = { } ;
// Account settings
create [ 'info-block' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-info-block' } ) ;
var $account = $ ( '<div>' , { 'class' : 'cp-sidebarlayout-element' } ) . appendTo ( $div ) ;
@ -81,7 +95,7 @@ define([
} ;
// Create the block containing the display name field
var createDisplayNameInput = function ( ) {
create [ 'displayname' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-displayname cp-sidebarlayout-element' } ) ;
$ ( '<label>' , { 'for' : 'cp-settings-displayname' } ) . text ( Messages . user _displayName ) . appendTo ( $div ) ;
var $inputBlock = $ ( '<div>' , { 'class' : 'cp-sidebarlayout-input-block' } ) . appendTo ( $div ) ;
@ -124,111 +138,49 @@ define([
return $div ;
} ;
var createIndentUnitSelector = function ( ) {
var $div = $ ( '<div>' , {
'class' : 'cp-settings-indent-unit cp-sidebarlayout-element'
} ) ;
$ ( '<label>' ) . text ( Messages . settings _codeIndentation ) . appendTo ( $div ) ;
var $inputBlock = $ ( '<div>' , {
'class' : 'cp-sidebarlayout-input-block' ,
} ) . appendTo ( $div ) ;
var $input = $ ( '<input>' , {
'min' : 1 ,
'max' : 8 ,
type : 'number' ,
} ) . on ( 'change' , function ( ) {
var val = parseInt ( $input . val ( ) ) ;
if ( typeof ( val ) !== 'number' ) { return ; }
common . setAttribute ( [ 'codemirror' , 'indentUnit' ] , val ) ;
} ) . appendTo ( $inputBlock ) ;
common . getAttribute ( [ 'codemirror' , 'indentUnit' ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
if ( typeof ( val ) !== 'number' ) {
$input . val ( 2 ) ;
} else {
$input . val ( val ) ;
}
} ) ;
return $div ;
} ;
var createIndentTypeSelector = function ( ) {
var key = 'indentWithTabs' ;
var $div = $ ( '<div>' , {
'class' : 'cp-settings-indent-type cp-sidebarlayout-element'
} ) ;
$ ( '<label>' ) . text ( Messages . settings _codeUseTabs ) . appendTo ( $div ) ;
var $inputBlock = $ ( '<div>' , {
'class' : 'cp-sidebarlayout-input-block' ,
} ) . css ( 'flex-flow' , 'column' )
. appendTo ( $div ) ;
var $input = $ ( '<input>' , {
type : 'checkbox' ,
} ) . on ( 'change' , function ( ) {
var val = $input . is ( ':checked' ) ;
if ( typeof ( val ) !== 'boolean' ) { return ; }
common . setAttribute ( [ 'codemirror' , key ] , val ) ;
} ) . appendTo ( $inputBlock ) ;
/ * p r o x y . o n ( ' c h a n g e ' , [ ' s e t t i n g s ' , ' c o d e m i r r o r ' , k e y ] , f u n c t i o n ( o , n ) {
$input [ 0 ] . checked = ! ! n ;
} ) ; * /
common . getAttribute ( [ 'codemirror' , key ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
$input [ 0 ] . checked = ! ! val ;
} ) ;
create [ 'language-selector' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-language-selector cp-sidebarlayout-element' } ) ;
$ ( '<label>' ) . text ( Messages . language ) . appendTo ( $div ) ;
var $b = common . createLanguageSelector ( $div ) ;
$b . find ( 'button' ) . addClass ( 'btn btn-secondary' ) ;
return $div ;
} ;
var createPadWidthSelector = function ( ) {
var $div = $ ( '<div>' , {
'class' : 'cp-settings-pad-width cp-sidebarlayout-element'
} ) ;
$ ( '<span>' , { 'class' : 'label' } ) . text ( Messages . settings _padWidth ) . appendTo ( $div ) ;
create [ 'logout-everywhere' ] = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var $div = $ ( '<div>' , { 'class' : 'cp-settings-logout-everywhere cp-sidebarlayout-element' } ) ;
$ ( '<label>' , { 'for' : 'cp-settings-logout-everywhere' } )
. text ( Messages . settings _logoutEverywhereTitle ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. text ( Messages . settings _padWidthHint ) . appendTo ( $div ) ;
. text ( Messages . settings _logoutEverywhere ) . appendTo ( $div ) ;
var $button = $ ( '<button>' , {
id : 'cp-settings-logout-everywhere' ,
'class' : 'btn btn-primary'
} ) . text ( Messages . settings _logoutEverywhereButton )
. appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) . hide ( ) . appendTo ( $div ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) . hide ( ) . appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) ;
$button . click ( function ( ) {
var $label = $ ( '<label>' , { 'for' : 'cp-settings-padwidth' , 'class' : 'noTitle' } )
. text ( Messages . settings _padWidthLabel ) ;
var $input = $ ( '<input>' , {
type : 'checkbox' ,
id : 'cp-settings-padwidth'
} ) . on ( 'change' , function ( ) {
UI . confirm ( Messages . settings _logoutEverywhereConfirm , function ( yes ) {
if ( ! yes ) { return ; }
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = $input . is ( ':checked' ) ;
common . setAttribute ( [ 'pad' , 'width' ] , va , function ( ) {
sframeChan . query ( 'Q_SETTINGS_LOGOUT' , null , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
window . setTimeout ( function ( ) {
$ok . fadeOut ( 1500 ) ;
} , 2500 ) ;
} ) ;
} ) ;
} ) . appendTo ( $div ) ;
$label . appendTo ( $div ) ;
$ok . hide ( ) . appendTo ( $div ) ;
$spinner . hide ( ) . appendTo ( $div ) ;
common . getAttribute ( [ 'pad' , 'width' ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
if ( val ) {
$input . attr ( 'checked' , 'checked' ) ;
}
} ) ;
return $div ;
} ;
var createResetTips = function ( ) {
create [ 'resettips' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-resettips cp-sidebarlayout-element' } ) ;
$ ( '<label>' ) . text ( Messages . settings _resetTips ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
@ -249,7 +201,7 @@ define([
return $div ;
} ;
var createThumbnails = function ( ) {
create [ 'thumbnails' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-thumbnails cp-sidebarlayout-element' } ) ;
$ ( '<label>' ) . text ( Messages . settings _thumbnails ) . appendTo ( $div ) ;
@ -301,8 +253,286 @@ define([
return $div ;
} ;
var createBackupDrive = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-backup-drive cp-sidebarlayout-element' } ) ;
create [ 'userfeedback' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-userfeedback cp-sidebarlayout-element' } ) ;
$ ( '<span>' , { 'class' : 'label' } ) . text ( Messages . settings _userFeedbackTitle ) . appendTo ( $div ) ;
var $label = $ ( '<label>' , { 'for' : 'cp-settings-userfeedback' , 'class' : 'noTitle' } )
. text ( Messages . settings _userFeedback ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. append ( Messages . settings _userFeedbackHint1 )
. append ( Messages . settings _userFeedbackHint2 ) . appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) ;
var $checkbox = $ ( '<input>' , {
'type' : 'checkbox' ,
id : 'cp-settings-userfeedback'
} ) . on ( 'change' , function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = $checkbox . is ( ':checked' ) || false ;
common . setAttribute ( [ 'general' , 'allowUserFeedback' ] , val , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
$checkbox . appendTo ( $div ) ;
$label . appendTo ( $div ) ;
$ok . hide ( ) . appendTo ( $div ) ;
$spinner . hide ( ) . appendTo ( $div ) ;
if ( privateData . feedbackAllowed ) {
$checkbox [ 0 ] . checked = true ;
}
return $div ;
} ;
// Pad Creation settings
var setHTML = function ( e , html ) {
e . innerHTML = html ;
return e ;
} ;
create [ 'creation-owned' ] = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var owned = h ( 'div.cp-settings-creation-owned.cp-sidebarlayout-element' , [
h ( 'label' , [
Messages . creation _ownedTitle
] ) ,
setHTML ( h ( 'p.cp-sidebarlayout-description' ) ,
Messages . creation _owned1 + '<br>' + Messages . creation _owned2 ) ,
h ( 'input#cp-creation-owned-true.cp-creation-owned-value' , {
type : 'radio' ,
name : 'cp-creation-owned' ,
value : 1 ,
} ) ,
h ( 'label' , { 'for' : 'cp-creation-owned-true' } , Messages . creation _ownedTrue ) ,
h ( 'input#cp-creation-owned-false.cp-creation-owned-value' , {
type : 'radio' ,
name : 'cp-creation-owned' ,
value : 0 ,
checked : 'checked'
} ) ,
h ( 'label' , { 'for' : 'cp-creation-owned-false' } , Messages . creation _ownedFalse ) ,
h ( 'span.fa.fa-check' , { title : Messages . saved } ) ,
h ( 'span.fa.fa-spinner.fa-pulse' ) ,
] ) ;
var $owned = $ ( owned ) ;
var $ok = $owned . find ( '.fa-check' ) ;
var $spinner = $owned . find ( '.fa-spinner' ) ;
$owned . find ( 'input' ) . change ( function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = parseInt ( $owned . find ( '[name="cp-creation-owned"]:checked' ) . val ( ) ) ;
common . setAttribute ( [ 'general' , 'creation' , 'owned' ] , val , function ( e ) {
if ( e ) { return void console . error ( e ) ; }
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
common . getAttribute ( [ 'general' , 'creation' , 'owned' ] , function ( e , val ) {
if ( val ) {
$owned . find ( '#cp-creation-owned-true' ) . attr ( 'checked' , true ) ;
}
} ) ;
return $owned ;
} ;
create [ 'creation-expire' ] = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var expire = h ( 'div.cp-settings-creation-expire.cp-sidebarlayout-element' , [
h ( 'label' , [
Messages . creation _expireTitle
] ) ,
setHTML ( h ( 'p.cp-sidebarlayout-description' ) ,
Messages . creation _expire1 + '<br>' + Messages . creation _expire2 ) ,
h ( 'input#cp-creation-expire-false.cp-creation-expire-value' , {
type : 'radio' ,
name : 'cp-creation-expire' ,
value : 0 ,
checked : 'checked'
} ) ,
h ( 'label' , { 'for' : 'cp-creation-expire-false' } , Messages . creation _expireFalse ) ,
h ( 'input#cp-creation-expire-true.cp-creation-expire-value' , {
type : 'radio' ,
name : 'cp-creation-expire' ,
value : 1
} ) ,
h ( 'label' , { 'for' : 'cp-creation-expire-true' } , [
Messages . creation _expireTrue ,
h ( 'span.cp-creation-expire-picker' , [
h ( 'input#cp-creation-expire-val' , {
type : "number" ,
min : 1 ,
max : 100 ,
value : 3
} ) ,
h ( 'select#cp-creation-expire-unit' , [
h ( 'option' , { value : 'hour' } , Messages . creation _expireHours ) ,
h ( 'option' , { value : 'day' } , Messages . creation _expireDays ) ,
h ( 'option' , {
value : 'month' ,
selected : 'selected'
} , Messages . creation _expireMonths )
] )
] )
] ) ,
h ( 'span.fa.fa-check' , { title : Messages . saved } ) ,
h ( 'span.fa.fa-spinner.fa-pulse' ) ,
] ) ;
var $expire = $ ( expire ) ;
var $ok = $expire . find ( '.fa-check' ) ;
var $spinner = $expire . find ( '.fa-spinner' ) ;
var getValue = function ( ) {
if ( ! parseInt ( $expire . find ( '[name="cp-creation-expire"]:checked' ) . val ( ) ) ) { return 0 ; }
var unit = 0 ;
switch ( $expire . find ( '#cp-creation-expire-unit' ) . val ( ) ) {
case "hour" : unit = 3600 ; break ;
case "day" : unit = 3600 * 24 ; break ;
case "month" : unit = 3600 * 24 * 30 ; break ;
default : unit = 0 ;
}
return ( $expire . find ( '#cp-creation-expire-val' ) . val ( ) || 0 ) * unit ;
} ;
$expire . find ( 'input, select' ) . change ( function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
common . setAttribute ( [ 'general' , 'creation' , 'expire' ] , getValue ( ) , function ( e ) {
if ( e ) { return void console . error ( e ) ; }
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
common . getAttribute ( [ 'general' , 'creation' , 'expire' ] , function ( e , val ) {
UIElements . setExpirationValue ( val , $expire ) ;
} ) ;
return $expire ;
} ;
create [ 'creation-skip' ] = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var skip = h ( 'div.cp-settings-creation-skip.cp-sidebarlayout-element' , [
h ( 'label' , [
Messages . settings _creationSkip
] ) ,
setHTML ( h ( 'p.cp-sidebarlayout-description' ) , Messages . settings _creationSkipHint ) ,
h ( 'input#cp-creation-skip-true.cp-creation-skip-value' , {
type : 'radio' ,
name : 'cp-creation-skip' ,
value : 1 ,
} ) ,
h ( 'label' , { 'for' : 'cp-creation-skip-true' } , Messages . settings _creationSkipTrue ) ,
h ( 'input#cp-creation-skip-false.cp-creation-skip-value' , {
type : 'radio' ,
name : 'cp-creation-skip' ,
value : 0 ,
checked : 'checked'
} ) ,
h ( 'label' , { 'for' : 'cp-creation-skip-false' } , Messages . settings _creationSkipFalse ) ,
h ( 'span.fa.fa-check' , { title : Messages . saved } ) ,
h ( 'span.fa.fa-spinner.fa-pulse' ) ,
] ) ;
var $div = $ ( skip ) ;
var $ok = $div . find ( '.fa-check' ) ;
var $spinner = $div . find ( '.fa-spinner' ) ;
$div . find ( 'input' ) . change ( function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = parseInt ( $div . find ( '[name="cp-creation-skip"]:checked' ) . val ( ) ) ;
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
// modal
if ( ! val ) {
$ ( '.cp-settings-creation-template' ) . addClass ( 'cp-settings-creation-skipped' ) ;
} else {
$ ( '.cp-settings-creation-template' ) . removeClass ( 'cp-settings-creation-skipped' ) ;
}
common . setAttribute ( [ 'general' , 'creation' , 'skip' ] , val , function ( e ) {
if ( e ) { return void console . error ( e ) ; }
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
common . getAttribute ( [ 'general' , 'creation' , 'skip' ] , function ( e , val ) {
if ( val ) {
$div . find ( '#cp-creation-skip-true' ) . attr ( 'checked' , true ) ;
return ;
}
// If we don't skip the pad creation screen, we dont' need settings to hide the templates
// modal
$ ( '.cp-settings-creation-template' ) . addClass ( 'cp-settings-creation-skipped' ) ;
} ) ;
return $div ;
} ;
create [ 'creation-template' ] = function ( ) {
var skip = h ( 'div.cp-settings-creation-template.cp-sidebarlayout-element' , [
h ( 'label' , [
Messages . settings _templateSkip
] ) ,
setHTML ( h ( 'p.cp-sidebarlayout-description' ) , Messages . settings _templateSkipHint ) ,
h ( 'input#cp-creation-template-true.cp-creation-template-value' , {
type : 'radio' ,
name : 'cp-creation-template' ,
value : 1 ,
} ) ,
h ( 'label' , { 'for' : 'cp-creation-template-true' } , Messages . settings _creationSkipTrue ) ,
h ( 'input#cp-creation-template-false.cp-creation-template-value' , {
type : 'radio' ,
name : 'cp-creation-template' ,
value : 0 ,
checked : 'checked'
} ) ,
h ( 'label' , { 'for' : 'cp-creation-template-false' } , Messages . settings _creationSkipFalse ) ,
h ( 'span.fa.fa-check' , { title : Messages . saved } ) ,
h ( 'span.fa.fa-spinner.fa-pulse' ) ,
] ) ;
var $div = $ ( skip ) ;
var $ok = $div . find ( '.fa-check' ) ;
var $spinner = $div . find ( '.fa-spinner' ) ;
$div . find ( 'input' ) . change ( function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = parseInt ( $div . find ( '[name="cp-creation-template"]:checked' ) . val ( ) ) ;
common . setAttribute ( [ 'general' , 'creation' , 'noTemplate' ] , val , function ( e ) {
if ( e ) { return void console . error ( e ) ; }
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
common . getAttribute ( [ 'general' , 'creation' , 'noTemplate' ] , function ( e , val ) {
if ( val ) {
$div . find ( '#cp-creation-template-true' ) . attr ( 'checked' , true ) ;
}
} ) ;
return $div ;
} ;
// Drive settings
create [ 'drive-backup' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-drive-backup cp-sidebarlayout-element' } ) ;
var accountName = privateData . accountName ;
var displayName = metadataMgr . getUserData ( ) . name || '' ;
@ -350,8 +580,38 @@ define([
return $div ;
} ;
var createResetDrive = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-reset-drive cp-sidebarlayout-element' } ) ;
create [ 'drive-import-local' ] = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var $div = $ ( '<div>' , { 'class' : 'cp-settings-drive-import-local cp-sidebarlayout-element' } ) ;
$ ( '<label>' , { 'for' : 'cp-settings-import-local-pads' } )
. text ( Messages . settings _import ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. text ( Messages . settings _importTitle ) . appendTo ( $div ) ;
var $button = $ ( '<button>' , {
'id' : 'cp-settings-import-local-pads' ,
'class' : 'btn btn-primary'
} ) . text ( Messages . settings _import ) . appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) . hide ( ) . appendTo ( $div ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) . hide ( ) . appendTo ( $div ) ;
$button . click ( function ( ) {
UI . confirm ( Messages . settings _importConfirm , function ( yes ) {
if ( ! yes ) { return ; }
$spinner . show ( ) ;
$ok . hide ( ) ;
sframeChan . query ( 'Q_SETTINGS_IMPORT_LOCAL' , null , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
UI . alert ( Messages . settings _importDone ) ;
} ) ;
} , undefined , true ) ;
} ) ;
return $div ;
} ;
create [ 'drive-reset' ] = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-drive-reset cp-sidebarlayout-element' } ) ;
$ ( '<label>' ) . text ( Messages . settings _resetNewTitle ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. text ( Messages . settings _reset ) . appendTo ( $div ) ;
@ -374,124 +634,122 @@ define([
return $div ;
} ;
var createUserFeedbackToggle = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-userfeedback cp-sidebarlayout-element' } ) ;
// Rich text pads settings
$ ( '<span>' , { 'class' : 'label' } ) . text ( Messages . settings _userFeedbackTitle ) . appendTo ( $div ) ;
var $label = $ ( '<label>' , { 'for' : 'cp-settings-userfeedback' , 'class' : 'noTitle' } )
. text ( Messages . settings _userFeedback ) ;
create [ 'pad-width' ] = function ( ) {
var $div = $ ( '<div>' , {
'class' : 'cp-settings-pad-width cp-sidebarlayout-element'
} ) ;
$ ( '<span>' , { 'class' : 'label' } ) . text ( Messages . settings _padWidth ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. append ( Messages . settings _userFeedbackHint1 )
. append ( Messages . settings _userFeedbackHint2 ) . appendTo ( $div ) ;
. text ( Messages . settings _padWidthHint ) . appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) ;
var $checkbox = $ ( '<input>' , {
'type' : 'checkbox' ,
id : 'cp-settings-userfeedback'
var $label = $ ( '<label>' , { 'for' : 'cp-settings-padwidth' , 'class' : 'noTitle' } )
. text ( Messages . settings _padWidthLabel ) ;
var $input = $ ( '<input>' , {
type : 'checkbox' ,
id : 'cp-settings-padwidth'
} ) . on ( 'change' , function ( ) {
$spinner . show ( ) ;
$ok . hide ( ) ;
var val = $ checkbox . is ( ':checked' ) || false ;
common . setAttribute ( [ ' general', 'allowUserFeedback '] , val , function ( ) {
var val = $ input . is ( ':checked' ) ;
common . setAttribute ( [ ' pad', 'width '] , val , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
} ) ;
} ) ;
$checkbox . appendTo ( $div ) ;
} ) . appendTo ( $div ) ;
$label . appendTo ( $div ) ;
$ok . hide ( ) . appendTo ( $div ) ;
$spinner . hide ( ) . appendTo ( $div ) ;
if ( privateData . feedbackAllowed ) {
$checkbox [ 0 ] . checked = true ;
common . getAttribute ( [ 'pad' , 'width' ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
if ( val ) {
$input . attr ( 'checked' , 'checked' ) ;
}
} ) ;
return $div ;
} ;
var createUsageButton = function ( ) {
common . createUsageBar ( function ( err , $bar ) {
if ( err ) { return void console . error ( err ) ; }
APP . $usage . html ( '' ) . append ( $bar ) ;
} , true ) ;
} ;
// Code settings
var createLogoutEverywhere = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-logout-everywhere cp-sidebarlayout-element' } ) ;
$ ( '<label>' , { 'for' : 'cp-settings-logout-everywhere' } )
. text ( Messages . settings _logoutEverywhereTitle ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. text ( Messages . settings _logoutEverywhere ) . appendTo ( $div ) ;
var $button = $ ( '<button>' , {
id : 'cp-settings-logout-everywhere' ,
'class' : 'btn btn-primary'
} ) . text ( Messages . settings _logoutEverywhereButton )
. appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) . hide ( ) . appendTo ( $div ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) . hide ( ) . appendTo ( $div ) ;
create [ 'code-indent-unit' ] = function ( ) {
var $div = $ ( '<div>' , {
'class' : 'cp-settings-code-indent-unit cp-sidebarlayout-element'
} ) ;
$ ( '<label>' ) . text ( Messages . settings _codeIndentation ) . appendTo ( $div ) ;
$button . click ( function ( ) {
var $inputBlock = $ ( '<div>' , {
'class' : 'cp-sidebarlayout-input-block' ,
} ) . appendTo ( $div ) ;
UI . confirm ( Messages . settings _logoutEverywhereConfirm , function ( yes ) {
if ( ! yes ) { return ; }
$spinner . show ( ) ;
$ok . hide ( ) ;
var $input = $ ( '<input>' , {
'min' : 1 ,
'max' : 8 ,
type : 'number' ,
} ) . on ( 'change' , function ( ) {
var val = parseInt ( $input . val ( ) ) ;
if ( typeof ( val ) !== 'number' ) { return ; }
common . setAttribute ( [ 'codemirror' , 'indentUnit' ] , val ) ;
} ) . appendTo ( $inputBlock ) ;
sframeChan . query ( 'Q_SETTINGS_LOGOUT' , null , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
window . setTimeout ( function ( ) {
$ok . fadeOut ( 1500 ) ;
} , 2500 ) ;
} ) ;
} ) ;
common . getAttribute ( [ 'codemirror' , 'indentUnit' ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
if ( typeof ( val ) !== 'number' ) {
$input . val ( 2 ) ;
} else {
$input . val ( val ) ;
}
} ) ;
return $div ;
} ;
var createImportLocalPads = function ( ) {
if ( ! common . isLoggedIn ( ) ) { return ; }
var $div = $ ( '<div>' , { 'class' : 'cp-settings-import-local-pads cp-sidebarlayout-element' } ) ;
$ ( '<label>' , { 'for' : 'cp-settings-import-local-pads' } )
. text ( Messages . settings _import ) . appendTo ( $div ) ;
$ ( '<span>' , { 'class' : 'cp-sidebarlayout-description' } )
. text ( Messages . settings _importTitle ) . appendTo ( $div ) ;
var $button = $ ( '<button>' , {
'id' : 'cp-settings-import-local-pads' ,
'class' : 'btn btn-primary'
} ) . text ( Messages . settings _import ) . appendTo ( $div ) ;
var $ok = $ ( '<span>' , { 'class' : 'fa fa-check' , title : Messages . saved } ) . hide ( ) . appendTo ( $div ) ;
var $spinner = $ ( '<span>' , { 'class' : 'fa fa-spinner fa-pulse' } ) . hide ( ) . appendTo ( $div ) ;
create [ 'code-indent-type' ] = function ( ) {
var key = 'indentWithTabs' ;
$button . click ( function ( ) {
UI . confirm ( Messages . settings _importConfirm , function ( yes ) {
if ( ! yes ) { return ; }
$spinner . show ( ) ;
$ok . hide ( ) ;
sframeChan . query ( 'Q_SETTINGS_IMPORT_LOCAL' , null , function ( ) {
$spinner . hide ( ) ;
$ok . show ( ) ;
UI . alert ( Messages . settings _importDone ) ;
} ) ;
} , undefined , true ) ;
var $div = $ ( '<div>' , {
'class' : 'cp-settings-code-indent-type cp-sidebarlayout-element'
} ) ;
$ ( '<label>' ) . text ( Messages . settings _codeUseTabs ) . appendTo ( $div ) ;
return $div ;
} ;
var $inputBlock = $ ( '<div>' , {
'class' : 'cp-sidebarlayout-input-block' ,
} ) . css ( 'flex-flow' , 'column' )
. appendTo ( $div ) ;
var createLanguageSelector = function ( ) {
var $div = $ ( '<div>' , { 'class' : 'cp-settings-language-selector cp-sidebarlayout-element' } ) ;
$ ( '<label>' ) . text ( Messages . language ) . appendTo ( $div ) ;
var $b = common . createLanguageSelector ( $div ) ;
$b . find ( 'button' ) . addClass ( 'btn btn-secondary' ) ;
var $input = $ ( '<input>' , {
type : 'checkbox' ,
} ) . on ( 'change' , function ( ) {
var val = $input . is ( ':checked' ) ;
if ( typeof ( val ) !== 'boolean' ) { return ; }
common . setAttribute ( [ 'codemirror' , key ] , val ) ;
} ) . appendTo ( $inputBlock ) ;
/ * p r o x y . o n ( ' c h a n g e ' , [ ' s e t t i n g s ' , ' c o d e m i r r o r ' , k e y ] , f u n c t i o n ( o , n ) {
$input [ 0 ] . checked = ! ! n ;
} ) ; * /
common . getAttribute ( [ 'codemirror' , key ] , function ( e , val ) {
if ( e ) { return void console . error ( e ) ; }
$input [ 0 ] . checked = ! ! val ;
} ) ;
return $div ;
} ;
// Settings app
var createUsageButton = function ( ) {
common . createUsageBar ( function ( err , $bar ) {
if ( err ) { return void console . error ( err ) ; }
APP . $usage . html ( '' ) . append ( $bar ) ;
} , true ) ;
} ;
var hideCategories = function ( ) {
APP . $rightside . find ( '> div' ) . hide ( ) ;
@ -514,6 +772,7 @@ define([
if ( key === 'drive' ) { $category . append ( $ ( '<span>' , { 'class' : 'fa fa-hdd-o' } ) ) ; }
if ( key === 'code' ) { $category . append ( $ ( '<span>' , { 'class' : 'fa fa-file-code-o' } ) ) ; }
if ( key === 'pad' ) { $category . append ( $ ( '<span>' , { 'class' : 'fa fa-file-word-o' } ) ) ; }
if ( key === 'creation' ) { $category . append ( $ ( '<span>' , { 'class' : 'fa fa-plus-circle' } ) ) ; }
if ( key === active ) {
$category . addClass ( 'cp-leftside-active' ) ;
@ -561,22 +820,10 @@ define([
// Content
var $rightside = APP . $rightside ;
$rightside . append ( createInfoBlock ( ) ) ;
$rightside . append ( createDisplayNameInput ( ) ) ;
$rightside . append ( createLanguageSelector ( ) ) ;
$rightside . append ( createIndentUnitSelector ( ) ) ;
$rightside . append ( createIndentTypeSelector ( ) ) ;
if ( common . isLoggedIn ( ) ) {
$rightside . append ( createLogoutEverywhere ( ) ) ;
for ( var f in create ) {
if ( typeof create [ f ] !== "function" ) { continue ; }
$rightside . append ( create [ f ] ( ) ) ;
}
$rightside . append ( createResetTips ( ) ) ;
$rightside . append ( createThumbnails ( ) ) ;
$rightside . append ( createBackupDrive ( ) ) ;
$rightside . append ( createImportLocalPads ( ) ) ;
$rightside . append ( createResetDrive ( ) ) ;
$rightside . append ( createUserFeedbackToggle ( ) ) ;
$rightside . append ( createPadWidthSelector ( ) ) ;
// TODO RPC
//obj.proxy.on('change', [], refresh);
Caleb James DeLisle
7 years ago