Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boxiang Sun
gitlab-ce
Commits
01adf920
Commit
01adf920
authored
Apr 09, 2017
by
Alfredo Sumaran
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'refactor-behaviors' into 'master'
Refactor javascript behaviors directory See merge request !10439
parents
5e1a802b
77dcb1f8
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
185 additions
and
205 deletions
+185
-205
app/assets/javascripts/behaviors/autosize.js
app/assets/javascripts/behaviors/autosize.js
+20
-25
app/assets/javascripts/behaviors/details_behavior.js
app/assets/javascripts/behaviors/details_behavior.js
+21
-24
app/assets/javascripts/behaviors/index.js
app/assets/javascripts/behaviors/index.js
+9
-0
app/assets/javascripts/behaviors/quick_submit.js
app/assets/javascripts/behaviors/quick_submit.js
+52
-57
app/assets/javascripts/behaviors/requires_input.js
app/assets/javascripts/behaviors/requires_input.js
+41
-49
app/assets/javascripts/behaviors/toggler_behavior.js
app/assets/javascripts/behaviors/toggler_behavior.js
+41
-42
app/assets/javascripts/main.js
app/assets/javascripts/main.js
+1
-8
No files found.
app/assets/javascripts/behaviors/autosize.js
View file @
01adf920
/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
/* global autosize */
import
autosize
from
'
vendor/autosize
'
;
var
autosize
=
require
(
'
vendor/autosize
'
);
$
(()
=>
{
const
$fields
=
$
(
'
.js-autosize
'
);
(
function
()
{
$
(
function
()
{
var
$fields
;
$fields
=
$
(
'
.js-autosize
'
);
$fields
.
on
(
'
autosize:resized
'
,
function
()
{
var
$field
;
$field
=
$
(
this
);
return
$field
.
data
(
'
height
'
,
$field
.
outerHeight
());
});
$fields
.
on
(
'
resize.autosize
'
,
function
()
{
var
$field
;
$field
=
$
(
this
);
if
(
$field
.
data
(
'
height
'
)
!==
$field
.
outerHeight
())
{
$field
.
data
(
'
height
'
,
$field
.
outerHeight
());
autosize
.
destroy
(
$field
);
return
$field
.
css
(
'
max-height
'
,
window
.
outerHeight
);
}
});
autosize
(
$fields
);
autosize
.
update
(
$fields
);
return
$fields
.
css
(
'
resize
'
,
'
vertical
'
);
$fields
.
on
(
'
autosize:resized
'
,
function
resized
()
{
const
$field
=
$
(
this
);
$field
.
data
(
'
height
'
,
$field
.
outerHeight
());
});
}).
call
(
window
);
$fields
.
on
(
'
resize.autosize
'
,
function
resize
()
{
const
$field
=
$
(
this
);
if
(
$field
.
data
(
'
height
'
)
!==
$field
.
outerHeight
())
{
$field
.
data
(
'
height
'
,
$field
.
outerHeight
());
autosize
.
destroy
(
$field
);
$field
.
css
(
'
max-height
'
,
window
.
outerHeight
);
}
});
autosize
(
$fields
);
autosize
.
update
(
$fields
);
$fields
.
css
(
'
resize
'
,
'
vertical
'
);
});
app/assets/javascripts/behaviors/details_behavior.js
View file @
01adf920
/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, max-len */
(
function
()
{
$
(
function
()
{
$
(
"
body
"
).
on
(
"
click
"
,
"
.js-details-target
"
,
function
()
{
var
container
;
container
=
$
(
this
).
closest
(
"
.js-details-container
"
);
return
container
.
toggleClass
(
"
open
"
);
});
// Show details content. Hides link after click.
//
// %div
// %a.js-details-expand
// %div.js-details-content
//
return
$
(
"
body
"
).
on
(
"
click
"
,
"
.js-details-expand
"
,
function
(
e
)
{
$
(
this
).
next
(
'
.js-details-content
'
).
removeClass
(
"
hide
"
);
$
(
this
).
hide
();
var
truncatedItem
=
$
(
this
).
siblings
(
'
.js-details-short
'
);
if
(
truncatedItem
.
length
)
{
truncatedItem
.
addClass
(
"
hide
"
);
}
return
e
.
preventDefault
();
});
$
(()
=>
{
$
(
'
body
'
).
on
(
'
click
'
,
'
.js-details-target
'
,
function
target
()
{
$
(
this
).
closest
(
'
.js-details-container
'
).
toggleClass
(
'
open
'
);
});
}).
call
(
window
);
// Show details content. Hides link after click.
//
// %div
// %a.js-details-expand
// %div.js-details-content
//
$
(
'
body
'
).
on
(
'
click
'
,
'
.js-details-expand
'
,
function
expand
(
e
)
{
e
.
preventDefault
();
$
(
this
).
next
(
'
.js-details-content
'
).
removeClass
(
'
hide
'
);
$
(
this
).
hide
();
const
truncatedItem
=
$
(
this
).
siblings
(
'
.js-details-short
'
);
if
(
truncatedItem
.
length
)
{
truncatedItem
.
addClass
(
'
hide
'
);
}
});
});
app/assets/javascripts/behaviors/index.js
0 → 100644
View file @
01adf920
import
'
./autosize
'
;
import
'
./bind_in_out
'
;
import
'
./details_behavior
'
;
import
{
installGlEmojiElement
}
from
'
./gl_emoji
'
;
import
'
./quick_submit
'
;
import
'
./requires_input
'
;
import
'
./toggler_behavior
'
;
installGlEmojiElement
();
app/assets/javascripts/behaviors/quick_submit.js
View file @
01adf920
/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, max-len */
import
'
../commons/bootstrap
'
;
// Quick Submit behavior
//
// When a child field of a form with a `js-quick-submit` class receives a
// "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
// is submitted.
//
import
'
../commons/bootstrap
'
;
//
// ### Example Markup
//
...
...
@@ -17,61 +14,59 @@ import '../commons/bootstrap';
// <input type="submit" value="Submit" />
// </form>
//
(
function
()
{
var
isMac
,
keyCodeIs
;
isMac
=
function
()
{
return
navigator
.
userAgent
.
match
(
/Macintosh/
);
};
function
isMac
()
{
return
navigator
.
userAgent
.
match
(
/Macintosh/
);
}
keyCodeIs
=
function
(
e
,
keyCode
)
{
if
((
e
.
originalEvent
&&
e
.
originalEvent
.
repeat
)
||
e
.
repeat
)
{
return
false
;
}
return
e
.
keyCode
===
keyCode
;
};
function
keyCodeIs
(
e
,
keyCode
)
{
if
((
e
.
originalEvent
&&
e
.
originalEvent
.
repeat
)
||
e
.
repeat
)
{
return
false
;
}
return
e
.
keyCode
===
keyCode
;
}
$
(
document
).
on
(
'
keydown.quick_submit
'
,
'
.js-quick-submit
'
,
function
(
e
)
{
var
$form
,
$submit_button
;
// Enter
if
(
!
keyCodeIs
(
e
,
13
))
{
return
;
}
if
(
!
((
e
.
metaKey
&&
!
e
.
altKey
&&
!
e
.
ctrlKey
&&
!
e
.
shiftKey
)
||
(
e
.
ctrlKey
&&
!
e
.
altKey
&&
!
e
.
metaKey
&&
!
e
.
shiftKey
)))
{
return
;
}
e
.
preventDefault
();
$form
=
$
(
e
.
target
).
closest
(
'
form
'
);
$submit_button
=
$form
.
find
(
'
input[type=submit], button[type=submit]
'
);
if
(
$submit_button
.
attr
(
'
disabled
'
))
{
return
;
}
$submit_button
.
disable
();
return
$form
.
submit
();
});
$
(
document
).
on
(
'
keydown.quick_submit
'
,
'
.js-quick-submit
'
,
(
e
)
=>
{
// Enter
if
(
!
keyCodeIs
(
e
,
13
))
{
return
;
}
const
onlyMeta
=
e
.
metaKey
&&
!
e
.
altKey
&&
!
e
.
ctrlKey
&&
!
e
.
shiftKey
;
const
onlyCtrl
=
e
.
ctrlKey
&&
!
e
.
altKey
&&
!
e
.
metaKey
&&
!
e
.
shiftKey
;
if
(
!
onlyMeta
&&
!
onlyCtrl
)
{
return
;
}
e
.
preventDefault
();
const
$form
=
$
(
e
.
target
).
closest
(
'
form
'
);
const
$submitButton
=
$form
.
find
(
'
input[type=submit], button[type=submit]
'
);
if
(
!
$submitButton
.
attr
(
'
disabled
'
))
{
$submitButton
.
disable
();
$form
.
submit
();
}
});
// If the user tabs to a submit button on a `js-quick-submit` form, display a
// tooltip to let them know they could've used the hotkey
$
(
document
).
on
(
'
keyup.quick_submit
'
,
'
.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]
'
,
function
displayTooltip
(
e
)
{
// Tab
if
(
!
keyCodeIs
(
e
,
9
))
{
return
;
}
const
$this
=
$
(
this
);
const
title
=
isMac
()
?
'
You can also press ⌘-Enter
'
:
'
You can also press Ctrl-Enter
'
;
// If the user tabs to a submit button on a `js-quick-submit` form, display a
// tooltip to let them know they could've used the hotkey
$
(
document
).
on
(
'
keyup.quick_submit
'
,
'
.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]
'
,
function
(
e
)
{
var
$this
,
title
;
// Tab
if
(
!
keyCodeIs
(
e
,
9
))
{
return
;
}
if
(
isMac
())
{
title
=
"
You can also press ⌘-Enter
"
;
}
else
{
title
=
"
You can also press Ctrl-Enter
"
;
}
$this
=
$
(
this
);
return
$this
.
tooltip
({
container
:
'
body
'
,
html
:
'
true
'
,
placement
:
'
auto top
'
,
title
:
title
,
trigger
:
'
manual
'
}).
tooltip
(
'
show
'
).
one
(
'
blur
'
,
function
()
{
return
$this
.
tooltip
(
'
hide
'
);
});
$this
.
tooltip
({
container
:
'
body
'
,
html
:
'
true
'
,
placement
:
'
auto top
'
,
title
,
trigger
:
'
manual
'
,
});
}).
call
(
window
);
$this
.
tooltip
(
'
show
'
).
one
(
'
blur
'
,
()
=>
$this
.
tooltip
(
'
hide
'
));
});
app/assets/javascripts/behaviors/requires_input.js
View file @
01adf920
/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */
import
'
../commons/bootstrap
'
;
// Requires Input behavior
//
// When called on a form with input fields with the `required` attribute, the
// form's submit button will be disabled until all required fields have values.
//
import
'
../commons/bootstrap
'
;
//
// ### Example Markup
//
...
...
@@ -14,49 +12,43 @@ import '../commons/bootstrap';
// <input type="submit" value="Submit">
// </form>
//
(
function
()
{
$
.
fn
.
requiresInput
=
function
()
{
var
$button
,
$form
,
fieldSelector
,
requireInput
,
required
;
$form
=
$
(
this
);
$button
=
$
(
'
button[type=submit], input[type=submit]
'
,
$form
);
required
=
'
[required=required]
'
;
fieldSelector
=
"
input
"
+
required
+
"
, select
"
+
required
+
"
, textarea
"
+
required
;
requireInput
=
function
()
{
var
values
;
values
=
_
.
map
(
$
(
fieldSelector
,
$form
),
function
(
field
)
{
// Collect the input values of *all* required fields
return
field
.
value
;
});
// Disable the button if any required fields are empty
if
(
values
.
length
&&
_
.
any
(
values
,
_
.
isEmpty
))
{
return
$button
.
disable
();
}
else
{
return
$button
.
enable
();
}
};
// Set initial button state
requireInput
();
return
$form
.
on
(
'
change input
'
,
fieldSelector
,
requireInput
);
};
$
(
function
()
{
var
$form
,
hideOrShowHelpBlock
;
$form
=
$
(
'
form.js-requires-input
'
);
$form
.
requiresInput
();
// Hide or Show the help block when creating a new project
// based on the option selected
hideOrShowHelpBlock
=
function
(
form
)
{
var
selected
;
selected
=
$
(
'
.js-select-namespace option:selected
'
);
if
(
selected
.
length
&&
selected
.
data
(
'
options-parent
'
)
===
'
groups
'
)
{
return
form
.
find
(
'
.help-block
'
).
hide
();
}
else
if
(
selected
.
length
)
{
return
form
.
find
(
'
.help-block
'
).
show
();
}
};
hideOrShowHelpBlock
(
$form
);
return
$
(
'
.select2.js-select-namespace
'
).
change
(
function
()
{
return
hideOrShowHelpBlock
(
$form
);
});
});
}).
call
(
window
);
$
.
fn
.
requiresInput
=
function
requiresInput
()
{
const
$form
=
$
(
this
);
const
$button
=
$
(
'
button[type=submit], input[type=submit]
'
,
$form
);
const
fieldSelector
=
'
input[required=required], select[required=required], textarea[required=required]
'
;
function
requireInput
()
{
// Collect the input values of *all* required fields
const
values
=
_
.
map
(
$
(
fieldSelector
,
$form
),
field
=>
field
.
value
);
// Disable the button if any required fields are empty
if
(
values
.
length
&&
_
.
any
(
values
,
_
.
isEmpty
))
{
$button
.
disable
();
}
else
{
$button
.
enable
();
}
}
// Set initial button state
requireInput
();
$form
.
on
(
'
change input
'
,
fieldSelector
,
requireInput
);
};
// Hide or Show the help block when creating a new project
// based on the option selected
function
hideOrShowHelpBlock
(
form
)
{
const
selected
=
$
(
'
.js-select-namespace option:selected
'
);
if
(
selected
.
length
&&
selected
.
data
(
'
options-parent
'
)
===
'
groups
'
)
{
form
.
find
(
'
.help-block
'
).
hide
();
}
else
if
(
selected
.
length
)
{
form
.
find
(
'
.help-block
'
).
show
();
}
}
$
(()
=>
{
const
$form
=
$
(
'
form.js-requires-input
'
);
$form
.
requiresInput
();
hideOrShowHelpBlock
(
$form
);
$
(
'
.select2.js-select-namespace
'
).
change
(()
=>
hideOrShowHelpBlock
(
$form
));
});
app/assets/javascripts/behaviors/toggler_behavior.js
View file @
01adf920
/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
(
function
(
w
)
{
$
(
function
()
{
var
toggleContainer
=
function
(
container
,
/* optional */
toggleState
)
{
var
$container
=
$
(
container
);
$container
.
find
(
'
.js-toggle-button .fa
'
)
.
toggleClass
(
'
fa-chevron-up
'
,
toggleState
)
.
toggleClass
(
'
fa-chevron-down
'
,
toggleState
!==
undefined
?
!
toggleState
:
undefined
);
$container
.
find
(
'
.js-toggle-content
'
)
.
toggle
(
toggleState
);
};
// Toggle button. Show/hide content inside parent container.
// Button does not change visibility. If button has icon - it changes chevron style.
//
// %div.js-toggle-container
// %button.js-toggle-button
// %div.js-toggle-content
//
$
(
'
body
'
).
on
(
'
click
'
,
'
.js-toggle-button
'
,
function
(
e
)
{
toggleContainer
(
$
(
this
).
closest
(
'
.js-toggle-container
'
));
const
targetTag
=
e
.
currentTarget
.
tagName
.
toLowerCase
();
if
(
targetTag
===
'
a
'
||
targetTag
===
'
button
'
)
{
e
.
preventDefault
();
}
});
// If we're accessing a permalink, ensure it is not inside a
// closed js-toggle-container!
var
hash
=
w
.
gl
.
utils
.
getLocationHash
();
var
anchor
=
hash
&&
document
.
getElementById
(
hash
);
var
container
=
anchor
&&
$
(
anchor
).
closest
(
'
.js-toggle-container
'
);
if
(
container
)
{
toggleContainer
(
container
,
true
);
anchor
.
scrollIntoView
();
// Toggle button. Show/hide content inside parent container.
// Button does not change visibility. If button has icon - it changes chevron style.
//
// %div.js-toggle-container
// %button.js-toggle-button
// %div.js-toggle-content
//
$
(()
=>
{
function
toggleContainer
(
container
,
toggleState
)
{
const
$container
=
$
(
container
);
$container
.
find
(
'
.js-toggle-button .fa
'
)
.
toggleClass
(
'
fa-chevron-up
'
,
toggleState
)
.
toggleClass
(
'
fa-chevron-down
'
,
toggleState
!==
undefined
?
!
toggleState
:
undefined
);
$container
.
find
(
'
.js-toggle-content
'
)
.
toggle
(
toggleState
);
}
$
(
'
body
'
).
on
(
'
click
'
,
'
.js-toggle-button
'
,
function
toggleButton
(
e
)
{
toggleContainer
(
$
(
this
).
closest
(
'
.js-toggle-container
'
));
const
targetTag
=
e
.
currentTarget
.
tagName
.
toLowerCase
();
if
(
targetTag
===
'
a
'
||
targetTag
===
'
button
'
)
{
e
.
preventDefault
();
}
});
})(
window
);
// If we're accessing a permalink, ensure it is not inside a
// closed js-toggle-container!
const
hash
=
window
.
gl
.
utils
.
getLocationHash
();
const
anchor
=
hash
&&
document
.
getElementById
(
hash
);
const
container
=
anchor
&&
$
(
anchor
).
closest
(
'
.js-toggle-container
'
);
if
(
container
)
{
toggleContainer
(
container
,
true
);
anchor
.
scrollIntoView
();
}
});
app/assets/javascripts/main.js
View file @
01adf920
...
...
@@ -37,14 +37,7 @@ import './shortcuts_issuable';
import
'
./shortcuts_network
'
;
// behaviors
import
'
./behaviors/autosize
'
;
import
'
./behaviors/details_behavior
'
;
import
'
./behaviors/quick_submit
'
;
import
'
./behaviors/requires_input
'
;
import
'
./behaviors/toggler_behavior
'
;
import
'
./behaviors/bind_in_out
'
;
import
{
installGlEmojiElement
}
from
'
./behaviors/gl_emoji
'
;
installGlEmojiElement
();
import
'
./behaviors/
'
;
// blob
import
'
./blob/create_branch_dropdown
'
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment